HTML学习笔记 03 - 常用标签

最新推荐文章于 2022-09-02 19:12:18 发布

法随

最新推荐文章于 2022-09-02 19:12:18 发布

阅读量379

点赞数

分类专栏： HTML学习笔记

本文链接：https://blog.csdn.net/Class013/article/details/105109787

版权

HTML学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、常用块标签

块标签(block-level tags)：在浏览器中单独占一行。

1、`<div>`标签

div是单词division的前3个字母，意为分开、分隔，主要作用是将网页中的一块相关内容区域组织在一起。

实例：

<body>
  <div style="width:300px; height:100px; background:#F0F0F0">
    div是一个块标签，通常表示页面中的一个分区或节
  </div>
</body>

说明：

<div>标签是一个块标签，通常表示页面中的一个分区或节，在HTML页面布局时常常用到该标签。
由于<div>标签缺乏语义，HTML5中新增了一些具有语义的标签，如<article>、<section>、<nav>、<aside>、<header>、<footer>、<main>、<figure>、<figcaption>等，它们的主要作用均是更具语义的组织页面中的一块相关内容区域，它们也都是块标签，关于它们的用法，将在后面的章节详细介绍，这里不再展开。

2、标题标签`<h1>`至`<h6>`

<h1> 至 <h6> 标签用来定义标题。<h1> 定义最大的标题，<h6> 定义最小的标题。标题标签属于块标签。通常用来表现网页内容的结构，本身具有语义。

<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>

说明：

标题标签从<h1>到<h6>，共6个，标题标签中显示出来的文字为粗体，且依次从大到小。

3、段落标签`<p>`

<p> 标签可定义一个段落，用来表现描述性内容。段落与段落之间有一个空行。

实例：

<body>
  <p>　　有一天，老马对小马说：“你已经长大了，能帮妈妈做点事吗？”小马连蹦带跳地说：“怎么不能？我很愿意帮您做事。”老马高兴地说：“那好啊，你把这半袋麦子驮到磨坊去吧。”</p>
  <p>　　小马驮起口袋，飞快地往磨坊跑去。跑着跑着，一条小河挡住了去路，河水哗哗地流着。小马为难了，心想：我能不能过去呢？如果妈妈在身边，问问她该怎么办，那多好啊！可是离家很远了。他向四周望望，看见一头老牛在河边吃草，小马嗒嗒嗒嗒跑过去，问道：“牛伯伯，请您告诉我，这条河，我能过去吗？”老牛说：“水很浅，刚没小腿，能过去。”</p>
  <p>　　小马听了老牛的话，立刻跑到河边，准备过去。突然从树上跳下一只松鼠，拦住他大叫：“小马！别过河，别过河，河水会淹死你的！”小马吃惊地问：“水很深吗？”松鼠认真地说：“当然啦！昨天，我的一个伙伴就掉在这条河里淹死的！”小马连忙收住脚步，不知道怎么办好。他叹了口气说：“唉！还是回家问问妈妈吧！”</p>
</body>

4、水平线标签`<hr/>`

<hr />标签在浏览器中产生一条水平线。标签都是成对的，即有开始标签就有结束标签，<hr />中的/表示标签结束。

实例：

<body>
  <h1>欢迎你</h1>
  <hr />
  <p>快乐工作，快乐学习。</p>
  <p>今天的努力是未来成功的基石</p>
</body>

5、有序列表标签`<ol>`

<ol>标签表示有序列表标签，<li>标签用来表示每一个列表条目。<ol>标签的type属性可以更改有序列表条目符号风格。

实例：

<body>
  <h3>注册步骤：</h3>
  <ol type="1">
    <li>填写信息</li> 
    <li>收电子邮件</li>
    <li>注册成功</li>  
  </ol>
</body>

说明：

<ol>标签的type属性用来表示条目符号风格，常见的有：

`type`属性及值	风格
`type="1"`	以数字风格表示列表顺序
`type="a"`	以小写字母风格表示列表顺序
`type="i"`	以罗马数字风格表示列表顺序

6、无序列表标签`<ul>`

<ul>标签表示无序列表标签，<li>用来表示每一个列表条目。<ul>标签的type属性可以更改无序列表条目符号风格。

实例：

<body>
  <h3>新人上路指南</h3> 
  <ul type="disc">
    <li>如何成为优秀的员工</li>
    <li>如何做好每天的工作</li>
    <li>如何成就职业生涯</li>
  </ul>
