前端标签和属性整理

HTML标签整理

标签

标签	用途
h1~h6	标题标签
p	段落标签
font	字体标签
span	定义文档中的节
b	加粗文本
i	斜体文本
u	下划线文本
del	删除线文本
ul -> li	无序列表
ol -> li	有序列表
dl -> dt ->li	自定义列表
details(summary&ul(li))	可展开收缩列表
hr	分割线
br	换行
a	超链接
iframe	定义内联框架
img	图片
audio	音频
video	视频
svg	矢量图
table	定义表格
tbody	定义表格中的主体内容
td	定义表格中的单元
tr	定义表格中的行
th	定义表格中的表头单元格
thead	定义表格中的表头内容
tfoot	定义表格中的表注内容（脚注）

属性

属性	作用
id	用于表示元素的唯一性（一个网页中元素的id不能重复）
class	用于对元素进行归类（一般用于css进行样式控制时使用，可以多个元素共享）
title	用于对元素进行浮动提示（表现为跟随鼠标的气泡提示）
style	用于对元素进行样式控制
data	HTML5新增属性，用于通过标签缓存数据
hidden	HTML5新增属性，用于设置元素是否隐藏
align	标题的显示位置(对齐方式)，包含三个取值：left(默认)、center 、right

无序列表

结构

 <ul>
     <li>li>
     <li>li>
     ...
ul>

ul表示无序列表结构，内部的li表示列表项

ul标签中包含的type属性表示列表样式,取值如下：

• disc:实心圆点
• circle:空心圆点
• square:实心矩形

有序列表

结构

 

     <li>li>
     <li>li>
     ...
ol>

ul表示有序列表结构，内部的li表示列表项

ol标签中包含的type属性表示列表样式，有如下取值：

• 1:表示以数字1开始 (默认)
• A：表示按照大写字母表A开始
• a：表示按照小写字符表a开始
• I：以罗马字符I开始
• i：以小写罗马字符i开始

自定义列表

<dl>
    <dt>dt>
        <dd>dd>
        <dd>dd>
    <dt>dt>
        <dd>dd>
        <dd>dd>
dl>

可展开收缩的列表（HTML5新增）

<details>
    
    <summary>Java面向对象summary>
    
    <ul>
        <li>类li>
        <li>对象li>
        <li>构造器li>
        <li>封装li>
        <li>继承li>
        <li>多态li>
    ul>
details>

hr

• width:设置分割线长度

• align:设置分割线的位置（三个取值：left,center(默认),right）

• size:设置分割线粗细

• color:设置分割线颜色

超链接

a标签中常见属性主要包含:

• href:用于设置需要跳转的目标位置，可以以下形式呈现
• 网页地址
• 资源文件地址
• 邮箱地址
• js脚本
• 页面内的锚地址（#id）
• target:用于设置跳转方式以及跳转目标
  • _blank:在新页面中打开链接而不是替换当前页面
  • _self(默认):替换当前页面
  • _parent:在父页面中打开链接（常见与框架结构页面）
  • _top:在当前页面所在的顶层页面打开（多用于多层框架结构嵌套页面）
  • 除了以上预定义的四个固定取值之外，还可以自定义target,参见iframe

iframe标签

结构

<ul>
    <li><a href="http://www.baidu.com" target="content">跳转到百度a>li>
    <li><a href="http://www.taobao.com" target="content">跳转到淘宝a>li>
    <li><a href="http://www.12306.cn" target="content">跳转到12306a>li>
    
ul>
    超链接a标签，属性target 常用值_blank 在新的窗口打开，_parent/_self 在当前窗口打开
    当target值为iframe的name属性值时，绑定页面显示。即超链接网页内容显示到指定的iframe区域
<iframe src="http://www.ruandy.com" name="content" frameborder="0" width="100%">iframe>

以上的链接跳转目标为iframe

iframe常见属性：

