【概述】HTML5和CSS3入门

什么是HTML

概述

HTML是个缩写，全称Hyper Text Markup Language翻译为超超本文标记语言

标记语言

标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码

HTML发展

1980年，蒂姆·博纳斯-李创建了最初仅有少量标记（TAG）
1993年，马克·安德在浏览器中加入<img>标记，从此可以浏览图片

版本发展

超文本标记语言（第一版）——1993年6月作为互联网工程工作小组（IETF）工作草案发布（非标准）
HTML2.0——1995年11月作为RFC1866发布，在RFC2843于2000年6月发布之后宣布已经过时
HTML3.2——1997年1月4日，W3C推荐标准
HTML4.0——1997年12月18日，W3C推荐标准
HTML4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML5第一份正式草案，2008年1月22日，2014年10月29日正式发布

第一个HTML界面

HTML结构

<!DOCTYPE html>     # HTML的声明
<html>              #根标签/元素
    <head>          #HTML的头部
    </head>         #HTML的头部结束
    <body>          #HTML的主体
    </body>         #HTML的主体结束
</html>             #根标签结束

HTML基本结构

HTML的文档文件的后缀名为.html和.htm，两者没有区别
HTML文档也被称为网页
HTML文档包含HTML标签和纯文本

`<!DOCTYPE>`声明

声明的不是一个元素，是告知浏览器页面使用的是那种HTML版本
声明的位置在文档中的最前面，
可以确保浏览器可以提前预知文档类型

HTML注释

<!--这是一个注释-->

HTML元素

<!DOCTYPE html>
<html lang="en">

<head>
    <!--下面的那个是空元素，不包含任何文本内容没有结束标签-->
    <!--设置文档的编码方式为utf8-->
    <mete charset="utf-8">
    <!--设备屏幕的视口，宽度为设备屏幕的宽度，初始缩放比例为1.0-->
    <mete name="viewport"content="width=device-width,initial-scale=1.0">
    <!--设置网页的标题-->
    <!--下面是闭合元素，具有开始标签和结束标签，可以包含文本内容-->
    <title>这是一个标题</title>
</head>
    
<body>

</body>

</html>

HTML标记标签通常被称为HTML标签，它和HTML元素通常描述的都是同样的意思

HTML标签是由尖括号包围的关键词，如<html>
HTML标签通常成对出现
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始标签和结束标签也被称为开放标签和闭合标签

HTML标签的使用规范

不要忘记结束标签

虽然HTML的结束标签是可选的，但是忘记使用结束标签可能会产生不可预料的结果或错误

HTML空元素

没有内容的HTML元素被称为空元素，空元素是在开始标签中关闭的。

使用小写标签名

HTML头部元素

<head>元素包含了所有的头部标签元素，其中有：<title>,<style>,<meta>,<link>,<script>,<noscript>,<base>

<title>元素：定义不同的文档标题
<link>元素：定义了一个文档和外部资源的关系
<style>元素：定义了HTML文档的样式文件引用地址
<meta>元素：描述了一些基本的元数据。<meta>标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。<meta>元素通常用于指定的网页描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键字），或其他Web服务。

name="keywords"为搜索引擎定义关键字
name="description"为网页定义描述内容
name="author"定义网页作者

HTML属性

属性是HTML元素提供的附加信息。

HTML可以设置属性
属性可以再元素中添加附加信息
属性一般描述与开始标签
属性总是以名称/值成对的形式出现

<!--为colour设置属性red-->
<font colour="red"> hello world! </font>

属性的分类

通用属性/全局属性

几乎所有元素都可以使用的属性，例如id、name、style等

私有属性/局部属性

某个/类元素所具有的属性

事件属性

为某个元素绑定事件

自定义属性

开发者为某个元素设置的属性，一般在框架中使用

HTML属性规则

