html单标签和双标签汇总

标签

HTML标签中，有双标签和单标签两种。其中，单标签由一个标签组成;双标签由“开始标签”和“结束标签”组成。
标签的特点：

1. 所有的标签都需使用<>
2. 所有的属性都需要在标签名字之后，且需要空格
3. 属性和属性值之间用等号连接
4. 属性值需要用双引号连接
5. 每一组属性和属性值都需要用空格连接
6. 双标签必须带‘/’

下面对两类标签进行分类

标签	具体类型
双标签	b、strong、i、em、u、font、sub、sup、s、del、p、div、span、ol、li、ul、h1~h6、
单标签	br、hr、img

双标签

格式：

<标签的名字 属性="属性值" 属性="属性值"></标签的名字>

1.加粗标签：b strong

  作用：对文本进行加粗
  strong标签和b相比，strong更具有语义化。

<b>我是一个粉刷匠</b>
<strong>我是一个粉刷匠</strong>

2.倾斜标签：i em

作用：文本的倾斜显示
em标签和i相比，em更具有语义化

<i>我是一个粉刷匠</i>
<em>我是一个粉刷匠</em>

3. 下划线标签：u

 作用：给文本添加下划线

<u>我是一个粉刷匠</u>

4. 字体标签：font

作用：对字体进行修饰

语法：<font>我是一个粉刷匠</font>

属性	属性值
字体大小：size	1-7 1是最小的 7是最大的 3是默认的字体
文本颜色：color	red green blue
字体属性：face	隶书 楷体 宋体…浏览器支持的字体为：宋体 隶书 楷体，默认的字体为宋体

<font size="1" color="blue" face="楷体">文本文本文本</font>

5. 角标标签：下角标标签（sub）和上角标标签（sup）

H<sub>2</sub>o
m<sup>2</sup>

6. 删除线：s del

作用：文本添加删除线修饰=====类似于删除效果
del更加具有语义化

<s>不要998</s>
<del>不要998</del>

7. 段落标签：p

  注意事项：p只能嵌套对应的文本标签，不能嵌套自己本身，独立的段落标签。 

<p>1111111111111111111111111111111111111111111111111111111111111111</p>

8. div标签：盒子元素、块级元素、容器 作用：用于区块的划分

<div>我是第一个div</div>
<div>我是第二个div</div>

显示情况：默认div纵向便是，如果需要横向显示，需要用到后面的浮动属性。

9. span标签

 作用：对独立文本的修饰，如果修饰一大段文本中的一块文本需要使用span标签单独括起来进行独立修饰。

<span>文本文本</span>

10. 列表标签：ol、li、ul

   1）有序列表：有顺序的列表       

属性	属性值
修改列表项显示类型：type	1/A/a/I/i
修改起始项：start	数值 例如：start=“3”

注意：ol里面只能放置li，不能放置其他内容，如果想要实现其他内容，需要在里面嵌套。

<ol>
   <li>文本</li>
   <li>文本</li>
   <li>文本</li>
</ol>

  2)无序列表：没有顺序的列表
  默认列表项为黑色的实心原点。