• src:用于在iframe中呈现的资源
• frameborder:边框粗细（px）
• scrolling：是否出现滚动条，包含三个取值yes,no,auto
• width:设置框架的宽度
• height:设置框架的高度（在父容器没有设置具体高度值(绝对单位)时，不能使用100%）

图片标签

<img src="./img/p7.jpg" width="300px" title="来玩啊" border="10px" alt="图片" vspace="20px">

图片标签的相关属性：

• src：用于指定图片的地址（可以是图片文件地址，资源地址，base64值）
• alt：图片标签的一个候补属性，当图片无法正常显示的时候，使用该属性的文本替代
• width/height：用于设置图片的大小（注意：若需要保持横纵比，不建议同时使用，使用其中一个即可）
• title 图片描述标题（鼠标悬浮在图片上时显示内容）
• border：用于设置图片的边框
• vspace：设置图片之间的垂直间距
• hspace：设置图片之间的水平间距

资料连接：图片属性src，超链接href

audio标签

<audio src="./music/m1.mp3" autoplay controls loop="-1">对不起，您的浏览器太low了，请升级audio>

• 如果浏览器不支持该标签，则会显示标签之间的文本
• 关于audio的属性介绍
• src：设置播放源（可以是本地资源也可以是远程资源）
• autoplay：自动播放（目前的浏览器都禁止自动播放，安全问题）
• controls：显示播放器自带的控制界面
• loop：设置循环 值为loop

表格

使用table标签

table标签通常会结合一些其子标签使用：

• caption（非必须）：标题，用于设置表格标题

• colgroup（非必须）：对表格中列进行设置

• thead（非必须）：表格头部区域，是一个区块设定，通常用于显示表头

• tbody（非必须）：表格的主体部分，是一个区块设定，通常用于显示表格数据

• tfoot（非必须）：表格的底部，是一个区块

• tr（必须）：表格的行，表示表格中的一行

• td/th（必须）：表格行中的列

  常用表格标签：table，tr，td

单元格

th和td区别：th一般用于表示表格表头单元格，内容一般在单元格中居中，文本加粗显示;td表示普通的单元格，内容默认居左显示（可以通过align属性设置单元格的文本内容按指定方式对其），文本不会加粗

表格标签相关属性说明：

• width/height:设置表格宽高（可以用于单元格）
• align:设置表格的位置（left,center,right）
• border:设置表格边框的线条宽度
• cellspacing:设置单元格之间的间距
• cellpadding:设置单元格内部内容和单元格边框距离
• bgcolor:设置表格背景颜色
• rowspan：合并行
• colspan：合并列

<table border="1" cellspacing="0" cellpadding="10px" width="600px">
    <caption>学生信息表caption>
    <tr>
        <td>学号td>
        <td>姓名td>
        <td>年龄td>
        <td>专业td>
        <td>学院td>
    tr>
    <tr>
        <td>1001td>
        <td>张三td>
        <td>18td>
        <td>挖掘机专修td>
        <td rowspan="2">技能学院td>
    tr>
    <tr>
        <td>1002td>
        <td>李四td>
        <td>20td>
        <td>美容美发td>
    tr>
    <tr>
        <td>1003td>
        <td>王五td>
        <td>19td>
        <td>计算机软件td>
         
        <td rowspan="2">计算机学院td>
    tr>
    <tr>
        <td>1004td>
        <td>赵六td>
        <td>20td>
        <td>网络工程td>
    tr>
    <tr>
        <td>合计td>
        
        <td colspan="4" align="right">4人td>
    tr>
table>

表单

form>input，textarea，select>option，button

表单标签分为以下几种类别

• 输入类
  • 输入框（input）
  • 文本域（textarea）
• 选择类
  • 单选（radio:属于input，input的type）
  • 复选（checkbox:属于input，input的type）
  • 下拉列表（select）
  • 文件选择 input 的type
• 交互类
  • 按钮（button标签）：提交按钮，重置按钮，普通按钮

输入类

输入类的标签主要包含以下：

• 文本框

