HTML网页开发10.15

合理使用注释
HTML注释语法：
vscode快捷键：ctrl+/

标题标签
标题（Heading），是通过

-

六个标签分别来对六个级别的标题进行定义的。

-

标签都是双标签，且是容器级标签。
权重
• 标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中

标签最重要，

标签次重要，以此类推。
•

在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo。
•

由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果 一个页面出现多个

，反而降低权重。约定俗成的，一个页面中只会出现一个

。

段落和换行
段落（paragraph）是通过

标签进行定义的。

标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的 标签等

换行标签

（breaking）标签是HTML中一个简单的换行符。
标签是一个单标签。

文本格式化
• HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。
• 但是在HTML4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，css负责格 式化样式，所以大部分文本格式化标签被废弃，但是在HTML4.01和XHTML1.0 transitional版本中依旧可以使用。

文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。

图像标签
• 图像（image）由标签进行定义。
• 标签是单标签，本身相当于一个特殊的文本。
• 标签的作用是在指定的位置插入一张图片。
• 在HTML文件，常用的插入图片的类型有：jpg、png、gif。
| 属性名 | 描述 |
| src | 表示图片的路径 |
| 相对路径 |
|同级查找指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式|
| 子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭 符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。|
|上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法 利用…/表示跳出一级，如果跳出多级书写多次…/，直到找到文件。 |
| 绝对路径 |
|盘符出发：例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到 目标文件。 |
|网址形式：要查找的文件是来自网络资源，路径写法以http://开头。 |
| width | 表示图片的宽度 |
| height | 表示图片的高度 |
| border | 边框属性；它的值可以设置边框的厚度 |
| title | 设置提示文本 |
| alt | 设置图像没有找到时候的替换文本 |

音频和视频
音频使用标签进行定义。
• 是双标签。
• 同图片一样，需要使用src属性设置音频查找的路径。
• 音频文件支持的格式包括：.mp3、.ogg、.wav。
音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是 controls。

视频的设置方法与音频非常类似。
• 视频使用标签进行定义。
• 是双标签。
• 使用src属性设置视频查找的路径。
• 视频文件支持的格式包括：.mp4、.ogg、.webm。
视频也需要使用controls属性设置控制条，属性值也是controls。

超级链接
在HTML中使用标签可以创建链接。
• a全称anchor，锚的意思。
• 为双标签。
• 作用：在指定的位置添加超级链接，提供用户进行点击和跳转。
• 标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签 属性。
| 属性名 | 描述 |
| href | 超文本引用，用于规定链接的目标地址 。 |
| target | 可以定义被链接的文档在何处跳转显示。 |
| _self | 默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。|
| _blank | 空白的，表示跳转的页面在新窗口打开。|
| title | 设置的是鼠标悬停时的提示文本 |

两种特殊的锚点跳转方法
页面内锚点跳转
这种跳转方式实现的是从某个位置跳转到同页面的另一个位置。
制作方法分为两个步骤，分别是设置锚点斜体样式、添加链接。

无序列表、有序列表、定义列表
无序列表 ul>li li标签时容器级标签内部可以放置任意东西
有序列表 ol>li
定义列表 dl>(dt dd) dt和dd是同级关系，并且也是容器级标签

常用布局标签div和span

和 标签常用作布局工具，我们俗称盒子

是双标签，是最经典的容器级标签，内部可以放置任意内容。 也是双标签，容器级标签。

表格制作

表格的标题，内部书写标题文字。

	| 属性 | 描述 | |border | 添加边框 | |style="border-collapse:"collapse"" | 表格的单元格之间有默认的空袭,会导致双线边框 该属性表示边框塌陷 |rowspan | 跨行合并 上下的合并 | |colspan | 跨列合并 左右的合并 |

表单