HTML5中新增的布局标签、新增的其他标签、新增标签HTML5兼容、HTML5已移除的标签、新增多媒体标签

最新推荐文章于 2024-09-20 20:24:36 发布

@西楚霸王

最新推荐文章于 2024-09-20 20:24:36 发布

阅读量202

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_41027812/article/details/108330804

版权

HTML5中新增的布局标签

html 1990 html4.0.1 1997 html5 2008 稳定版 2012年

新增的结构标签（更加语义化）

header标签
- ```
<header>这里是头部区</header>
```
footer标签
- ```
<footer>这里是页脚区</footer>
```
main标签
- ```
<main>这里是主体区</main>
```

nav标签

<nav>
    <a>首页</a>
    <a>关于我们</a>
    <a>联系我们</a>
</nav>

article标签

<article>这里是一个有完整含义的内容区</article>

section标签

<section>
    <h2>标题一</h2>
    <p>内容区域</p>
</section>
<section>
    <h2>标题二</h2>
    <p>内容区域</p>
</section>

aside标签
- ```
<aside>这里是侧边栏</aside>
```

新增结构标签优点：
1.代码清晰
2.不用起类名
3.更加语义化【易于开发和维护】

<header>
    头部      <!-- 头部标签，块级 -->
</header>
<nav>
    导航
</nav>
<main class="clearfix">
    <aside>侧边栏</aside>
    <article>
        完整的内容区域
        <section>
            <h3>标题</h3>
            <p>段落</p>
        </section>
        <section>
            <h3>标题</h3>
            <p>段落</p>
        </section>
    </article>
</main>
<footer>
    这里是底部
</footer>

新增的其他标签

figure标签
- figure标签规定独立的流内容（图像、图表、照片、代码等等）。
- figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
- ```
<figure>
    <figcaption>hgygtuhytj</figcaption>
    <img src="./1.img" alt="">
    <p>
        hello world
    </p>
</figure>
```

mark标签

<p>今天天气<mark>晴朗</mark></p>
<!-- 自带黄色背景色 --!>

time标签

<time datetime="2019-02-19">元宵节</time>
<! --- 易于爬虫抓取关键字 -- !>

progress标签
- progress 标签标示任务的进度（进程）。
- ```
<progress value="30" max="100"></progress>
```
meter标签
- | 属性 | 属性值 | 说明 |
  | ------- | -------- | ------------------------------------------------------------ |
  | high | number | 定义度量的值位于哪个点，被界定为高的值。 |
  | low | number | 定义度量的值位于哪个点，被界定为低的值。 |
  | max | number | 定义最大值。默认值是 1。 |
  | min | number | 定义最小值。默认值是 0。 |
  | optimum | number | 定义什么样的度量值是最佳的值。如果该值高于 “high” 属性，则意味着值越高越好。如果该值低于 “low” 属性的值，则意味着值越低越好。 |
  | value | number | 定义度量的值。 |
```
<meter max="100" min="0" high="90" low="20" optimum="19" value="93"></meter>
```

新增标签HTML5兼容

方案一：使用javascript新增元素的方法解决
- document.createElement(“header”);
- document.createElement(“footer”);
- ```
header, footer{
    display:block;
}
```
方案二：使用封装好的插件html5shiv.js解决兼容性问题
- ```
<script type="text/javascript" src="./html5shiv.js"></script>
```

HTML5已移除的标签

acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
strike

  <big>你好</big>
  <center>你好</center>
  <dir>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
  </dir>
  <strike>你好</strike>
  <font size='50' color='red'>你好</font>

新增多媒体标签

audio标签
- ```
    
<audio src="videoAudio/hanmai.mp3" controls="controls"></audio>
```
- 浏览器支持
  - ie8不支持audio标签
- HTML5支持的音频格式
  - Ogg audio/ogg 支持的浏览器：Chrome、Firefox、Opera10+
  - MP3 audio/mpeg 支持的浏览器：Chrome、Firefox、Opera10+、IE9+、Safari5+
