第2章 初识HTML5
1.HTML5的优势
- 兼容:核心理念就是要保持与过去技术的完美衔接。
- 合理:无论是增加的还是删除的标签都是对现有的网页和用户习惯进行分析、概括而推出的。
- 易用:1.简化的字符集说明;2.简化的DOCTYPE;3.以浏览器原生能力(浏览器自身特性功能)替代复杂的IavaScript。
2.HTML5的结构
- <!DOCTYPE>:在开头处使用,浏览器才能将该文档作为有效的HTML文档,并按指定的文档类型进行解析。
- < html>:根标签。
- < head>:头部标签。
- < body>:主体标签。
- < meta>:让定义符编码的格式变得更加简单。
3.标签概述
标签又称为HTML标记或HTML元素。
- 标签的分类:双标签、单标签
- 双标签(体标签):由开始和结束两个标签符号组成的标签,例如< html>< /html>、< body>< /body>。
- 单标签(空标签):指用一个标签符号即可完整地描述某个功能的标签。
注意:特殊的单标签—注释标签(基本写法 )
标签的关系
- 嵌套关系(包含关系):最外层标签称为"父级标签",里面的标签称为"子级标签"。只有双标签才能被称为"父级标签"。
并列关系(兄弟关系):单标签还是双标签都可以拥有并列关系。
标签属性
属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
注意:1.大多数属性都有默认值。如何某个标签没有设置属性值,则说明该标签的属性取了默认值。
2.属性与属性值是成对出现的。
HTML5文档头部相关标签
设置页面标题标签(网页名称)
<title></title> 此标签必须位于<head>标签之内定义页面元信息标签
不会出现在页面中,仅仅表示网页的相关信息。
1.<meta name="名称" content="值" /> <!--name属性用于搜索内容的名称,content属性提供对应的搜索内容值。-->
| name属性值 | 作用 |
|---|---|
| keywords | 设置网页关键字(多个关键字之间可以用","分隔) |
| description | 设置网页描述 |
| author | 设置网页作者 |
2.<meta http-equiv="名称" content="值" /> <!--设置服务器发送给浏览器的HTTP头部信息,http-equiv属性提供参数类型,content属性提供对应的参数值。-->
| 作用 | 例子 |
|---|---|
| 设置字符集 | < meta http-equiv=“Content-Type” content=“text/html; charset=gbk” /> |
| 设置页面自动刷新与跳转 | < meta http-equiv=“refresh” content=“10; url=https://www.baidu.com” /> |
目前最常用的国际化字符集编码格式是utf-8,常用的国内中文字符集编码格式是gbk和gb2312。
4.文本控制标签
(1)页面格式化标签
- 标题标签:h1-h6
基本语法格式:
<hn align="对齐方式">标题文本</hn> <!--align属性用于指定标题的对齐方式-->
| 对齐方式 | 说明 |
|---|---|
| left | 设置标题文字左对齐(默认值) |
| center | 设置标题文字居中对齐 |
| right | 设置标题文字右对齐 |
注意:1.一个页面只能使用一个
标签,常常被用在网站的logo部分。
2.HTML中一般不建议使用h标签的align对齐属性,可使用CSS样式设置。
- 段落标签:p
基本语法格式:
<p align="对齐方式">段落文本</p>
- 水平线标签:hr
基本语法格式:
<hr 属性="属性值"/>
| 属性名 | 含义 | 属性值 |
|---|---|---|
| align | 设置水平线对齐方式 | left、right、center,默认center(居中对齐显示) |
| size | 设置水平线的粗细 | 以px为单位,默认2px |
| color | 设置水平线的颜色 | 可用颜色名称、十六进制#RGB、rgb(r,g,b)表示 |
| width | 设置水平线的宽度 | 可以是确认的px值,也可以是浏览器窗口的百分比,默认100% |
注意：实际工作中,并不赞成使用hr标签的所有外观属性,最好使用CSS样式设置。
- 换行标签:
(2)文本样式标签
基本语法格式:
<font 属性="属性值">文本内容</font>
| 属性名 | 含义 |
|---|---|
| face | 设置文字的字体 |
| size | 设置字体的大小,可以取1-7之间的整数值 |
| color | 设置文字的颜色 |
(3)文本格式化标签
常用的文本格式化标签
| 标签 | 显示效果 |
|---|---|
| < b>< /b>和< strong>< /strong> | 文字以粗体方式出现 |
| < u>< /u>和< ins>< /ins> | 文字以加下划线方式出现 |
| < i>< /i>和< em>< /em> | 文字以斜体方式出现 |
| < s>< /s>和< del>< /del> | 文字以加删除线方式出现 |
(4)文本语义标签
time标签:用于定义时间或日期,可以代表24小时中的某一时间。主要是增强文本的语义,方便机器解析。
- datetime:取值为具体时间或具体日期,不定义该属性时,由文本内容给定日期或时间。
- pubdate:定义time标签中的文档(或article元素)发布时间,取值一般为"pubdate"。
mark标签:主要功能是在文本中高亮显示某些字符。
cite标签:创建一个引用,用于对文档引用参考文献的说明。
(5)特殊字符标签
常用的特殊字符标签
| 特殊字符 | 字符的代码 |
|---|---|
| 空格符 | ＆nbsp; |
| < | ＆lt; |
| > | ＆gt; |
| & | ＆amp; |
| ¥ | ＆yen; |
| ©(版权) | ＆copy; |
| ®(注册商标) | ＆reg; |
| ° | ＆deg; |
| ± | ＆plusmn; |
| × | ＆times; |
| ÷ | ＆divide; |
| ²(平方) | ＆sup2; |
| ³(立方) | ＆sup3; |
5.图像标签
(1)常见的图像格式
- GIF格式:1.支持动画,无损的图像格式,支持透明,只能处理256种颜色。
2.用于Logo、小图标及其他色彩相对单一的图像。
- PNG格式:1.体积更小,支持alpha透明,颜色过渡更平滑,但不支持动画,只支持256种颜色。
2.PNG-8和真色彩(PNG-24和PNG-32)。
- JPG格式:有损压缩的图像格式,可以保存超过256种颜色的图像。
(2)图像标签
语法格式为:
<img src="图像URL"/> <!--src属性用于指定指定图像文件的路径和文件名-->
| 属性 | 属性值 | 作用 |
|---|---|---|
| src | URL | 图像路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标指针悬停时显示的内容 |
| width | px | 设置图像的宽度 |
| height | px | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
| vspace | px | 设置图像顶部和底部的空白(垂直边距) |
| hspace | px | 设置图像左侧和右侧的空白(水平边距) |
| align | left、right | 图像对齐到左边、右边 |
| align | top | 将图像的顶端和文本的第一行文字对齐,其他文字居图像下方 |
| align | middle | 将图像的水平中线和文本的第一行文字对齐,其他文字居图像下方 |
| align | bottom | 将图像的底部和文本的第一行文字对齐,其他文字居图像下方 |
(3)绝对路径和相对路径
- 绝对路径:网页上的文件或目录在硬盘上的真正路径。
- 相对路径:相当于当前文件的路径。
以上内容作为日常学习记录,如有侵权请联系删除。