简述html标签,HTML常用标签与属性简述-CSDN博客

1.HTML5文本声明

//声明文档为HTML5文档

声明文档类型为HTML5文件,文档声明必须放在HTML文档的第一行且必不可少。

2.meta标签

1.charset属性：单独使用，设置文档字符集及编码方式。

//文档设置为UTF-8编码方式

常见的属性值：

GBK：扩展的国标编码;

UTF-8: Unicode码采用UTF-8编码方式;

2.http-equiv属性：用于声明浏览器如何解释编译文件，需配合content属性使用。

//在content中描述实际的属性值内容

常用属性值：

Content-Type:HTML4.01之前的文档内容编码声明;

refresh:网页刷新;

set-Cookie:设置浏览器cookie缓存;

3.name属性：主要用于给搜索引擎提供必要信息,需配合content属性使用。

//在content中描述实际的属性值内容

常用属性值：

author:作者，声明网站作者；

keywords:网站关键字，多个关键字，用英文逗号分隔；

description:网页描述，搜索引擎显示在title下的描述内容；

3.link标签:用于为网页链接各种文件。

常用属性：

rel：用于表明被链接文件与当前文件关系;

type：表明被链接文件是什么类型，可省略;

href：表明链接文件的地址;

4.title标签:网页的标题,即网页选项卡上的文字。

网页名称

5.常见的块级标签

1. 块级标签：占据一整行，高度、行高、内边距和外边距都可以改变，宽度和游览器的宽度一样，和内容无关，可以容纳块级标签和其他行内标签。

标题标签:

...

水平线:

段落:

换行:

引用:

预格式:
引用标签:

//表明标签中的文字，为引用的内容，浏览器显示为等宽字体，并缩进
预格式标签
//浏览器解析时，会按照等宽字体显示，并保留标签内的空格和回车,常用于保留代码格式。
2. 有序列表ol (order list)

1.内容
2.内容
3.内容
4.内容

3.无序列表ul(unorder list)

无序内容
无序内容
无序内容
无序内容

4.定义描述列表dl

标题1
描述项1-1

描述项1-2
标题2
描述项2-1

描述项2-2

一般情况下,标题dt只有一项。描述项dd可以有多项;浏览器显示时,标题顶格显示,dd缩进显示

5.图片组合标签figure

//src表示图片的路径

小图标icon
//图片的标题
figure标签有两个子标签img和figcaption：

浏览器显示为：图片与标题上下排列，且整体向后缩进一个单位。

6.分区标签div

常配合CSS使用，为网页中最常用的分区标签，网页布局时常用，一般带class属性分类。

标题

6.常见的行内标签

1. 行内标签：只占内容宽度大小、高度、行高，内边距和外边距是可以部分可以改变的。

span：文本，用于包裹一部分文字，进行特定样式的修改文本

img：图片

em：强调，浏览器显示为倾斜

strong：强调，浏览器显示为加粗

q：短引用

a：超链接

i：倾斜

b：加粗

small：缩小字体 //small标签可多层嵌套，表示比默认字体小一号，可直到小到最小号为止

big：放大字体 //也可多层嵌套，直到最大

u：下划线

2. strong/em/i/b 标签的区别

em和strong都表示强调，strong>em,strong和em标签均可多层嵌套，表示强调程度的递增。

em和i都能倾斜，Strong和b都能加粗。但是Strong和em多了一层强调的语义。可以帮助搜索引擎快速抓取网站重点,且html5要求开发者尽可能实现代码的语义化。

3.img 标签

src属性：表示图片引用路径。

常见路径的写法：

①相对路径：

1)当图片在下层目录时：目录名/图片名 (img/abc.jpg)

2)当图片与当前目录时：图片名(src="abc.jpg")

3)当图片在上层时：../图片名 (src="../abc.jpg")

②绝对路径：写法file：///E:/aaa.png 一般严禁使用

③网络连接：直接使用图片的网络地址,但由于图片在别的服务器,不可控,故不建议使用

title属性：图片的标题。当鼠标指到时,可显示的提示文字。

alt属性：当图片无法加载时显示的文字。

width/height属性：图片的尺寸。

align：图片周围的文字，相对于图片的排列方式。属性值：top/center/bottom

4.table标签
表格框
表头
表身表尾表行表头 //默认加粗且在单元格居中显示表数据
1)常用属性

