文档的编辑

选择文档---->修改文档后缀名(.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/>:换行标签
特殊字符标签:
&nbsp;---空格
&lt;---<
&gt;--->
&quot;---"
&copy;---版权号

电脑的单位:
基本单位:字节(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:在新窗口打开