这是我参与「第四届青训营」笔记创作活动的的第1天，记录下第一节课的收获。

前端与HTML

HTML

解决GUI人机交互问题
实现跨终端（客户端/小程序/VR）
Web的技术栈

前端技术栈

JavaScript-----行为
CSS------------样式
HTML-----------内容
工作模式：
浏览器通过http网络协议将前端信息提交到服务器端，与服务器端进行交互。

前端特性

$\color{#88C8FF}{主要是人机交互功能、界面美化、安全、无障碍、兼容性}$

参考「 HTML 介绍」

1. DOM树

### 2. 语法 - 空标签可不闭合，比如 *input,meta* - 某些属性值可以省略，比如*required/readonly*
> HTML属性和标签参考见
[developer.mozilla.org/en-US/docs/…](https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%2FElement "https://developer.mozilla.org/en-US/docs/Web/HTML/Element") >

3. 补充【自定义列表 dl】

dt：描述事件的标题
dd: 描述事件的具体内容

<html>
   <title>dl</title> 
   <body> 
     <dt> 
        <dl>导演：</dl> 
        <dd>陈凯歌</dt> 
     </dt> 
   </body> 
</html>

<input type="range">
有范围限定数字输入
<input type="number" min="1" max="10">
有范围限定日期选择
<input type="date" min="2018-02-10" max="2023-06-28">

补充

浏览器解析CSS的两种模式：

标准模式(strict mode)：浏览器按W3C标准解析执行代码
怪异模式(quirks mode)：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

DTD声明：

浏览器解析时到底使用标准模式还是怪异模式，与网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

为了提高代码针对不同浏览器的可适应性，实现跨浏览器的CSS，日常代码编写中尽量使用“XHTML1.0最严格模式"。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

最新版的 W3C HTML5 规范
html.spec.whatwg.org/multipage/

前端与HTML |青训营笔记