前端标签和属性整理

HTML标签整理

标签

标签	用途
h1~h6	标题标签
p	段落标签
font	字体标签
span	定义文档中的节
b	加粗文本
i	斜体文本
u	下划线文本
del	删除线文本
ul -> li	无序列表
ol -> li	有序列表
dl -> dt ->li	自定义列表
details(summary&ul(li))	可展开收缩列表
hr	分割线
br	换行
a	超链接
iframe	定义内联框架
img	图片
audio	音频
video	视频
svg	矢量图
table	定义表格
tbody	定义表格中的主体内容
td	定义表格中的单元
tr	定义表格中的行
th	定义表格中的表头单元格
thead	定义表格中的表头内容
tfoot	定义表格中的表注内容（脚注）

属性

属性	作用
id	用于表示元素的唯一性（一个网页中元素的id不能重复）
class	用于对元素进行归类（一般用于css进行样式控制时使用，可以多个元素共享）
title	用于对元素进行浮动提示（表现为跟随鼠标的气泡提示）
style	用于对元素进行样式控制
data	HTML5新增属性，用于通过标签缓存数据
hidden	HTML5新增属性，用于设置元素是否隐藏
align	标题的显示位置(对齐方式)，包含三个取值：left(默认)、center 、right

无序列表

结构

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

ul表示无序列表结构，内部的li表示列表项

ul标签中包含的type属性表示列表样式,取值如下：

• disc:实心圆点
• circle:空心圆点
• square:实心矩形

有序列表

结构

 <ol type = "1">
     <li></li>
     <li></li>
     ...
</ol>

ul表示有序列表结构，内部的li表示列表项

ol标签中包含的type属性表示列表样式，有如下取值：

• 1:表示以数字1开始 (默认)
• A：表示按照大写字母表A开始
• a：表示按照小写字符表a开始
• I：以罗马字符I开始
• i：以小写罗马字符i开始

自定义列表

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

可展开收缩的列表（HTML5新增）

<details>
    <!--列表标题-->
    <summary>Java面向对象</summary>
    <!--列表详情-->
    <ul>
        <li>类</li>
        <li>对象</li>
        <li>构造器</li>
        <li>封装</li>
        <li>继承</li>
        <li>多态</li>
    </ul>
</details>

hr

• width:设置分割线长度

• align:设置分割线的位置（三个取值：left,center(默认),right）

• size:设置分割线粗细

• color:设置分割线颜色

超链接

a标签中常见属性主要包含:

• href:用于设置需要跳转的目标位置，可以以下形式呈现
• 网页地址
• 资源文件地址
• 邮箱地址
• js脚本
• 页面内的锚地址（#id）
• target:用于设置跳转方式以及跳转目标
  • _blank:在新页面中打开链接而不是替换当前页面
  • _self(默认):替换当前页面
  • _parent:在父页面中打开链接（常见与框架结构页面）
  • _top:在当前页面所在的顶层页面打开（多用于多层框架结构嵌套页面）
  • 除了以上预定义的四个固定取值之外，还可以自定义target,参见iframe

iframe标签

结构

<ul>
    <li><a href="http://www.baidu.com" target="content">跳转到百度</a></li>
    <li><a href="http://www.taobao.com" target="content">跳转到淘宝</a>