• 密码框

• HTML5新增输入框input

  • 数字输入框

  • 手机号输入框

  • 邮箱输入框

    通过设置input 的type

文本输入框

<input type="text">

input的属性：

• type：用于表示输入组件的类型
• text:文本
• password:密码
• number:数字输入框
• radio:单选
• checkbox:复选
• tel:手机号（H5）
• email:邮箱（H5）
• date:日期（H5）
• file:文件选择
• hidden:隐藏域
• button:普通按钮
• reset：重置按钮
• submit：提交按钮
• name:设置控件的名称（服务端可以过属性值获取到控件的value）
• value:设置控件的数据值
• placeholder:输入框水印提示
• readonly:设置input为只读（不可编辑）
• disabled:设置控件失效（无法与服务端交互）

CSS整理

外部样式

<link rel="stylesheet" href="css/css01.css">

在style标签中使用@import指令导入*.css文件（导入式）

<style>
        @import "css/css01.css";
    style>

三种引入方式：优先级，内嵌样式>内部样式>外部样式，就近原则

1、常用选择器

• 元素选择器（标签选择器）
• 关系选择器
• 属性选择器
• 伪类选择器

1.1、元素选择器

• 通配选择器（*）
• 标签选择器（E）
• ID选择器（#id）
• 类选择器（.class）

1.2、关系选择器（层次选择）

1.2.1. 后代选择器（E F）

后代选择器指的是选中指定元素下的所有子元素（多级子元素）

#app p {
    color: red;
}

1.2.2. 子选择器（E>F）

子选择器类似后代选择器但是只选中一级子元素

#app > p {
    color: red;
}

后代选择和子选择选择的是元素内部的子元素（嵌套关系）

1.2.2. 相邻兄弟选择器（E+F）

选中当前元素之后最近的第一个兄弟元素

h1+p{
    font-size: 30px;
}

1.2.3. 通用兄弟选择器（E~F）

选中当前元素之后的所有指定兄弟元素

h1~p{
    font-size: 30px;
}

相邻选择器选中的是同一级别的元素

1.3、属性选择器（E[attr]）

1. 选中包含指定属性的元素

   /* 选中input元素中有name属性的元素对象 */
   input[name]{
       width: 280px;
       height: 30px;
   }
   

2. 选中指定元素中包含某个属性值的元素

   /*选中所有input元素中type="text"的元素*/
   input[type="text"]{
       border:1px solid #ff6700;
   }
   

3. 选中指定元素中属性名称以某个字符串开头的元素

   /*找到所有li中class名称以a开头元素*/
   li[class^="a"]{
       color:red;
   }
   

4. 选中指定元素中属性名称以某个字符串结尾的元素

   /*找到所有a中href属性以.com结尾元素*/
   a[href$=".com"]{
       color:red;
   }
   

5. 选中指定元素中属性名包含了某个字符串的元素

   /*找到所有li元素中class名称包含a的元素*/
   li[class*="a"]{
       font-size: 2em;
   }
   

1.4、伪类选择器

选择器	解释
E:hover	当鼠标悬停到元素上时选中
E:active	当元素被激活时（点击）选中
E:visited	当元素被访问过之后选中（只在a标签中生效）
E:focus	当元素被聚焦时触发（主要针对表单元素）

/*连接已访问过的效果*/
a:visited{
    color:#00f;
}
/*悬停到链接上时的效果*/
a:hover{
    color:#0f0;
    font-size: 2em;
}
/*当连接被激活时的效果*/
a:active{
    color:red;
    text-decoration: underline;
}

input:focus{
    outline: none; /*去除浏览器自带可交互控件效果*/
    border:1px solid #f00; /*设置边框*/
    box-shadow: 0 0 5px rgb(255,0,0); /*设置元素的盒子阴影*/
}

