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

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

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

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

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页