HTML元素介绍（一）

个人学习总结输出，持续更新。Day day study！Day day up！

这里的元素大多数是普通元素。此处的普通指的是：几乎没有自己特殊的属性，只指定通用属性和各种事件属性。

基本元素

:定义HTML注释。
<html>:HTML5文档的根元素，允许省略，但不建议省略。
<head>:HTML5文档的页面头部分，允许省略，但不建议省略。
<title>:HTML5文档页面标题。
<body>:页面主体部分。
<title>:定义标题1-标题6。
<p>:定义段落。
<br>:插入一个换行。
<hr>:水平线，主题结束语义。
<div>:文档中的节。
<span>:与div类似，表示一般性文本，为内联元素。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body>
 <h1>标题1</h1>
 <h2>标题2</h2>
 <h3>标题3</h3>
 <h4>标题4</h4>
 <h5>标题5</h5>
 <h6>标题6</h6>
 <p>
 <span>
 其后无br
 </span>
 <span>
 其后有br
 </span>
 <br>
 <span>
 其后有hr
 </span>
 <hr>
 <span>
 其后有div
 </span>
 <div id="">
 一般p内不包含div，div内可包含一切，所以以往大量使用，造成了语义化不明确。
 </div>
 </p>
 </body>
</html>

文本格式相关元素

<b>:粗体文本
<i>:斜体文本
<em>:表示强调，样式也是斜体
<strong>:粗体文本,与<b>用法类似。
<small>:小号字体文本。
<sup>：上标文本
<sub>：下标文本
<bdo>：文本显示方向


 <p>
 <b>b加粗</b><strong>strong加粗</strong>正常
 <small>缩小</small>2<sup>2</sup>a<sub>2</sub>
 <hr >
 <bdo dir="ltr">左向右</bdo>
 <hr >
 <bdo dir="rtl">左向右</bdo>
 </p>

旧的语义相关元素

<abbr>：表示缩写，
title：属性代表全称。
<address>：表示地址
<blockquote>：表示长文本引用。
cite：属性指定出处
<q>：表示短文本引用。
<cite>：作品标题。
<code>：代码文本。
<dfn>：用于定义专业术语。
<del>：待删除线文本。
cite：属性指定原因、
datetime：属性标注修改时间
<ins>：表示插入的文本。
cite：属性指定原因、
datetime：属性标注修改时间
<pre>：预格式化。内部可直接使用本来需要转移的文本。
<samp>：示范文本。
<kbd>：用于定义键盘文本。
<var>：表示变量。


 <p>
 <abbr title="中华人民共和国">中国</abbr>
 <address>西安市雁塔区幸福小区3单元403室</address>
 <cite>作品标题</cite>
 <blockquote cite="www.baidu.com">表示长文本引用。通常带有`cite`属性指定出处（可以使url）</blockquote>
 <q>表示短文本引用。</q>
 <code>
 let tempDom=document.querrySelect('#id');
 dom.hidden=true;
 </code>
 <dfn>牛顿第三定理：</dfn>
 <br>
 <del>待删除线文本。通常带有`cite`属性指定原因、通常带有`datetime`属性标注修改时间</del>
 <br>
 <ins>表示插入的文本。常带有`cite`属性指定原因、通常带有`datetime`属性标注修改时间</ins>
 <pre>/\'''"""</pre>
 <samp>示范文本。</samp>
 <kbd>ctrl</kbd>
 <var>i</var>
 </p>

H5新增语义元素

<mark>：标记重点。
<time>：标注时间。
datetime：提供格式化的时间，内容本身格式标准，可以不使用此属性。
pubdate：boolean 是否是发布日期
<details>与<summary>：摘要与详情，如果摘要放在详情里，摘要可见，点击摘要显示详情。
<ruby>、<rtc>、<rb>、<rt>和<rp>元素：用于为东亚文字定义解释。
<bdi>:将一段文本隔离出来设置属性。
<wbr>：建议换行。（可使得浏览器在单词中间换行）
<menu>和<menuitem>:用来定义菜单和菜单项。暂无浏览器支持。支持如下属性：
type：三个值，radio、checkbox、command（默认值）
label：指定菜单项文本
icon：指定菜单项图标。
disabled：指定菜单项是否不可用。
checked：type为checkbox或radio时候有意义
radiogroup：type为radio时候有意义，指定菜单项所属分组。
default：指定默认菜单项。

这是一个<mark>重点</mark>
 <time pubdate="true" datetime="2019-10-14 22:05">2019-10-14 22:05</time>
 <details>
 <summary>摘要</summary>
 这是详情、、、、
 </details>
 <ruby>
 <rb>饕</rb>
 <rp>(</rp>
 <rt>tao</rt>
 <rp>)</rp>
 <rb>餮</rb>
 <rp>(</rp>
 <rt>tie</rt>
 <rp>)</rp>
 </ruby>

H5新增结构元素

没啥好说的，见名知其意，解决以前全用div语义化缺失的问题。

<article>：一块独立内容；
<section>：几块分开内容；
<header>、<footer>、<header>、<nav>、<aside>
<figure>和<figcaption>：定义图片区域，<figcaption>是标题

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h58296.shtml