border：表格边框属性；当使用border="1"设置边框时，会在所有td以及table上嵌套边框，当border加大时，只有table框会加粗。

cellspacing：单元格与单元格之间的间隙。当cellspacing="0"时，单元格之间的间隙为0，但边框线并不会合并。

合并边框的写法style="border-collapse:collapse;" 使用边框合并时，无需设置cellspacing。

cellpadding：单元格内边距，单元格中文字与单元格边框之间的距离。

width/height：表格的宽高

align：设置表格在父容器中的对齐方式，left/居左 center/居中 right/居右

当表格使用align属性时，相当于使表格浮动，可能会导致表格后面的元素受表格浮动影响，导致布局错乱。

bgcolor：背景色

background：背景图，后接相对路径。背景图和背景色同时生效时，图会覆盖背景色

bordercolor：设置边框颜色

5.form标签

常用属性：

saction：表单需要提交的服务器地址

method：表单提交数据使用的方法,get/post

POST上传数据的形式：链接URL地址?name1=value1&name2=value2

form内必须要有input标签才能提交数据

6.input标签

1)常用属性:

type：设置input的输入类型

name：给input输入框命名。一般情况下,name属性必不可少

value：input输入框的默认值

placeholder：输入框的提示内容。当input有默认的value或输入值时,placeholder消失

2)type的常用属性值】

text：文本输入框

password：密码输入框,输入内容默认显示小黑点

radio：单选框

checkbox：复选框

使用radio/checkbox时,value属性必填。提交时,提交的为value中的默认值；

radio/checkbox凭借name属性,确定是否属于同一组,name相同为同组,只能选一个

使用checked="checked"属性,设置默认选中项

file：文件上传

使用accept="类型",设置只能上传的文件类型,如 accept=image/* 表示任意格式图片

submit：提交按钮,将所有表单数据提交至后台服务器

reset：重置表单数据

image：图形提交按钮,跟submit一样,具有表单提交功能,使用src属性确定图片路径

button：普通按钮,无法提交的按钮

3)属性名=属性值的情况

① checked="checked" 设置radio

② multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。

③ selected="selected" 设置select控件，默认选中的option选项

④ readonly="readonly"

⑤ disabled="disabled"

当input被disabled时，该input的name和value数据将无法向后台传送

⑥ hidden="hidden" 隐藏控件。等效于

⑦ nowrap=nowrap

7. 下拉列表select标签

选项 //option可以有N多个

1)常用属性

name属性,应该写在上,所有选项只有一个name

multiple="multiple" 设置select控件为多选,可在界面使用Ctrl+鼠标,进行多选,一般不用。

2)option常用属性：

value="":当option没有value属性时,往后台传递的是标签中的文字；

当option有value属性时,往后台传递的是value属性的值。

title="":鼠标指到后显示的文字。

selected="selected":默认选中。

:用于将option标签进行分组,label属性表示分组名,或者用label标签包裹。

8. 文本域 textarea标签

1)常用属性

cols=、 rows,设置宽高，但不常用

readonly="readonly" 设置为只读模式，不允许编辑。

style="resize: none;" 设置为宽高不允许修改。

style="overflow: ;" 设置当文字超出区域时，如何处理。

也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。

常用属性值:hidden 超出区域的文字，隐藏无法显示

scroll 无论文字多少，均会显示滚动条

auto 自动，根据文字多少自动决定是否显示滚动条(默认样式)

9. iframe标签：嵌套页面,在一个页面中插入新页面,和a标签搭配使用。宽高可指定,支持相对路径

1.iframe 嵌套页面,在一个页面中插入新页面,常和a标签搭配使用。宽高可指定,支持相对路径

frameborder属性页面边框宽度

10.a标签

target属性：

1. _blank 新窗口打开页面

2. _self 当前自身窗口打开页面

3. _parent 父窗口打开页面

4. _top 在顶级窗口打开页面

a标签和iframe标签搭配使用案例：

QQ

百度一下

iframe会加载一个完整页面，会很卡

download

下载

href

1. #不会对服务器发起请求，此时a元素作为锚点，不跳转页面

2. 除了#以外的值都会发起请求 ,但会返回到页面顶部

3. 伪协议 javascript:; 点击后什么都不做,满足特殊需求

声明：本博客版权归兰文聪和饥人谷所有，转载需说明来源！