前端：迷人的HTML5 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

---

前端应关注的方面?

应关注产品的功能、性能、安全、兼容性、美观、体验感等。

html语法书写注意

1-标签、属性推荐小写
2-空标签可以不闭合（但是在各个框架中一般都是闭合的）
3-属性值采用双引号包裹
4-一些属性值可以省略，required【输入值必需】、disabled【限制输入】、readonly【输入值无法更改】、checked等

video标签和audio标签的一些可选特性

controls：是否展示播放控件
loop:是否循环播放
autoplay:是否自动播放，该属性被设置之后，就会忽略preload属性；
以上三个属性的属性值都可以省略。
preload属性：页面加载的时候就加载并预备播放。

dl，dt

    <dl>标签定义一个描述列表【html5】。
    <dl> 标签与
        <dt>【标签定义一个描述列表的项目/名字。】
        <dd>【标签被用来对一个描述列表中的项目/名字进行描述标签，能放置段落、换行、图片、链接、列表等等。】
    一起使用。

HTML5中input标签的一些有意思的新类型

color类型：用户通过取色器提交喜欢的颜色

<input type="color" name="favcolor">

date类型

选择生日: <input type="date" name="bday">

email类型，输入框判断邮箱格式是否正确

输入邮箱: <input type="email" name="email">

number类型：限定输入数字的范围，默认值，步长

数量 ( 1 到 5 之间,步长2 ): <input type="number" name="quantity" min="1" max="5" step="2" value="3">

range类型：滑动条,限定输入数字的范围，默认值，步长

<input type="range" name="points" min="1" max="10" step="2" value="3">

label标签

标签为 input 元素定义标注（标记）。
当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。

<form action="demo_form.php">
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" value="male"><br> 
    <label for="female">Female</label> 
    <input type="radio" name="sex" id="female" value="female"><br><br> 
    <input type="submit" value="提交"> 
</form>

语意化标签 header、article、footer、nav、section

header	定义了文档的头部区域
footer	定义 section 或 document 的页脚。
article	定义页面独立的内容区域。
section	定义文档中的节（section、区段）。
details	用于描述文档或文档某个部分的细节
aside	定义页面的侧边栏内容。
dialog	定义对话框，比如提示框
nav	定义导航链接的部分。
meter	定义度量衡。仅用于已知最大和最小值的度量。
progress	定义任何类型的任务的进度。
mark	定义带有记号的文本。
time	定义日期或时间。