文章目录


本篇全是经过整理的HTML中常用的标签和属性大全，纯整理干货。在HTML中有太多太多的标签，我们可能无法完全记住，这时候我们就需要一个索引来帮助我们在需要的时候快速找到该标签的作用。

一、结构编码类

1、外层

<!DOCTYPE html>    一种渲染标识

<html></html>   整个网页所有内容

<body></body>   显示给用户看的内容

<style></style>   包含CSS样式设计

<script><script>   包含JavaScript语句

2、头部信息

<head></head>   定义文档的头部，是所有头部元素的容器，可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等
    <title>   悬窗提示文本

    <meta>   提供有关页面的元信息
    
        <meta charset=“UTF-8”>   默认UTF-8编码的请求头
        
        <link rel=“icon” href=“”>   关联网页图标
        
        <meta http-equiv = “X-UA-Compatible” content = “IE=EmulateIE7” />   必须加的兼容性标签
        
        <meta http-equiv=“Refresh” content=“2;URL=”>   间隔跳转，页面隔两秒就调到某页面
        
        name：主要用于描述网页，与之对应的属性值为content
        
        type：内容类型
        
        href：路径
        
        url：网址

二、内容元素类

1、块级与内联元素特点

  • block（块级）元素特点：
    总是在新行上开始；
    宽度缺省是它的容器的100%，除非设定一个宽度。
    它可以容纳内联元素和其他块元素
  • inline（内联）元素的特点：
    和其他元素都在一行上；
    宽度就是它的文字或图片的宽度，不可改变
    内联元素只能容纳文本或者其他内联元素
  • 块级内联的转化（display）
    隐藏内容：display:none
    转化为块级标签：display:block
    转化为内联标签：display:inline
    既是块级又是内联：display:inline-block

2、块级元素

address   地址（定义文档或文章的作者/拥有者的联系信息）

blockquote   块引用

center   居中对齐

dir   目录列表

div   常用块级标签，也是CSS layout的主要标签

dl   定义列表

fieldset   form控制组

form   交互表单

h1   大标题

h2   2副标题

h3   3级标题

h4   4级标题

h5   5级标题

h6   6级标题

hr   水平分隔线

menu   菜单列表

noframes   frames可选内容，（对于不支持frame的浏览器显示此区块内容

noscript   可选脚本内容（对于不支持script的浏览器显示此内容）

ol   有序表单

p   段落

pre   格式化文本

table   表格

textarea   可调大小的文本框

ul   无序列表

3、内联元素

a   锚点连接，后带：href+链接

abbr   缩写

acronym   首字

b   粗体(不推荐使用)

big   大字体

br   换行

cite   引用

code   代码(在引用源码的时候需要)

dfn   定义字段

em   强调

font   字体设定(不推荐)

i   斜体

img  图片

input   输入框

kbd   定义键盘文本

label   表格标签

q   短引用

s   删除线(不推荐)

samp   定义范例计算机代码

select    下拉列表（项目选择）

small   小字体文本

span   常用内联容器，定义文本内区块

strike   删除线

strong   将字体加粗

sub   添加下标

sup   上标

textarea   多行文本输入框

tt   电传文本

u   下划线

var   在JS中定义变量

4、表单元素

<input   type="text">   文本输入框

<input   type="password">   密码框

<input   type="radio">   单选框

<input   type="checkbox">   多选框

<input   type="submit">   提交按钮

<input   type="reset">   重置按钮

<input   type="button">   普通按钮

<input   type="file">   提交文件

<input   type="date">   日期

<input   type="tel">   电话框

<input   type="number">   数字框

<input   type="email">   邮件框

<input   type="range"></input>   滑块

<input   type="file"></input>   文件域

<select   name="">   <option   value=""></option>......   </select>   下拉列表，option为选项

name：表单元素的属性，通过submit按钮提交的元素必须要有 name 值才能被后端接收到       

value：提交的属性值

5、HTML全局属性

accesskey 规定激活元素的快捷键

class 规定元素的一个或多个类名（引用样式表中的类）

contenteditable 规定元素内容是否可编辑

contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示

data-*   用于存储页面或应用程序的私有定制数据

dir   规定元素中内容的文本方向

draggable 规定元素是否可拖动

dropzone   规定在拖动被拖动数据时是否进行复制、移动或链接

hidden    规定元素仍未或不再相关

id   规定元素的id（唯一）

lang   规定元素内容的语言

spellcheck  规定是否对元素进行拼写和语法检查

style    规定元素的行内 CSS 样式

tabindex   规定元素的 tab 键次序

title 规定有关元素的额外信息

translate   规定是否应该翻译元素内容