从零开始的HTML生活
HTML超文本标记语言(Hyper Text Markup Language)，是用来描述网页内容的一种语言，HTML文档也就是网页，Web浏览器的作用是读取HTML文档，并以网页形式显示它们，浏览器不会显示HTML标签，而是使用标签来解释页面的内容。
HTML
HTML标签
用以表达页面内容及结构。
HTML用来描述网页的被称之为HTML标签，HTML标签是由尖括号包围的关键词，页面上的所有元素都是由各种标签组成，HTML标签一般是成对出现的，比如<p>和</p>有些标签是没有结束标签的，称为“单标签”，比如<br/>，在HTML5的时代，不再推崇加 ‘/’ 闭合的方式。HTML标签对大小写步敏感，但提倡使用小写。
HTML 属性
提供有关HTML元素的更多信息。
以键值对形式出现，在HTML元素的开始标签中规定，一个元素可以有多个属性，且属性名和属性值对大小写不敏感。属性值可以不使用引号，当值里有空格等特殊符号的时候，需要双引号或单引号引起，但是不建议不是用引号。
常用属性：
- class：规定元素的类名
- id：规定元素的唯一 id
- style：规定元素的行内样式
- title：规定元素的额外信息
- align：规定对齐方式的附加信息
- bgcolor：规定背景颜色
HTML 注释
<!--单行注释-->
<!--
多行注释
balabala
-->
一个网页的组成
<!DOCTYPE html>
<html>
<head>
</head>
<body>
这里是<p>显示内容</p>
</body>
</html>
-
<!DOCTYPE >必须是HTML文档的第一行。声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 -
<html></html>用来包住所有HTML标签，包含<head></head>和<body></body>两部分 -
<head></head>是网页的头部信息，是浏览器中每一个标签页的名字 -
<body></body>是页面上要显示的内容
head里的标签
meta, link, script, title，style
- title：定义文档的标题。title对于搜索引擎优化很重要。
- meta：可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta name="keywords" content="HTML,CSS,Javascript,在线编程,在线学习">
再比如，规定浏览器用什么编码来解析这个html页面。例如，中文乱码可以通过以下语句设置所用的字符集为utf-8：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- script：定义客户端脚本
- link：定义文档与外部资源之间的关系，常用来引入css
- style：定义样式信息
body里的标签
body里的标签就太多了，主要分为几类:
文字相关类：
- h：定义标题1到标题6，h1,h2,h3,h4,h5,h6，文字大小一次减小
- p：html段落
- a：html链接，href属性中指定链接地址，target属性定义被链接的文档在何处显示
- b, strong：定义粗体文字
- em, i：定义内容为斜体
- q：定义短引用，浏览器通常会为 <q> 元素包围引号。
- blockquote：定义长引用，浏览器通常会对 blockquote 元素进行缩进处理
- abbr：定义缩写或首字母缩略语，对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
图像类
- img：空标签，src属性的值是图像的 URL 地址，alt属性用来为图像定义一串预备的可替换的文本
表格类
- table：定义表格，border属性定义边框，默认不显示边框
- tr：定义表格行，大多数浏览器会把表头显示为粗体居中的文本
- td：定义表格列，<td> </td>表示空单元格
列表类
- ul：无序列表
- ol：有序列表
- li：列表项
表单类
- form：定义HTML表单，action属性定义在提交表单时执行的动作
- input：根据type属性，可以是文本(text)、单选按钮(radio)、复选框(checkbox)、提交按钮(submit)、密码(password)、按钮(button)等
- fieldset：组合表单中相关数据，<legend>为<fieldset>元素定义标题
- select：定义下拉列表，<option>定义待选择的选项
- textarea：多行文字输入域
代码类
- code：定义编程代码示例，不保留多余的空格和折行
- pre：解决code不保留多余的空格和折行，用
<pre>元素包围代码
其它类
- hr：
标签在HTML页面中创建水平线 - br：
在不产生一个新的段落情况下换行
以上指列出了使用频率较高的标签，更多标签和属性见W3School
HTML<div>和<span>
<div>标签可以将网页分割成不同的、清晰的、独立的局部模块，然后在不同的模块中添加内容。 这样使网页布局结构更加清晰，代码更加独立，代码修改时能尽量少地影响到整体页面， 所以在网页开发中提倡使用<div>标签。
<div>图层常见属性设置：
- id: 用于标识<div>块（即<div>标签的名字）
- class: 修饰<div>块的css样式组
- position:绝对定位和相对定位 (abosolute,relative)
- height:<div>模块的高度
- width:<div>模块的宽度
- left:相对于窗口左边的位置
- top:相对于窗口上边的位置
<div> vs <span>
<div>是块级元素，用于组合其他HTML元素的容器；<span>是内联元素，可用作文本的容器。二者都是为了逻辑分块，<div>表示一个单独的块，<span>表示一个行内的块。
参考资料
html在线验证
html在线格式化代码
W3School上的HTML基础教程
Html5新特性
CodeForDream上提供的HTML课程
