HTML5基本结构

HTML5（Hyper Text Markup Language 超文本标记语言）实际上不算是一种编程语言，而是一种标记语言。所谓超文本，有 2 层含义：

它可以加入图片、声音、动画、多媒体等内容（超越文本限制）。
它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

基本结构是由一系列成对出现的元素标签组合而成，这些标签以< >的形式出现，用于标记文本内容的含义。浏览器通过元素标签解析文本内容并将结果显示在网页上，而元素标签本身并不会被浏览器显示出来。

html

<!DOCTYPE html>
<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        主体内容
    </body>
</html>

HTML5元素的内容一般以起始标签<元素名>开始，以结束标签</元素名>终止。例如首部标签<head>中的<title>标签用于标记网页标题，该标签之间的内容将显示在浏览器窗口的标题栏中。主体标签<body>中的内容显示到网页上。

文档类型声明<!DOCTYPE>

DOCTYPE是Document Type的简写，含义为文档类型，它不是HTML标签。
HTML5引入了新的特性和元素，同时也取消了对部分过期元素的支持，因此如果在HTML5的DOCTYPE声明下使用了HTML的过期元素，网页可能无法正常显示预期的效果。

根标签<html>

所有的HTML5文档都是以<html>标签开始，以</html>标签结束。在<html>和</html>标签内包含了两个重要的元素标签：<head>首部标签和<body>主体标签，分别用于标记文档的首部和主体部分。

首部标签<head>

首部标签以<head>标签开始，以</head>标签结束。<head>标签中的内容不会显示在网页的页面中。<head>标签中可包含<title>和<meta>等标签，用于声明页面标题、字符集和关键词等。

网页标题标签<title>

该标题会显示在浏览器窗口的标题栏中，若省略<title>标签则网页标题会显示为"无标题文档"。建议在网页代码中保留该标签，因为<title>标签还能用于当网页被添加到收藏夹时显示标题，以及作为页面标题显示在搜索引擎结果中。

主体标签<body>

HTML5文档的主体部分以<body>标签开始，以</body>标签结束。<body>标签中的内容将全部显示在网页的页面中。<body>标签中可直接添加文本内容，也可继续嵌套其他元素标签，形成多样化的显示效果。

HTML5文档注释

为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。

HTML5使用标签为文档进行注释。
标签支持单行和多行注释。

字符实体的使用

在HTML5文档中存在一些特殊字符无法直接使用。例如小于符号和大于符号是无法直接输出的，因为它们会被误认为是元素标签的组成部分；而连续空格也无法正确显示，会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在HTML5中称为字符实体（Character Entities）。
字符实体可借助其对应的实体名称或数字代码进行输出。实体名称的出现是为了方便记忆，但是部分实体名称不能完全被所有浏览器支持。
例如单引号的实体名称'在IE浏览器中不被支持，在这种情况下可以使用实体数字代替。

显示效果	字符实体	实体名称	实体数字
	空格
>	大于号	>	>
<	小于号	<	<
×	乘号	×	×
÷	除号	÷	÷
"	双引号	"	"
'	单引号	'	'
°	度数	°	°
£	英镑	£	£
€	欧元	€	€
©	版权	©	©
®	注册商标	®	®

HTML5保留的常用标签

基础标签

段落标签<p>

段落标签<p>和</p>用于形成一个新的段落，段落与段落之间默认为空一行进行分割。
不推荐使用align属性。

换行标签<br>或<br/>

换行标签<br>用于在当前位置产生一个换行，相当于一次回车键所产生的效果。该标签单独使用，无结束标签。<br>标签每次只能换一行，如需多次换行，必须写多个<br>标签。

标题标签<h1> - <h6>

从1至6共有6级。<h1>标签所标记的字号最大，标签使用的数字越大则字体越小，直至<h6>标签所标记的字号最小。
标题标签的默认状态为左对齐显示的黑体字。
一个标题独占一行。

水平线标签<hr>

水平线标签<hr>用于在网页上画一条水平线，从而在视觉上将文本分段。<hr>标签没有结束标签，可以单独使用，默认情况下是一条宽度为1像素的黑色水平线。标签中的元素名称hr来源于英文单词horizontal rule（水平线）的首字母简写。

