HTML5的文档结构
HTML5的文档结构
HTML5简化了许多,它的设计遵循了3个原则:1.兼容性、2.实用性、3.通用访问性
1. header 元素
在一个文档中,您可以定义多个
注释:
语法说明:
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的文档结构 - 不报错才可怕相关文章请关注PHP中文网!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
