HTML5基本结构及标签

<!DOCTYPE html>
<html>
    <head>
        <title>我的第一个HTML5页面</title>
    </head>
    <body>
        你好,HTML5!
    </body>
</html>

HTML5基本结构

DOCTYPE

DOCTYPE是Document Type的简写,含义为文档类型。HTML5文档基础结构中第一行< !DOCTYPE html >就是HTML5的DOCTYPE声明。

<head>标签中可包含<title><meta>等标签,用于声明页面标题、字符集和关键词等。

base

<!DOCTYPE HTML>
<html> 
<head>
    <base href="http://localhost/images/" />
</head>
<body>
    <img src="sunflower.jpg" />
</body>  
</html>

<base>标签用于为页面上所有的链接设置默认URL地址或目标target。当HTML5文档中使用了相对路径时,浏览器会用<base>标签指定的URL进行补全。
此时在第一个图像标签<img>中src属性填写的是一个相对路径,由于<base>标签的作用,该路径会被浏览器自动补全为:<img src=" http://localhost/images/sunflower.jpg" />。如果没有使用<base>标签来指定URL地址,则浏览器会用当前HTML5文档的URL对图片地址进行补全。
<!DOCTYPE HTML>
<html> 
    <head>
        <base target="_blank" />
    </head>   
    <body>
        <a href="https://www.baidu.com">百度</a>
        <a href="https://www.163.com">网易</a>
    </body>
</html>
在<base>标签中的属性target="_blank"指的是该网页文档中所有未指定打开方式的超链接将在新窗口打开。

meta

1.字符集声明
<meta charset="utf-8">
2.关键词声明
使用<meta>标签定义网页关键词(keywords)的用法如下:
<meta name="keywords" content="HTML5, CSS3, jQuery" />
3.页面描述声明
使用<meta>标签定义页面描述(description)的用法如下:
<meta name="description" content="This is a tutorial about HTML5, CSS3, jQuery" />
搜索引擎会根据<meta>标签中的name和content属性来索引网页

style

样式标签<style>可用于定义文档中指定区域的字体风格、背景颜色、对齐方式等各类样式信息。
<head>
<style>
p {color: red}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>

link

<link>链接标签用于连接外部资源和当前HTML5文档,它只出现在首部标签<head>和</head>中,通常用于连接外部样式表。
<head>
<link rel="stylesheet" href="my.css" />
</head>
这表示将CSS样式文件my.css指定的样式效果应用于当前网页中。

如果需要同时引用多个外部样式表文件,则需要为每一个CSS样式文件单独使用一次<link>标签。
<head>
<link rel="stylesheet" href="my1.css" />
<link rel="stylesheet" href="my2.css" />
<link rel="stylesheet" href="my3.css" />
</head>

script

<script>脚本标签为可选,取决于当前页面是否需要使用脚本内容,比如JavaScript。该标签可以直接引用外部脚本文件,也可以直接将脚本命令写在<script>和</script>标签中。
<head>
<script src="test.js"></script>
</head>

和引用外部CSS文件类似,如果需要同时引用多个JavaScript文件,则需要为每一个JavaScript文件单独使用一次<script>标签。例如:
<head>
<script src="test1.js"></script>
<script src="test2.js"></script>
<script src="test3.js"></script>
</head>

boby

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

注释

HTML5使用<!--...-->标签为文档进行注释,注释标签以“<!--”开头,以“-->”结束,中间的“...”替换为注释文字内容即可。<!--...-->标签支持单行和多行注释。

字符实体

字符实体可借助其对应的字符名称或数字代码进行输出,其格式如下:
&实体名称;
&#实体数字;
实体名称和实体数字的写法都是以&符号开头,以;符号结尾,其中实体数字前面还加有#符号以示区分。例如大于符号(>)可以使用&gt;或&#62;表示。

单引号的实体名称&apos;在IE浏览器中不被支持,在这种情况下可以使用实体数字代替。

在这里插入图片描述

图像文件

网页文件常见的图像格式有:
JPEG格式
GIF格式
PNG格式

JPEG格式
JPEG格式指的是联合图像专家组(Joint Photographic Experts Group,JPEG)格式,是第一个国际图像压缩标准。该格式的图像文件后缀名是.jpg或.JPG两种形式。
JPEG格式图像文件有以下特点:
支持高级压缩
弹性压缩比
广泛支持互联网标准

GIF格式
GIF格式指的是图像交换格式(Graphics Interchange Format,GIF),该格式的图像文件后缀名是.gif或.GIF两种形式。
GIF格式图像文件有以下特点:
无损性
256种颜色
隔行扫描
动画效果

PNG格式
PNG格式指的是图像交换格式(Portable Network Graphic Format,PNG),该格式的图像文件后缀名是.png或.PNG两种形式。
PNG格式图像文件有以下特点:
文件体积小
支持透明显示
色彩索引模式

HTML4.01转换为HTML5

基于HTML4.01开发的网页可以分成三个步骤转换为HTML5网页。
步骤一:化简DOCTYPE声明方式。
步骤二:化简charset字符集描述方式。
步骤三(可选,取决于需要转换的文件是否包含该内容):若存在外部css文件或js文件的引用,可以直接省略其中的type描述。