文本格式标签

斜体字标签<i>

斜体字标签<i>用于将其首尾标签之间的文本内容显示为斜体字型效果。

粗体字标签<b>和<strong>

粗体字标签<b>和<strong>均可以将其首尾标签之间的文本内容显示为粗体字型效果。区别在于使用<strong>标签的文本内容被认为是重要的内容。

上标标签<sup>和下标标签<sub>

标签<sup>和</sup>标记的文本内容将显示为上标的样式，例如：X²；标签<sub>和</sub>标记的文本内容将显示为下标的样式，例：CO₂。

修订标签<del>和<ins>

修订标签有<del>和<ins>两种，分别为文本添加删除线和下划线。
不赞成使用<u>、<s>、<strike> 标签。

预格式化标签<pre>

可以将所标记的文本内容在显示时保留换行与空格的排版效果。在没有使用该标签的普通情况下，浏览器将把多次回车键形成的换行默认为一次换行，并且把多次空格键形成的连续空格默认为单个空格，在段落开头的连续空格甚至会被忽略。
当需要多次使用<br>和符号分别进行换行和空格时，可以考虑使用此标签提高效率。
可以导致段落断开的标签（例如标题、<p>和<address>标签）绝不能包含在<pre>所定义的块里。

列表标签

有序列表标签<ol>

有序列表的基本格式如下：

html

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    .......
</ol>

<ol>默认的起始数值为1，可使用start属性重新定义编号起始值，格式为：<ol start=“n”>。
<ol>默认的编号样式为标准阿拉伯数字，如需使用其他编号样式，可使用type属性，格式为<ol type=“类型值”>。

type属性值	解释
a	英文小写字母
A	英文大写字母
i	罗马数字小写
I	罗马数字大写
1	阿拉伯数字

无序列表标签<ul>

无序列表标签<ul>默认的编号样式为实心圆形，嵌套在其他列表中的二级列表编号样式默认为空心圆形。
无序列表的基本格式如下：

html

<ul>
    <li>第一项
    <li>第二项
    <li>第三项
    .......
</ul>

如需自定义编号样式，可使用type属性进行声明，格式为<ul type=“类型值”>。

type属性值	解释
disc	实心圆形
circle	空心圆形
square	方形

定义列表标签<dl>

定义列表标签<dl>和</dl>是用于进行词条定义的特殊列表，每条表项需要结合词条标签<dt>和定义标签<dd>一起使用。
词条标签<dt>需要标记在每个词条的开头。
定义标签<dd>则需要标记在每个定义部分的开头，默认为全文缩进显示。
定义列表的基本格式如下：

html

<dl>
    <dt>第一个词条</dt>
        <dd>第一个词条的定义</dd>
    <dt>第二个词条</dt>
        <dd>第二个词条的定义</dd>
    .......
</dl>

图像标签

图像标签<img>用于在网页中嵌入图片，该标签无需结束标签，可单独使用。

标签有两个常用属性：src属性和alt属性。
src属性用于指明图像的存储路径，通常是URL形式。
alt属性用于无法找到图像时显示替代文本，该属性可省略不写。
其基本格式如下：

html

1	<img src="图像文件URL" />

其中图像文件URL替换为图片存储的路径，例如图片文件为pig.jpg，并存放于本地的images文件夹中，则可以写成：

html

1	<img src="http://localhost/images/pig.jpg" />

如果图片和该网页文件在同一个目录中，则可以直接写图片名称即可。

html

1	<img src="pig.jpg" />

超链接标签

超链接标签<a>用于在网页中标记文本或图像从而形成超链接，用户点击后将跳转另一个指定的页面，从而实现浏览空间的跨越。超链接可以用于指向其他任何位置。

默认状态下，未被访问的链接文本显示为带有下划线的蓝色字体，鼠标悬浮在上面会变成手形，点击访问后链接文本会变成带有下划线的紫色字体。

超链接标签有如下两个重要属性：

href：目标内容的URL地址。
target：目标内容的打开方式。

target属性值	解释
_self	自身
_blank	新窗口
_top	顶层框架
_parent	父框架

外部链接

其基本格式如下：

html

1	<a href="URL地址">链接文本或图片</a>

