1 HTML概述
HTML 是用来描述网页的一种语言。
1．HTML 指的是超文本标记语言 (Hyper Text Markup Language)
2．HTML 不是一种编程语言，而是一种标记语言 (markup language)
3．标记语言是一套标记标签 (markup tag)
4．HTML 使用标记标签来描述网页
HTML 文档 = 网页
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
</body>
</html>
以上就是一个web页面最基本的标签结构：
1．<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
2．Html标签：是包裹整个页面元素的根元素，通常情况下document.documentElement(页面根元素)获取的就是html标签。
3．Head标签：头部标签，主要包含meta标签、title标签、link标签（引入CSS）、script标签（引入CSS）等。
4．Meat标签：提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，<meta> 标签的属性定义了与文档相关联的名称/值对。比如<meta charset="utf-8" />，定义了文档以utf-8编码。
5．Title标签：页面的标题，设置之后将在浏览器选项卡看到。
6．Body标签：页面的主体内容。
HTML标签不需要专门的编译工具，它可以直接通过浏览器解析渲染成可见的网页，你只需要一个文本文档写入html标签，文件后缀改成html之后即可直接在浏览器运行查看。对于初学者，可以现在就自己写一个简单的网页。
2 HTML标签
2.1 常见标签
以下列出部分常见的html标签（除了刚刚上面讲到的基本标签）
link: <link rel="stylesheet" type="text/css" href="css/base.css"/> 外链css
script: <script src="js/jquery-1.12.0.js" type="text/javascript"></script> 外链js
div: <div id="dsa"></div> 块元素 会另起一行进行渲染 元素
span: <span id="dsa"><span> 行内元素 不需要另起一行
a: <a href="#"></a> 定义一个超链接
p: <p></p> 标签定义段落。
form: <form action="form_action.asp" method="get">
<input type="text" name="text" />
<input type="submit" value="Submit" />
</form>
为用户输入创建 HTML 表单 用于向服务器传输数据。
h1~h6: <h1>You are so beautiful</h1>设置标题
ul: 无序列表
ol: 有序列表
li: 列表项目
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
img: <img src="img/123.png"/> 插入一个图片
input: <input type="button" name="btn" id="btn" value="提交" /> 表单，有多个属性常用 button text
iframe: <iframe src="#btn" width="100px" height="100px"></iframe> 会创建包含另外一个文档的内联框架（即行内框架）
2.2 行内与块状
Html标签在页面中的表现形式可以分为两类 ，内联（行内）元素、块状元素
1．内联不占行，如input，span，a
2．块状元素，占行，如div，p，h1~h6
3 HTML语义
3.1 什么是HTML语义
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
3.2 为什么要语义化
1．为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
2．用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
3．有利于SEO（搜索引擎优化）：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
4．方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
5．便于团队开发和维护，语义化更具可读性，是下一步web网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3.3 Id命名语义
标签元素很多都会命名一个id，id值也不能随意命名，比如一个导航栏模块，最外层的div元素id尽量设置为nav，这样子其它程序员一眼就能明白这个div的功能。下面列出了一些常见模块的标签使用时，id的命名规范。
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
登录条：loginbar
标志：logo
广告：banner
轮转：promo
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权copyright
......
4 标签使用注意事项
1．绝大部分标签需要闭合，严格遵守。
2．块状元素原则上不允许被包裹在行内元素里面。
3．不要滥用div，尽量使得HTML文档是具有语义的可读程序。
4．HTML文档虽然不是编程语言，也需要缩进和注释，确保可读可维护。
5．放弃使用样式标签，如b,font,u等，放弃使用样式类别的标签属性，如color属性等，HTML与样式分离。
6．避免元素嵌套的层级过多，这将增加文档的复杂性，提高维护成本并降低可扩展能力。
7．也不要为了语义而过分纠结用哪一个标签更好，有时候自己把握分寸。