一、HTML5基本结构
<!--文档类型声明，浏览器会将此页面定义为兼容模式-->
<!Doctype html>
<!--根标签-->
<html>
<!--首部标签-->
<head>
<!--元数据标签，定义网页的字符集、关键词、描述、作者等信息-->
<meta charset="utf-8">
<!--网页标题标签-->
<title>我的第一个HTMl5页面</title>
<!--基地址标签，设置默认URL地址或目标target。可以指定URL地址，也可以为该页面所有超链接统一设置打开方式-->
<base target="_blank" />
<!--样式标签-->
<style>
p{color: red}
</style>
<!--链接标签，连接外部样式表-->
<link rel="stylesheet" href=""/>
<!--脚本标签，可以引用外部脚本文件，也可以把脚本命令写在标签中间-->
<script src=" "></script>
</head>
<!--主体标签-->
<body>
你好，HTML5！
</body>
</html>
二、HTML5常用的标签
1、基础标签
<!--段落标签-->
<p>
这是一个段落
</p>
<!--标题标签，一共有六级，等级越大，字体越小-->
<h1>h1的标题效果</h1>
<h2>h2的标题效果</h2>
<h3>h3的标题效果</h3>
<h4>h4的标题效果</h4>
<h5>h5的标题效果</h5>
<h6>h1的标题效果</h6>
<!--水平线标签-->
<hr>
<!--换行标签-->
锄禾日当午，<br>汗滴禾下土。<br>谁知盘中餐，<br>粒粒皆辛苦。
2、文本格式标签
<!--斜体字标签-->
<i>我是斜体字</i>
<!--粗体字标签，<b>和<strong>,区别在于<strong>标签的文本被认为是重要内容-->
<b>我是粗体字，（使用了标签b）</b>
<strong>我也是粗体字，（使用了标签strong）</strong>
<!--上标标签<sup>和下标标签<sub>-->
上标标签的用法：2<sup>10</sup>=1024
下标标签的用法：二氧化碳的缩写为CO<sub>2</sub>
<!--修订标签<del>和<ins>，<del>是删除线标签，<ins>是下划线标签-->
删除线标签的用法：<del>错误的内容</del>
下划线标签的用法：<ins>正确的内容</ins>
<!--预格式化标签，可以将所标记的文本内容在显示时保留换行与空格的排版效果-->
<pre>
静夜思
【唐】李白
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>
3、列表标签
<!--有序列表标签<ol>,需要和列表项目标签<li>配合使用。该标签有两个属性，start属性重新定义编号起始值，type属性定义标号样式-->
<ol type="1" start="3">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
</ol>
<!--无序列表标签，type属性定义编号样式-->
<ul type="square">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
</ul>
<!--定义列表标签<dl>，要配合词条标签<dt>和定义标签<dd>一起使用-->
<dl>
<dt>HTML5</dt>
<dd>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。</dd>
</dl>
4、图像标签
<!--图像标签，src属性用于指明图片的路径，alt属性用于无法找到图像时显示代替文本，可省略不写。-->
<img src="公众号图片/006UVFr9ly1g9wg3t21u4j30c80fat8w.jpg" alt="显示不出图片"/>
5、超链接标签
<!--外部链接-->
文字超链接效果：<a href="http://www.baidu.com">百度</a>
图片超链接效果：<a href="http://www.baidu.com"><img src="Picture/手机图标.jpg"></a>
<!--内部链接，通过单击跳转到同一页面的指定区域，href是指定区域名，name是目标区域名-->
<h3>目录</h3>
<ul>
<li><a href="#ch01">第一章</a></li>
<li><a href="#ch02">第二章</a></li>
<li><a href="#ch03">第三章</a></li>
<li><a href="#ch04">第四章</a></li>
<li><a href="#ch05">第五章</a></li>
<li><a href="#ch06">第六章</a></li>
<li><a href="#ch07">第七章</a></li>
</ul>
<hr>
<h3><a name="ch01">第一章</a></h3>
<p>HTML5概述</p>
<h3><a name="ch02">第二章</a></h3>
<p>HTML5基础</p>
<h3><a name="ch03">第三章</a></h3>
<p>CSS概述</p>
<h3><a name="ch04">第四章</a></h3>
<p>JS概述</p>
<h3><a name="ch05">第五章</a></h3>
<p>HTML5表单</p>
<h3><a name="ch06">第六章</a></h3>
<p>HTML5画布</p>
<h3><a name="ch07">第七章</a></h3>
<p>HTML5地理定位</p>
6、表格标签
<!--表格标签，<table>是表格标签；<tr>是表格行标签；<td>是单元格标签；<th>是表头标签，默认为粗体，居中对齐；<caption>是表格标题标签-->
<table border="1">
<caption>成绩一览表</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>张三</td>
<td>90</td>
<td>80</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>80</td>
</tr>
</table>
7、框架标签
<!--内联框架标签，用于在网页的子框架内定义子窗口，仅支持src属性，用于指定框架内部的网页来源。-->
<iframe src="iframe/news.html"></iframe>
8、容器标签
<!--div标签定义文档中的区域或节，每个标签可有一个独立的id号。-->
<div>
<h4>div的应用</h4>
<p> 谈起开源软件的版权，刘澎介绍道，平常我们的版权是叫Copyright，但在自由软件里是著佐权（Copyleft），是一种利用现有著作权体制来保护所有用户和二次开发者的自由的授权方式。</p>
</div>
<!--span标签作为文本的容器，只有与css同时使用才可以为指定文本设置样式属性。-->
<p>本段使用了<span>span标签</span>但没有设置样式。</p>
<p>本段使用了<span style="color: aqua">span标签</span>并且设置了样式。</p>
三、HTML5新增的常用标签
1、HTML5新增文档结构标签
<!--页眉标签，用于定义整个网页文档或其中一节的标题，通常为网站名称-->
<header><h1>页眉Header</h1></header>
<div id="container">
<!--导航标签啊，用于定义导航菜单栏，可通过超链接跳转到其他页面-->
<nav>
<a href="http://www.baidu.com">菜单一</a>
<a href="http://www.baidu.com">菜单二</a>
<a href="http://www.baidu.com">菜单三</a>
<a href="http://www.baidu.com">菜单四</a>
<a href="http://www.baidu.com">菜单五</a>
<a href="http://www.baidu.com">菜单六</a>
<a href="http://www.baidu.com">菜单七</a>
<a href="http://www.baidu.com">菜单八</a>
</nav>
<!--侧栏标签，用于定义网页正文两侧的侧栏内容-->
<aside>
<h3>侧栏Aside</h3>
<p>侧栏内容</p>
<p>侧栏内容</p>
<p>侧栏内容</p>
<p>侧栏内容</p>
<p>侧栏内容</p>
<p>侧栏内容</p>
</aside>
<!--节标签，用于定义独立的专题区域，里面可包含一片或多篇文章-->
<section>
<!--用于定义独立的文章区域，每个文章都可以包含自己的页眉和页脚。-->
<article>
<header><h1>文章页眉Article Header</h1></header>
<p>正文</p>
<p>正文</p>
<p>正文</p>
<p>正文</p>
<p>正文</p>
<p>正文</p>
<footer>
<h2>文章页脚Article Footer</h2>
</footer>
</article>
<article>
<header><h1>文章页眉Article Header</h1></header>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<footer>
<h2>文章页脚Article Footer</h2>
</footer>
</article>
</section>
<aside>
<h3>侧栏Aside</h3>
<p>侧栏内容</p>
<p>侧栏内容</p>
<p>侧栏内容</p>
<p>侧栏内容</p>
<p>侧栏内容</p>
<p>侧栏内容</p>
</aside>
<!--页脚标签，用于定义整个网页文档或节的页脚，通常包含文档的作者、版权、联系方式等信息。-->
<footer>
<h2>页脚Footer</h2>
</footer>
</div>
2、HTML5新增格式标签
<!--记号标签，可以为文字添加黄色底色-->
<p>这是一段<mark>文字</mark>的内容</p><br>
<!--进度标签，属性value为当前值，max为最大值-->
文件正在下载中：
<progress value="50" max="100"></progress><br>
<!--meter是度量标签，属性min为最小值，max为最大值，value为当前值，low为规定范围内较低值，high为规定范围内较高值，optimum为最佳值-->
<h3>驱动器磁盘空间状态</h3><br>
<p>C盘空间剩余大小：
<meter min="0" max="1000" value="200" low="300" high="800" optimum="1000">200/100 GB</meter>
</p>
<p>D盘空间剩余大小：
<meter min="0" max="1000" value="600" low="300" high="800" optimum="1000">600/100 GB</meter>
</p>
<p>E盘空间剩余大小：
<meter min="0" max="1000" value="900" low="300" high="800" optimum="1000">900/100 GB</meter>
</p>
四、表单form
- 单选框：radio
- 复选框：checkbox
- 提交：submit
- 文本：text
- 密码：password
- 标签：label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="username" id="" value="" />
<input type="password" name="password" id="" value="" />
<hr>
<label for="man">选中男</label>
男
<input type="radio" name="gender" id="man" value="男" />
女
<input type="radio" name="gender" id="woman" value="女" />
中性
<input type="radio" name="gender" id="halfman" value="中性" hidden="hidden" />
<hr>
<h2>请选择你喜欢的城市</h2>
广州
<input type="checkbox" name="city" id="" value="广州">
上海
<input type="checkbox" name="city" id="" value="上海">
北京
<input type="checkbox" name="city" id="" value="北京">
成都
<input type="checkbox" name="city" id="" value="成都">
<hr>
<input type="submit" name="" value="注册">
</form>
</body>
</html>
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
