HTML

常用标签

标题标签

<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>

段落标签

<p>段落文本</p>

普通文本标签：

<b>加粗标签</b> <strong>强调标签，效果同b标签</strong> <i>斜体标签</i> <u>删除线标签</u> <span>行分区标签，用于对特殊文本特殊处理</span> <label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>

换行标签：浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

<br>

水平线标签，在页面中插入一条水平分割线

<hr>

字符实体： 某些情况下，浏览器会将一些特殊字符按照 HTML 的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写。 例：

使用 &lt; 在页面中呈现 "<" 使用 &gt; 在页面中呈现 ">" 使用 &nbsp; 在页面中呈现一个空格 使用 &copy; 在页面中呈现版权符号"©" 使用 &yen; 在页面中呈现人民币符号"￥"

容器标签 常用于页面结构划分，结合CSS实现网页布局

<div id="top">页面顶部区域</div> <div id="main">页面主体区域</div> <div id="bottom">页面底部区域</div>

图片标签：

<img src="" width="" height="" title="" alt=""> 1. 属性 src 用于给出图片的URL，必填。 2. 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。 3. 属性 title 用于设置图片标题，鼠标悬停在图片上时显示 4. 属性 alt 用于设置图片加载失败后的提示文本

超链接标签：

<a href="http://www.taobao.com" target="_self">淘宝</a> <a href="http://www.baidu.com" target="_blank">百度</a> 1. 属性 href 用于设置目标文件的URL，必填。 2. 属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank") 3. 属性href也可以指向某个id号属性的元素

无序列表：

list item 列表项list item 列表项list item 列表项

有序列表：

list item 列表项list item 列表项list item 列表项

表格标签：

<!-- 创建表格标签 --> <table> <!-- 创建行标签 --> <tr> <!-- 行中创建单元格以显示数据 --> <td>姓名</td> <td>年龄</td> <td>班级</td> </tr> <tr> <td>张三</td> <td>20</td> <td>一(1)班</td> </tr> </table> 姓名年龄班级张三20一(1)班 表单标签： <form action="设置数据的提交地址" method="设置数据的提交方式，默认为get方式，可以设置为post" onsubmit="设置表单数据提交时的触发事件的执行函数（事件绑定中详细介绍）"> <!--此处为表单控件--> </form>

表单控件使用（重点） 表单控件用于采集用户信息，可设置以下标签属性

属性名取值type设置控件类型name设置控件名称，最终与值一起发送给服务器value设置控件的值placeholder设置输入框中的提示文本maxlength设置输入框中可输入的最大字符数checked设置单选按钮或复选按钮的默认选中selected设置下拉菜单的默认选中

CSS样式使用

行内样式：

借助于style标签属性，为当前的元素添加样式声明

<标签名 style="样式声明"> style="属性:值;属性:值;" - 设置文本颜色 color:red; - 设置背景颜色 background-color:green; - 设置字体大小 font-size:32px;

内嵌样式

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式 示例:

<style> 选择器{ 属性:值; 属性:值; } </style>

选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式 示例：

/*标签选择器 : 根据标签名匹配所有的该元素*/ p{ color:red; }

外链样式表

创建外部样式表文件 后缀使用.css 在HTML文件中使用标签引入外部样式表

<link rel="stylesheet" href="URL" type="text/css">

样式优先级

行内样式的优先级最高文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上浏览器默认样式和继承样式优先级较低

CSS 选择器

1、 标签选择器

标签名{ 属性:值; }

2、id选择器

#id属性值{ }

3、class选择器/类选择器

.class属性值 { }

4、后代选择器

selector1 selector2{ }

5、子代选择器

selector1>selector2{ }

6、伪类选择器

:link 超链接访问前的状态 :visited 超链接访问后的状态 :hover 鼠标滑过时的状态 :active 鼠标点按不抬起时的状态(激活) :focus 焦点状态(文本框被编辑时就称为获取焦点) a:link{ } a:visited{ } .c1:hover{ } 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写 :link :visited :hover :active

块元素

独占一行,不与元素共行;可以手动设置宽高,默认宽度与与父元素保持一致 例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)

行内元素

可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定 例 : span label b strong i s u sub sup a

盒子模型

边框 border:width style color; style: solid :实线边框 dotted:点线边框 dashed:虚线边框 double:双线边框 border-top:设置上边框 border-bottom:设置下边框 border-left:设置左边框 border-right:设置右边框 网页三角标制作 元素设置宽高为0统一设置四个方向透明边框调整某个方向边框可见色 圆角边框 属性：border-radius 指定圆角半径取值：像素值或百分比取值规律： 一个值 表示统一设置上右下左 四个值 表示分别设置上右下左 两个值 表示分别设置上下 左右 三个值 表示分别设置上右下，左右保持一致