HTML5保留的常用标签

基础标签

1. 段落标签<p>
段落标签<p>和</p>用于形成一个新的段落,段落与段落之间默认为空一行进行分割

2. 标题标签<h1>-<h6>
HTML5使用<hn>和</hn>来标记文本中的标题,其中n需要替换为数字,从1至6共有6级。<h1>标签所标记的字体最大,标签使用的数字越大则字体越小,直至<h6>标签所标记的字体最小。标题标签的默认状态为左对齐显示的黑体字。标题标签中的字母h来源于英文单词heading(标题)的首字母。

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

4. 换行标签<br>
换行标签<br>用于在当前位置产生一个换行,相当于一次回车键所产生的效果。该标签单独使用,无结束标签。建议使用该标签代替回车键,因为回车键所产生的多个连续换行会被浏览器自动省略。
<br>标签每次只能换一行,如需多次换行,必须写多个<br>标签。

文本格式标签

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

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

3.上标标签<sup>和下标标签<sub>
标签<sup>和</sup>标记的文本内容将显示为上标的样式,例如数字上X的平方可以写成X2;标签<sub>和</sub>标记的文本内容将显示为下标的样式,例如二氧化碳的化学方程式可以写成CO2。

4. 修订标签<del>和<ins>
修订标签有<del>和<ins>两种,分别用于为文本内容添加删除线和下划线。删除线标签<del>可将其首尾标签之间的文字上显示一条水平贯穿线,该标签一般用于定义被删除的文本内容,标签中的元素名称del来源于英文单词delete(删除)。
下划线标签<ins>用于将其首尾标签之间的文字加上下划线效果,标签中的元素名称来源于英文单词()。由于<ins>标签的下划线效果容易和网页上的超链接效果混淆,往往需要和<del>标签配合使用。
HTML4.01版本中另有删除线标签<strike>和下划线标签<u>显示同样的效果,在HTML5中均已不再被支持,建议使用<del>和<ins>代替旧版标签用于表示修订文本。

5. 预格式化标签<pre>
预格式化标签<pre>和</pre>可以将所标记的文本内容在显示时保留换行与空格的排版效果。在没有使用该标签的普通情况下,浏览器将把多次回车键形成的换行默认为一次换行,并且把多次空格键形成的连续空格默认为单个空格,在段落开头的连续空格甚至会被忽略。当需要多次使用<br>和nbsp;符号分别进行换行和空格时,可以考虑使用此标签提高效率。

列表标签

1. 有序列表标签<ol>
有序列表标签<ol>和</ol>用于定义带有编号的有序列表,需要和列表项目标签<li>配合使用。列表项目标签<li>需标记在每个表项的开头,默认为缩进显示效果。标签中的元素名称ol来源于英文单词ordered list(有序列表)的首字母简写。
有序列表的基本格式如下:
<ol>
<li>第一项
<li>第二项
<li>第三项
.......
</ol>
有序列表标签<ol>默认的起始数值为1,可使用start属性重新定义编号起始值,格式为:<ol start=”n”>。其中n需要替换成指定的编号数值,例如需要从3开始编号,则写成:<ol start=”3”>。
有序列表标签<ol>默认的编号样式为标准阿拉伯数字(1,2,3,4,...),如需使用其他编号样式,可使用type属性进行声明,格式为<ol type=”类型值”>。

2. 无序列表标签<ul>
无序列表标签<ul>和</ul>用于定义不带编号的无序列表,标签中的元素名称ul来源于英文单词unordered list(无序列表)的首字母简写。该标签也需要和列表项目标签<li>配合使用。列表项目标签<li>需标记在每个表项的开头,默认为缩进显示效果。
无序列表的基本格式如下:
<ul>
<li>第一项
<li>第二项
<li>第三项
.......
</ul>
无序列表标签<ul>默认的编号样式为实心圆形,嵌套在其他列表中的二级列表编号样式默认为空心圆形。
如需自定义编号样式,可使用type属性进行声明,格式为<ul type=”类型值”>。

3. 定义列表标签<dl>
定义列表标签<dl>和</dl>是用于进行词条定义的特殊列表,每条表项需要结合词条标签<dt>和定义标签<dd>一起使用。词条标签<dt>需要标记在每个词条的开头。定义标签<dd>则需要标记在每个定义部分的开头,默认为全文缩进显示。标签中的元素名称dl来源于英文单词definition list(定义列表)的首字母简写。
定义列表的基本格式如下:
<dl>
<dt>第一个词条
<dd>第一个词条的定义
<dt>第二个词条
<dd>第二个词条的定义
.......
</dl>

在这里插入图片描述
在这里插入图片描述

图像标签

图像标签<img>用于在网页中嵌入图片,该标签无需结束标签,可单独使用。标签中的元素名称img来源于英文单词image(图像)。
<img>标签有两个常用属性:src属性和alt属性。src属性是英文单词source(来源)的简写,用于指明图像的存储路径,通常是URL形式。alt属性是英文单词alternative(替代的、备选的)的简写,用于无法找到图像时显示替代文本,该属性可省略不写。
其基本格式如下:
<img src="图像文件URL" />