- audio标签相关的属性
  - src属性规定要播放的音频/视频的URL
  - controls属性规定浏览器应该为音频/视频提供播放控件
  - loop属性规定当音频/视频结束后将重新开始播放：如果设置该属性，则音频/视频将循环播放
  - muted属性规定要播放的音频/视频为静音

video标签

  <video src="./media/Butter-Fly.mp4" controls="controls" width="300" height="300"
loop muted autoplay poster="1.jpg"></video>

浏览器支持
ie8不支持video标签

HTML5支持的视频格式
- Ogg ：支持的浏览器：Firefox、Chrome、Opera
- MEPG4：支持的浏览器：Safari、Chrome、IE9+、Firefox
- WebM：支持的浏览器：Firefox、Chrome、Opera
video标签相关的属性
- src属性规定要播放的音频/视频的URL
- controls属性规定浏览器应该为音频/视频提供播放控件
- autoplay如果出现该属性，则视频在就绪后马上播放。
- loop属性规定当音频/视频结束后将重新开始播放：如果设置该属性，则音频/视频将循环播放
- muted属性规定要播放的音频/视频为静音

只属于video标签的属性

width属性规定视频播放器的宽度
height属性规定视频播放器的高度

<video src="butterfly.ogg" width="400" height="400"></video>

poster预览图片

<video src="butterfly.ogg" controls width="200" poster="pic.png"></video>

source标签

为媒介元素（比如video和audio）定义媒介资源

<video controls="controls" width="300">
       <!-- source 增加容错率，当第一个不生效时，会看第二个生不生效
    type="video/mp4" MIME类型 在这里可以省略 -->
	<source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    <! --您的浏览器不支持video元素播放视频 --!>
</video>

src属性规定要播放的音频/视频的URL
type属性规定媒体资源的MIME类型
注意：source元素可以链接不同的音频/视频文件，浏览器将使用第一个可识别的格式

新增表单元素

新增input类型

url

<input type="url" name="myurl">
 <!-- https://或http://开头 -->

<input type="email" name="usremail">
 <!-- @开头 -->

<input type="search" value="在这里搜索">

number

<input type="number" value="10" min="0" max="20" step="2"/>
  <!-- 数字类型 step='n' 代表输入的必须是n的倍数 -->

range

<input type="range" name="range" min="0" max="10" value="5" step = "2">
 <!--  滑动条（进度条） -->

color
- ```
<input type="color">
```

date

<input type="date">
   <!--  年、月、日 -->

datetime-local

<input type="datetime-local">
       <!--  年、月、日、时、分 -->

month

<input type="month">
       <!--  年、月 -->

time

<input type="time">
  <!-- 时、分  -->

week

<input type="week">
       <!--  年、周 -->

datalist标签

<input type="text" list="cars">
<input type="text" list="cars">
<datalist id="cars">
    <option value="WEB"></option>
    <option value="ASD"></option>
</datalist>
<!-- input 的 list 属性和 datalist标签的id属性对应 -->

新增表单属性

min、max和step属性

placeholder属性

<input type="text" placeholder="请您输入">

autofocus

<input type="text">
<input type="text" autofocus>
 <!-- autofocus 默认获得鼠标焦点 -->

form属性

<form action="" id="form1">
	<input type="text" name="username">
</form>
<input type="reset" form="form1">
 <!-- form 属性可以使外部的表单标签加入到form表单中，表单的form属性对应form标签的id-->

required属性
- 规定必须在提交之前填写输入域（不能为空）
- ```
<input type="text" name="username" required>
```

pattern属性

<input type="text" name="username" pattern="[0-9]">
<!--  pattern 正则表达式校验-->

multiple属性

<input type="file" multiple>
  <!--  multiple 设置可以多选-->

list属性

<input type="url" list="urlList" name="weblink">
<datalist id="urlList">
    <option label="百度" value="http://www.baidu.com"></option>
    <option label="新浪" value="http://www.sina.com"></option>
    <option label="搜狐" value="http://www.sohu.com"></option>
</datalist>