</body>

说明：

<ul>标签的type属性用来表示条目符号风格，常见的有：

`type`属性及值	风格
`type="disc"`	以实心圆表示列表顺序
`type="square"`	以矩形表示列表顺序
`type="circle"`	以空心圆表示列表顺序

7、描述列表标签`<dl>`

描述列表使用<dl>标签表示，在<dl>标签中包含标题标签<dt>和描述标签<dd>。

实例：

<body>
  <dl>
    <dt>咖啡</dt>
    <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd>
    <dd>可以提神，刺激神经。</dd>
  </dl>
</body>

说明：

<dl>是定义列表标签；
<dt>是定义列表的标题；
<dd>是定义列表的描述，描述部分会向右侧缩进。

二、常用行标签（内联标签）

行标签（inline-level tags）：在浏览器中不单独占一行。

1、`<span>`标签

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。如果说<div>是将一块相关内容区域组织在一起的话，那么<span>标签是将一行内的一部分相关内容组织在一起。<span>标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 标签中的文本与其他文本不会任何视觉上的差异。

实例：

<body>
  <p>价格：<span style="color:red;font-size:70px;">10</span>元</p>
</body>

2、换行标签`<br/>`

<br />表示换行标签，<br />后面的内容在浏览器中另起一行显示。<br />标签中的/表示标签结束。

实例：

<body>
  <p>
  难忘今宵<br />无论天涯与海角<br />神州万里同怀抱<br />共祝愿祖国好 祖国好
  </p>
</body>

3、图片标签`<img/>`

<img /> 标签可定义一副图像。<img />标签中的/表示标签结束。

实例：

<body>
  <img src="images/dog.png" width="400" height="400" alt="狗狗" title="可爱的狗狗" />
</body>

说明：

src属性是图片的来源，src属性的值是图片文件的路径，可以使用相对路径或绝对路径。本例中是src="images/dog.png"。
alt属性用于在图片不能正常显示时的提示文字。
title属性用于在鼠标悬停在图片上时提示文字。
width属性表示图片的宽，单位是像素。
height属性表示图片的高，单位是像素。

4、视频标签`<video>`

<video>标签，用于在浏览器中播放视频。使用标签不需要下载任何额外的浏览器视频播放插件，完全由浏览器自身来实现视频的解码和播放。

实例：

<body>
  <video src="source/likeYou.mp4" controls="controls" width="500" height="250"></video>
</body>

说明：

src属性是必要的属性，表示视频文件的路径，可以是==相对路径或者绝对路径。
controls属性表示显示一组视频播放控件，用以控制视频的播放。是controls="controls"的简写。
HTML5规范中并没有对视频播放控件的样式进行规范定义，因此，不同的浏览器可能会有不同外观的播放控件，但功能大都大同小异。
width属性表示视频的宽，单位是像素。
height属性表示视频的高，单位是像素。
<video>标签可以添加poster属性，用来定义封面图片。一般情况下，浏览器会显示视频的第一帧，但有时，第一帧没有画面或者第一帧的画面并不适合宣传展示，因此，需要人为的设置一个封面。poster属性的值是图片文件的路径，可以使用相对路径或绝对路径。
其他属性说明：

属性	说明
`autoplay`	页面加载后自动播放视频，如果有该属性，视频自动播放，如果没有该属性，视频就不会自动播放
`preload`	`none`：视频播放前，浏览器不会预先下载视频资源，当用户不点击播放按钮时，会节省带宽 `metadata`：视频播放前，浏览器不会下载视频资源，但是会获得资源的元数据（视频大小，持续时间，视频格式，前几帧画面） `auto`（默认）：浏览器根据实际情况动态决定。例如，在wifi、3G、4G数据漫游情况下，动态采用不同的加载方案注意：如果设置了`autoplay`属性，那么`preload`属性的值将会被忽略
`muted`	静音播放
`loop`	循环播放