盒阴影

属性：box-shadow取值：h-shadow v-shadow blur spread color;使用：不管是浏览器窗口还是元素自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向 h-shadow 取像素值，阴影的水平偏移距离 v-shadow 取像素值，阴影的垂直偏移距离 blur 取像素值，表示阴影的模糊程度，值越大越模糊 spread 选填，取像素值，阴影的尺寸 color 设置阴影颜色,默认为黑色

内边距

属性：padding作用：调整元素内容框与边框之间的距离取值：单位是 px 或百分比，但不允许使用负值 20px; 一个值表示统一设置上右下左 20px 30px; 两个值表示分别设置(上下) (左右) 20px 30px 40px; 三个值表示分别设置上右下，左右保持一致 20px 30px 40px 50px; 表示分别设置上右下左 单方向内边距,只能取一个值： padding-top padding-right padding-bottom padding-left

外边距

属性：margin

作用：调整元素与元素之间的距离

特殊： 1）margin:0; 取消默认外边距 2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中 3）margin:-10px;元素位置的微调 4）margin:宽度；宽度=父元素的宽度，实现元素在父元素范围内垂直居中

单方向外边距：只取一个值

margin-top margin-right margin-bottom margin-left

页面布局

浮动布局

主要用于设置块元素的水平排列

float:left/right clear:left/right/both - 元素设置浮动会从原始位置脱流，向左或向右依次停靠在其他元素边缘，在文档中不再占位 - 元素设置浮动，就具有块元素的特征，可以手动调整宽高 - "文字环绕"：浮动元素遮挡正常元素的位置，无法遮挡正常内容的显示，内容围绕在浮动元素周围显示

常见问题

子元素全部设置浮动，导致父元素高度为0，影响父元素背景色和背景图片展示,影响页面布局

解决方案：

对于内容固定的元素，如果子元素都浮动，可以给父元素固定高度(例:导航栏)在父元素的末尾添加空的块元素。设置 clear:both; 清除浮动为父元素设置 overflow:hidden; 解决高度为0

定位布局

position 可取:relative（相对定位) 元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流 absolute（绝对定位) 1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移 2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高 fixed（固定定位） 1. 参照窗口进行定位,不跟随网页滚动而滚动 2. 脱离文档流 postion:relative/absolute/fixed 偏移属性 top 距参照物的顶部 right 距参照物的右侧 bottom 距参照物的底部 left 距参照物的左侧

堆叠次序

元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：

属性 : z-index取值 : 无单位的数值,数值越大,越靠上堆叠： 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上

背景属性

1、背景颜色

background-color: red;

设置背景图片

background-image : url("路径"); 设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号

设置背景图片的重复方式

默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：

如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见 background-repeat:repeat/repeat-x/repeat-y/no-repeat 取值 ： repeat 默认值，沿水平和垂直方向重复平铺 repeat-x 沿X轴重复平铺 repeat-y 沿Y轴重复平铺 no-repeat 不重复平铺

设置背景图片的显示位置

默认显示在元素左上角 background-position:x y;

取值方式 ：

像素值 设置背景图片的在元素坐标系中的起点坐标方位值 水平：left/center/right 垂直：top/center/bottom 注：如果只设置某一个方向的方位值，另外一个方向默认为center

设置背景图片的尺寸

background-size:width height; 取值方式： 1. 像素值 1. 500px 500px; 同时指定宽高 2. 500px; 指定宽度，高度自适应 2. 百分比 百分比参照元素的尺寸进行计算 1. 50% 50%; 根据元素宽高,分别计算图片的宽高 2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放

文本属性

设置字体大小 font-size:20px; 设置字体粗细程度 font-weight:normal; 1. normal（默认值）等价于400 2. bold (加粗) 等价于700 设置斜体 font-style:italic; 设置字体名称 font-family:Arial,"黑体","宋体"; 取值 : 1. 可以指定多个字体名称作为备选字体，使用逗号隔开 2. 如果字体名称为中文，或者名称中出现了空格，必须使用引号 例 : font-family:Arial; font-family:"黑体","Microsoft YaHei",Arial; 文本内容的水平对齐方式 text-align:center; left(默认值) 左对齐 center 居中对齐 right 右对齐 行高 line-height:30px;

使用 : 文本在当前行中永远垂直居中，可以借助行高调整文本在元素中的垂直显示位置 line-height = height 设置一行文本在元素中垂直居中 line-height > height 文本下移显示 line-height < height 文本靠上显示 特殊 : line-height可以采用无单位的数值，代表当前字体大小的倍数,以此计算行高