HTML5新增的标签

HTML5新增的标签

h5新增语义化标签

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

h5新增视频-音频标签

video视频

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadatanone	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

视频音频标签

	<!-- controls控制按钮  autoplay自动播放 -->
	<video controls width="400" height="400" autoplay>   
      <source type="video/mp4" src="./videos/c.mp4" />
    </video>
    <audio controls src="./music/MC高迪 - 一人我饮酒醉.mp3"></audio>
    <!-- 设置多个音频 -->
    <audio controls>
      <source src="./music/MC高迪 - 一人我饮酒醉.mp3" type="audio/mp3" />
    </audio>

新增表单元素

• 输入邮箱的文本框，只允许输入一段范围内数值的文本框

邮箱 <input type="email" id="email" name="a" />

• 输入url地址的文本框，如果内容不是url地址格式 就不允许提交

      <input type="url" name="b" />

• 输入数字的文本框，提交时会检查内容是否为数字

      <input type="number" name="n" />

• 只允许输入一段范围内数值的文本框，value当前的值 min最小值 max最大值 step每次拖动的步幅

      <input type="range" value="25" min="0" max="100" step="5" />

• 选择日期的文本框

      <input type="date" />

• 选择月份的文本框

      <input type="month" />

• 选择周的文本框

      <input type="week" />

• 选择时间的文本框

      <input type="datetime" />

• 提交按钮

      <input type="submit" />

• label 标签

  ​ label配合input一起使用

  ​ label的for属性和input的id属性值是一致的

  ​ 使用label点击文本，浏览器就会自动将焦点转到和该标签相关联的控件上

<label for="email">
      邮箱<input type="email" id="email" name="a" />
</label>

• placeholder 文本框处于未输入状态时 文本框中显示的提示信息

  autofocus 自动获取焦点 一个页面只能有一个

  required 必填项

<form>
 	<input
        type="text"
        required
        name="user"
        autofocus
        placeholder="请输入用户名"
      />
      <br />
      <input type="submit" />
</form>

CSS3新增加的属性

文字阴影

		font-size: 60px;
        font-weight: bold;
        /* 文字阴影 
        text-shadow：h-shadow  v-shasow blur color；
        h-shadow：必需  水平阴影的位置  可以是负值（阴影在左边）  为正值（阴影在右边）
        v-shasow  必需  垂直阴影的位置  可以是负值（阴影在顶边）  为正值（阴影在底边）
        blur 可选 模糊的距离 只能是正值
        color  可选  颜色
        */
        text-shadow: 5px 5px 5px #f00;

盒子阴影

		width: 300px;
        height: 300px;
        background-color: yellow;
        /* box-shadow: length length length length color inset;
           阴影离开盒子的横向距离
           阴影离开盒子的纵向距离
           阴影的模糊半径
           阴影的延伸半径(可省略)
           颜色
           是否使用内阴影(可省略 默认是外阴影)
         注意：顺序不可以改变
        */
        box-shadow: 1px 1px 1px 1px #f00 inset;