外部链接可包含文本内容或者图片内容。例如：

html

文本示例：
<a href="http://www.baidu.com">百度</a>

图片示例：
<a href="http://www.baidu.com"><img src="logo.png" /></a>

内部标签

超链接标签也可以通过点击跳转同一页面的指定区域。

html

1	<a href="#指定区域名">链接文本或图像</a>

这里的“指定区域名”可以自定义，但是同时目标区域也必须标记出对应的名称。

html

1	<a name="区域名">目标内容</a>

表格标签

表格（用<table>来表示，表格可以有高度、宽度、边框）
每一行可以用<tr>来表示，单元格放在行中。
单元格（用<td>来表示，每个单元格可以有背景颜色和背景图片）
表头（用<th>来表示，表头是特殊的单元格，其中的文字默认是居中并且加粗）
标题（用<caption>来表示）

表格不是用来布局页面的,而是用来展示数据的。

基本结构：

html

<table border="1" width="500" height="200">
    <caption>......</caption>
    <tr>
        <th>......</th>
        <th>......</th>
    </tr>
    <tr>
        <td>......</td>
        <td>......</td>
    </tr>
</table>

表格有如下重要属性：

colspan：属性值表示当前单元格跨越几列
rowspan：属性值表示当前单元格跨越几行

框架标签

框架标签用于在网页的框架内定义子窗口。由于框架标签对于网页的可用性有负面影响，在HTML5中不再支持HTML4.01中原有的框架标签<frame>和<frameset>。只保留了内联框架标签<iframe>。

该标签在HTML5中仅支持src属性，用于指定框架内部的网页来源。

例如：

html

1	<iframe src="news.html"></iframe>

容器标签

<div>标签

标签<div>可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素（block level element），浏览器会自动在<div>和</div>所标记的区域前后自动放置一个换行符。每个标签可有一个独立的id号。
同样属于块级元素的还有段落标签<p>、表格标签<table>、标题标签<h1> - <h6>、<ul>、<ol>、<li>等。

<span>标签

标签<span>通常作为文本的容器，它没有特定的含义和样式，只有与CSS同时使用才可以为指定文本设置样式属性。该标签是一个行内元素（inline element），与块级元素相反，行内元素不会自动在前后自动放置换行符，因此行内元素会默认在同一行显示。
同样属于行内元素的还有<a>、<strong>、<b>、<em>、<ins>、<del>等。

表单标签

HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。

<form>标签

用于定义表单域，以实现用户信息的收集和传递。它会把它范围内的表单元素信息提交给服务器。

<form>标签常用属性

属性	值	描述
action	URl	规定当提交表单时向何处发送表单数据
method	get post	规定用于发送表单数据的HTTP方法
name	text	规定表单的名称
novalidateNew	novalidate	如果使用该属性，则提交表单时不进行验证。(type=“email”)
autocompleteNew	on off	规定是否使用表单的自动完成功能

html

<form action="*" method="get" autocomplete="on" novalidate>
    First name:<input type="text" name="fname"><br>
    E-mail: <input type="email" name="email"><br>
    <input type="submit">
</form>

<input>标签

基本格式：

html

1	<input type="类型" name="名字" value="值" />

type属性常用取值：
text:文本框
password:密码框
radio:单选按钮。注意以name分组，确保单选关系，必须有value属性。
checkbox:复选框。注意以name分组，确保为一组，必须有value属性。
submit:提交按钮
reset:重置按钮
button:普通按钮
文本框

html

1	<input type="type" name="username" size=10 maxlength=8 value="请输入" />

maxlength属性用来定义此区域输入的最大字符数。
size属性用来定于显示的尺寸的大小。默认宽度是 20 个字符。
value属性为输入框的值，可以不填。
密码框

html

1	<input type="password" name="pwd" size=10 maxlength=8 value="请输入" />

单选按钮

html

1 2	<input type="radio" name="sex" value="female" />女 <input type="radio" name="sex" value="male" checked/>男

多选按钮

html

1
2
3

<input type="checkbox" name="hobby" value="read" />读书
<input type="checkbox" name="hobby" value="sing" checked/>唱歌
<input type="checkbox" name="hobby" value="hike" />远足

提交按钮、重置按钮、普通按钮

html

