html5新增标签（01）

目录

一、新增的块级标签语义化

二、新增表单控件

三、新增的块级标签

新增行内标签

---

一、新增的块级标签语义化

1. <header>我是头部标签</header>

   作用跟div 一样，就是有语义性（清晰）

   ---

2. <nav>
       <a href="/html/">HTML</a>
       <a href="/js/">JavaScript</a>
       <a href="/css/">CSS</a>
       <a href="/Vue/">VUE</a>
   </nav>

   并不是所有的 HTML 文档都要使用到 <nav> 元素，<nav> 元素只是作为标注一个导航链接的区域。

   ---

3. <main></main>

    main能包含别的标签，只能在文中出现一次，且只能当别人的父元素

   ---

4. <article>我是内容标签</article>

   文章段落，跟p标签差不多

   ---

5. <section>定义文档某个区域</section>

6. <aside>我是侧边栏</aside>

7. <footer>我是底部</footer>

这些语义化标签主要是对搜索引擎的，可以使用多次

---

二、新增表单控件

电子邮箱
<input type="email">

<input type="url">

我是数字
<input type="search">

手机号码
<input type="tel">

日期控件

年月日
<input type="date">

年月
<input type=“month”>

年周
<input type="week">

时间
<input type="time">

utc时间
<input type="datetime">

本地时间
<input type="datetime-local">

滑动条
<input type="range"> 

---

三、新增的块级标签

1.<datails>

<details>
    <summary>我是标题</summary>
    <summary>我是隐藏内容1</summary>
    <summary>我是隐藏内容2</summary>
    <summary>我是隐藏内容3</summary>
</details>

---

2.<figure> 

<figure>
    <img src="./img/01.png">
    <figcaption>
        我是图片标题
    </figcapion>
</figure>

<figure>元素的内容应该与主内容不相关，但如果被删除，则不应对文档流产生影响。

<figcaption>用作文档中插图的图像，带有一个标题：默认居左对齐 与写的位置相一致，写在图片上面就在上面，反之在下面

---

新增行内标签

1、进度条<progress>

<span>进度条</span><progress  value="50" min="1" max="100"></progress><span>度</span>

progress元素有max,value,position.labels四个属性

max:设置了进度条的最大数值，其用作分母的效果。返回进度条max属性的值。

value:设置了进度条的当前的值，其用作分子的效果。返回进度条vaue属性的值。

labels:返回进度条的标签的列表。

position:返回当前进度条的位置。(返回的是一个小数，其值是value / max的值，如果不设置value值，返回的是-1)

设置progress、css样式 -------------------------------------------------

       progress{
		width: 200px;
		height: 30px;
		background: #f00;
		}
		/* 适用于 360 谷歌 iE Opera */
		/* 修改 进度条的背景色*/
		progress::-webkit-progress-bar {
				
			background-color: #5555ff;
				
		}
		/* 修改 进度条的颜色*/
		progress::-webkit-progress-value {
				
			background: #f00;
				
		}

---

2、度量衡<meter>

<span>衡量度</span>
<meter value="88" min="1" max="100" low="80" high="100"></meter>

low 低 低于这个值的value还是原来的颜色。    

high 高 高于这个值的value是红色。 

在这两个值中间的value是黄色，  不加不变颜色

Value 如果标签内没有数字，那么标量的实际值就是0。

IE就不支持这个啦。

标签中的内容可以不包含任何数字，这时最大值会被认为是1

---

如果有书写错误还请帮忙指出来感谢！感谢！共同学习，共同进步。