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

什么是前端

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

前端技术栈

HTML、CSS、JS都是运行在浏览器中，而浏览器通过网络协议与服务器进行通信。

屏幕截图 2023-01-19 215539.png

前端应关注哪些方面

要做出好的产品对于前端我们应关注产品的功能是否完善、界面是否美观、信息是否安全、用户体验如何、是否做到无障碍使用、产品性能如何以及产品的兼容性。

前端的边界

目前市场上前端的发展很快，仍需要我们不断地学习。

屏幕截图 2023-01-19 221054.png

开发环境

前端入门门槛较低，比较容易上手，开发环境也较多。图中列举几个较常用的开发环境。

屏幕截图 2023-01-19 221109.png

HTML是什么

HTML全称HyperText Markup Language
一个完整的HTML如下图所示，由这些组成

屏幕截图 2023-01-19 232229.png 在HTML中由各个DOM节点组成DOM树，在实际操作中可以通过鼠标右击来检查每个DOM节点

屏幕截图 2023-01-19 233018.png

HTML语法

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

HTML基础语句

HTML中标题有6个阶级，分别是h1~h6
有序列表：
<ol><li></li><li></li><li></li></ol>
示例：
1. 第一名
2. 第二名
3. 第三名
无序列表：
<ul><li></li><li></li><li></li></ul>
示例：
- 张三
- 李四
- 王五
描述列表：
<dl><dt></dt><dd></dd><dt></dt><dd></dd><dd></dd><dd></dd></dl>
示例：
标题
标题的值
主演
孙七
周八
吴九
链接：
<a href="https://www.bytedance.com/">字节跳动官网</a>
<a href="https://www.bytedance.com/" target="_blank">字节跳动官网</a>
其中target="_blank打开新页面
图片：
<img src="图片的地址" alt="图片加载失败/图片正在加载中" width="400"/>
音频：
<audio src="音频的地址" controls></audio>
视频：
<video src="视频的地址" controls></video>
其中controls是浏览器默认播放键
表单：
文本框：<input placeholder="请输入用户名">
选择区间值：<input type="range">一个类似调节亮度的选择条
输入数字: <input type="number" min="1" max="10">可设置最小值和最大值
选择日期：<input type="date" min="2018-02-10">
输入多行文本:<textarea>可输入多行文本</textarea>
单选按钮：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
复选框：
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车从name相同的选项中选择多个
下拉列表：

<select name="cars">
<option value="volvo">北京市</option>
<option value="saab">天津市</option>
<option value="fiat">上海</option>
<option value="audi">深圳</option>
</select>

可提示的文本选择框；

<input list="countries"/>
<datalist id="countries">
    <option value="volvo">北京市</option>
    <option value="saab">天津市</option>
    <option value="fiat">上海</option>
    <option value="audi">深圳</option>
</datalist>

引用：
长引用

<blockquote cite="引用的地址">
  <p>长引用</p>
</blockquote>

短引用

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

引用前面出现过的

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

引用代码（可长可短）

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

引用多行代码

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

强调重点

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

强调文章中需要重读的部分

<p><em>啊！</em>大海</p>

HTML内容划分：

  header：标题、页面原数据
  nav：导航
  main:文章主体，一般来说只有一个
  aside；与文章主体相关，并不属于文章内容
  article：文章标签
  footer:放在文章末尾，一般会一些写版权信息以及引用链接等屏幕截图 2023-01-20 120607.png

语义化

什么是语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
例如：
有序列表用ol；无序列表用ul
lang属性表示内容所使用的语言
不可随意更改删除

为什么要语义化

首先我们需要知道谁在使用我们写的HTML

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

语义化的好处：
对团队来说提升代码的可读性
提升可维护性
搜索引擎优化
提升页面无障碍性
HTML中，我们需要注意的是HTML传达的是内容，不是样式

如何做到语义化：

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码
可以使用一些编译器的插件进行辅助编写，但是可视化工具写的代码不好控制其标签，不建议使用

前端与HTML | 青训营笔记