chapter2 html 标签
在sublime中敲入！， 按tab 进行拓展，得到如下框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
<html> 元素定义了整个 HTML 文档。<body> 元素定义了 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
（一）标题
<h1>到<h6>,一级标题到六级标题
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
1,2,3 字号大小不同，1最大。
注：浏览器会自动地在标题的前后添加空行。
注：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
（二）段落<p>
<p>This is a paragraph</p>
段落内部文字忽略连续 空格，连续空格看做一个空格，也不会显示空行，也不会换行。
如果要加空格，需要 注意分号要加。
如果要空一行， 需要<br/> 标签定义换行，是在不产生一个新段落的情况下进行换行。
注：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
如果想要呈现 空格与空行，需要用 预格式文本<pre>
（三）链接<a>
<a href="http://www.w3school.com.cn">This is a link</a>
在 href 属性中指定链接的地址。
点击这个link 不是新建一个浏览器窗口，而是在本窗口打开网址
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。
（四）图像<img>
<img>没有结束标签，是单独的。
<img src="w3school.jpg" width="104" height="142" />
属性src 指 "source"。
（五）注释与水平线
（1）注释
<!-- 在此处写注释 -->
将注释插入 HTML 代码中可以提高其可读性。浏览器会忽略注释，也不会显示它们。开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
在sublime 中，注释以及注释的取消都是快捷键ctrl+/
（2）水平线
<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。水平线一直从网页的左端一直跨越到右端。
----- 先做一个小结
HTML 标签可以拥有属性。属性总是在 HTML 元素的开始标签中规定。例如HTML 链接由 <a> 标签定义，链接的地址在 href 属性中指定。
<h1 align="center"> 拥有关于对齐方式的附加信息。
属性值都在"" 双引号内。不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'
（六）列表：无序ul ， 有序ol , 列表项li
1. 无序列表ul，常用于导航栏
示例
2. 有序列表 ol
有序列表常见的有排行榜，热搜排名等
示例
会自动出现123编码，样式在CSS中可以设置。
（七）表格 table tr td
每一行需要用tr标签，每一个单元格需要用td标签。
还有表头标签<th>， 字体会自动加粗。
（八）区域div
div 常用于一个栏目
示例
区域内部的所有元素都会居中对齐。
div 标签最大的用处就是结合CSS样式，对每个区域进行单独排版。
**综合示例1
分为三个栏目div进行，分别放导航栏、图片+文本、注释
代码如下
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>李白诗词</title> </head> <body> <div id="container" align="center"> <div id ="nav"> <p>将进酒 | 送友人 | 静夜思</p> </div> <hr> <div id="content"> <img src="1.jpg" alt=""> <h1>将进酒</h1> <p> 君不见，黄河之水天上来，奔流到海不复回。 </p> <p> 君不见，高堂明镜悲白发，朝如青丝暮成雪。 </p> <p> 人生得意须尽欢，莫使金樽空对月。 </p> <p> 天生我材必有用，千金散尽还复来。 </p> <p> 烹羊宰牛且为乐，会须一饮三百杯。 </p> <p> 岑夫子<sup>1</sup>，丹丘生<sup>2</sup>，将进酒，杯莫停。 </p> <p> 与君歌一曲，请君为我倾耳听。 </p> <p> 钟鼓馔玉何足贵，但愿长醉不愿醒。 </p> <p> 古来圣贤皆寂寞，唯有饮者留其名。 </p> <p> 陈王昔时宴平乐，斗酒十千恣欢谑。 </p> <p> 主人何为言少钱，径须沽取对君酌。 </p> <p> 五花马,千金裘，呼儿将出换美酒，与尔同销万古愁。 </p> </div> <hr> <div id="exp"> <p>1.岑夫子：人名</p> <p>2.丹丘生：人名</p> </div> </div> </body> </html>
id 属性它的含义就是这个名字是唯一的，上述划分了三个子区域，好处是这样可用CSS设置每个区域的样式。
sub 表示加上标。
第二种方法（只设置一个div）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>李白诗词</title> </head> <body> <div id="container" align="center"> <p>将进酒 | 送友人 | 静夜思</p> <hr> <img src="1.jpg" alt=""> <h1>将进酒</h1> <p> 君不见，黄河之水天上来，奔流到海不复回。 </p> <p> 君不见，高堂明镜悲白发，朝如青丝暮成雪。 </p> <p> 人生得意须尽欢，莫使金樽空对月。 </p> <p> 天生我材必有用，千金散尽还复来。 </p> <p> 烹羊宰牛且为乐，会须一饮三百杯。 </p> <p> 岑夫子<sup>1</sup>，丹丘生<sup>2</sup>，将进酒，杯莫停。 </p> <p> 与君歌一曲，请君为我倾耳听。 </p> <p> 钟鼓馔玉何足贵，但愿长醉不愿醒。 </p> <p> 古来圣贤皆寂寞，唯有饮者留其名。 </p> <p> 陈王昔时宴平乐，斗酒十千恣欢谑。 </p> <p> 主人何为言少钱，径须沽取对君酌。 </p> <p> 五花马,千金裘，呼儿将出换美酒，与尔同销万古愁。 </p> <hr> <p>1.岑夫子：人名</p> <p>2.丹丘生：人名</p> </div> </body> </html>
最后的效果也是一样的。
**综合示例2 ---排行榜（涉及到表格、超链接、有序列表）
代码如下
div>table>tr*2>td
ol>10*li>a[href="#"]
<html> <head> <title>百度百科</title> </head> <body> <div id="container" align="center"> <table border="1" > <tr> <td> <h1>star top10</h1> </td> </tr> <tr><td> <ol> <li><a href="#">bigbang</a></li> <li><a href="#">东方神起</a></li> <li><a href="#">少女时代</a></li> <li><a href="#">super junior</a></li> <li><a href="#">beast</a></li> <li><a href="#">shinee</a></li> <li><a href="#">2NE1</a></li> <li><a href="#">T-ara</a></li> <li><a href="#">f(x)</a></li> <li><a href="#">C.N.Blue</a></li> </ol> </td> </tr> </table> </div> </body> </html>
border=1 表示表格的边框。
（九）表单<form>与表单元素
表单：是一个区域，采集用户信息。
表单元素：输入框，文本框、密码框、按钮、复选、下拉列表等。
表单元素有以下几种：input \text \password\submit 等……
form标签，里面放置表单元素。
form有一个很重要的属性action， 表示获取的数据由哪个页面进行处理，是web系统后端的一个页面。
（1）文本框、密码框 input
区别在于密码框会** 显示。文本框则普通的明文显示。
一般表单元素都会带有name 属性，就是这个表单元素的名字是什么， name属性怎样使用？当表单的数据提交给后端页面处理的时候，后端处理需要知道这个数据来源于哪个表单元素，需要通过name属性来读取。
（2）按钮
提交按钮、重置按钮
value是按钮里面的字。
（3）单选、复选框
checked=“checked”表示这一项被默认被选中。
例子
<form action=""> 性别： 男 <input type="radio" value="boy" name="gender" checked="checked" /> 女 <input type="radio" value="girl" name="gender" /> <br /> 爱好： <input type="checkbox" value ="1" name="music" checked="checked" /> 音乐 <input type="checkbox" value ="2" name="sport" /> 体育 <input type="checkbox" value ="3" name="reading" /> 阅读 </form>
单选框则为radio，最重要的是 单选框的name 属性要相同，这样这一组单选框才会被选择一个选项。
对于复选框用checkbox， name属性可以不同。
（4）下拉列表框 select ,option
每各选项都用option标签。
例子
<form> 爱好： <select> <option >看书</option> <option selected="selected">旅游</option> <option >运动</option> <option >购物</option> </select> </form>
（5）文本框
<textarea rows="行数" cols="列数">文本<\textarea>
<form action=""> 个人简介：<br /> <textarea cols="50" rows="10"> 在这里输入内容... </textarea> <br /> <input type="submit" value="确定" /> <input type="reset" value="重置"/> </form>
chapter3-- web语义化
em strong ；
dl dt dp
web语义化：让页面具有良好的结构与含义，从而让人和机器都螚快速理解网页内容。有以下优点：
（1）结构清晰，利于团队的开发、维护；
（2）有利于搜索引擎理解。SEO（searching engine optimization） 搜索引擎优化；
（3）容易兼容不同设备（硬件设备）
i 标签没有语义； b 没有语义；
