HTML5新增的属性和标签

简介: HTML5新增的属性和标签

HTML5新增属性和标签

1、新增结构标签

2、新增属性

其实很多时候自己都会忘记用HTML5的一些标签,除了音视频这些,所以今天专门来巩固一下


1、新增结构标签

刚学前端三大件的时候,一直用div,span这些容器进行页面布局,但是有了HTML5之后,布局不用考虑那么多,一起看看吧。


< header >

标记一个页面或区域的头部


< nav >

导航栏


< section >

节(我觉得用书的节 翻译更合适)——大致表示某一个连续的、内容相关的区域


< saide >

标记为侧边栏


< article >

标记为主体部分


< footer >

标记为页面或区域的底部


<header>header</header>
<section>
    <aside>aside</aside>
    <article>article</article>
</section>
<footer>footer</footer>

我的理解:


其实他们都是div,只不过,他们比div更加形象化(比如header,你一看就知道这里是页面头部内容,但是你写 < div class=“header” >,可能我们人乍一看没什么,但是电脑爬虫就不一样了,header会更友好),所以有需要的时候,尽量使用语义化的标签。


说到这里,HTML语义化是什么?


还是用我的理解来说,用正确的标签,做应该做的事。

比如 header标签,就表示标签里面的是页面头部内容,footer就负责页面底部内容

见名知 “ 作 用 ”


当然了,还有很多其他标签(上面只列举我觉得我可能常用的)


表单元素:

< datalist >——标签定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值。

<form action="">
 <input type="text" list="city">
 <datalist id="city">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
  <option value="sz">深圳</option>
 </datalist>    
</form>

其他语义结构标签

< command > —— 定义命令按钮,比如单选按钮、复选框或按钮

< details > —— 用于描述文档或文档某个部分的细节

< dialog > —— 定义对话框,比如提示框

< summary > —— 标签包含 details 元素的标题

< figure > —— 规定独立的流内容(图像、图表、照片、代码等等)

< figcaption > —— 定义 < figure > 元素的标题

< mark > ——定义带有记号的文本

< progress > —— 定义任何类型的任务的进度

< time > —— 定义日期或时间


音视频标签


video(视频)

兼容性:

safari 支持mp4、不支持webm和ogv

ie8- 不支持 video 标签

ie9+ 支持 video 标签(但只支持 mp4 )

<video 
    视频地址
     src="http://vodkgeyttp8.vod.126.net/cloudmusic/MjQ3NDQ3MjUw/89a6a279dc2acfcd068b45ce72b1f560/533e4183a709699d566180ed0cd9abe9.mp4?wsSecret=c10a5d3580f11032fc133a97722baf05&wsTime=1642146321"
       autoplay="autoplay" 自动播放
       controls="controls" 播放控件
       loop="loop" 循环播放
       width="500" 宽度
       height="500" 高度
       poster="..." 封面
       muted>
 
//其中loop设置循环 poster设置封面 muted静音

标记一个页面或区域的头部


< nav >

导航栏


< section >

节(我觉得用书的节 翻译更合适)——大致表示某一个连续的、内容相关的区域


< saide >

标记为侧边栏


< article >

标记为主体部分


< footer >

标记为页面或区域的底部


<header>header</header>

<section>

   <aside>aside</aside>

   <article>article</article>

</section>

<footer>footer</footer>


我的理解:


其实他们都是div,只不过,他们比div更加形象化(比如header,你一看就知道这里是页面头部内容,但是你写 < div class=“header” >,可能我们人乍一看没什么,但是电脑爬虫就不一样了,header会更友好),所以有需要的时候,尽量使用语义化的标签。


说到这里,HTML语义化是什么?


还是用我的理解来说,用正确的标签,做应该做的事。

比如 header标签,就表示标签里面的是页面头部内容,footer就负责页面底部内容

见名知 “ 作 用 ”


当然了,还有很多其他标签(上面只列举我觉得我可能常用的)


表单元素:

< datalist >——标签定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值。


<form action="">

<input type="text" list="city">

<datalist id="city">

 <option value="bj">北京</option>

 <option value="sh">上海</option>

 <option value="sz">深圳</option>

</datalist>    

</form>

其他语义结构标签

< command > —— 定义命令按钮,比如单选按钮、复选框或按钮

< details > —— 用于描述文档或文档某个部分的细节

< dialog > —— 定义对话框,比如提示框

< summary > —— 标签包含 details 元素的标题

< figure > —— 规定独立的流内容(图像、图表、照片、代码等等)

< figcaption > —— 定义 < figure > 元素的标题

< mark > ——定义带有记号的文本

< progress > —— 定义任何类型的任务的进度

< time > —— 定义日期或时间


音视频标签


video(视频)

兼容性:

safari 支持mp4、不支持webm和ogv

ie8- 不支持 video 标签

ie9+ 支持 video 标签(但只支持 mp4 )


<video

  视频地址

   src="http://vodkgeyttp8.vod.126.net/cloudmusic/MjQ3NDQ3MjUw/89a6a279dc2acfcd068b45ce72b1f560/533e4183a709699d566180ed0cd9abe9.mp4?wsSecret=c10a5d3580f11032fc133a97722baf05&wsTime=1642146321"

      autoplay="autoplay" 自动播放

      controls="controls" 播放控件

      loop="loop" 循环播放

      width="500" 宽度

      height="500" 高度

      poster="..." 封面

      muted>

//其中loop设置循环 poster设置封面 muted静音




audio(音频)

兼容性:

safari 支持 mp3 和 wav、不支持 ogg

chrome和opera不能自动播放 (静音情况下可以)

<audio src="http://m7.music.126.net/20220114162506/6b2da4d844615134943f768d5d565985/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3" autoplay="autoplay" controls="controls" loop="loop" width="500" height="500">

 

相关文章
|
2月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
58 5
|
8天前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
1月前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
1月前
|
前端开发 搜索推荐 算法
|
1月前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
1月前
|
存储 移动开发 前端开发
HTML全局属性
【10月更文挑战第27天】
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
HTML 属性
HTML属性为元素提供额外信息,格式为name=&quot;value&quot;,置于开始标签内。如&lt;a href=&quot;http://www.runoob.com&quot;&gt;,其中href为属性名,URL为值。属性值应加引号,推荐使用小写。
|
1月前
|
存储 移动开发 前端开发