文档的编辑

选择文档---->修改文档后缀名（.thml）--->用浏览器打开(解释和执行HTML源代码的工具)

　　浏览器主要分类及内核

火狐（Firefor）--->GechoIE（Internet Explore）---->Trident谷歌（Chrome）--->Webkit苹果（Safari）---->Webkit欧朋（Opera）----->Presto/Blink主要用来渲染html,CSS渲染引擎，解析引擎

　　HTML文档结构

---html标签的起始标签                                  这是我们的主战场      ---html标签的结束标签

　　标签（标记）的语法：

HTML标签的分类：双标签、单标签双标签：
     单标签：
     tag泛指所有标签的名称

     编辑html标签的注意事项：

1 必须要符合基本语法 2 必须要定义文档类型      :告诉浏览器这是一个html文档，方便浏览器渲染html　　　　document：文档　　　　type：类型 3 必须要定义文档的字符编码　　gb123:中文简体编码　　gbk：中文编码　　utf-8：国际编码　　
     　　把content关联到http头部，告诉浏览器准备接受一个html文档，并以utf-8的字符编码来进行解析　　
     　　
     　　方便浏览器的搜索引擎搜索相关网站　　meta标签要放在head标签里面 4 文档类型编码必须和网页字符编码一致，如果用记事本，另存为设置编码 5 必须要符合代码风格---层层缩进 6 所有标签都必须为英文小写，属性与属性之间用一个空格分开，属性与属性值用等号连接，属性值用英文的单/双引号包住

---------------------------------------------------------------

　

1 标签body标签的常用属性：text='颜色'颜色的表示方法：a 英文单词：(三原色---rgb）r:red g:green b:blueyellow pink white black....b 十六进制：red:#ff0000green:#00ff00blue:#0000ffbgcolor='颜色'---表示body标签的背景色background='图片路径'---表示背景图片图片：.jpg .png(透明图片) .gif(动态图)。。。路径---绝对路径：相对于磁盘的路径，物理路径相对路径：在同一文件夹下面html文档找图片的位置同级关系：直接引用文件名上一级关系：../图片名下一级关系：文件夹名/图片名---------------------------------------------------------------

 

2 文本格式标签

 

:换行标签特殊字符标签： ---空格<---<>--->"---"©---版权号电脑的单位：基本单位：字节（b）一个字符占一个字节，一个汉字占两个字节最小单位：位（bit）1b=8bit;lkb(千字节)=1024b1M(兆)=1024kb标题标签:
     ---n:1---6特点：a 双标签b 字体加粗c 自动换行d 1-6逐级减小段落标签：
p标签的属性：align="center/left/right":水平对齐方式预编译标签：
特点：原样输出，自动换行水平分割线：
     
属性：color="颜色"size="粗细"width="宽度"align="center/left/right"文本居中：
     

 

 

 

---------------------------------------------------------------

3 字符格式标签

:字体加粗:文本倾斜:下划线:删除线:下标:上标:字体变小:字体标签属性：size="12px"color="颜色"face="字体"所有的字符格式标签都不换行，并且都是双标签所有的字符格式标签最好都放在文本格式标签里面:图片标签属性：src='路径'width="50px/50%"height="50px/50%"border="2px"title="提示信息"---当鼠标放上去的时候，就显示title所对应的属性值alt="提示信息"---当图片在浏览器上显示不出来的时候，就会显示alt所对应的属性值HTML注释：
     a 屏蔽掉HTML代码（不在浏览器中显示）b 标注注释

 

---------------------------------------------------------------

 表格标签：

     
内容
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":合并列
     
thead:表格表头th:文字自动加粗，文字自动居中如果没有表头的话：
     
内容

 

---------------------------------------------------------------

5 列表标签

(1) 有序列表
     
      
     
ol标签的属性：type="1/a/A/i/I",默认为数字排序start="10",表示从第十项开始，并且只能是数字(2)无序列表
     
      
     
ul标签的属性:type="square(方块)/disc(实心圆)/circle(空心圆)"，默认为实心圆(3)语义列表
     
      
       标题部分
      
      
       内容
      
     
---------------------------------------------------------------

 

6 超链接标签(a标签)

百度一下a标签的属性：href="路径"http:超文本传输协议，是客户端和服务端请求和应答的标准http/https---https加密的www:world wide web(万维网、环球网)，简称web w3c:万维网联盟w3school:万维网联盟的中国社区万维网联盟的创始人：蒂姆.伯纳斯.李（互联网之父）a、外部链接：百度一下b、内部链接：百度一下//跳转到本地项目的某个页面c、建立锚点：通过锚点可以找到相对标签的位置找猪头
猪头
//pig叫锚点值(hash值)，锚点值必须要与你要找的标签的id名要一致找猪头2//可以找到本地项目的某个页面的标签d、通过href可以做功能性链接：邮箱、qq链接站长邮箱target="_self/_blank"_self:在自身窗口打开_blank：在新窗口打开