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

一、本堂课重点内容：

本节课分别介绍了前端、HTML、网页内容划分和语义化。

前端：介绍了其概念、技术栈、需要关注的问题、涉及领域、开发工具。
HTML：介绍了其概念，对常用基本标签及其用法做了简单介绍。

二、详细知识点介绍：

前端

1 什么是前端

1.1 解决图形界面的人机交互问题

无论是浏览器、小程序还是VR设备，都是三件套+HTTP协议，即基于Web技术栈实现的多端互联技术。

2 前端技术栈

HTML内容+CSS样式+JS行为,通过网络协议与服务器端沟通。

3 关注问题

功能：需求	美观	无障碍：方便残疾人士，如语义化编码方便阅读器功能的正常应用	安全：诸如数据安全等	性能：保证速度较快，动画流畅	兼容：保证各个设备、浏览器都可以用	用户体验

4 前端的边界

NodeJS:服务器端应用
ELECTRON：客户端的应用
React Native:P2P在线传输、多人会议
WebRTC:流畅的3D游戏

5 开发工具

浏览器+编辑器（如vscode）

HTML

HyperText （超文本：图标题链接表格等） Markup Language （标记语言：开始 + 结束标签、属性）

1 Doctype

html版本：最终根据浏览器决定选择哪一种渲染模式（不写的话浏览器会以老旧模式产生怪异的渲染）

2 HTML语法

（1）推荐小写

（2）空标签可以不闭合（/）

（3）属性值推荐双引号，某些可省略

2.1 标题

h1~h6

2.2 列表

2.2.1`ol`有序/`ul`无序 `li`

2.2.2 定义列表

dl dt(title) dd(data)

2.3 链接（互联网）

a href

2.4 多媒体

<img src(链接) alt(替代文字) width />

<audio src controls(播放空间)>

<video src controls>

2.5 输入 `input`

2.5.1 `placeholder="请输入用户名"`

2.5.2 `type="range"`

2.5.3 `type="number" min="1" max="10"`

2.5.4 `type="date" min="2018-02-10"`

2.5.5 多选框`checkbox`

<p>

<label(作用域)><input type="checkbox" />苹果</label>

<label(作用域)><input type="checkbox" />香蕉</label>

</p>

2.5.6 单选框`radio`

<p>

<label><input type="radio" name="sport"(一类) />足球</label>

<label><input type="radio" name="sport"(一类) />篮球</label>

</p>

2.5.7 带提示输入+下拉框`list`

<input list="countries" />

<datalist id="countries">

<option>Greece</option>

<option>United Kingdom</option>

<option>United States</option>

</datalist>

2.6 文本框

<textarea>Hey</textarea>

2.7 下拉框`selext`

<p>

<select>

<option>中国</option>

<option>美国</option>

</select>

</p>

2.8 引用

2.8.1 块引用

<blockqoute cite=""></blockqoute>

2.8.2 引用斜体

<p>我喜欢的一本书<cite>小王子</cite>。</p>

2.8.3 行内引用双引号

<p>我们讲过<q>字符串是不可变量</q></p>

2.9 修饰

2.9.1 code

<pre(保留格式，如多空格)><code>

const add = (a, b) => a * b;

</code></pre>

2.9.2 `strong`

2.9.3 `em`斜体重读

3 内容划分

header-nav

main-article aside

Footerv

4 语义化

维护、搜索、盲人阅读

三、课后个人总结：

本节课算是html简单复习下，唯一看到的新标签是

2.5.7 带提示输入+下拉框list

<input list="countries" />

<datalist id="countries">

<option>Greece</option>

<option>United Kingdom</option>

<option>United States</option>

</datalist>

前端与 HTML | 青训营笔记