搜索
首页web前端H5教程HTML5的文档结构
HTML5的文档结构Feb 09, 2017 pm 04:17 PM
html5

HTML5的文档结构

  HTML5简化了许多,它的设计遵循了3个原则:1.兼容性、2.实用性、3.通用访问性

    1. header 元素

   

标签定义文档或者文档的一部分区域的页眉,又可用于设置文章标题。

   

元素应该作为介绍内容或者导航链接栏的容器。

    在一个文档中,您可以定义多个

元素。

    注释:

标签不能被放在
或者另一个
元素内部。

    语法说明:

标记对之间可以包含 h1~h6 六个标题元素,以及p、span等元素。

    hgroup 元素

   

标签定义文档的主标题及副标题,标记对之间通常只使用 h1~h6 六个标题元素。

    2. footer 元素

    footer 元素主要用于为页面或某篇文章定义脚注内容,包括文章的版权信息、作者联系方式等内容,一个页面可以包含多个 footer 元素。

    举例:


<footer>
   <ul>
     <li>Copyright © 2000-2013 华软 All Rights Reserved</li>
     <li>学院地址:广州.从化.广从大道13号 电话:020-87818918</li>
   </ul>
</footer> 

    3. article 元素

   

标签定义独立的内容,页面中一块与上下文不相关的独立内容。比如一个帖子、一篇博客文章等。

   

标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

   

的潜在来源:论坛帖子、博客文章、新闻故事、评论等。

    语法说明:

标记对之间可以包含header、footer、section以及嵌套的article等元素。

    举例:


<article>
  <header>
    <h2>写给IT职场新人的六个“关于”</h2>
  </header>
  <p>
    <b>关于工作地点</b> ...
  </p>
  ...
</article>

    4. section 元素

    section 元素用于对页面的某块内容进行分块,如将该块内容进一步分成章节的标题、内容和页脚等几部分。

    语法说明:

标记对之间可以包含 h1~h6 六个标题元素、p元素以及多个article元

               素以表示该"分块"内部又包含多篇文章。此外,还可以嵌套section元素。

    举例:


<article>
  <header>
    <h2>写给IT职场新人的六个“关于”</h2>
  </header>
  <section> 
    <h3>关于工作地点</h3>
    <p>...</p>
  </section>
  <section> <h3>关于企业</h3> <p>...</p> </section>
  ...
</article>

    5. nav 元素

    nav 元素用于定义页面上的各种导航条,一个页面中可以拥有多个 nav 元素,作为整个页面或不同部分内容的导航。

    nav 唯一不可能出现的位置是 address 元素内

    基本语法:

<nav><a href="">#</a><a href="">#</a><a href="">#</a></nav>

    6. aside 元素

    aside 元素表示article元素的内容之外的、与article元素的内容相关的辅助信息,

    它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。

    7. audio 音频标签

    audio 标签定义声音,比如音乐或其他音频流。

    目前,audio 元素支持的3种文件格式:MP3、Wav、Ogg。


<audio src="薛之谦 - 认真的雪.mp3" controls="controls"></audio>


    属性        说明

    src        要播放的音频的URL

    autoplay   音频在就绪后马上播放

    controls   向用户显示音频控件,比如播放/暂停按钮

    loop       每当音频结束时重新开始播放

    preload    音频在页面加载时进行加载,并预备播放

    8. video 视频标签

    video 标签定义视频,比如电影片段或其他视频流。

    目前,video 元素支持三种视频格式:MP4、WebM、Ogg。


<video src="火星情报局.mp4" width="320" controls muted poster="images/logo.png" preload></video>


    属性         说明

    src        要播放的视频的URL

    width      设置视频播放器的宽度

    height     设置视频播放器的高度

    autoplay   视频在就绪后马上播放

    controls   向用户显示视频控件,比如播放/暂停按钮

    loop       当媒介文件完成播放后再次开始播放

    muted      规定视频的音频输出应该被静音

    poster     规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像

    preload    视频在页面加载时进行加载并预备播放,属性值(none:只有单击了Play按钮才加载视频;metadata:仅加载元数据,例如视频长度、作者、版权)

    9. 图形中的 figure 及 figcaption

    元素figure及figcaption实际上不能算作结构性元素,但在组织独立图片、图像、图表及编码列表时仍然很受欢迎。

    每一个figure元素中只能包括一个figcaption元素。图片排列一起可用。百度文库里有篇“绚丽的HTML5 Figure图片字幕标题特效”

    常常用到一种图片列表,图片+标题或者图片+标题+简单描述。

    实例代码:

   

黄浦江上的的卢浦大桥

    figure用来代替原来li标签,P标签谁来取代呢?答案就是:figcaption

    w3c赋予的定义:figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    那么上面的代码就变成了:


    <figure>
    <figcaption style="color: red">黄浦江上的的卢浦大桥</figcaption>
    <img src="images/黄浦江上的的卢浦大桥.jpg" width="350" height="234" />
    </figure>

    效果图如下:


黄浦江上的的卢浦大桥

HTML5的文档结构 - 不报错才可怕

更多HTML5的文档结构 - 不报错才可怕相关文章请关注PHP中文网!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

html5为什么只需要写doctypehtml5为什么只需要写doctypeJun 07, 2022 pm 05:15 PM

因为html5不基于SGML(标准通用置标语言),不需要对DTD进行引用,但是需要doctype来规范浏览器的行为,也即按照正常的方式来运行,因此html5只需要写doctype即可。“!DOCTYPE”是一种标准通用标记语言的文档类型声明,用于告诉浏览器编写页面所用的标记的版本。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
2 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。