HTML属性常用引用属性值
- 属性值应该始终被包裹在引号内
- 双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，如果属性值本身就含有双引号，那么必须使用单引号
推荐使用小写属性
- 属性和属性值对大小写不敏感。
- 万维网联盟在其HTML4中对剑标准中推荐小写的属性/属性值。
- 新版本的HTML要求使用小写属性

什么是CSS

CSS全称为Cascading Style Sheets，译为层叠样式表

CSS是能够真正做到网页表现与内容分离的一种样式语言

发展历程

1994年哈坤·利提出了CSS的最初建议和伯特·波斯一个合作设计CSS
1997年初，W3C内组织接管CSS的工作组

版本历程

CSS1——作为一项W3C推荐，发布于1996年12月17日。1999年1月11日被推荐重新修订
CSS2——作为一项W3C推荐，发布于199年1月11日。添加了对媒介（打印机和听觉设备）和可下载字体的支持
CSS3——计划将CSS划分为更小的模块

如何使用CSS

内联样式

用过HTML元素的style属性来设置CSS样式，
语法结构：

style="CSS属性:CSS属性值"

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>启嘉班</title>
</head>
<body>
    <!--为p标签设置颜色为brown-->
    <p style="color: brown;">19级启嘉班很奈斯</p>
</body>
</html>

效果

缺点

只对当前元素有效，CSS代码出现冗余

内嵌样式表

通过HTML元素的style元素来设置CSS的样式，
语法结构：

<style type="text/css">     <!--HTML5可以加这个type="text/css"-->
    选择器{
        属性名:属性值;
    }

</style>

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>启嘉班</title>
    <style>
        p{
            color:green;
        }
    </style>
</head>
<body>
    <p>19级启嘉班很奈斯</p>
</body>
</html>

效果

在旧版本中需要设置type的属性值为"text/css"
优点：相对于内联样式

通过CSS选择器定位HTML页面中的一个或一类选择器

缺点

将CSS代码嵌入到HTML页面中，只能对当前HTML页面有效
编码的风格不符合编码原则中的低耦合
可能出现冗余

外联样式表

创建一个.css文件，用来存储CSS样式内容

语法结构

选择器 {
    属性名称:属性值;
    属性名称:属性值;
    ...
    }

代码示例

p {
    /* 为p设置红色 */
    color:red;
}

特点

CSS声明总是以键值对(key/calue)形式存在
以冒号(;)分离，分号(;)结束，一般一行一个属性
声明组/块以大括号({})括起来

通过HTML元素的<link>元素来引入外部CSS样式表

语法结构

<link rel="stylesheet" type="text/css" href="文件的路径（相对路径/绝对路径）"

`<link>元素

作用

用来引用HTML页面外部的资源

属性

rel属性：用来设置外部资源与当前HTML页面的关系
href属性：用来设置引入外部资源的路径

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>启嘉班</title>
    <link rel="stylesheet" href="外联样式.css">
</head>
<body>
    <p>19级启嘉班很奈斯</p>
</body>
</html>

代码效果

优点（相对于内嵌样式和内联样式）

将CSS样式与HTML页面与HTML分离（低耦合）
不会出现内嵌样式表或内联样式产出的代码冗余

缺点

可能对HTML页面的加载造成负担，导致性能下降

各种样式的优先级

内联样式的优先级是最高的
内嵌样式表和外联样式表与编写顺序有关，最后的优先别更高

CSS注释

CSS注释以/*开始*/结束

【概述】HTML5和CSS3入门

什么是HTML

概述

HTML发展

版本发展

第一个HTML界面

HTML结构

<!DOCTYPE>声明

HTML注释

HTML元素

HTML标签的使用规范

HTML头部元素

HTML属性

属性的分类

HTML属性规则

什么是CSS

发展历程

版本历程

如何使用CSS

内联样式

内嵌样式表

外联样式表

各种样式的优先级

CSS注释

推荐阅读更多精彩内容

`<!DOCTYPE>`声明