投稿
  1. 霍小强博客首页
  2. 基础教程
  3. JavaScript教程

2.HTML5常用元素参考一览表

huoxiaoqiang • • JavaScript教程 • 阅读 356

句法：

元素=开始标签+元素内容+结束标签+标签属性

这个元素的主要部分有：

  1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
  3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。
  4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素也可以有属性（Attribute）：

属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值 。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

属性应该包含：

  1. 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
  2. 属性的名称，并接上一个等号。
  3. 由引号所包围的属性值。

例子：

#Bootstrap示范模板
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

1.基础

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

2.头部

<head>    	表示 Document 的元数据集合。
<meta>	        定义关于 HTML 文档的元信息。
<title>         标签定义文档的标题。
<link>	        定义文档与外部资源的关系。
<script>	定义客户端脚本。
<noscript>	为不支持客户端脚本的浏览器定义替代内容。
<style>         用于为 HTML 文档定义样式信息。
<base>	        定义页面中所有链接的默认地址或默认目标。
<basefont>	已废弃。定义页面中文本的默认字体、颜色或尺寸。
#头部元信息示例
<!DOCTYPE HTML>
<HTML LANG="EN">
 <HEAD>
  <META CHARSET="UTF-8">
  <BASE HREF="https://www.example.com/">
  <TITLE>An application with a long head</TITLE>
  <LINK REL="STYLESHEET" HREF="default.css">
  <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
  <SCRIPT SRC="support.js"></SCRIPT>
  <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
 </HEAD>
 <BODY>
 ...

3.布局

<style>	        定义文档的样式信息。
<div>	        定义文档中的节。
<span>	        定义文档中的节。
<header>	定义 section 或 page 的页眉。
<nav>       	定义导航链接的容器。
<section>	定义 section。
<article>	定义文章。
<aside>	        定义页面内容之外的内容。
<footer>	定义 section 或 page 的页脚。
<details>	定义元素的细节。
<dialog>	定义对话框或窗口。
<summary>	为 <details> 元素定义可见的标题。
<hgroup>        定义一个段的标题。

4.文本

<a>	            定义锚。
<background-color>  定义背景颜色
<background>        已废弃。定义背景图像
<font-family>       定义字体
<font-size>         定义字号
<text-align>        定义文本对齐方式
<b>	            定义粗体文本。
<bdi>	            定义文本的文本方向，使其脱离其周围文本的方向设置。
<big>	            已废弃。定义大号文本。
<center>	    已废弃。定义居中文本。
<color>             已废弃。定义颜色。
<del>	            定义被删除文本。
<em>	            定义强调文本。
<font>	            已废弃。定义文本的字体、尺寸和颜色
<i>	            定义斜体文本。
<ins>	            定义被插入文本。
<main>	            定义文档的主内容。
<mark>	            定义有记号的文本。
<meter>	            定义预定义范围内的度量。
<progress>	    定义任何类型的任务的进度。
<rp>	            定义若浏览器不支持 ruby 元素显示的内容。
<rt>	            定义 ruby 注释的解释。
<ruby>	            定义 ruby 注释。
<s>	            已废弃。定义加删除线的文本。
<small>	            定义小号文本。
<strike>	    已废弃。定义加删除线文本。
<strong>	    定义语气更为强烈的强调文本。
<sup>	            定义上标文本。
<sub>	            定义下标文本。
<time>	            定义日期/时间。
<tt>	            定义打字机文本。
<u>	            已废弃。定义下划线文本。
<wbr>	            定义可能的换行符。

5.引用

<abbr>	        定义缩写。
<acronym>	已废弃。定义只取首字母的缩写。
<address>	定义文档作者或拥有者的联系信息。
<bdo>	        定义文字方向。
<blockquote>	定义长的引用。
<q>	        定义短的引用语。
<cite>	        定义引用、引证。
<dfn>	        定义一个定义项目。

6.图像

<img>	        定义图像。
<map>	        定义图像地图。
<area>	        定义图像地图内部的区域。
<canvas>	定义图形。最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
<svg>           定义矢量图形。最适合带有大型渲染区域的应用程序，复杂度高会减慢渲染速度。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。

7.音频/视频

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

8.列表

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

9.表格

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

10.表单

<form>	        定义供用户输入的 HTML 表单。
<input>	        定义输入控件。
<textarea>	定义多行的文本输入控件。
<label>	        定义 input 元素的标注。
<button>	定义按钮。
<select>	定义选择列表（下拉列表）。
<option>	定义选择列表中的选项。
<optgroup>	定义选择列表中相关选项的组合。
<fieldset>	定义围绕表单中元素的边框。
<legend>	定义 fieldset 元素的标题。
<isindex>	已废弃。定义与文档相关的可搜索索引。
<data>          将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 <time>。
<datalist>	定义下拉列表。
<keygen>	已废弃。定义生成密钥。
<output>	定义输出的一些类型。

11.框架

<frame>	        已废弃。定义框架集的窗口或框架。
<frameset>	已废弃。定义框架集。
<noframes>	已废弃。定义针对不支持框架的用户的替代内容。
<iframe>	定义内联框架。

12.编程

<script>	定义客户端脚本。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<applet>	已废弃。定义嵌入的 applet。
<embed>	        为外部应用程序（非 HTML）定义容器。
<object>	定义嵌入的对象。
<param>	        定义对象的参数。
<code>	        定义计算机代码。
<kbd>	        定义键盘码。
<samp>	        定义计算机代码样本。
<tt>	        已废弃。定义打字机代码。
<var>	        定义变量。
<pre>	        定义预格式文本。
<listing>	已废弃。使用 <pre> 代替。
<plaintext>	已废弃。使用 <pre> 代替。
<xmp>	        已废弃。使用 <pre> 代替。

13.实体

显示结果描述实体名称实体编号
 空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
“引号&quot;&#34;
‘撇号 &apos; (IE不支持)&#39;
￠分（cent）&cent;&#162;
£镑（pound）&pound;&#163;
¥元（yen）&yen;&#165;
€欧元（euro）&euro;&#8364;
§小节&sect;&#167;
©版权（copyright）&copy;&#169;
®注册商标&reg;&#174;
™商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

备注：HTML 元素对大小写不敏感

原创文章，作者：huoxiaoqiang，如若转载，请注明出处：https://www.huoxiaoqiang.com/basic/js/1913.html

赞 (0)
huoxiaoqianghuoxiaoqiang
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020年8月18日 20:51
下一篇 2020年8月20日 01:04

相关推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

记住昵称、邮箱和网址，下次评论免输入