html总结
二、html标签
1 html 超文本标记语言
标签（标记）：由英文单词或英文单词首字母缩写
<html> </html> 成对出现，双标签
2 head 网页的头部信息
3 body 网页的主体内容
4 title 网页的标题
5 meta 网页的元信息
<meta /> 单标签
*标签的关系：（1）父子关系（包含关系） （2）兄弟关系（并列关系）
6 div 盒子（容器）
<div></div> 双标签
特性（1）宽度：100% （2）高度：自适应（默认高度是零） (3) 独占一行
*当div设为浮动后，宽度由100%会变为自适应
Ctrl+shift+j 卷起标签 双击---展开标签
7 style 样式表盒子（样式）
8 img 前景图
<img src=”图片的路径” /> 单标签
title=”图片的标题” alt=”图片未找到提示信息”
9 h系列标签 （标题）
<h1></h1>---<h6></h6> 级别由高到底
特性:具有div的所有特性，自带粗体、字体大小、自带间距
使用：h1 在一个网页中只能使用一次;
H2-h6 要能体现网页的内容结构
快捷键：ctrl+n(1---6)
10 p 段落标签
<p>段落文本</p>
特性：具有div的所有特征，自带间距
快捷键：ctrl+shift+p
11 br 换行标签 <br /> 单标签
12 ul 无序列表
li 列表项
<ul>
<li>文本</li>
<li>文本</li>
</ul>
ul 具有div的所有特性，自带间距，自带左填充，li具有div的全部特性
13 span 与其他元素同行，宽度自适应，一段文字中局部文字进行特殊样式设置
14 a 超链接
<a href=”链接网址”>文字或图片</a>
特点（1）自带蓝色、下划线 （2）访问过后变成紫色 （3）使用#作为网址占位符，#代表当前页面.
补充：如果需要扩大a的可点击区域范围，a要转块，增大可点击区域范围
* 标签的类型
1 块级标签
（1）独占一行 （宽度100%）
（2）具有盒模型的基本特征（width /height，margin/padding，border）；
（3）div 、h1-h6、p、ul li
2 行级标签
（1）不独立成行，水平显示（宽度自适应）；
（2）具有盒模型的部分特征（width/height没有，留白只有横向没有纵向，border保留）
（3）img 、a 、span
备注：Img 不属于容器，img可以设置宽和高
15 form 表单（表单控件的容器）
16 input 输入文本
<input type=”text” name=”username” />
Type=”text” 普通文本框 value=”默认值”
Type=”password” 密码文本框
Type=”radio” 单选按钮组 checked=”checked”
Type=”checkbox” 多选按钮组 checked=”checked”
Type=”submit” 提交按钮
Type=”reset” 重置按钮
17 select 下拉列表
option 下拉选项 selected=”selected”
18 textarea 文本域 （多行文本）
19 label 表单标注（双标签）---- 单选、多选按钮组扩大点击范围
三、css 样式 （层叠样式表）
1、内部样式
在head标签内部，在</head>之前，应用
<style type=”text/css”>
选择器名{
Height:210px;
}
</style>
2 外部样式
在head内部</head>之前应用
<link href=”css文件路径” type=”text/css” rel=”stylesheet” />
内部样式转为外部样式
（1）新建css文件，保存在网站的css文件夹中;
（2）将<style></style>中的全部内容剪切到css文件中，并且删除style标签
（3）图片路径进行更新
（4）关联css文件
a) <link href=”css文件路径” type=”text/css” rel=”stylesheet” />
b) 通过dw的css面板中的“附加样式表”按钮链接样式文件
四、选择器
1、标签选择器 标签名 div
2、id选择器 （唯一性应用的选择器）
标签中 ： <标签名 id=”id名称”></标签名>
样式中：#id名称{
样式名：样式值;
}
建议：一级区块，一般使用id选择器
3、class选择器（多次运用选择器）
标签中：<标签名 class=”class名”></标签名>
样式中：.class名{
样式名:样式值;
}
建议：二级以及二级以上的盒子，一般使用class选择器
*选择器的命名规则：
(1) 必须以英文字母开头，只能使用英文、数字和中横线与下划线（- _）;
(2) 不能使用除（- _）之外的其他特殊符号，例如空格等。
(3) 选择器的命名一定要由含义 （英文单词、汉语拼音）
4、群组选择器
选择器1,选择器2,选择器3{ 样式 }
5 通配符选择器 （对于页面中的所有标签起作用）
*{margin:0; padding:0 ;}
6 后代选择器
选择器A 选择器B{ 样式 }
选择器A 是选择器B的父级（B在A的区域范围内）
* 选择器的优先级
Id选择器 100
Class选择器 10
标签选择器 1
不同的选择器对同一个盒子进行样式设置，如果有相同的样式被赋予不同的值，优先级高的选择器样式生效
7 伪类选择器
a:link { 链接文字默认的样式 }
a:visited{ 链接被访问过后的样式 }
a:hover { 鼠标悬停到链接时的样式 }
a:active { 当鼠标按住时候的样式 }
伪类的顺序：L-V-H-A （lv-哈）
五、样式属性
1 height 高度
2 width 宽度
3 float 浮动（实现区块的水平布局）
值：Left 左浮动 right 右浮动
浮动的特性：
（1）区块浮动后就不再占位，浮动元素组父级盒一般要设置高度；
（2）要做水平布局的每个盒子必须都设置浮动；
（3）浮动元素组盒子的宽度之和不能大于父级盒的宽度，否则会换行
4 margin 盒外间距
margin:0 auto; 实现盒子的居中对齐（盒子必须设置宽度）
margin:40px; 一个值，四个方向都是40px
margin-left 左间距 | margin-right 右间距 | margin-top 上间距 | margin-bottom 下间距
margin:（2个值）上下 左右
margin:（3个值）上 左右 下
margin:（4个值）上 右 下 左
5 背景图片
background-image:url(‘图片的路径’);
说明：背景图片会在整个区块范围内水平和垂直方向重复平铺，会铺满整个区块范围;
（3）前景图可以被搜索引擎搜索到，背景图不可以;
（4）前景图是网页的内容，背景属于美化装饰
Background-repeat 背景图的平铺方式（默认是repeat 水平与垂直方向都平铺）
（1）no-repeat 不重复平铺
（2）repeat-x 水平方向平铺
（3）repeat-y 垂直方向平铺
Background-position 背景图的定位
Background-position: x y
x---横向的位置 left 左 | center 居中 | right 右
y---垂直方向的位置 top 上 | center 居中 | bottom 低
6 list-style:none 取消无序列表的列表符
ul { list-style:none }
7 padding 盒内填充
Padding:50px 四周都产生50px内填充
Padding-left 左填充| padding-right 右填充 | padding-top 上填充 | padding-botton 下填充
如果margin 和padding都可以实现，优先使用padding，有背景的盒子只能使用margin
注意：对于有固定宽度或高度（设置有width和height）的盒子，如果设置padding值，为了保证盒子总尺寸不变，需要在原尺寸上减去对应的padding值
8 text-align 文本对其方式
Left 左对齐 center 居中 right 右对齐
【补充】居中方式
（1） 盒子居中 margin:0 auto;
（2） 背景图片 background-position:center center;
（3） 文字或前景图片 text-align:center
9 line-height 文字行高
文字设置行高后，文本会在行高范围内垂直居中
10 border 边框
Border : 1px red solid 1px 边框宽度 | red 边框颜色 |
solid 线型 ：solid 实线 | dashed 虚线 | dotted 点线 | double 双线
border-left 左边框 | border-right 右边框|border-top 上边框 |border-bottom下边框
*盒子的总宽度=width(内容)+padding(左/右)+border(左/右)+margin(左/右)
*盒子的总高度=height(内容)+padding(上/下)+border(上/下)+margin(上/下)
11 font-family 字体
（1）多个字体使用逗号分隔；
（2）中间有空格的英文字体与中文字体加引号；
（3）一般中英文混排设置不同字体时，英文字体在前面
12 color 字体颜色
13 font-weight 字体加粗 bold 加粗 | normal 普通
14 text-transform 文本转换
Capitalize 首字母大写 | uppercase 全部大写 | lowercase 全部小写
15 font-size 字体大小 （浏览器默认字体大小16px）
16 font-style 字体倾斜 italic 倾斜 | normal 正常
17 text-decoration 文本装饰线
Underline 下划线 | line-through 删除线 | overline 上划线 | none 取消下划线
18 display 显示为（行级元素和块级元素相互转换）
Block 转换为块级元素 | inline 转换为行级元素
*导航结构的搭建
（1）ul ---- 导航整体结构的布局
（2）li --- 导航项的布局（横向布局在li上设浮动）
（3）a---- 导航文字的样式一般设在a上
* 19 background-color:rgba(r,g,b,a)
r---red g---green b---blue a---不透明度（0---1）
注意：css3 样式值，在ie8以下版本不支持
浙公网安备 33010602011771号