其中图像文件URL替换为图片存储的路径,例如图片文件为starrynight.jpg,并存放于本地的images文件夹中,则可以写成:
<img src="http://localhost/images/starrynight.jpg" />

如果图片和该网页文件在同一个目录中,则可以直接写图片名称即可。
<img src="starrynight.jpg" />

例:<img src="image/starrynight.jpg" alt="星月夜" width="268" height="214" />

超链接标签

超链接标签<a>用于在网页中标记文本或图像从而形成超链接,用户点击后将跳转另一个指定的页面,从而实现浏览空间的跨越。标签中的元素名称a来源于英文单词anchor(锚)的首字母简写,因此超链接按照标准叫法又称为锚链接。

超链接可以用于指向其他任何位置,包括Internet上的其他网页、本地其他文档甚至当前页面中其他位置。适用于制作网页的导航菜单或列表,也可以用于发送邮件或下载文件等。默认状态下,未被访问的链接文本显示为带有下划线的蓝色字体,鼠标悬浮在上面会变成手形,点击访问后链接文本会变成带有下划线的紫色字体。

超链接标签有如下两个重要属性:
href:目标内容的URL地址。
target:目标内容的打开方式

1. 外部链接
其基本格式如下:
<a href=”URL地址”>链接文本或图片</a>
外部链接可包含文本内容或者图片内容。例如:
文本示例:
<a href=”www.baidu.com”>百度</a>
 
图片示例:
<a href=”www.baidu.com”><img src=”logo.png” /></a>

2. 内部链接
超链接标签也可以通过点击跳转同一页面的指定区域,其语法格式如下:
<a href="#指定区域名">链接文本或图像</a>
这里的“指定区域名”可以自定义,但是同时目标区域也必须标记出对应的名称,其格式如下:
<a name="区域名">目标内容</a>

在这里插入图片描述

表格标签

表格标签由<table>和</table>定义,每个表格中包含若干行(由单元行标签<tr>和</tr>表示),每一行又被分为若干单元格(由单元格标签<td>和</td>表示)。
1. 表格标签<table>
 表格标签<table>和</table>用于中定义一个完整的表格。

2. 表格行标签<tr>
 表格行标签<tr>和</tr>用于定义表格中的一行。

3. 单元格标签<td>
 单元格标签<td>和</td>用于定义表格行中的一个数据单元格,其中字母td为table data(表格数据)的简写。数据单元格中可以包含表单、文本、水平线、图片、列表、段落甚至新的表格等内容。默认状态下,单元格的内容为左对齐。

4. 表头标签<th>
 表头标签<th>和</th>用于定义表格的第一行表头,默认为粗体字、居中对齐。

5. 表格标题标签<caption>
 表格标题标签<caption>和</caption>可用于为表格添加标题,该标题默认为居中对齐并显示在表格的顶部。

框架标签

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

该标签在HTML5中仅支持src属性,用于指定框架内部的网页来源。例如:
<iframe src="news.html"></iframe>

容器标签

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

2. <span>标签
标签<span>通常作为文本的容器,它没有特定的含义和样式,只有与CSS同时使用才可以为指定文本设置样式属性。该标签是一个内联元素(inline element),与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。

HTML5新增的常用标签

文档结构标签

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

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

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

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

2. 导航标签<nav>
导航标签<nav>和</nav>用于定义网页文档的导航菜单,可通过超链接跳转其他页面。其中nav来源于navigation(导航)的简写。

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

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

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

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

在这里插入图片描述

格式标签

1. 记号标签<mark>
记号标签<mark>用于突出显示指定区域的文本内容,通常在指定的文本前后分别加上<mark>和</mark>标签标记,可以为文字添加黄色底色。支持该标签的浏览器有IE9及以上版本,Firefox,Opera,Chrome和Safari。

2. 进度标签<progress>
进度标签<progress>用于显示任务的进度状态,可配合JavaScript使用以显示任务进度的动态进行效果。支持该标签的浏览器有IE10及以上版本,Firefox,Opera,Chrome和Safari 6。
该标签可以加上属性value和max分别用于定义任务进度的当前值和最大值。例如,表示目前任务进度已经进行了80%的代码如下:
<progress value="80" max="100"></progress>

3. 度量标签<meter>
度量标签<meter>用于显示标量测量结果,通常用于显示磁盘使用量、投票数据统计等。该标签通常应用于已知范围内的恒定数值标记,不用于任务进度指示。支持该标签的浏览器有Firefox,Opera,Chrome和Safari 6。需要注意的是目前IE尚未对该标签进行支持。

在这里插入图片描述

新增API

常用的功能性API列举如下:
拖放:实现元素的拖放;
画布:实现2D和3D绘图效果;
音频和视频:实现自带控件播放音频和视频;
表单:新增一系列输入类型,例如电话号码、数字范围、email地址等;
地理定位:使用浏览器进行地理位置经纬度的定位;
Web存储:实现本地持久化存储大量数据;
  • 1
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值