1
2
3

<input type="submit" /> 按钮文字默认为"提交"
<input type="reset" /> 按钮文字默认为"重置"
<input type="button" /> 默认没有文字

隐藏文本框
内容是无法手动修改的，因此必须事先设置好正确的value属性

html

1	<input type="hidden" name="answer" value="88" />

文件选择
其样式为一个可点击的浏览按钮和一个文本输入框，供文件上传。

html

1	<input type="file" name="file" />

<select>标签

可以通过<select>和<option>标签设计一个下拉式列表或带有滚动条的列表，用户选一个或多个选项。

html

<select name="phone" size=2>
    <option value="mi">小米</option>
    <option value="hua" selected>华为</option>
    <option value="apple">苹果</option>
    <option value="oppo">OPPO</option>
</select>

如果列表项目较多需要进行分类，可以使用<optgroup>标签分组。

html

<select name="greengrocery">
<optgroup label="水果类">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="grape">葡萄</option>
</optgroup>
<optgroup label="蔬菜类">
    <option value="tomato">西红柿</option>
    <option value="lettuce">生菜</option>
    <option potato">土豆</option>
</optgroup>
</select>

<textarea>标签

定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本。
可以通过cols和rows属性来规定尺寸大小，不过最好使用CSS

html

1	<textarea rows="10" cols="30"></textarea>

<label>标签

<label> 标签为 input 元素定义标记。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

html

<label for="female">女性</label>
<input type="radio" name="sex" id="female" value="female" />
<label for="male">男性</label>
<input type="radio" name="sex" id="sex2" value="male"/>

HTML5新增的常用标签

文档结构标签

在HTML5版本之前通常直接使用<div>标签进行网页整体布局，常见布局包括页眉、页脚、导航菜单和正文部分。为了区分文档结构中不同的<div>内容，一般会为其配上不同的id名称。例如：

html

<div id="header">
这是网页的页眉部分
</div>
<div id="content">
这是网页的正文部分
</div>
<div id="footer">
这是网页的页脚部分
</div>

由于id名称是自定义的，如果没有提供明确含义的id名称，会导致含义不明
确。例如将<div id=“header”>替换成<div id=“abc”>不影响网页的页面显示效果，但是查看网页代码时会比较难以理解其含义。

因此HTML5为了代码更好的语义化，新增了一系列专用文档结构标签代替原先用<div>加上id名称的做法。

标签名称	含义
<header>	页眉标签，用于定义整个网页文档或其中一节的标题。
<nav>	导航标签，用于定义导航菜单栏。
<section>	节标签，用于定义节段落。
<article>	文章标签，用于定义正文内容。每个article都可以包含自己的页眉页脚。
<aside>	侧栏标签，用于定义网页正文两侧的侧栏内容。
<footer>	页脚标签，用于定义整个网页文档或其中一节的页脚。

页眉标签<header>

页眉标签<header>和</header>用于定义网页文档或节的页眉，通常为网站名称。

导航标签<nav>

导航标签<nav>和</nav>用于定义网页文档的导航菜单，可通过超链接跳转其他页面。

节标签<section>

节标签<section>和</section>用于定义独立的专题区域，里面可包含一篇或多篇文章。

文章标签<article>

文章标签<article>和</article>用于定义独立的文章区域，里面根据文章内容的长短也可以包含一个或多个段落元素<p>。

侧栏标签<aside>

侧栏标签<aside>和</aside>用于定义正文两侧的相关内容，常用作文章的侧栏。

页脚标签<footer>和</footer>用于定义整个网页文档或节的页脚，通常包含文档的作者、版权、联系方式等信息。

多媒体标签

视频<video>

当前元素支持三种视频格式：WebM、Ogg、Mp4（都支持，最好用）
<video src=“文件地址” ></video>

属性	值	描述
autoplay	autoplay	视频在就绪后马上播放。
controls	controls	向用户显示控件，如播放、音量、放大等按钮。
width	pixels	设置视频播放器的宽度。
height	pixels	设置视频播放器的高度。
loop	loop	当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
posted	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src	url	要播放的视频的URL

音频<audio>

支持的格式是有限的。谷歌浏览器把音频和视频自动播放禁止。<audio src=“文件地址” ></audio>

