前端标签和属性整理

HTML标签整理

标签

属性

无序列表

结构

 <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、伪类选择器

/*连接已访问过的效果*/
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); /*设置元素的盒子阴影*/
}

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. 字体

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

2.1.2 .文本

2.1.3 背景

2.1.4 边框

2.1.5.列表

2.2.盒子模型和浮动

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属性

2.2.3. float属性

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）

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动画

3.1.变形（transform）

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！