HTML学习笔记 03 - 常用标签
一、常用块标签
块标签(block-level tags)：在浏览器中单独占一行。
1、标签
div是单词division的前3个字母，意为分开、分隔，主要作用是将网页中的一块相关内容区域组织在一起。
- 实例：
<body>
<div style="width:300px; height:100px; background:#F0F0F0">
div是一个块标签，通常表示页面中的一个分区或节
</div>
</body>
说明：
标签是一个块标签，通常表示页面中的一个分区或节，在HTML页面布局时常常用到该标签。
- 由于
标签缺乏语义，HTML5中新增了一些具有语义的标签，如2、标题标签
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
说明：
- 标题标签从
3、段落标签
- 实例：
<body>
<p> 有一天，老马对小马说：“你已经长大了，能帮妈妈做点事吗？”小马连蹦带跳地说：“怎么不能？我很愿意帮您做事。”老马高兴地说：“那好啊，你把这半袋麦子驮到磨坊去吧。”</p>
<p> 小马驮起口袋，飞快地往磨坊跑去。跑着跑着，一条小河挡住了去路，河水哗哗地流着。小马为难了，心想：我能不能过去呢？如果妈妈在身边，问问她该怎么办，那多好啊！可是离家很远了。他向四周望望，看见一头老牛在河边吃草，小马嗒嗒嗒嗒跑过去，问道：“牛伯伯，请您告诉我，这条河，我能过去吗？”老牛说：“水很浅，刚没小腿，能过去。”</p>
<p> 小马听了老牛的话，立刻跑到河边，准备过去。突然从树上跳下一只松鼠，拦住他大叫：“小马！别过河，别过河，河水会淹死你的！”小马吃惊地问：“水很深吗？”松鼠认真地说：“当然啦！昨天，我的一个伙伴就掉在这条河里淹死的！”小马连忙收住脚步，不知道怎么办好。他叹了口气说：“唉！还是回家问问妈妈吧！”</p>
</body>
4、水平线标签
/表示标签结束。
- 实例：
<body>
<h1>欢迎你</h1>
<hr />
<p>快乐工作，快乐学习。</p>
<p>今天的努力是未来成功的基石</p>
</body>
5、有序列表标签
type属性可以更改有序列表条目符号风格。
- 实例：
<body>
<h3>注册步骤：</h3>
<ol type="1">
<li>填写信息</li>
<li>收电子邮件</li>
<li>注册成功</li>
</ol>
</body>
说明：
type属性用来表示条目符号风格，常见的有：
type属性及值风格
type="1"以数字风格表示列表顺序
type="a"以小写字母风格表示列表顺序
type="i"以罗马数字风格表示列表顺序
6、无序列表标签
type属性可以更改无序列表条目符号风格。
- 实例：
<body>
<h3>新人上路指南</h3>
<ul type="disc">
<li>如何成为优秀的员工</li>
<li>如何做好每天的工作</li>
<li>如何成就职业生涯</li>
</ul>
</body>
说明：
type属性用来表示条目符号风格，常见的有：
type属性及值风格
type="disc"以实心圆表示列表顺序
type="square"以矩形表示列表顺序
type="circle"以空心圆表示列表顺序
7、描述列表标签
描述列表使用
- 实例：
<body>
<dl>
<dt>咖啡</dt>
<dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd>
<dd>可以提神，刺激神经。</dd>
</dl>
</body>
说明：
二、常用行标签（内联标签）
行标签（inline-level tags）：在浏览器中不单独占一行。
1、
是将一块相关内容区域组织在一起的话，那么
- 实例：
<body>
<p>价格：<span style="color:red;font-size:70px;">10</span>元</p>
</body>
2、换行标签
/表示标签结束。
- 实例：
<body>
<p>
难忘今宵<br />无论天涯与海角<br />神州万里同怀抱<br />共祝愿祖国好 祖国好
</p>
</body>
3、图片标签![]()
![]()
![]()
/表示标签结束。
- 实例：
<body>
<img src="images/dog.png" width="400" height="400" alt="狗狗" title="可爱的狗狗" />
</body>
说明：
src属性是图片的来源，src属性的值是图片文件的路径，可以使用相对路径或绝对路径。本例中是src="images/dog.png"。alt属性用于在图片不能正常显示时的提示文字。title属性用于在鼠标悬停在图片上时提示文字。width属性表示图片的宽，单位是像素。height属性表示图片的高，单位是像素。
4、视频标签
- 实例：
<body>
<video src="source/likeYou.mp4" controls="controls" width="500" height="250"></video>
</body>
说明：
src属性是必要的属性，表示视频文件的路径，可以是==相对路径或者绝对路径。controls属性表示显示一组视频播放控件，用以控制视频的播放。是controls="controls"的简写。- HTML5规范中并没有对视频播放控件的样式进行规范定义，因此，不同的浏览器可能会有不同外观的播放控件，但功能大都大同小异。
width属性表示视频的宽，单位是像素。height属性表示视频的高，单位是像素。poster属性，用来定义封面图片。一般情况下，浏览器会显示视频的第一帧，但有时，第一帧没有画面或者第一帧的画面并不适合宣传展示，因此，需要人为的设置一个封面。poster属性的值是图片文件的路径，可以使用相对路径或绝对路径。- 其他属性说明：
属性
说明
autoplay页面加载后自动播放视频，如果有该属性，视频自动播放，如果没有该属性，视频就不会自动播放
preloadnone：视频播放前，浏览器不会预先下载视频资源，当用户不点击播放按钮时，会节省带宽
metadata：视频播放前，浏览器不会下载视频资源，但是会获得资源的元数据（视频大小，持续时间，视频格式，前几帧画面）
auto（默认）：浏览器根据实际情况动态决定。例如，在wifi、3G、4G数据漫游情况下，动态采用不同的加载方案注意：如果设置了autoplay属性，那么preload属性的值将会被忽略
muted静音播放
loop循环播放
- 一个视频文件包含两部分内容，即视频部分和音频部分，每一个部分都使用一种特定的编码类型来编码。(mp4是最好的选择）
5、音频标签
- 实例：
<body>
<audio src="source/YouAreMySunshine.mp3" controls></audio>
</body>
说明：
src属性表示音频文件的路径。controls属性表示显示一组音频播放控件，是controls="controls"的简写。- 其他属性说明：
属性
说明
autoplay页面加载时是否自动播放音频
preloadnone：不预先加载音频
metadata：预先加载元数据
auto：让浏览器根据实际情况动态决定
muted静音播放
loop循环播放
- HTML5支持MP3、AAC、AAC+、WAV PCM等众多音频格式，鉴于目前各浏览器及操作系统的支持情况，MP3格式是一种最好的选择。
6、
- 实例：
<body>
<p><i>小狗</i>是一种可爱的动物！</p>
<p><i>Thank god</i>，项目终于可以按时交付了。</p>
<p><i>我希望这次可以成功</i>，他想。</p>
</body>
说明：
8、
- 实例：
<body>
<p>
关键词：
<b>HTML5</b>、<b>CSS3</b>、<b>W3C</b>
</p>
</body>
说明：
9、
em是emphasis的意思，
- 实例：
<body>
<p><em>小狗</em>是一种可爱的动物！</p>
<p>小狗是一种<em>可爱</em>的动物！</p>
</body>
说明：
10、
- 实例：
<body>
<p><strong>警告：水深危险！</strong></p>
</body>
说明：
三、W3C标准
W3C标准英文全程是World Wide Web Consortium，中文是万维网联盟。
万维网联盟标准不是某一个标准，而是一系列标准的集合。网页主要有三部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。
对应的标准也有三方面：
- 结构化标准主要包括
XHTML和XML，
- 表现标准语言主要包括
CSS、
- 行为标准主要包括（如
W3C DOM）、ECMAScript等。
这些标准大部分是W3C起草发布，也有一是其他标准组织制定的标准。
1、W3C提倡的web规范基本原则
- 标签的开始和结束符合规范。
- 内容（结构）和表现（样式）分离。
- HTML内容结构要求语义化。
还有很多细节性的规范，比如行标签中不可出现块标签、尽可能减少div多层级嵌套等。这里需要特别说明的一点，刚才介绍到的
2、W3C规范
1、 需要声明（DOCTYPE）
DOCTYPE（document type）文档类型的简写，用来说明你用的XHTML或者HTML是什么版本。其中DTD叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和css都不会生效。 有过度的（Transitional）、严格的（strict）、框架的（frameset）。
2、需要定义语言编码
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
注：如果忘记了定义语言编码，可能会出现页面乱码现象。
3、JavaScript定义
Js必须要用
你可能感兴趣的:(HTML学习笔记)
div是单词division的前3个字母，意为分开、分隔，主要作用是将网页中的一块相关内容区域组织在一起。
- 实例：
<body>
<div style="width:300px; height:100px; background:#F0F0F0">
div是一个块标签，通常表示页面中的一个分区或节
</div>
</body>
说明：
- 标签是一个块标签，通常表示页面中的一个分区或节，在HTML页面布局时常常用到该标签。
- 由于
标签缺乏语义，HTML5中新增了一些具有语义的标签，如、、、、、、2、标题标签
至至标签用来定义标题。定义最大的标题，定义最小的标题。标题标签属于块标签。通常用来表现网页内容的结构，本身具有语义。<body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body>说明：
- 标题标签从
到，共6个，标题标签中显示出来的文字为粗体，且依次从大到小。
3、段落标签
标签可定义一个段落，用来表现描述性内容。段落与段落之间有一个空行。- 实例：
<body> <p> 有一天，老马对小马说：“你已经长大了，能帮妈妈做点事吗？”小马连蹦带跳地说：“怎么不能？我很愿意帮您做事。”老马高兴地说：“那好啊，你把这半袋麦子驮到磨坊去吧。”</p> <p> 小马驮起口袋，飞快地往磨坊跑去。跑着跑着，一条小河挡住了去路，河水哗哗地流着。小马为难了，心想：我能不能过去呢？如果妈妈在身边，问问她该怎么办，那多好啊！可是离家很远了。他向四周望望，看见一头老牛在河边吃草，小马嗒嗒嗒嗒跑过去，问道：“牛伯伯，请您告诉我，这条河，我能过去吗？”老牛说：“水很浅，刚没小腿，能过去。”</p> <p> 小马听了老牛的话，立刻跑到河边，准备过去。突然从树上跳下一只松鼠，拦住他大叫：“小马！别过河，别过河，河水会淹死你的！”小马吃惊地问：“水很深吗？”松鼠认真地说：“当然啦！昨天，我的一个伙伴就掉在这条河里淹死的！”小马连忙收住脚步，不知道怎么办好。他叹了口气说：“唉！还是回家问问妈妈吧！”</p> </body>4、水平线标签
/表示标签结束。- 实例：
<body> <h1>欢迎你</h1> <hr /> <p>快乐工作，快乐学习。</p> <p>今天的努力是未来成功的基石</p> </body>5、有序列表标签
标签用来表示每一个列表条目。type属性可以更改有序列表条目符号风格。- 实例：
<body> <h3>注册步骤：</h3> <ol type="1"> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </ol> </body>说明：
type属性用来表示条目符号风格，常见的有：
type属性及值风格 type="1"以数字风格表示列表顺序 type="a"以小写字母风格表示列表顺序 type="i"以罗马数字风格表示列表顺序 6、无序列表标签
用来表示每一个列表条目。type属性可以更改无序列表条目符号风格。- 实例：
<body> <h3>新人上路指南</h3> <ul type="disc"> <li>如何成为优秀的员工</li> <li>如何做好每天的工作</li> <li>如何成就职业生涯</li> </ul> </body>说明：
type属性用来表示条目符号风格，常见的有：
type属性及值风格 type="disc"以实心圆表示列表顺序 type="square"以矩形表示列表顺序 type="circle"以空心圆表示列表顺序 7、描述列表标签
描述列表使用
和描述标签。- 实例：
<body> <dl> <dt>咖啡</dt> <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd> <dd>可以提神，刺激神经。</dd> </dl> </body>说明：
是定义列表的标题；是定义列表的描述，描述部分会向右侧缩进。
二、常用行标签（内联标签）
行标签（
inline-level tags）：在浏览器中不单独占一行。1、
标签标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。如果说是将一块相关内容区域组织在一起的话，那么标签是将一行内的一部分相关内容组织在一起。标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对应用样式，那么标签中的文本与其他文本不会任何视觉上的差异。- 实例：
<body> <p>价格：<span style="color:red;font-size:70px;">10</span>元</p> </body>2、换行标签
/表示标签结束。- 实例：
<body> <p> 难忘今宵<br />无论天涯与海角<br />神州万里同怀抱<br />共祝愿祖国好 祖国好 </p> </body>3、图片标签
/表示标签结束。- 实例：
<body> <img src="images/dog.png" width="400" height="400" alt="狗狗" title="可爱的狗狗" /> </body>说明：
src属性是图片的来源，src属性的值是图片文件的路径，可以使用相对路径或绝对路径。本例中是src="images/dog.png"。alt属性用于在图片不能正常显示时的提示文字。title属性用于在鼠标悬停在图片上时提示文字。width属性表示图片的宽，单位是像素。height属性表示图片的高，单位是像素。
4、视频标签
标签，用于在浏览器中播放视频。使用标签不需要下载任何额外的浏览器视频播放插件，完全由浏览器自身来实现视频的解码和播放。- 实例：
<body> <video src="source/likeYou.mp4" controls="controls" width="500" height="250"></video> </body>说明：
src属性是必要的属性，表示视频文件的路径，可以是==相对路径或者绝对路径。controls属性表示显示一组视频播放控件，用以控制视频的播放。是controls="controls"的简写。- HTML5规范中并没有对视频播放控件的样式进行规范定义，因此，不同的浏览器可能会有不同外观的播放控件，但功能大都大同小异。
width属性表示视频的宽，单位是像素。height属性表示视频的高，单位是像素。标签可以添加poster属性，用来定义封面图片。一般情况下，浏览器会显示视频的第一帧，但有时，第一帧没有画面或者第一帧的画面并不适合宣传展示，因此，需要人为的设置一个封面。poster属性的值是图片文件的路径，可以使用相对路径或绝对路径。- 其他属性说明：
属性 说明 autoplay页面加载后自动播放视频，如果有该属性，视频自动播放，如果没有该属性，视频就不会自动播放 preloadnone：视频播放前，浏览器不会预先下载视频资源，当用户不点击播放按钮时，会节省带宽metadata：视频播放前，浏览器不会下载视频资源，但是会获得资源的元数据（视频大小，持续时间，视频格式，前几帧画面）auto（默认）：浏览器根据实际情况动态决定。例如，在wifi、3G、4G数据漫游情况下，动态采用不同的加载方案注意：如果设置了autoplay属性，那么preload属性的值将会被忽略muted静音播放 loop循环播放 - 一个视频文件包含两部分内容，即视频部分和音频部分，每一个部分都使用一种特定的编码类型来编码。(mp4是最好的选择）
5、音频标签
标签，用于在浏览器中播放音频。使用标签不需要下载任何额外的浏览器音频播放插件，完全由浏览器自身来实现音频的解码和播放。- 实例：
<body> <audio src="source/YouAreMySunshine.mp3" controls></audio> </body>说明：
src属性表示音频文件的路径。controls属性表示显示一组音频播放控件，是controls="controls"的简写。- 其他属性说明：
属性 说明 autoplay页面加载时是否自动播放音频 preloadnone：不预先加载音频metadata：预先加载元数据auto：让浏览器根据实际情况动态决定muted静音播放 loop循环播放 - HTML5支持MP3、AAC、AAC+、WAV PCM等众多音频格式，鉴于目前各浏览器及操作系统的支持情况，MP3格式是一种最好的选择。
6、
标签表示强调不同的情绪或声音，也可以表示技术术语、生物分类、来自另一种语言的成语或习语、一个想法等等。- 实例：
<body> <p><i>小狗</i>是一种可爱的动物！</p> <p><i>Thank god</i>，项目终于可以按时交付了。</p> <p><i>我希望这次可以成功</i>，他想。</p> </body>说明：
标签中的内容默认会被浏览器显示为斜体。
8、
标签标签表示文档中的关键字、商品名称等。- 实例：
<body> <p> 关键词： <b>HTML5</b>、<b>CSS3</b>、<b>W3C</b> </p> </body>说明：
标签中的内容默认会被浏览器显示为粗体。
9、
标签em是emphasis的意思，标签中的内容是用来强调的重点内容。- 实例：
<body> <p><em>小狗</em>是一种可爱的动物！</p> <p>小狗是一种<em>可爱</em>的动物！</p> </body>说明：
标签中的内容默认会被浏览器显示为斜体。
10、
标签- 实例：
<body> <p><strong>警告：水深危险！</strong></p> </body>说明：
标签中的内容默认会被浏览器显示为粗体。
三、W3C标准
W3C标准英文全程是
World Wide Web Consortium，中文是万维网联盟。
万维网联盟标准不是某一个标准，而是一系列标准的集合。网页主要有三部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。
对应的标准也有三方面：- 结构化标准主要包括
XHTML和XML， - 表现标准语言主要包括
CSS、 - 行为标准主要包括（如
W3C DOM）、ECMAScript等。
这些标准大部分是W3C起草发布，也有一是其他标准组织制定的标准。
1、W3C提倡的web规范基本原则
- 标签的开始和结束符合规范。
- 内容（结构）和表现（样式）分离。
- HTML内容结构要求语义化。
还有很多细节性的规范，比如行标签中不可出现块标签、尽可能减少div多层级嵌套等。这里需要特别说明的一点，刚才介绍到的标签，标签，标签，标签，如果在内容不具有语义，只是单纯的想将文字的样式显示为斜体或粗体，请不要使用这几个带有语义的标签。
2、W3C规范
1、 需要声明（DOCTYPE）
DOCTYPE（
document type）文档类型的简写，用来说明你用的XHTML或者HTML是什么版本。其中DTD叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和css都不会生效。 有过度的（Transitional）、严格的（strict）、框架的（frameset）。2、需要定义语言编码
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />注：如果忘记了定义语言编码，可能会出现页面乱码现象。
3、JavaScript定义
Js必须要用
- 由于