前端HTML知识点整理二

HTML标签大全

HTML标签(HTML元素)根据不同的分类方式可以大致分为下面几类:

  • 按闭合特征分类
    • 单标签元素
    • 双标签元素
  • 按显示模式分类
    • 行内元素
    • 块级元素
    • 行内块元素
  • 按功能分类
    • 文档标签元素
    • 排版标签元素
    • 文本格式化标签元素
    • 图像标签元素
    • 链接标签元素
    • 列表标签元素
    • 表格标签元素
    • 表单标签元素

按闭合特征分类

类型描述示例
单标签元素单标签元素,也叫空标签或空元素,指没有内容的标签,在开始标签中自动闭合。<br/><hr/><img/><input/>
双标签元素双标签元素,也叫闭合标签元素,是由开始标签和结束标签组成的一对标签,它可以嵌套和承载内容。<div> </div><p> </p><html> </html><h1> </h1><span> </span>

按显示模式分类

类型属性描述示例
行内元素display:inline;与相邻行内元素在同一行上<a><span><strong>
块级元素display:block;每个块级元素独占一行,每个块级元素都会从新的一行开始,从上到下排布<div><p><table><h1> to <h6><dl>、<dt>、<dd><ol>、<ul>、<li>
行内块元素display:inline-block;与相邻行内元素、行内块元素在同一行上,排列方式为从左到右<img><input>

按功能分类

PS1:点击以下标签将链接到W3School查看相关实例和属性

PS2:

H5新增的结构标签:<section>、<article>、<aside>、<header>、<hgroup>、<footer>、<nav>、<figure>

H5新增的其他元素:<video>、<audio>、<embed>、<mark>、<progress>、<time>、<ruby>、<rt>、<rp>、<wbr>、<canvas>、<command>、<details>、<datalist>、<datagrid>、<keygen>、<output>、<source>、<menu>

H5新增input标签:email、url、number、range、search、color、Date Pickers(输入类型:date/month/week/time/datetime/datetime-local)

H5废除的元素:

  1. 能用css代替的元素 basefontbigcenterfontsstrikettu。这些元素纯粹是为画面展示服务的,HTML5中提倡把画面展示性功能放在css中统一编辑。
  2. 不再使用frame框架。
    framesetframenoframes。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。
  3. 只有部分浏览器支持的元素
    appletbgsoundblinkmarquee等标签。
  4. 其他被废除的元素
    以下前者为废除元素,后者为替代元素
    rb——ruby
    acronym——abbr
    dir——ul
    isindex——使用forminput相结合的方式替代
    listing——pre
    xmp——code
    nextid——guids
    plaintex——使用text/plian(无格式正文)MIME类型替代

基础

标签描述
<!DOCTYPE>定义文档类型。
<html>定义 HTML 文档。
<title>定义文档的标题。
<body>定义文档的主体。
<h1> to <h6>定义 HTML 标题。
<p>定义段落。
<br>定义简单的折行。
<hr>定义水平线。
<!--...-->定义注释。

表单

标签描述
<form>定义供用户输入的 HTML 表单。
<input>定义输入控件。
<textarea>定义多行的文本输入控件。
<button>定义按钮。
<select>定义选择列表(下拉列表)。
<optgroup>定义选择列表中相关选项的组合。
<option>定义选择列表中的选项。
<label>定义 input 元素的标注。
<fieldset>定义围绕表单中元素的边框。
<legend>定义 fieldset 元素的标题。
<isindex>不赞成使用。定义与文档相关的可搜索索引。
<datalist>定义下拉列表。
<keygen>定义生成密钥。
<output>定义输出的一些类型。

图像

标签描述
<img>定义图像。
<map>定义图像映射。
<area>定义图像地图内部的区域。
<canvas>定义图形。
<figcaption>定义 figure 元素的标题。
<figure>定义媒介内容的分组,以及它们的标题。

音频/视频

标签描述
<audio>定义声音内容。
<source>定义媒介源。
<track>定义用在媒体播放器中的文本轨道。
<video>定义视频。

链接

标签描述
<a>定义锚。
<link>定义文档与外部资源的关系。
<nav>定义导航链接。

列表

标签描述
<ul>定义无序列表。
<ol>定义有序列表。
<li>定义列表的项目。
<dir>不赞成使用。定义目录列表。
<dl>定义定义列表。
<dt>定义定义列表中的项目。
<dd>定义定义列表中项目的描述。
<menu>定义命令的菜单/列表。
<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。
<command>定义命令按钮。

表格

标签描述
<table>定义表格
<caption>定义表格标题。
<th>定义表格中的表头单元格。
<tr>定义表格中的行。
<td>定义表格中的单元。
<thead>定义表格中的表头内容。
<tbody>定义表格中的主体内容。
<tfoot>定义表格中的表注内容(脚注)。
<col>定义表格中一个或多个列的属性值。
<colgroup>定义表格中供格式化的列组。

元信息

标签描述
<head>定义关于文档的信息。
<meta>定义关于 HTML 文档的元信息。
<base>定义页面中所有链接的默认地址或默认目标。
<basefont>不赞成使用。定义页面中文本的默认字体、颜色或尺寸。

样式/节

标签描述
<style>定义文档的样式信息。
<div>定义文档中的节。
<span>定义文档中的节。
<header>定义 section 或 page 的页眉。
<footer>定义 section 或 page 的页脚。
<section>定义 section。
<article>定义文章。
<aside>定义页面内容之外的内容。
<details>定义元素的细节。
<dialog>定义对话框或窗口。
<summary><details> 元素定义可见的标题。

编程

标签描述
<script>定义客户端脚本。
<noscript>定义针对不支持客户端脚本的用户的替代内容。
<applet>不赞成使用。定义嵌入的 applet。
<embed>为外部应用程序(非 HTML)定义容器。
<object>定义嵌入的对象。
<param>定义对象的参数。

格式

标签描述
<acronym>定义只取首字母的缩写。
<abbr>定义缩写。
<address>定义文档作者或拥有者的联系信息。
<b>定义粗体文本。
<bdi>定义文本的文本方向,使其脱离其周围文本的方向设置。
<bdo>定义文字方向。
<big>定义大号文本。
<blockquote>定义长的引用。
<center>不赞成使用。定义居中文本。
<cite>定义引用(citation)。
<code>定义计算机代码文本。
<del>定义被删除文本。
<dfn>定义定义项目。
<em>定义强调文本。
<font>不赞成使用。定义文本的字体、尺寸和颜色
<i>定义斜体文本。
<ins>定义被插入文本。
<kbd>定义键盘文本。
<mark>定义有记号的文本。
<meter>定义预定义范围内的度量。
<pre>定义预格式文本。
<progress>定义任何类型的任务的进度。
<q>定义短的引用。
<rp>定义若浏览器不支持 ruby 元素显示的内容。
<rt>定义 ruby 注释的解释。
<ruby>定义 ruby 注释。
<s>不赞成使用。定义加删除线的文本。
<samp>定义计算机代码样本。
<small>定义小号文本。
<strike>不赞成使用。定义加删除线文本。
<strong>定义语气更为强烈的强调文本。
<sup>定义上标文本。
<sub>定义下标文本。
<time>定义日期/时间。
<tt>定义打字机文本。
<u>不赞成使用。定义下划线文本。
<var>定义文本的变量部分。
<wbr>定义视频。

框架

标签描述
<frame>定义框架集的窗口或框架。
<frameset>定义框架集。
<noframes>定义针对不支持框架的用户的替代内容。
<iframe>定义内联框架。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值