前端常用标签

1.html中的标签(单标签和双标签)

1.1 h系列的标签（Head）

作用：把页面上的文字加上标题的语义。

代码：h1、h2、h3、h4、h5、h6 将文字放大，加粗，并且逐渐变小。（h1标签是最大的）

注意：一个页面只能有一个h1标签。

1.2 P标签(Paragraph)：段落标签

作用：给页面上一段文字加上段落的语义。

代码：

<p>这是段落标签</p>

特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。

1.3 hr标签(Horizontal Rule)

作用：在页面显示一条横线。

代码：

<hr/>

特点：在页面上显示一条横线，默认占整行。

1.4 br标签(break)

作用：换行。

代码：

<br/>

1.5 b标签、u标签、i标签、s标签

<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<!-- 建议使用以下标签 -->
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>

1.6 img标签

作用：在页面上显示一张图片

代码：

<img src="图片的路径"/>

属性	作用
src	图片显示的路径(使用相对路径，可移植性强)
alt	如果图片加载不出来会显示这个属性中的文字
title	介绍这张图片

1.7 a标签(超链接、锚链接)

作用：可以在一个页面跳转到另一个页面。

代码：

<a href="页面的路径"></a>

注意：在a标签之内必须要写上文字，如果没有，那么这个标签在页面上找不到。

a标签的其他用法：

1. 可以不跳转(跳转到当前页面)href="#"

2. 可以跳转到另外的页面

3. 可以在自己的页面进行定位。

   a. 设置a标签的href属性为"#id名"

   b. 在页面的指定位置加入一个目标标签(可以是任意标签)

   c. 必须给这个标签设置一个id名：

   这是目标

   4. 在跳转的页面进行定位

      . 可以进行下载。(强烈不推荐使用，不安全)

属性	作用
href	a标签跳转的目标地址
target	_blank：保留原始页面，再进行跳转 _self：在当前页面进行跳转
base	在页面上所有的a标签设置跳转的方式(base标签一般放在title标签下面)

1.8 html标签

作用：所有html中标签的根节点。

lang：用来设置当前页面的语言。

作用：

​ a. 设置页面上主要使用语言的类型。

​ b.将来做SEO的时候在权重上起到一定的作用。

​ c.用于特殊设备上的设置。

1.9 head标签

​ 作用：用于存放title,meta,base,style,link

​ 注意在head标签中我们必须要设置的标签是title

1.10 boby标签

​ 作用：页面的主体部分，用于存放所有的html标签：p,h,a,b,u,i,s,em,del,ins,strong,img

1.11 title标签

​ 作用：让页面拥有一个属于自己的标题。

1.12 meta标签

​ 注意：meta中设置的所有的内容在页面都不会显示。

​ 常用语法：

1. Description：可以描述页面，可以用来使用百度程序(网络爬虫)来收录关键信息，以此提高页面的排名。

2. keywords：关键词，可以用来提高页面关键词的比重(提升排名的一种方式)。

3. 字符集(编码格式)：

   charset(字符集的格式)：UTF-8

   注意：字符集（文字在电脑中存储的字典）

   ​ 电脑是不能直接存储文字的，一般情况下电脑存储的是这个文字在"字典"里对应的位置。

   GBK、UTF-8之间的区别：

   相同点：都是字符的编码格式(字库)

   区别：

   ​ UTF-8:收录了全世界所有的语言中的文字。

   ​ GB2313：收录了汉字，片假名。

   大小：

   ​ UTF-8>GBK

   性能：

   ​ UTF-8<GBK

   UTF-8存储一个汉字占3个字节，GBK存储一个汉字占2个字节

   GB2313--->国标(国际标准)2313;

   GBK--->国标扩(国际标准的扩展)

2. DOCTYPE:文档类型

​ DTD(Document Type Denfinition)：文档类型定义

​ 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。

2.1 HTML与XHTML包括的文档类型

​ html：三种

​ xhtml：三种(html2.0版本)是一种相对html语法更加严谨的html；

文档类型	分类	备注
HTML	HTML strict DTD	请求比较严格的html类型
	HTML Transitional DTD	相对而言比较规范不太严谨
	Frameset DTD	框架级的类型