一个视频文件包含两部分内容，即视频部分和音频部分，每一个部分都使用一种特定的编码类型来编码。(mp4是最好的选择）

5、音频标签`<audio>`

<audio>标签，用于在浏览器中播放音频。使用<audio>标签不需要下载任何额外的浏览器音频播放插件，完全由浏览器自身来实现音频的解码和播放。

实例：

<body>
  <audio src="source/YouAreMySunshine.mp3" controls></audio>
</body>

说明：

src属性表示音频文件的路径。
controls属性表示显示一组音频播放控件，是controls="controls"的简写。
其他属性说明：

属性	说明
`autoplay`	页面加载时是否自动播放音频
`preload`	`none`：不预先加载音频 `metadata`：预先加载元数据 `auto`：让浏览器根据实际情况动态决定
`muted`	静音播放
`loop`	循环播放

HTML5支持MP3、AAC、AAC+、WAV PCM等众多音频格式，鉴于目前各浏览器及操作系统的支持情况，MP3格式是一种最好的选择。

6、`<i>`标签

<i>表示强调不同的情绪或声音，也可以表示技术术语、生物分类、来自另一种语言的成语或习语、一个想法等等。

实例：

<body>
  <p><i>小狗</i>是一种可爱的动物！</p>
  <p><i>Thank god</i>，项目终于可以按时交付了。</p>
  <p><i>我希望这次可以成功</i>，他想。</p>
</body>

说明：

<i>标签中的内容默认会被浏览器显示为斜体。

8、`<b>`标签

<b>标签表示文档中的关键字、商品名称等。

实例：

<body>
  <p>
    关键词：
	<b>HTML5</b>、<b>CSS3</b>、<b>W3C</b>
  </p>
</body>

说明：

<b>标签中的内容默认会被浏览器显示为粗体。

9、`<em>`标签

em是emphasis的意思，<em>标签中的内容是用来强调的重点内容。

实例：

<body>
  <p><em>小狗</em>是一种可爱的动物！</p>
  <p>小狗是一种<em>可爱</em>的动物！</p>
</body>

说明：

<em>标签中的内容默认会被浏览器显示为斜体。

10、`<strong>`标签

实例：

<body>
  <p><strong>警告：水深危险！</strong></p>
</body>

说明：

<strong>标签中的内容默认会被浏览器显示为粗体。

三、W3C标准

W3C标准英文全程是World Wide Web Consortium，中文是万维网联盟。
万维网联盟标准不是某一个标准，而是一系列标准的集合。网页主要有三部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。
对应的标准也有三方面：

结构化标准主要包括XHTML和XML，
表现标准语言主要包括CSS、
行为标准主要包括（如W3C DOM）、ECMAScript等。
这些标准大部分是W3C起草发布，也有一是其他标准组织制定的标准。

1、W3C提倡的web规范基本原则

标签的开始和结束符合规范。
内容（结构）和表现（样式）分离。
HTML内容结构要求语义化。
还有很多细节性的规范，比如行标签中不可出现块标签、尽可能减少div多层级嵌套等。这里需要特别说明的一点，刚才介绍到的<i>标签，<b>标签，<em>标签，<strong>标签，如果在内容不具有语义，只是单纯的想将文字的样式显示为斜体或粗体，请不要使用这几个带有语义的标签。

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必须要用<script language="javascript" type="text/javascript">来开头定义，以保证在不支持js的浏览器上直接显示出来。

4、CSS定义

CSS必须要用<style type=“text/css”>开头来定义，为保证各浏览器的兼容性，在写CSS时请都写上数量单位，例如：
错误：.space_10{padding-left:10}
正确：.space_10 {padding-left:10px}

5、使用注释

正确的应用等号或者空格替换内部的虚线。

6、所有标签的元素和属性名字都必须使用小写。

与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。

7、所有属性值必须用引号括起来（" ''）双引号或单引号

8、把所有特殊符号用编码表示

任何小于号（<），不是标签的一部分，都必须被编码为 <
任何大于号（>），不是标签的一部分，都必须被编码为 >
任何与号（&），不是实体的一部分的，都必须被编码为 &

9、所有的标记都必须有相应的结束标记

双标记：<div></div>
单标记：<img />

10、所有的标记都必须合理嵌套

<p><b></p></b>必须修改为：<p><b></b></p>

11、图片添加有意义的alt属性

图片加载失败时可以用alt属性表明图片内容。同理添加文字链接的title属性，帮助显示不完整的内容显示完整。

12、在form表单中增加lable，以增加用户友好度。
例如：

<form action="http://somesite.com/prog/adduser" method="post">
  <label for="firstname">first name: </label>
  <input type="text" id="firstname" />
  <label for="lastname">last name: </label>
  <input type="text" id="lastname" />
</form>