HTML元素参考(标签大全)

2019-01-23  本文已影响0人  简默丶XS

1.根元素

<html> 元素 表示一个HTML文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

<html lang="zh"></html>

2.文档元元素

元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如 搜索引擎、浏览器 等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。
<base>元素 规定了网站的根路径，其他使用外链都会采用这个根路径

<base target="_blank" href="http://www.example.com/">

<head> 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

<head>
    <title>文档标题</title>
</head>

<link> 规定了外部资源与当前文档的关系。 这个元素可用来为导航定义一个关系框架。这个元素最常于链接样式表，只能出现再<head>中

<link href="fancy.css" rel="alternate stylesheet" title="Fancy" type="text/css" media="(max-width: 800px)">

<meta> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

style 包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式

<style type="text/css">
body {
  color:red;
}
</style>

<title>定义文档的标题,显示在浏览器的标题栏或标签页上

<title>Awesome page title</title>

3.分区根元素

body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。

<body>
    <p>This is a paragraph</p>
 </body>

4.内容分区

语义化标签结构
<address> 作者提供联系信息 
<address>
    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
    You may also want to visit us:<br>
    Mozilla Foundation<br>
    1981 Landings Drive<br>
    Building K<br>
    Mountain View, CA 94043-0801<br>
    USA
  </address>

<article>文章，表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目
注：个人理解你可以把它当作div嵌套，但是article更适合嵌套纯文本文章，而div则是布局

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <article>
    <h2>welcome to  Jurassic Park </h2>
  </article>
</article>

<aside>所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。

<article>
  <p>
    迪斯尼电影 <em>海的女儿</em> 于1989年首次搬上银屏
  </p>
  <aside>
    这个电影在首次发行期间就赚得了8千7百万美元.
  </aside>
  <p>
    该电影更多信息...
  </p>
</article>

<footer> 表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

<footer>
  xsdream@com.cn  xusheng 1996.08.04
</footer>

<header> 用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

<header class="page-header">
    <h1>welcome to xsdream!</h1>
</header>

<h1>~<h6>呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

<h1>h1</h1>
  <h2>h2</h2>
    <h3>h3</h3>
      <h4>h4</h4>
        <h5>h5</h5>
            <h6>h6</h6>

** <main>元素呈现了文档<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）**

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  <article>
    <h2>Red Delicious</h2>
  </article>
  <article>
    <h2>Granny Smith</h2>
  </article>
</main>

<nav></nav> 描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<section></section> 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点 来 辨识每一个<section>(个人理解为文档中的部分内容)

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

<dl> list描述列表，通常用于展示词汇表或者元数据 (键-值对列表)
<dt> 描述列表的标题
<dd> 描述列表的内容

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

内联文本语义

<a>元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接</a>

超链接：
<a href="http://www.mozilla.com/">External Link</a>
锚点：
<a href="#属性">Description of Same-Page Links</a>
可点击得图片：
<a href="https://developer.mozilla.org/en-US/">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"    alt="MDN logo" />
</a>
mailto打开邮件发送邮件：
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
创建电话链接：
<a href="tel:+491570156">+49 157 0156</a>
假链接：
<a href="javascript:void(0)" onclick="alert(1)">假链接</a>
在网页编程中，一般让一个超链接点击后不链接到任何地方，而鼠标移上去仍然显示手指形状的图标，就用javascript:void(0)，然后真实执行的操作，是在这个a标签后面加onclick="xxxxx"，就是鼠标单击后执行某个Javascript函数进行具体的操作，这样可以做更多的事情，比如根据某个值进行判断跳转到不同的页面等等。

<abbr> 代表缩写，title属性里面是完整得内容，可以鼠标悬浮显示

<abbr title="Laugh Out Loud">LOL</abbr>

<b></b>用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b> 元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字
如果不是出于语义目的而使用 <b> 元素，那么让文本显示粗体更好的方式是使用将 CSS 的 font-weight 属性设置为 "bold"

整理<bdi>！！！！！！！！！

上一篇 下一篇

猜你喜欢

热点阅读