选择器	作用
E:not(s)	选中不含有s元素的所有E元素
E:last-child	选中E元素中的最后一个元素
E:first-child	选中E元素中的第一个元素(需要确保该元素属于指定元素的第一个子元素才能被选中)
E:nth-child(n)	选中指定元素中的第n个子元素
E F:nth-of-type(n)	选中E元素中的第几个F元素，设置样式

1. E:not(s)`:选中不含有s元素的所有E元素

   /*选中body下除了a之外的所有元素*/
   body>*:not(a){
       font-size: 50px;
   }
   

2. E:last-child:选中E元素中的最后一个元素

   div p:last-child{
       font-size: 1.5em;
   }
   

3. E:first-child:选中E元素中的第一个元素(需要确保该元素属于指定元素的第一个子元素才能被选中)

   div p:first-child{
       font-size: 1.5em;
   }
   

:last-child和:first-child选择器所选中的元素必须在一个父元素下

4. E:nth-child(n):选中指定元素中的第n个子元素

   /*选中p元素中的第5个*/
   p:nth-child(5){
       border: 1px solid #f00;
   }
   
   /*选中p元素中的奇数个元素*/
   p:nth-child(2n-1){
       border: 1px solid #f00;
   }
   
   /*选中p元素中的偶数个元素*/
   p:nth-child(2n){
       background: #f00;
   }
   

5. E F:nth-of-type(n) 选中E元素第几个F元素，设置样式

 /*给.box中的第2个p标签添加背景颜色*/
.box p:nth-of-type(2){
      background-color: lightskyblue;
 }

1.5、选择器优先级

选择器优先级按照如下规则（从高到低）：

• !important:在属性值之后使用该指令此时该选择器选中的属性优先级最高

  p{color: red !important;}
  

• id选择器

• 属性选择

• class选择器

• 后代选择器(关系选择器)

• 标签选择器

• 通配选择器

2、常用属性

CSS中常用的属性非常多，主要分为以下类别：

• 尺寸宽高（属性分步为weight和height）
• 文本与字体（text和font）
• 列表（list）
• 背景与边框（background和border）

2.1. 文本与字体

2.1.1. 字体

属性名	含义	举例
font	设置文本属性	font: italic bold 36px ‘宋体’;
font-size	设置字体大小	font-size: 20px;
font-style	设置字体风格	font-style: italic;
font-weight	设置字体的粗细	font-weight: bold;
font-family	设置字体类型	font-family: ‘隶书’;

字体如果写在一行，一般遵循的顺序：字体风格，粗细，大小，类型

2.1.2 .文本

属性名	含义	举例
color	设置文本颜色	color: red;
text-align	设置原色水平对齐方式	text-align: center;
text-indent	设置首行文本缩进	text-indent: 2em;
line-height	设置文本行高	line-height: 25px;
text-decoration	设置文本装饰； · none没有样式，常用于去除超链接下划线 · underline，添加下划线	text-decoration: underline;
vertical-align	垂直对齐 · 属性值：middle，top，bottom · 例如设置图片和文本居中对齐（在图片中设置该属性）	vertical-align: middle;
text-shadow	文本阴影	text-shadow: color x轴位移 y轴位移 模糊半径;

2.1.3 背景

属性名	含义	举例
background	符合属性，设置对象的背景特性	background: red; background: url(‘image/1.jpg’) no-repeat;
background: linear-gradient(颜色渐变方向,颜色1，颜色2…);	背景颜色渐变 渐变方向：to top，to bottom，to left，to right	background: linear-gradient(to bottom,#FDFDFD,#E9E9E9,#FDFDFD); background: linear-gradient(to bottom,#FDFDFD,#E9E9E9);
background-color	设置对象的背景颜色	background-color: #f00;
background-image	设置对象的背景图像	background-image: url(“image/1.jpg”);
background-repeat	设置对象的背景图形如何铺排填充 no-repeat : 不重复 repeat-x : 水平重复 repeat-y : 垂直重复	background-repeat: no-repeat
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。 默认scroll，随页面滚动而滚动 fixed，不会随页面的滚动而滚动 local，随元素内容的滚动而滚动	background-attachment: fixed
background-position	设置对象的背景图像位置	background-position： 15px 0;

2.1.4 边框

属性名	含义	举例
border	复合属性。设置对象边框的特性	border: 1px solid red;
border-radius	设置对象使用圆角边框 左上，右上，右下，左下	border-radius: 5px; border-radius: 5px 3px; border-radius: 5px 3px 2px 1px;
box-shadow	设置对象阴影
border-width	设置对象边框宽度	border-width: 5px;
border-style	设置对象边框样式 solid，直线 dashed，虚线 dotted，点线	border-style: solid;
border-color	设置对象边框颜色	border-color: red;
border-top	其他边同 复合属性，设置对象顶边的特性。	border-top: 1px dashed blue;
border-left-width	其他边同 设置对象左边颜色	border-left-width: 2px;
border-right-style	其他边同 设置对象右边样式	border-right-style: dotted;
border-bottom-color	其他边同 设置底边颜色	border-bottom-color: gray;
border-top-left-radius	设置对象左上角圆角边框	border-top-left-radius: 5px;

2.1.5.列表

属性名	含义	举例
list-style	复合属性，设置列表项目相关内容	list-style: none;
list-style-image	设置对象的列表标记项标记的图像
list-style-position	设置作为对象的列表项标记如何个根据文本排列
list-style-type	设置对象的列表项所使用的预设标记

2.2.盒子模型和浮动

属性名	含义	举例
box-sizing	盒子规范 content-box(默认) box-sizing	box-sizing: box-sizing;
box-shadow	盒子阴影 阴影颜色，水平位移，垂直位移，模糊程度	box-shadow: gray 0 0 5px;
display	标准文档流	display: inline-block;
float	浮动 left right none	float: left;
clear	清除浮动 left（左） right（右） both（两侧）	clear: both
overflow	设置父级盒子隐藏溢出	overflow: hidden

2.2.1. 盒模型规范（box-sizing）

• content-box(默认)
• box-sizing

​ content：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

​ border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

2.2.2. display属性

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会待带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素即具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

2.2.3. float属性

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本出现的位置

2.2.4. 解决父级边框塌陷问题

四种方法：

​ 1，设置空盒子，清除两侧浮动

​ 2，设置父级盒子高度，尺寸高于任何子元素。

​ 3，设置父级盒子隐藏溢出，即overflow：hidden

​ 4，父级添加伪类

1. 浮动元素后添加空div，并清除两侧浮动

   .layer4{
       border: 1px dashed deeppink;
       float: right;
       width: 200px;
       /*clear: both;*/
   }
   .empty{
       clear: both;
   }
   
   <div class="layer4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。 本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
   div>
   
   <div class="empty">div>
   

2. 设置父级盒子高度

3. 隐藏溢出

   .layer4{
       border: 1px dashed deeppink;
       float: right;
       width: 200px;
       overflow: hidden;
   }
   

4. 父级伪类样式

   .box:after{
       content: "";
       display: block;
       clear: both;
   }
   

2.2.5. 浮动和inline-block的区别

• 浮动可以让元素排在一行，并且支持宽度和高度，可以决定排列方向。设置浮动的元素脱离文档流，会对周围元素产生影响，必须在它的父级元素添加清除浮动的样式。

• inline-block可以让元素排在一行，支持宽度和高度，代码实现方便，添加该属性的元素在标准文档流中，不需要清除浮动。但是位置方向不可控制，会解析空格，即元素中间会有间隙。而且inline-block不兼容IE6,IE7.

2.3 定位（position）

属性名	含义	举例
position	元素脱流定位 relative：相对定位 absolute：绝对定位 fixed：固定定位 static：默认定位方式，不起以哦那个定位相关属性	position: relative;
z-index	用于设置元素的层叠顺序	z-index: 2;
top	元素跟顶部元素参照元素（取决于定位方式）之间的距离	top: 500px;
bottom	元素跟底部元素参照元素（取决于定位方式）之间的距离	bottom: 50px;
left	元素跟左边元素参照元素（取决于定位方式）之间的距离	left: 50px;
right	元素跟右边元素参照元素（取决于定位方式）之间的距离	right: 50px;

2.3.1. 相对定位（relative）

相对定位使用以下属性控制：

position:relative;

使用相对定位时，元素的摆放还是遵循标准流，可以通过设置top/left/right/bottom四个属性控制元素的位置，相对定位具备如下特征：

1. 相对定位即使元素的位置发生偏移，但是仍然会占用原来的位置（相对定位并没有脱流）
2. 相对定位是以自己原来的位置为标准再进行定位操作
3. 相对定位默认会高于标准文档流一个Z轴层级，可以使用z-index调整层级

相对定位好处：

1. 使用相对定位弥补行内元素不能设置上面位置的缺点（行内元素无法使用margin-top/margin-bottom）
2. 配合绝对定位对元素进行布局，实现子绝父相

2.3.2. 绝对定位（absolute）

绝对定位使用以下属性：

position:absolute;

使用绝对定位之后，元素会直接脱流，在Z轴层级布局，同时造成父元素高度坍塌。

绝对定位特点：

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响

注意：设置绝对定位的元素，保证其父级元素定位设置。父级元素以定位，一般为position: relative;

此时子类元素以父类元素为基础进行偏移

2.3.3. 固定定位 （fixed）

固定定位即将元素固定到浏览器的某一个位置，使用属性值：

position:fixed;

使用固定定位之后：

1. 固定定位会直接导致元素脱流
2. 固定定位是以浏览器直接做为参考对元素定位，外层有任何父元素都无法组织固定定位的元素
3. 固定定位之后的元素不会随着浏览器窗口滚动而发生变化

**固定定位（fixed）和绝对定位（absolute）**区别？

1. 固定定位的默认参考是整个浏览器窗口，而绝对定位默认参考是body
2. 固定定位不会跟随浏览器窗口滚动条滚动而发生变化，绝对定位的元素会随着滚动条滚动而产生位置变化
3. 固定定位不受任何父元素影响，绝对定位的位置会受到父级元素的定位影响

定位小结：

• 相对定位的特性
  • 相对于自己的初始位置来定位
  • 元素位置发生偏移后，它原来的位置会被保留下来
  • 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
• 相对定位的使用场景
  • 相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

3、CSS动画

属性名	说明	举例
transform	复合属性，可以操控元素发生平移、旋转、缩放、倾斜等变化。	transform: translate(200px,50px) rotate(30deg);

3.1.变形（transform）

函数名	含义	举例
translate()	平移函数，基于X、Y坐标重新定位元素的位置	transform: translate(10px,10px);
scale()	缩放函数，可以使任意元素对象尺寸发生变化	transform: scale(1.2);
rotate()	旋转函数，取值是一个度数值deg	transform: skew(-30deg,15deg);
skew()	倾斜函数，取值是一个度数值deg	transform: rotate(30deg);

3.1.1. 平移函数（translate）

translate(tx,ty);

tx 和 ty分别为x轴横坐标，y轴纵坐标移动的向量长度。

以上语法可以分开写：

translateX（tx）表示只设置X轴的位移
例如：transform: translateX(100px)，相当于transform: translate(100px,0)
translateY（ty）表示只设置Y轴的位移

transform: translateY(100px) ，相当于transform: translate(0,100px)

3.1.2. 缩放函数（scale）

第一种
scale(缩放倍数sx,缩放倍数sy);
第二种
scale(缩放倍数)

缩放倍数如果是0.0~0.99为缩小，是元素变小；缩放倍数如果是大于1的任何值，能让元素放大。

3.1.3 倾斜函数（skew）

skew(ax度数, ay度数);
或者skew(度数)

注意度数单位为deg。

3.1.4 旋转（rotate）

rotate(度数a);

度数单位deg