文档的编辑
选择文档---->修改文档后缀名（.thml）--->用浏览器打开(解释和执行HTML源代码的工具)
浏览器主要分类及内核
火狐（Firefor）--->Gecho
IE（Internet Explore）---->Trident
谷歌（Chrome）--->Webkit
苹果（Safari）---->Webkit
欧朋（Opera）----->Presto/Blink
主要用来渲染html,CSS渲染引擎，解析引擎
HTML文档结构
<html>---html标签的起始标签 <head> <title>标题</title> </head> <body> 这是我们的主战场 </body> </html>---html标签的结束标签
标签（标记）的语法：
HTML标签的分类：双标签、单标签 双标签：<tag 属性1='属性值1' 属性2='属性值2'></tag> 单标签：<tag 属性1='属性值1' 属性2='属性值2'/> tag泛指所有标签的名称
编辑html标签的注意事项：
1 必须要符合基本语法
2 必须要定义文档类型 <!DOCTYPE html>:告诉浏览器这是一个html文档，方便浏览器渲染html document：文档 type：类型
3 必须要定义文档的字符编码 gb123:中文简体编码 gbk：中文编码 utf-8：国际编码 <meta http-equiv='content-type' content='text/html;charset=utf-8'/> 把content关联到http头部，告诉浏览器准备接受一个html文档，并以utf-8的字符编码来进行解析 <meta name='description' content='描述信息'/> <meta name='keywords' content='关键字'/> 方便浏览器的搜索引擎搜索相关网站 meta标签要放在head标签里面
4 文档类型编码必须和网页字符编码一致，如果用记事本，另存为设置编码
5 必须要符合代码风格---层层缩进
6 所有标签都必须为英文小写，属性与属性之间用一个空格分开，属性与属性值用等号连接，属性值用英文的单/双引号包住
---------------------------------------------------------------
1 <body></body>标签 body标签的常用属性： text='颜色' 颜色的表示方法： a 英文单词：(三原色---rgb）r:red g:green b:blue yellow pink white black.... b 十六进制： red:#ff0000 green:#00ff00 blue:#0000ff bgcolor='颜色'---表示body标签的背景色 background='图片路径'---表示背景图片 图片：.jpg .png(透明图片) .gif(动态图)。。。 路径--- 绝对路径：相对于磁盘的路径，物理路径 相对路径：在同一文件夹下面html文档找图片的位置 同级关系：直接引用文件名 上一级关系：../图片名 下一级关系：文件夹名/图片名 ---------------------------------------------------------------
2 文本格式标签
<br/>:换行标签 特殊字符标签： ---空格 <---< >---> "---" ©---版权号 电脑的单位： 基本单位：字节（b） 一个字符占一个字节，一个汉字占两个字节 最小单位：位（bit） 1b=8bit; lkb(千字节)=1024b 1M(兆)=1024kb 标题标签:<hn></hn>---n:1---6 特点： a 双标签 b 字体加粗 c 自动换行 d 1-6逐级减小 段落标签：<p></p> p标签的属性： align="center/left/right":水平对齐方式 预编译标签：<pre></pre> 特点：原样输出，自动换行 水平分割线：<hr/> 属性： color="颜色" size="粗细" width="宽度" align="center/left/right" 文本居中：<center></center>
---------------------------------------------------------------
3 字符格式标签
<b></b>:字体加粗 <i></i>:文本倾斜 <u></u>:下划线 <s></s>:删除线 <sub></sub>:下标 <sup></sup>:上标 <small></small>:字体变小 <font></font>:字体标签 属性： size="12px" color="颜色" face="字体" 所有的字符格式标签都不换行，并且都是双标签 所有的字符格式标签最好都放在文本格式标签里面 <img/>:图片标签 属性： src='路径' width="50px/50%" height="50px/50%" border="2px" title="提示信息"---当鼠标放上去的时候，就显示title所对应的属性值 alt="提示信息"---当图片在浏览器上显示不出来的时候，就会显示alt所对应的属性值 HTML注释：<!--注释的内容--> a 屏蔽掉HTML代码（不在浏览器中显示） b 标注注释
---------------------------------------------------------------
表格标签：
<table> <tr> <td>内容</td> </tr> </table> tr:代表的是表格的行标签 td:代表的是表格的列标签 table的属性： border="2px":边框粗细 bordercolor="颜色"：表框颜色 width="500px":表格的宽度 height="500px":表格的高度 bgcolor="颜色":表格的背景颜色 background="路径":表格的背景图 align="left/right/center":表格水平对齐方式 cellspacing="5px":单元格与单元格之间的间距 cellpadding="5px"：内容与单元格边框的距离 tr的属性： height:行的高度 bgcolor="颜色":行的背景颜色 background="路径":行的背景图 align="left/right/center":当前行的水平对齐方式 valign="top/middle/bottom":垂直方向对齐方式 td的属性： width:单元格的宽度 height:单元格的高度 bgcolor="颜色":单元格的背景颜色 align="left/right/center":单元格的水平对齐方式 valign="top/middle/bottom":单元格的垂直方向对齐方式 rowspan="5":合并行 colspan="5":合并列 <table> <thead><tr><th></th></tr></thead> <tbody><tr><td></td></tr><tbody> </table> thead:表格表头 th:文字自动加粗，文字自动居中 如果没有表头的话： <table> <tr><td>内容</td></tr> </table>
---------------------------------------------------------------
5 列表标签
(1) 有序列表 <ol><li></li></ol> ol标签的属性： type="1/a/A/i/I",默认为数字排序 start="10",表示从第十项开始，并且只能是数字 (2)无序列表 <ul><li></li></ul> ul标签的属性: type="square(方块)/disc(实心圆)/circle(空心圆)"，默认为实心圆 (3)语义列表 <dl> <dt>标题部分</dt> <dd>内容</dd> </dl> ---------------------------------------------------------------
6 超链接标签(a标签)
<a href="http://www.baidu.com">百度一下</a> a标签的属性： href="路径" http:超文本传输协议，是客户端和服务端请求和应答的标准 http/https---https加密的 www:world wide web(万维网、环球网)，简称web w3c:万维网联盟 w3school:万维网联盟的中国社区 万维网联盟的创始人：蒂姆.伯纳斯.李（互联网之父） a、外部链接： <a href="http://www.baidu.com">百度一下</a> b、内部链接： <a href="项目的相对路径">百度一下</a> //跳转到本地项目的某个页面 c、建立锚点：通过锚点可以找到相对标签的位置 <a href="#pig">找猪头</a> <p id="pig">猪头</p> //pig叫锚点值(hash值)，锚点值必须要与你要找的标签的id名要一致 <a href="相对路径#pig" target="_blank">找猪头2</a> //可以找到本地项目的某个页面的标签 d、通过href可以做功能性链接：邮箱、qq链接 <a href="mailto:hehedaWebMail@nbsp.com">站长邮箱</a> target="_self/_blank" _self:在自身窗口打开 _blank：在新窗口打开