xHTML	HTML strict DTD	请求比较严格的html类型
	HTML Transitional DTD	相对而言比较规范不太严谨
	Frameset DTD	框架级的类型

注意：

1. 将来在使用DOCTYPE的时候把html后面的所有内容全部去掉，因为h5的问世，使用的html、xhtml中的规范都过时了。
2. 每个页面都必须设置一个doctype，如果不设置，浏览器会默认开启quirks mode(怪异模式)解析(quirks mode是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循W3C标准的网页而产生的一种页面渲染模式)。

3. 列表

3.1 无序列表

​ 作用：显示一列没有排列顺序的数据。

​ 代码：ul:Unordered List li:List Item

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

​ 注意：

1. 无序列表中的数据没有先后顺序之分。
2. ul标签最好不要单独出现。
3. ul标签是用来管理li标签。
4. ul标签中只能存放li标签。
5. li标签中可以放其它标签。
6. li标签是一个容器。

3.2 有序列表

​ 作用：显示一段有顺序的数据。

​ 代码：ol:ordered List

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

​ 注意：有序列表中的所有数据都是顺序的。

​ 一般情况下ul标签用的比较多，ol标签用的比较少。

3.3 自定义列表

​ 作用：显示一段数据，格式自己定义。

​ 代码：dl:Definition List dt:Definition Term dd:Definition Description

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

​ 处理兼容性：

​ 将所有的标签设置一个统一的样式。

4. 表格

​ 作用：用来将数据以表格形式显示出来。

​ 代码：

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

属性	作用
border	给表格加上了边框
width	给表格设置宽
height	给表格设置高
cellspacing	规定单元格之间的空白
cellpadding	规定单元边沿与其内容之间的空白

​ 虽然可以使用table中的标签 来设置标签的一些样式，但是最好不要用，因为将来凡是与样式相关都是由css来设置的。

​ 表格中的其他标签：

标签	作用	特点
<th></th>	起到表头的作用	其中的文字加粗，居中
<caption></caption>	给表格设置标题	在表格的最上面显示标题
<thead></thead>	用来存放当前列的表头	如果没有加css，页面默认将表头中的高度设置变小
<tbody></tbody>	一般用来存放页面中的主体数据	如果不写会自动加上
<tfoot></tfoot>	一般情况不会出现

5. 表单

5.1 input

作用：用来收集用户的信息，将来提交到服务器。

标签	属性	作用
input	type	text：文本框 password：密码框 hidden：隐藏域 radio：单选框 checkbox：多选框 button：按钮 reset：重置 image：图片按钮 submit：提交
	value	用于设置默认值（text,password,button）
select	option	下拉框
textarea		文本域

​ 注意：如果想要多个radio或者checkbox组成一个选择集合，那么必须给每个radio以及checkbox都设置相同name属性。

​ 如何给radio，checkbox设置默认值呢？

​ 设置另外一个属性：checked="checked"

​ 下拉框设置默认值：selected="selected"

6. html中的空格合并现象

​ html中对空格缩进换行不敏感，不管在页面上的同一个位置写多少个空格缩进换行，将来浏览器在解析的时候只会当作一个空格来解析。需要用html中的特殊字符的代码来替代。

空格		  
小于		< 
大于		>

7. 元素的显示方式

行内元素

​ a,span,b,u,i,s,strong,em,ins,del

​ 属性：display:inline

​ 特点：

1. 一行里面可以显示多个。
2. 无法设置宽高。
3. 大小由内容决定。

块级元素(div)

​ p,h1-h6,div,ul,li,ol,dl,dt,dd

​ 属性：display:block

​ 特点：

1. 独占一行。
2. 可以设置宽高。
3. 默认高度一整行。

行内块级元素

​ img,input

​ 属性：display:inline-block

​ 特点：

	1. 可以设置宽高。
	2. 一行内可显示多个。

8. css(Cascading Style Sheets)： 层叠样式表

8.1 css相关的属性

