H5语义标签

Img

                                Semantic Elements For Document Outlining

 

1、<section></section> 

        定义文档中的主体部分的节、段。

    2、<article></article>

        一个特殊的section标签,比section有更明确的语义。定义来自外部的一个独立的、完整的内容块,例如什么论坛的文章,博客的文本。。。

    3、<aside></aside>

        用来装载页面中非正文的内容,独立于其他模块。例如广告、成组的链接、侧边栏。。。

    4、<header></header>

      定义文档、页面的页眉。通常是一些引导和导航信息,不局限于整个页面头部,也可以用在内容里。

    5、<footer></footer>

      定义了文档、页面的页脚,和header类似。

    6、<nav></nav>

     定义了一个链接组组成的导航部分,其中的链接可以链接到其他网页或者当前页面的其他部分。

    7、<hgroup></hgroup>

     用于对网页或区段(section)的标题元素(h1~h6)进行组合。

    8、<figure></figure>

     用于对元素进行组合。

    9、<figcaption></figcaption>

     为figure元素加标题。一般放在figure第一个子元素或者最后一个。

    10、<details></details>

     定义元素的细节,用户可以点击查看或者隐藏。

    11、<summary></summary>

     和details连用,用来包含details的标题。

    12、<canvas></canvas>

     用来进行canvas绘图。

    13、<video></video>

     定义视频。

    14、<audio></audio>

     定义音频。

    15、<embed></embed>

     定义嵌入网页的内容。比如插件。

    16、<source></source>

     该标签为媒介元素(比如video、audio)定义媒介元素。

    17、<datalist id='dl'></datalist>

     定义可选数据的列表,与input配合使用(<input list='dl'>)可制作输入值的下拉列表。

    18、<mark></mark>

     在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。

    19、<meter [min/max/low/high/optimum/value]></meter>

     度量衡,用红黄绿表示出一个数值所在范围。

    20、<output></output>

     定义不同类型的输出,样式与span无异。

    21、<progress></progress>

     进度条,运行中的进度。

    22、<time></time>

     定义日期或者时间。

    23、<keygen></keygen>

     定义加密内容。

    24、<command></command>

     定义命令行为。

学习HTML和HTML5的基本知识,可以让你构建结构化的网页内容。首先,你需要了解以下几个常用的标签: 1. **标题标签** ( `<h1>` 到 `<h6>`):用于创建标题,`<h1>` 是最大的标题,`<h6>` 最小。 2. **段落标签** ( `<p>` ):表示文本的段落。 3. **图片标签** ( `<img>` ):插入图像,通过 `src` 属性指定图片路径,可能还需要设置 `alt` 属性提供备选文本。 4. **超链接标签** ( `<a>` ):创建超链接,`href` 属性指定链接地址,`target` 属性指定了链接打开的方式。 5. **序列标签** ( `<ol>` 和 `<li>` ):创建有序列表,每个 `<li>` 内容会自动编号。 6. **文本标签** ( `<strong>`、`<em>` 等):用于强调文本,`<strong>` 强调,`<em>` 斜体。 7. **表格标签** ( `<table>`、`<tr>`、`<th>` 和 `<td>` ):创建表格布局。 8. **form表单** ( `<form>`、`<input>`、`<button>` 等):用户输入数据的主要元素,如 `<input type="text">` 创建文本框,`<select>` 创建下拉选择。 9. **H5新增input标签** (例如 `<input type="email">`、`<input type="date">` 等): 更丰富的表单元素类型。 10. **H5多媒体标签** ( `<video>` 和 `<audio>` ):用于嵌入视频和音频文件。 11. **H5语义标签** (如 `<header>`、`<footer>`、`<main>`、`<article>` 等):帮助搜索引擎更好地理解和呈现页面内容。 为了练习,你可以尝试按照这些标签来设计一个简单的个人主页,包含一个标题、一段自我介绍、一张照片、一些链接到其他网站的超链接、有序列表、文本强调、表格以及表单等。同时,也可以尝试使用H5的新特性,比如添加日期选择器、音频播放,以及使用语义标签提升网页结构化程度。记得保存并测试你的页面,确保所有功能正常工作。如果你对某个标签的具体使用还有疑问,可以在www.runoob.com查找更多教程和实例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值