属性	属性值
修改列表项显示类型：type	disc(黑色实心圆）、circle(空心圆）、square(黑色实心正方形)、none（取消列表项）
修改列表项显示类型：type	disc(黑色实心圆）、circle(空心圆）、square(黑色实心正方形)、none（取消列表项）

注意：none使用频率最高、ul里面只允许嵌套li

<ol>
<li>文本</li>
<li>文本</li>
<li>文本</li>
</ol>

3）自定义列表
应用场景：问答列表（图文混排）
语法结构：双标签
dl
dt
dd
dl和dl之间有比较大的间距，dt前面默认会有留白

<dl>
    <dt>图片/问题</dt>
    <dd>图片的解释说明/答案</dd>
</dl>
<dl>
    <dt>图片/问题</dt>
    <dd>图片的解释说明/答案</dd>
</dl>
<dl>
    <dt>图片/问题</dt>
    <dd>图片的解释说明/答案</dd>
</dl>

11. 文本标题标签：h1~h6

经常使用在新闻稿件/文章标题/小说目录
标签结构：双标签
h1~h6
特点：h1最大，h6最小，自带加粗效果

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

12. 超链接标签：a

a标签介绍：
1）实现超链接功能：实现不同页面之间的跳转
基本语法：

<a href="路径">文本/图片</a>

自带的效果：默认带有下划线，文本颜色为蓝色。
超链接访问后：默认效果为紫色。
其他属性：

属性	属性值
target	_self(自己的页面) _blank(新的页面)

2）锚点功能：相同页面中的不同区域跳转

标签点击部分：<a href="#锚点名字">文本</a>
跳转部分：<div id="锚点名字"></div>

应用场景：
目录、京东侧边楼梯层、 通讯录、小说下载

13.表格标签和表单标签

1. 表格标签
   作用：就是用来给页面显示加载信息用的
   基本结构：
   table>tr>td
   table:表格
   tr：表格的行
   td：表格的单元格即表格的列
   三行三列的表格如何创建？
   table>tr3>td3

2. table的属性

属性	属性值
边框：border	以px为单位的数值
width	可以为px为单位的数值，也可以用%为单位
height	可以为px为单位的数值，也可以用%为单位 ，但是不能直接使用百分比，需要从父元素继承，即body，html{height:100%;}
背景颜色：bgcolor	颜色值
边框颜色：bordercolor	颜色值
取消单元格与单元格的间距：cellspacing	0px
单元格与内容之间的间距：cellpadding	以px为单位的数值
只显示外边框：frame	above(上边框线) 、below（下边框线）lhs(左边框线)、rhs(右边框线) 、box/border(四周的边框线)
rules：表格里面的横纵线显示	rows:横线；cols：纵线

3. tr的属性

属性	属性值
height	数值
背景颜色：bgcolor	颜色值，给tr设置的时候会影响这一行的单元格的背景颜色
align：一整行单元格的文本水平对齐方式	left、right、center
valign：一整行单元格垂直对其方式	bottom/top/middle

4. td的属性

属性	属性值
width
height
背景颜色：bgcolor	只会影响自己的那个单元格
文本对齐方式：align	left、right、center
垂直对其方式：valign	top、bottom、middle
水平合并单元格 ：colspan	横向合并，在一行里面操作。水平合并时都操作的同一个tr里面的td
纵向合并单元格 ：rowspan	横向合并，在一行里面操作。水平合并时都操作的同一个tr里面的td

合并第一列和第二列：
<table>
   <tr>
       <td colspan="2">1</td>
       <!--<td>2</td>-->
       <td>3</td>
   </tr>
</table>

合并第一列的第一行和第二行,即下方的1和4合并

<table>
   <tr>
       <td rowspan="2">1</td>
       <td>2</td>
       <td>3</td>
   </tr>
   <tr>
       <!--<td >4</td>-->
       <td>5</td>
       <td>6</td>
   </tr>
   <tr>
       <td >7</td>
       <td>8</td>
       <td>9</td>
   </tr>
</table>

14.表单标签

<form  action="跳转地址" method="提交方法">

</form>

作用：用来收集用户信息的
学习表单的时候，主要学习的是表单中的控件内容。输入框密码框，单选，多选等等。这些控件一定要放在form标签才能起收集信息的作用。以下是控件

1. 输入框
   单行文本输入框，只能在一行中输入不能折行

<input  type="text" value="提示文本">

2. 密码框

<input  type="password" placehoder="提示文本">

3. 按钮类
   1）提交按钮

<input  type="submit" placehoder="提示文本">

2）重置按钮

<input  type="reset" placehoder="提示文本">

配合form标签，清空表单数据
3）普通按钮

<input  type="button" value="提示文本">

单标签

1. 换行标签：br

 对文本进行换行,强制性转行，不是段落划分。

1111111111111<br>
1111111111111

2. 水平线标签：hr

作用：一条水平线

属性	属性值
noshade	noshade
color	颜色值
width	宽度值
height	高度值
水平对其方式：align	center(默认值)、left、right

<hr noshade="noshade" color="red" width="500px" height="100px" align="left" >

3.图片标签：img

语法：<img src="路径" alt="">

路径：文件存储的地址，查找文件的一个途径。
相对路径：通过文件和文件之间的关系去找到对应的文件/图片

1. 图片和页面之间是同级关系的话，插入图片路径直接可以把图片名字当做路径使用

2. 图片所在的文件夹和页面是同级关系，需要先进入大存储图片的文件夹里面，然后再去查找图片。

3. 图片所在的文件夹和页面所在的文件夹，是同级关系的话查找图片：
   img
   pic.png
   html
   图片标签.html

   查找办法：…/img/pic.png
   …/：返回上一级
   ./:同一级
   …/…/返回上两级

绝对路径：是一个完整的地址，可以是互联网地址，也可以是服务器上的地址，某一盘符的一个完整的路径。

alt=“图片的描述”
当图片为破损文件时，才会显示文本提示，否则不提示。
作业：为了方便优化代码，经常在优化网站时，添加alt属性，目的在于方便爬虫的爬取。
其他属性：
width、height；
title属性：当鼠标放上去的时候显示文本。