属性	作用
background	设置背景颜色。
width	设置宽。
height	设置高。
font-size	设置字体的大小。
font-weight	设置字体的粗细(100~900) bold:加粗 normal：正常
font-family	设置字体的类型(注意：设置可以用中文也可以用英文，但是如果使用中文的时候，在设置中一定要给中文加上双引号)。
font-style	设置字体的样式。
color	设置字体的颜色。
text-indent	设置首行缩进(text-indent:2em),em两个文本的距离。
text-align	设置文本的位置(center:设置内容在容器的水平方向上居中)。
text-decoration	设置文本的装饰(none:没有任何装饰)。
margin	( margin: 0 auto)设置容器水平居中。
background-color	设置背景颜色
background-image	设置背景图片( background-image:url(图片的路径);默认情况下图片如果比容器要小，它会平铺。)
background-repeat	设置背景是否平铺( no-repeat:不平埔； repeat-x:水平方向上平铺； repeat-y:垂直方向上平铺； repeat:平铺)
background-position	设置背景图片的位置( background-position:x y;注意：x,y可以是具体的数值，又可以是一些英文单词。x：left左 center中 right右 y：top上 center中 bottom下)
min-width	设置元素的最小宽度

背景属性的连写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 连写 
		background: background-color background-image background-repeat和 background-position;
		其中background-repeat和background-position是修饰background-image的。
	-->
    <style>
        p {
            width: 800px;
            height: 500px;
            margin: 0 auto;
            background: red url(img/jack.jpg) no-repeat center center
        }
    </style>
</head>
<body>
    <p></p>
</body>

字体属性的连写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 连写 
		font: [font-style] [font-weight] font-size font-family
		其中，font-size和font-family是必须的。
	-->
    <style>
        p{
            color: #0094ff;
            font:italic bold 30px "楷体"
        }
    </style>
</head>
<body>
    <p>床前明月光</p>    
    <p>疑是地上霜</p>    
    <p>举头望明月</p>    
    <p>低头思故乡</p>
</body>
</html>

color属性的取值可以是：

1. 具体的颜色的英文单词(yellow,pink,red...)

2. 使用十六进制颜色表示法

   #000000=>#000
   #003300=>#030
   

3. rgb(red green blue)表示法：rgb(0,0,0)

4. rgba表示法

8.2 css代码的存放位置

1. 嵌套样式。

   作用范围：当前样式所处的页面。

   应用：存放一些当前页面会用的样式。

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Document</title>
       <!-- 嵌套样式 -->
       <style>
           p{
               color: #0094ff;
               font-size: 30px;
               /* background: green; */
               font-weight: bold;
               font-family: "楷体";
               font-style: italic
           }
       </style>
   </head>
   <body>
       <p>床前明月光</p>    
       <p>疑是地上霜</p>    
       <p>举头望明月</p>    
       <p>低头思故乡</p>
   </body>
   </html>
   

2. 行内样式。

   作用范围：只能作用在当前标签之中，出了这个标签就没有作用。

   应用：一般情况下用的少(特定场合，整个页面只有这个标签出现了这个样式)。

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Document</title>
   </head>
   <body>
    	<!-- 行内样式 -->   
       <p style="color:green;font-size: 100px">低头思故乡</p> 
       <p>疑是地上霜</p>    
       <p>举头望明月</p>    
       <p>低头思故乡</p>
   </body>
   </html>
   

3. 外联样式

   作用范围：所有的页面都可以使用。

   应用：存放一些所有页面都会用到的公共样式。

   ​ 需要新建一个文件，后缀名为.css，在这个文件中直接写样式（不需要加上style标签），在另一个页面上通过link标签引入该样式。

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Document</title>
       <!-- 引入外联样式 -->
       <link rel="stylesheet" href="外联样式表的路径">
   </head>
   <body>
       <p>床前明月光</p>    
       <p>疑是地上霜</p>    
       <p>举头望明月</p>    
       <p>低头思故乡</p>
   </body>
   </html>
   

8.3 css三大特性

​ a)继承性

​ 作用：子元素可以继承父元素的样式。

​ 什么样的属性才可以继承：text-,font-,line-开头的属性，color都是可以继承的。

具体应用：

​ 在写页面之前我们会通过给body设置一个字体，将来页面上所有的标签都能够继承这个属性。

