一。hello world
<!--根标签-->
<html>
<!--头部-->
<head>
<!--标题标签-->
<title>中国好声音</title>
<!--设置编码-->
<meta charset="utf-8">
</head>
<!--主要内容-->
<body>
<div>你好,中国好声音</div>
</body>
</html>
二。HTML中创建的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见的HTML中的标签</title>
</head>
<body>
<!--标题标签-->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<!--线条标签-->
<hr>
<!--1.表单标签(输入框)-->
<input placeholder="请输入你的名字"><br>
<input value="我是默认的文字"><br>
<input type="date"><br>
<input type="button"><br>
<input type="file"><br>
<input type="color"><br>
<input type="radio"><br>
<input type="checkbox"><br>
<!--练习-->
<form action="form_action.asp" method="get">
First name:<input type="text" name="fname" />
last name:<input type="text" name="lname" />
<input type="submit" value="Submit" />
</form>
<!--2.段落标签-->
<p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签
<p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签
<p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签
<p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签
<!--3.图像标签-->
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="这是一张图片">
<!--
相对路径:资源在当前的项目中 ./ ..// ././
绝对路径:资源不在当前的项目中,网络上.本地 http:/ /https:// file://
-->
<img src="data:image/1.png" alt="记得记得记得记得" height="100" width="150">
<!--4.换行标签-->
<br>
<!--5.容器地 :div , span-->
<!--6.表格:table, tr , td (现在几乎不用)-->
<!--7.列表:ul , ol , li (包括有序列表和无序列表)-->
<!--无序列表-->
<ul>
<li>我是一个无序列表</li>
<li>我是一个无序列表</li>
<li>我是一个无序列表</li>
<li>我是一个无序列表</li>
<li>我是一个无序列表</li>
</ul>
<!--有序列表-->
<ol type="i">
<li>我是一个有序列表</li>
<li>我是一个有序列表</li>
<li>我是一个有序列表</li>
<li>我是一个有序列表</li>
<li>我是一个有序列表</li>
</ol>
<!--界面直接的调整-->
<!--超链接标签(#表示跳到当前的界面(刷新)), targer(超链接打开的方式)-->
<a href="#">我是超链接</a><br>
<a href="http://www.baidu.com" target="_blank">百度一下你就知道</a>
<a href="http://www.baidu.com" target="_blank">
<img src="data:image/1.png" alt="记得记得记得记得" height="100" width="150">
</a>
<!--8.div标签(容器标签)-->
<div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
<div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
<div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
<div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
<div>
<div>
<p>我是容器标签</p>
</div>
</div>
</body>
</html>
三。HTML5中新增的标签
<!--HTML5新增的标签
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签,级块性标签,行内语义性标签,交互性标签
1.结构性标签:负责Web上下文结构的定义,确保HTML文档
包括:article:文章主体内容(一篇博客,一段论坛帖子,一段用户评论,插件)
header:标记头部区域的内容
footer:标记脚步区域的内容
section:区域章节表述
nav:菜单导航,链接导航
2.级块性标签:完成Web页面区域的划分,确保内容的有效分隔,(不常用)
包括:aside:注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure:对多个元素组合并展示的元素,常与figcaption联合使用
code:表示一段代码块
dialog:人与人之间的对话,
3.行内语义性标签:完成Web页面具体内容的引用和表述,丰富展示的内容,
包括:meter:特定范围内的数值,如工资,数量,百分比,电池的用量
time:表示的时间(但是现在所有的游览器都不支持 )
progress:进度跳,可用做max, min,step进行控制,完成对进度跳的表示和监听
video:视屏元素,用于对视屏的播放,支持缓冲预加载和视屏媒体格式
audio:音频元素,用于音频播放,支持缓冲预加载和音频播放格式
4.交互性标签:功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础(用的不多)
包括:details:表示一段具体的内容,默认不显示,通过某种方式(单击)和legend交互才会显示
datagrid:控制客户端的数据和显示,可用于动态脚本及时更新
menu:用于交互菜单
command:用来处理命令按钮
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国好声音</title>
</head>
<body>
<!--文章-->
<article>
<!--头部-->
<header>
<h2>人生若只如初见</h2>
<h4>何事秋风悲画扇</h4>
<img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/12541d052e91cd0e4689dfeb0c32d266_121_121.jpg">
</header>
<!--主要章节-->
<section>
<h3>61 个回答</h3>
<p>年9月份，一个算不上华丽的转身，我们暂停了 EC [1] 这个项目，全面转向「简书」。简书的诞生其实非常意外，自我喜欢上 Markdown 起，我就发现，这个世界上还没有一个支持 Markdown 的笔记本产品，于是我就打算自己做一个，当时正好有个实习生刚刚加入我们团队，于是我做了第一个设计稿，就让实习生去做开发了。当时这个产品还不叫简书，我们给它起了一个自认为很好的名字，叫 Maleskine，是 Markdown 和 Moleskine 的整合。
作者：简叔
链接：http://www.zhihu.com/question/21151468/answer/17968032
来源：知乎
著作权归作者所有，转载请联系作者获得授权。</p>
<p>年9月份，一个算不上华丽的转身，我们暂停了 EC [1] 这个项目，全面转向「简书」。简书的诞生其实非常意外，自我喜欢上 Markdown 起，我就发现，这个世界上还没有一个支持 Markdown 的笔记本产品，于是我就打算自己做一个，当时正好有个实习生刚刚加入我们团队，于是我做了第一个设计稿，就让实习生去做开发了。当时这个产品还不叫简书，我们给它起了一个自认为很好的名字，叫 Maleskine，是 Markdown 和 Moleskine 的整合。
作者：简叔
链接：http://www.zhihu.com/question/21151468/answer/17968032
来源：知乎
著作权归作者所有，转载请联系作者获得授权。</p>
</section>
<section>
<h3>百度云官方网站——云上的日子 你我共享</h3>
<p>百度云是由百度公司出品的一款云服务产品,不仅为用户提供免费存储空间,还可以将视频、照片、文档、通讯录数据在移动设备和PC端之间跨平台同步、备份等,百度云还支持添加好友、创建群组,和伙伴们快乐分享, 目前已上线:Android、iPhone、iPad、百度云管家、网页端等.</p>
<p>百度云是由百度公司出品的一款云服务产品,不仅为用户提供免费存储空间,还可以将视频、照片、文档、通讯录数据在移动设备和PC端之间跨平台同步、备份等,百度云还支持添加好友、创建群组,和伙伴们快乐分享, 目前已上线:Android、iPhone、iPad、百度云管家、网页端等.。</p>
</section>
<!--尾部-->
<footer>
<h3>郑科宁苦逼IT男
25 人赞同
又是软文，笔记功能不及印象笔记的百分之一，团队自问自答的演戏能力不错啊，至于美文，呵呵呵呵</h3>
<p>发布于 2013-10-02 4 条评论 感谢 分享 收藏 • 没有帮助 • 举报 • 作者保留权利
</p>
</footer>
</article>
</body>
四。HTML5常用的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<meter value="60" max="100" min="0">浏览器兼容</meter><br>
<progress value="30" max="100"></progress>
<!--音频-->
<audio src="source/刘德华%20-%2017岁.mp3" controls = @"controls"></audio>
<!--ship-->
<video src="source/04.全局队列.mp4" controls = @"controls"></video>
</body>
</html>