一:认识网页
网页中的第一行代码:<!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