特殊性：

  1. a标签的颜色不能继承，如果一定要修改a标签的颜色可直接作用在a标签上面。

  2. h标签的大小不能继承，如果一定要修改h标签的大小可直接作用在h标签上面。

  3. div的高度如果不设置由内容来决定(没有内容那么高度为0)，宽度默认由父元素继承过来。

       **b)层叠性**

       是浏览器处理冲突的一个特性。

       作用：如果一个属性通过两个选择器设置到同一个元素上面，那么这个时候一个属性就会将另一个属性层叠掉； 如果多个不同的属性通过两个选择器设置到一个元素上面，那么不会发生层叠。

       **c)优先级**

       !important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

注意：虽然important是一个变数，但是不能作用在继承上。important属性无法继承。

​ 权重

​ 作用：多个选择器组合以后的优先级。

​ 算法：（0,0,0,0）==>第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。

​ 比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。

​ 总结：权重其实是优先级的算法。

​ 优先级是层叠的表现。

9.选择器

9.1 标签选择器

结构：

<style>
	标签名（选择器）{
        属性名1：属性值1;
        属性名2：属性值2;
        ...
    }
</style>

效果：会将所有的这类标签都加上相同的属性。

9.2 类选择器

给要设置的标签添加一个类型：class

例如：

床前明月光

结构：

<style>
	.类名（选择器）{
        属性名1：属性值1;
        属性名2：属性值2;
        ...
    }
</style>

效果：会将所有拥有这个类名的那些标签都加上相同的属性。

特点：

1. 可以重复。
2. 一个类名可以设置给多个标签。
3. 一个标签可以有多个类名。

9.3 id选择器

结构：

<style>
	.类名（选择器）{
        属性名1：属性值1;
        属性名2：属性值2;
        ...
    }
</style>

效果：会将这个id名的标签加上设置的属性。

特点：

1. 必须唯一。
2. 只能给一个标签设置这个id名。
3. 一个标签只能有一个id名。

id名与类名命名的规则：

命令的取值范围只能是：0-9,a-z,A-Z,_,- 并且不能以数字开头。

10. 其他选择器

10.1 通配符

代码：

<style>
	* {
        属性名1：属性值1;
        属性名2：属性值2;
        ...
    }
</style>

作用：会将页面上所有的标签都设置这个属性，会去页面上一个一个的遍历页面的标签，然后给他们进行设置(效率低)。

10.2 并集选择器

代码：

<style>
	标签名,类名,id名 {
        属性名1：属性值1;
        属性名2：属性值2;
        ...
    }
</style>

10.3 交集选择器

​ 交集选择器书写的时候一定要注意：选择器的名称组成中如果有标签名那么标签必须写在最前面。

10.4 后代选择器

​ 作用：找到一个标签的所有子元素来设置样式。

<!-- 空格	作用于元素的所有后代 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
    .food p{
        color: green;
    }
    </style>
</head>
<body>
    <div class="food">
        <p>第一代子元素</p>
        <h1>
            <p>你好</p>
        </h1>
    </div>
</body>
</html>

10.5 子代选择器

​ 作用：找到一个标签的直接子元素来设置样式。

<!-- >	作用于指定标签元素的第一代子元素 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
    .food>h2{
        color: red;
    }
    </style>
</head>
<body>
    <div class="food">
        <p>第一代子元素</p>
        <h1>
            <p>你好</p>
        </h1>
    </div>
</body>
</html>

10.6 选择器工作的一个原理

​ 选择器在查找元素的时候是从右往左找。

11. 伪类

锚伪类

11.1 a:link

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <a href="#2" >锚伪类</a>
</body>
</html>

作用：给a标签设置没有被访问过的样式。

11.2 a:visited

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link {
            color: red;
            font-size: 30px;
        }
        a:visited {
            color: pink;
            font-size: 50px
        }
    </style>
</head>
<body>
    <a href="#2" >锚伪类</a>
</body>
</html>

作用：给a标签设置访问过的样式。

11.3 a:hover

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link {
            color: red;
            font-size: 30px;
        }
        a:visited {
            color: pink;
            font-size: 50px
        }
        a:hover {
            color: yellow;
            font-size: 80px
        }
    </style>
</head>
<body>
    <a href="#2" >锚伪类</a>
</body>
</html>

作用：给a标签设置鼠标悬停时的样式。

11.4 a:active

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link {
            color: red;
            font-size: 30px;
        }
        a:visited {
            color: pink;
            font-size: 50px
        }
        a:hover {
            color: yellow;
            font-size: 80px
        }
        a:active{
            color: green;
            font-size: 100px
        }
    </style>
