一、前端介绍

什么是前端？

解决GUI（图形用户界面）人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR 等
Web技术栈

前端技术栈

HTML：内容

CSS：样式

JavaScript：行为

前端应该关注哪些方面

美观
功能
无障碍
安全
性能
兼容性

前端的边界

node.js：服务器端应用
ELECTRON：客户端应用
Reactive Native
WebRTC
WebGL
WebASSEMBLY

开发环境

浏览器
- IE/Edge
- Chrome
- Firefox
- Safri
编辑器
- VSCode
- Vim
- WebStorm

二、HTML

HTML是什么

Hypertex Markup Language

Hypertex：超文本。图片、标题、链接、表格
Markup Lange：标记语言。即在文本中加入一些说明符号来指示排版要求，字体大小，位置等。通过标记语法，使普通文本内容具有不同的格式。例：<h1>文章标题</h1>
```
<img src = "photo.jpg"/>
```
src：属性名

photo.jpg：属性值

HTML语言基础

基本代码

<!doctype html> <!--DOCTYPE是document type的简写，它并不是 HTML 标签，也没有结束标签，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。-->
<html> <!--根标签-->
    <head> <!--HTML头部，页面在浏览器加载后它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据。-->
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body> <!--HTML的主体，呈现给用户的内容-->
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

表现结果

DOM树

DOM（Document Object Model）即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。

HTML语法

标签和属性不区分大小写，推荐小写
```
<a href="http://www.w3school.com.cn">This is a link</a>
```
标签：<a>。在HTML中，通常标签都是由开始标签和结束标签组成的，开始标签用“<标签名>”表示，结束标签用“</标签名>”表示。HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。

元素：<This is a link>。指的是包含标签在内的整体，除去标签的部分叫做内容。

属性：href="http://www.w3school.com.cn"。要在开始标签中指定，用来表示该标签的性质和特性。通常都是以__属性名=”值”__（herf：属性名；http://www.w3school.com.cn：属性值）的形式来表示，用空格隔开后，还可以指定多个属性。指定多个属性时不用区分顺序。
空标签可以不闭合，比如 input、meta

空标签：没有闭合的标签称为空标签，如：<br />和<img />等。他们不存在成对的情况（<colgroup>除外）反之具有成对性质的例如：<div></div>、<form></form>就不是空标签。

在HTML中，在空标签上使用闭标签是无效的，例如：</br>。这样的情况是无效的HTML。
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

标题h1～h6

一

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

二

<h2>世界电影票房排行榜</h2>
<ol> <!--有序列表order list-->
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<h2>购物清单</h2>
<ul> <!--无序列表 unorder list-->
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

<h2>霸王别姬</h2>
<dl> <!--定义列表definition list-->
  <dt>导演：</dt> <!--HTML <dt> 元素 （或 HTML 术语定义元素）用于在一个定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着 <dd> 元素，然而，多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 <dd> 元素定义。-->
  <dd>陈凯歌</dd> 
  <dt>主演：</dt> <!--definition term的英文缩写 (自定义列表组)>
  <dd>张国荣</dd> <!--definition description的英文缩写 (自定义列表描述)>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

链接

一

<a href="https://www.bytedance.com/"> <!--href是Hypertext Reference的缩写。意思是指定超链接目标的URL。-->
  字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank"> <!-- target="blank"：新的浏览器窗口打开此超链接 -->
  字节跳动官网
</a>

二

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type" 
  width="400"
/> <!-- alt的意思是图片替代文字，用于当网络速度太慢、图片档案出错、浏览器禁用图像等导致图片失效的时候，alt替代文字可以描述图像的内容，作为补救措施 -->

<audio
  src="/assets/music.ogg"
  controls
></audio>

<video
  src="/assets/video.mp4"
  controls
></video>

输入

一

<input placeholder="请输入用户名"> <!--range 类型的 <input> 元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，其精确值并不重要。通常使用滑块或拨号控件而不是像 number 输入类型这样的文本输入框来表示。-->

<input type="range">

<input type="number" min="1" max="10"> <!--这种方式限制的是数字输入框右边的增减箭头按钮，最大值和最小值，不能对手动输入的数进行限制。如果手动输入一个大于100或小于10的数，还是无法限制。-->

<input type="date" min="2018-02-10">

<textarea>Hey</textarea><!--<textarea>标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是Courier）。-->

二

<p>
  <label><input type="checkbox" />🍎</label> <!-- label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio，点击文字和点击前面的单选框效果相同 -->
  <label><input type="checkbox" checked />🍏</label> <!--checked：一个布尔属性，表示该复选框当页面加载时是否被默认选中。-->
</p> <!-- checkbox类型：复选框允许选中多个值。-->

<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p><!-- radio类型：单选按钮允许选中一个值 -->

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p> 
<input list="countries" /><!-- countries：规定绑定到<input>元素的datalist的id。可以更改 -->
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

三

<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote><!--cite 属性规定引用的来源。该属性的值是一个包含在引号中并指向联机文档的URL，以及（如果有可能的话）引用在该文档中的确切位置。主流浏览器均不支持 cite 属性。不过，搜索引擎可能会使用该属性获得更多有关引用的信息。-->

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

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre><!--pre元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。-->

<p>在投资之前，<strong>一定要做风险评估</strong>。</p><!--strong：这个东西很重要-->

<p>Cats <em>are</em> cute animals.</p><!--em：语气上很重要，表示强调-->

内容划分

main：

标签用于指定文档的主体内容。

header：

标签定义文档或者文档的一部分区域的页眉。

nav：

标签定义导航链接的部分。

article：

标签定义独立的内容。内容本身必须是有意义的且必须是独立于文档的其余部分。

aside：

标签定义标签外的内容。（不重要的信息）

footer：

标签定义文档或者文档的一部分区域的页脚。元素应该包含它所包含的元素的信息。在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个元素。

语义化

语义化是什么？
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
  - 有序列表用__ol__；无序列表用__ul__
  - __lang__属性表示内容所使用的语言
谁在使用我们写的HTML
- 开发者：修改、维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键词、排序
- 屏幕阅读器：给盲人读页面内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
传达内容，而不是样式
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码

前端入门 - 基础语言篇1_前端入门与HTML | 青训营笔记