一：认识网页
网页中的第一行代码:<!doctype html>=================作用：声明文档类型
（1）包含一对<html></html>
html标签中包含：
一对<head></head>======网页的头部标签。
head中包含了一个<meta>标签=============作用：定义编码格式
<meta charset="UTF-8">==========charset:定义的编码方式编码属性方式有：UTF-8/GB2312/BIG5`````
head中包含了一对<title>标签============作用：网页的标题标签
还能包括：
<link rel="stylesheet" href="外部样式表的路径.css文件">=======引入外部样式表
<script src="引入的是外部js文件的路径"></script>======引入外部js文件
一对<body></body>======页面的主体标签，存放所有的用户展示的数据及标签
（2）网页的基本结构
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>网页的标题</title>
</head>
<body>
</body>
</html>
（3）网页中的常识性问题
网页运行浏览器：IE，chrome(谷歌)，firefox(火狐)，safari(苹果)，opra(欧朋)
网页的保存文件格式：以.html或者.htm为后缀名的文件
网页的注释：<!--这是注释语句-->
（4）网页中的标签分类
按照单双标签分类分为两类
双标签：成对出现，有开始，有结束，双标签也叫封闭性的标签
1)超链接标签===a标签
案例：<a href="链接地址，跳转地址">文字/图片</a>
属性：href跳转链接地址属性
target打开方式属性
取值：默认值：本身打开_self
_blank;在新窗口中打开
_top;在顶部窗口打开
_parent;在父级窗口打开
name="锚点属性"===后期演示
2)加粗标签====b标签strong标签
案例:<b>加粗一</b><strong>加粗二</strong>
后者更加具有语义化====见名知意
3)倾斜标签====i标签和em标签
案例:<i>倾斜一</i><em>倾斜二</em>
后者更加具有语义化====见名知意
4)下划线标签====u标签
案例：<u>下划线效果</u>
5)删除线标签====s标签和del标签
案例：<s>倾斜一</s><del>倾斜二</del>
后者更加具有语义化====见名知意
6)角标标签======分为两个
上角标标签===sup标签
10m*10m=100m<sup>2</sup>
下角标标签===sub标签
水元素的化学方程式为：H<sub>2</sub>O
7)字体标签=====font标签
案例：<font face="字体属性">我爱北京天安门</font>
属性：face="字体属性"
size="字体大小属性"
取值范围：1-7；特点：1最小，7最大
color="字体的颜色属性"
可以取值为：颜色的单词，#，rgb
8)居中标签=====center标签
案例：<center></center>
9)段落标签=====p标签
案例：<p>文本</p>
10)空标签，行内元素标签=====span标签
案例：<span>空标签</span>
11)盒子标签======div标签
块级元素。
案例：<div>块级元素</div>
12)script标签=====引入外部js文件
案例:<script src="js路径"></script>
13)表格标签======table标签
案例：<table></table>===详解在后
14)表单标签======form标签
案例：<form></form>===详解在后
15)列表标签=====分为三种列表
有序列表，无序列表，自定义列表
有序列表：有顺序性，列表项是以数字为开始；
案例：
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门带上</li>
</ol>
属性：type="A/a/I/i/1"
列表项显示类型
start="2"
控制列表项的起始
无序列表：没有顺序性，默认是以黑色实心圆点为开始
案例：
<ul>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门带上</li>
</ul>
属性：type=""无序列表列表项显示类型
取值：默认：disc;黑色实心圆点
circle;空心圆
square;黑色实心方块
none;取消列表项
自定义列表：
案例：
<dl>
<dt></dt>
<dd></dd>
</dl>
16)预定义预排版=====pre标签
案例:<pre></pre>
17)网页中的标题标签=====hn标签
n的取值范围1-6
案例:
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
<h7>一级标题</h7>
特点：h1最大，h6最小，自动加粗，自动换行，默认占宽100%
单标签：单个出现，有开始，没有结束，单标签也叫非封闭性标签
1)图像标签======img标签
案例<img src="图片的路径">
属性：src="图像的路径"
路径：
相对路径：相对于某一个文件夹下的路径显示
案例：../image/1.png=====../作用：返回上一级
image/img/1.png
绝对路径：从某一盘符下开始的一个完成的路径
案例：C:\Program Files\Boot Camp\123.exe
http://www.baidu.com
width="图像的宽度"
height="图像的高度"
注意：如果只调整图像的一个宽或高的情况下，图像会等比例缩放
border="1px"图像的边框属性
注意：当图像带有超链接的时候，图像会带有1px黑色的实线边框，需要使用border="0"来取消
alt="这是一个汽车" 图像未正常加载情况下的提示性文字属性
占页面空间的提示文字
title="这也是一个汽车的图片" 鼠标放在元素上的提示性文字属性
不占页面空间的提示性文字
2)换行标签
<br>标签
3)input类标签
详解在表单中
4)水平线标签=====hr标签
案例：<hr>
属性：width="500px" 可以取值为px或%
align=""对齐方式属性
取值：默认值：center
左对齐：left
右对齐：right
size="30px"水平线的高度属性
noshade 取消水平线阴影属性
color="red"
（5）网页中的标签分类，按照显示方式分类,**********************面试题*****************
分为三类：
行内元素：默认横向排列，不能设置宽和高
案例：a,b,strong,i,em,s,del,u,sup,sub,span,font
块级元素：默认总向排列，能设置宽和高，默认占宽100%;
案例：div,p,h1-h6,hr,ol,ul,li,table,dl,dt,dd,form
行内块级元素:默认横向排列，能够设置宽和高
案例：img，input
（6）网页文件的命名
遵循，驼峰命名法；
遵循，以字母，数字，下划线配合使用，不能以数字开头
index(首页) admin(用户,首页) login(登陆) shopping(购物)
（7）HTML代表的含义
html是一种超文本标记语言
是hyper text markup language
二、表格的相关介绍
（1）表格定义：是由行和列组成的展示和存储数据的元素
（2）组成表格的组成元素：行，列，单元格；最基本的元素：单元格
（3）表格标签=====table标签====双
（4）表格中的行标签<tr>=======是table row的缩写
（5）表格中的列标签<td>=======是table data的缩写
（6）表格的基本结构
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
（7）表格的相关属性=====需要放在table开始标签中
1)边框属性：border="1"
2)宽度属性：width="800px"px单位可以省略
宽度的取值可以为%
3)高度属性：height="800px"px单位可以省略
4)对齐方式属性：align="left"
取值:默认值：left
居中对齐：center
右对齐：right
align="center"相当于center标签能够将表格居中
5)背景颜色：bgcolor="red"
6)背景图片：background="图片的路径"
7)单元格与内容之间的间距（内边距，内间距）
属性：cellpadding="20px"
8)单元格与单元格之间的间距
属性：cellspacing="20px"
9)细线边框属性(边框合并)=====CSS属性需要使用style行内样式
style="border-collapse:collapse"
10)表格内部横纵方向边框显示
属性：rules
取值：rows=====只显示横向
cols=====只显示纵向
11)表格的边框线方向显示
属性：frame
取值：above(顶部) below(底部) hsides(垂直方向上的边框)
lhs(左侧的边框) Rhs(右侧的边框) vsides(水平方向上的边框)
box(盒子，整个方向) border(同上)
12)表格中的文本，默认是左侧垂直居中对齐
（8）tr的相关属性=======需要将属性，放在tr的开始标签
1)高度属性：height="100px"
2)背景颜色：背景颜色：bgcolor="red"
3)背景图片：background="图片的路径"
4)水平对齐方式:align="left/right/center" 默认值left
5)垂直对齐方式：valign="top/bottom/middle"
（9）td的相关属性=======需要将属性，放在td的开始标签
1)宽度属性：width="800px"px单位可以省略
宽度的取值可以为%
单元格的宽度会影响一列
2)高度属性：height="800px"单位可以省略
宽度的取值可以为%
单元的高度影响一正行
3)背景颜色：背景颜色：bgcolor="red"
4)背景图片：background="图片的路径"
5)水平对齐方式:align="left/right/center" 默认值left
6)垂直对齐方式：valign="top/bottom/middle"
（10）表格的标题标签====caption标签
位置：位于：table标签内部，第一个tr出现的位置之前
注意：使用align属性调整，表格标题的位置align="top/bottom"谷歌浏览器和火狐浏览器
（11）表格的标题行与标题列======th标签
th标签替换的是td
特点：具有加粗和居中效果
（12）表格的分组标签
表格的头部：<thead></thead>
表格的主体：<tbody></tbody>
表格的尾部：<tfoot></tfoot>
（13）表格的复杂属性：单元格的合并
横向：水平方向跨列，colspan
纵向：垂直方向跨行，rowspan