</head>
<body>
    <a href="#2" >锚伪类</a>
</body>
</html>

作用：设置a标签被激活时的样式(被点击时的样式)

注意：

​ 1. 在使用的时候一定遵守这样的顺序：a:link,a:visited,a:hover,a:active

​ 2. 有些锚伪类除了可以作用在a标签上还可以作用在其他标签上：

​ :link 只能用于a标签

​ :visited只能用于a标签

​ :hover其它标签也可以使用这个伪类

​ :active其它标签也可以使用这个伪类

12. 注释

效果：可以将页面上的一段代码让它失去作用。

应用：使用注释将页面的结构标注出来。

css中的注释：/*  */

html中注释：<!--  -->

13. 行高(line-height)

应用：如果行高等于父容器的高度，那么元素在父容器中垂直居中

行高的定义：两行文本之间基线的距离叫做行高。

文本中的几条线

从上往下依次是：顶线、中线、基线、底线。

14. 盒子模型

概念：在写一个html页面的时候，其实就相当于在这个页面叠盒子。

思想：万物皆盒子。

具体内容：

盒子的挡板--------------border
盒子的填充物------------padding
盒子的物品--------------内容
盒子与盒子之间的距离----margin

14.1 border--盒子的挡板

1. border-color：边框的颜色

   border-top-color

   border-right-color

   border-bottom-color

   border-left-color

2. border-width：边框的宽度

   border-top-width

   border-right-width

   border-bottom-width

   border-left-width

3. border-style：边框的样式

   border-top-style

   border-right-style

   border-bottom-style

   border-left-style

   取值：dotted(点状边框)、dashed(虚线)、soild(实线)、double(双线)、groove(3D凹槽边框)、ri dge(3D垄状边框)、inset(3Dinset边框)、outset(3Doutset边框)

边框的连写方式：border:border-width border-style border-color

border-collapse: collapse; /* 去掉单元格之间的间隙 */

14.2 padding(内边距)--盒子的填充物

作用：设置盒子的内容与边框之间的距离。 取值： 取值：

• padding: 40px;

  效果：上右下左所有的内边距都设置了40像素的距离。

• padding: 40px 80px;

  效果：上下内边距设置了40像素，左右内边距设置了80像素。

• padding: 40px 60px 80px;

  效果：上边距设置了40像素，左右内边距设置了60像素，下边距设置了8像素。

• padding: 40px 60px 80px 100px;

  效果：以顺时针方向进行设置，上为40像素，右为60像素，下为80像素，左为100像素。

padding-top

padding-right

padding-bottom

padding-left

14.3 margin--盒子与盒子之间的距离

作用：设置盒子与盒子之间的距离。

取值：

• margin: 10px;

  效果：上右下左所有的外边距都设置了10像素的距离。

• margin: 10px 20px;

  效果：上下外边距设置了10像素，左右外边距设置了20像素。

• margin: 10px 20px 40px;

  效果：上设置10像素的外边距，左右设置20像素的外边距，下设置40像素的外边距。

• margin: 10px 20px 40px 80px

  效果：上设置10像素的外边距，右设置20像素的外边距，下设置40像素的外边距，左设置80像素的外边距。

margin-top

margin-right

margin-bottom

margin-left

注意：很多标签默认带有margin和padding，所以进行页面布局的时候一定要清除这些标签默认的margin和padding。

例如：

1. body标签默认带有 margin: 8px 的属性。
2. p标签默认带有margin: font-size 0;
3. h标签默认带有margin-top和margin-bottom
4. ul标签默认带有上下的margin以及左边的padding

清除的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       /*现在使用通配符清除，以后使用css的初始化方式清除*/ 
        * {
       		margin: 0;		
       		padding: 0;
        }
    </style>
</head>
<body>
   	
</body>
</html>

14.4 计算盒子的大小

注意：padding(盒子的填充物)会改变盒子的大小(跟日常生活中有区别)。

特殊情况：当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽是继承自大盒子的话，那么设置小盒子的padding-left不会改变小盒子的大小。

计算盒子大小的公式：

盒子宽：border-left-width + padding-left + width + padding-right + border-right-width

盒子高：border-top-width + padding-top + height + padding-bottom + border-bottom-width