属性	值	描述
autoplay	autoplay	视频在就绪后马上播放。
controls	controls	向用户显示控件，如播放、音量、放大等按钮。
loop	loop	当媒介文件完成播放后再次开始播放。
src	url	要播放的视频的URL。

表单标签

<datalist>标签

必须与文本输入框配合使用。
选项初始为隐藏状态。
该标签的id 属性应当与文本框的list属性相同。
multiple属性现仅仅使用输入type=“email”

html

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">IE
    <option value="Firefox">火狐
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

<input>标签类型

要放到<form action=“*” >中，配合submit类型按钮使用。

color: 颜色选择
number：数字输入框
email：email地址类型
tel：电话类型
url：url类型
range：滑动状。属性:min、max、step。多配合JavaScript使用。
date/week：日期选择器
time：显示时间，不含时区
datetime类型：选择包含年月日和时间的内容(Chrome、Firefox或Internet Explorer不支持该值。)

表单属性

属性	值	说明
required	required	输入字段必须填写。
placeholder		该提示会在用户输入值之前显示在输入字段中,适用于：text、search、url、tel、email 以及 password。
autofocus	autofocus	当页面加载时，元素自动获得焦点。
autocomplete	on/off	当自动完成开启，浏览器会基于用户之前的输入值自动填写值。
multiple	multiple	允许用户在<input>元素中输入一个以上的值。适用于：email 和 file。

格式标签

记号标签<mark>

记号标签<mark>用于突出显示指定区域的文本内容，可以为文字添加黄色底色。

进度标签<progress>

进度标签<progress>用于显示任务的进度状态，可配合JavaScript使用以显示任务进度的动态进行效果。
该标签可以加上属性value和max分别用于定义任务进度的当前值和最大值。例如，表示目前任务进度已经进行了80%的代码如下：

html

1	<progress value="80" max="100"></progress>

度量标签<meter>

度量标签<meter>用于显示标量测量结果，通常用于显示适用于温度、重量、金额、磁盘使用量、投票数据统计等。该标签通常应用于已知范围内的恒定数值标记，不用于任务进度指示。需要注意的是目前IE尚未对该标签进行支持。

属性	说明
value	设置或获取此控件的值，必须要在min与max值的中间。
max	设置此控件的最大值。缺省值为1。
min	设置此控件的最小值。缺省值为0。
low	设置过底的阈值，当value小于low并大于min时，显示过低的颜色。
high	设置过高的阈值，当value大于high并小于max时，显示过高的颜色。
optimum	设置最佳值。

html

<body>
<h2>驱动器磁盘空间状态</h2>
C盘：<meter value="0.6" low="0.25" optimum="0.85" high="0.75"></meter><br/>
D盘：<meter value="0.2" low="0.25" optimum="0.85" high="0.75"></meter><br/>
E盘：<meter value="0.9" low="0.25" optimum="0.85" high="0.75"></meter>
</body>

网站设计基础-HTML5基础

HTML5基本结构

文档类型声明<!DOCTYPE>

根标签<html>

首部标签<head>

网页标题标签<title>

主体标签<body>

HTML5文档注释

字符实体的使用

HTML5保留的常用标签

基础标签

段落标签<p>

换行标签<br>或<br/>

标题标签<h1> - <h6>

水平线标签<hr>

文本格式标签

斜体字标签<i>

粗体字标签<b>和<strong>

上标标签<sup>和下标标签<sub>

修订标签<del>和<ins>

预格式化标签<pre>

列表标签

有序列表标签<ol>

无序列表标签<ul>

定义列表标签<dl>

图像标签

超链接标签

外部链接

内部标签

表格标签

框架标签

容器标签

<div>标签

<span>标签

表单标签

<form>标签

<input>标签

<select>标签

<textarea>标签

<label>标签

HTML5新增的常用标签

文档结构标签

页眉标签<header>

导航标签<nav>

节标签<section>

文章标签<article>

侧栏标签<aside>

页脚标签<footer>

多媒体标签

视频<video>

音频<audio>

表单标签

<datalist>标签

<input>标签类型

表单属性

格式标签

记号标签<mark>

进度标签<progress>

度量标签<meter>

微信扫一扫：分享