表单，音视频，语义化标签与属性选择器，结构伪类选择器，伪元素选择器（按钮禁止点击）

Posted 2020-11-26 article-record

html5简介

万维网的核心语言，标准通用标记语言的写一个应用超文本标记语言（HTML）的第五次重大修改，作为新HTML语言，具有新的元素，属性和行为；广义的HTML是包含HTML5本身 + CSS3 + javascript，虽然不被所有浏览器所支持，但它是一种趋势；

新增语义化标签

<header></header> <!-- 头部标签 -->
<nav></nav> <!-- 导航标签 -->
<article></article> <!-- 内容标签 -->
<section></section> <!-- 块级标签 -->
<aside></aside> <!-- 侧边栏标签 -->
<footer></footer> <!-- 尾部标签 -->

注意：

1. 这些语义化标签是针对搜索引擎的；
2. 可以被使用多次
3. 在 IE9 中需要被转换成块级标签 display: block;

音频标签

<audio src="音频地址"></audio>
<!-- 由于mp3的格式不是被所有的浏览器所支持的 -->
<audio>
  <source src="url.mp3" type="audio/mpeg" />
  <source src="url.ogg" type="audio/ogg" />
</audio>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放，chrome 默认时禁用的
controls	controls	如果出现该属性，则向用户显示播放控件，各个浏览器样式不同
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	音频播放地址

视频标签

<video src="视频地址"></video>
<!-- 由于mp4的格式不是被所有的浏览器所支持的 -->
<video>
  <source src="url.mp4" type="video/mp4" />
  <source src-"url.ogg" type="video/ogg" />
</video>

属性	值	描述
autoplay	autoplay	视频就绪自动播放
controls	controls	向用户显示播放控件
loop	loop	循环播放
preload	auto，meta，none	当页面加载后载入整个视频；当页面加载后只载入元数据；当页面加载后不载入视频 （如果设置了 autoplay 属性，则忽略该属性）
src	url	地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放
width	px	设置播放器宽度
height	px	设置播放器高度

新增表单属性

input 新增 HTML5 表单属性，移动端常用

<!-- 按钮禁止点击 -->
<button disable></button>

属性值	说明
type="email"	限制用户必须输入邮箱类型
type="url"	限制用户必须输入网址
type="date"	限制用户输入日期
type="time"	限制用户输入时间
type="month"	限制用户输入月份
type="week"	限制用户输入星期
type="number"	显示用户输入数字 （mobile唤醒数字键盘）
type="tel"	显示用户输入手机号码（mobile唤醒数字键盘）
type="search"	搜索框
type="color"	生成一个选择颜色表单

属性	值	说明
required	required	表单不能为空
placeholder	提示文本	表单的提示信息
autofocus	autofocus	自动聚焦属性光标
autocomplate	off/on	需要成功提交过一次内容，需要有一个name属性，一般情况为off
multiple	multiple	可以选择多文件提交

CSS3 选择器

属性选择器

选择符	简介
E[attr]	选择具有attr属性的E元素
E[attr="val"]	选择attr属性等于val的元素
E[attr^="val"]	选择attr属性开头等于val的元素
E[attr$="val"]	选择attr属性结尾等于val的元素
E[attr*="val"]	选择attr属性中包含val的元素

结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第N个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

注意：nth-child(n)；nth-of-type(n) ；even：偶数；odd：基数

伪元素选择器

选择符	简介
::before	在元素内部的前面插入元素
::after	在元素内部的后面插入元素

注意：

• before 和 after 必须有 content 属性
• before 在内容的前面 after 在内容的后面
• before 和 after 创建一个元素，但是属于行内元素
• 因为在 dom 中看不到刚才创建的元素，所以称为伪元素
• 伪元素和标签选择器一样权重为1