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

一、前端知识点总结

1.什么是前端？

解决GUI人机交互问题
跨终端
如：PC/移动浏览器、客户端/小程序、VR/AR等。
Web技术栈

前端工程师：使用web技术栈解决多端图形用户界面交互问题的工程师。

2.前端技术栈

JavaScript、CSS、HTML和网络协议构成前端最基础的技术栈（前端）。

3.前端应该关注哪些方面？

功能：解决什么问题、是否满足需求
美观：是否简洁、美观
安全：能否保证用户账户安全
无障碍：是否对于所有用户都可使用
性能：体验是否流畅
兼容性：是否能在多设备上使用
体验：用户体验感

4.前端的边界

5.开发环境

二、HTML知识点总结

1.什么是HTML？

HTML即超文本标记语言，是用来描述网页的一种语言。

HyperText    Markup Language
        ↓                        ↓
图片、标题         标签语言
链接、表格

DOM树：

2.HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如 impart、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如 required、readonly

（1）标题h1~h6

h1定义最大标题
h6定义最小标题

（2）列表标签

有序列表：
ol标签用于定义有序列表，li标签用于定义列表项。

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

世界电影票房排行榜

阿凡达

泰坦尼克号

复仇者联盟

无序列表：
ul标签用于定义无序列表，li标签用于定义列表项。

<h2>购物清单</h2>
<ul>
  <li>🍓</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

购物清单

🍓

🍉

🍎

自定义列表：
dl标签用于定义自定义列表，dt标签用于定义名词，dd标签用于定义名词解释。
注：dl标签内只能包含dt和dd标签，dt和dd标签内可包含任意标签

<h2>霸王别姬</h2>
<dl>
  <dt>导演: </dt>
  <dd>陈凯歌</dd>
  <dt>主演: </dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期: </dt> 
  <dd>1993- 01- 01</dd> 
</dl>

霸王别姬

导演:

陈凯歌

主演:

张国荣

张丰毅

巩俐

上映日期:

1993- 01- 01

（3）链接

<a href="https://www.bytedance.com/">
字节跳动官网
</a>

target="_blank"打开一个新窗口

<a href="跳转目标" target="目标窗口弹出方式">
文本或者图像
</a>

（4）媒体标签

src用于存放图片路径，audio标签用于嵌入音频，video标签用于嵌入视频

<img src="图片路径" alt="图片说明" title="提示文本" width="图片宽度" height="图片高度" border="图像边框粗细度"/>

（5）输入

<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>

（6）选项

<p>
<label><input type="checkbox" />🍎</label>
<label><input type="checkbox" checked />🍏
</label>
</p>

<p>
<label><input type="radio" name="sport" />
⚽</label>
<label><input type="radio" name=" sport" />
🏀</label>
</p>

<p>
<seLect>
<option>🥑</option>
<option>🍕</option>
<option>🌭</option>
</select>
</p>

<input list="countries" /> 
<datalist id="countries">
<option>Greece</option> 
<option>United Kingdom</option>
<option>United States</option>
</datalist>

type样式：checkbox为复选框，radio为单选框
select标签为下拉选择
option标签为输入选择框中的输入提示

（7）引用

blockquote标签：快捷引用
cite标签：短引用（一般为作品名或者章节名）
q标签：短引用（具体引用内容）
code标签：代码引用（可单行或多行）
strong标签：字体加粗
em标签：字体倾斜

（8）页面内容划分

header标签：页头
nav标签：页面导航
main标签：页面内容主体（一个页面只有一个）
aside标签：副内容（广告、热点推荐等）
article标签：文章正文（可有可无可多个）
footer标签：页尾（参考链接、版权等信息）

3.语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言

4.语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

5.谁在使用我们写的HTML？

开发者 - 修改、维护页面
浏览器 - 展示页面
搜索引擎 - 提取关键词、排序
屏幕阅读器 - 给盲人读页面内容

三、课后总结

本章为前端的入门教学，大致了解并学习了HTML的相关知识点，如其含义与各类标签，由于标签的种类繁多，各类标签有时容易混淆，不易掌握，需课后多加练习，熟记常见标签的用法。

前端与HTML｜青训营笔记