HTML的标签、属性大整理

客官°小女子只卖身不卖艺 2023-02-20 07:04 32阅读 0赞

### 文章目录 ###

*   *  一、结构编码类
     *   *   *  1、外层
             *  2、头部信息
     *  二、内容元素类
     *   *   *  1、块级与内联元素特点
             *  2、块级元素
             *  3、内联元素
             *  4、表单元素
             *  5、HTML全局属性

本篇全是经过整理的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   规定是否应该翻译元素内容