html基本元素的使用方法 HTML元素介绍一

个人学结输出，持续更新Day day studyDay day up，下面我们就来聊聊关于html基本元素的使用方法 HTML元素介绍一?接下来我们就一起去了解一下吧!

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>是标题

看到这里了，关注吧，由浅入深，持续更新一起学习进步。如果有什么建议和补充，请积极评论。

html基本元素的使用方法 HTML元素介绍一

最新推荐

热门推荐