这是我参与「第五届青训营」伴学笔记创作活动的第 1 天
青训营快结束了，做大项目的时候，发现很多知识点都只是穿肠过，现在打算重头整理一遍，今天先从地基打起，主要整理HTML的相关笔记。
课程知识重点
graph TD
前端与HTML --> 开发环境
前端与HTML --> 基本语法
前端与HTML --> 常用标签
前端与HTML --> 语义化的必要
详细知识点
前端与HTML
用户端和服务端通过网络协议连接，而前端则负责呈现到用户端的相关代码。超文本标记语言(Hyper Text Markup Language)即用来组织呈现到用户端的富文本组织。
开发环境
VScode+Chrome
基本语法
- HTML基本由标签组成，标签内可以有属性及属性值。
- 标签基本要闭合，即有
<xxx>就要有</xxx>,空标签除外，比如meta，input - 属性值尽量用双引号
""包裹
常用标签
- 文本处理:
<h1-h6></h1-h6>;<p></p>;<mark></mark>;<center></center>;<blockquote cite="url"></blockquote>;<sup> 和 <sub>;<code></code> - 链接:
<a href="url" title=""></a>
href还可以填入同文档其他标签的id，title给出鼠标悬停时的提示，标签内可以放图片等其他元素，但注意不要使用“点击这里/链接”这样的词，尽量展示链接导向的作用，这样是为了无障碍用户着想。
- 列表:
<ul><li>...</li></ul>;<ol><li>...</li></ol>;<dl><dt>...</dt><dd>...</dd></dl> - 输入：
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
<p>
<label><input type="checkbox" />op1</label>
<label><input type="checkbox" checked />op2</label>
</p>
<p>
<label><input type="radio" name="sport" />op1</label>
<label><input type="radio" name="sport" />op2</label>
</p>
<p>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</p>
<input list="dbname" />
<datalist id="dbname">
<option>op1</option>
<option>op2</option>
<option>op3</option>
</datalist>
- 学到现在，我倒觉得常用标签是
<div>和<span>。div没有任何含义，主要用的划分页面中的内容。div对应块级元素，也就是一整行，同父级元素的高度。span对应行内元素，也就是行中一部分。
语义化
为了方便代码SEO和后期维护，建议什么内容用什么标签，虽然很多时候用div加css就可以实现大部分功能了，但是建议语义化。语义化还有一个好处就是方便无障碍化，屏幕阅读器不能读懂你的内容，但是可以识别标签，这样就方便残障人士使用网页了。
课后思考+面试题
- DOCTYPE 有什么作用？
doctype必须写html文件第一行，是用来告诉浏览器用什么文档标准解析文档，通常后接HTML
- title 属性和 alt 属性分别有什么作用？
title是鼠标移到元素上显示的文字，alt是图片加载失败时替代的文字（也用来为无障碍服务）
- HTML5 为什么只写
<!DOCTYPE html>
HTML 5 不基于 SGML，因此不需要对 DTD 进行引用
- 严格模式与混杂模式如何区分？它们有何意义?
（HTML5没有严格模式和混杂模式之分）而早期的版本严格模式指严格按照w3c标准解析，混杂即不是。DOCTYPE 不存在或形式不正确则用混杂模式解析，其余情况用严格模式解析。
- 一点心得
我觉得语义化和无障碍化有蛮多共同之处，毕竟无障碍要让机器都能读懂，相关属性自然不会少，标签也不能乱用。
