这是我参与「第四届青训营 」笔记创作活动的第1天。
什么是前端
概念
前端，又叫Web前端，是指计算机Web应用程序（页面）的前台页面。
解决问题
前端主要是用来解决GUI（图形化界面）人机交互问题。
如何做前端
前端技术栈
前端最基础的技术栈主要包括HTML,CSS,JavaScript三种。
其中HTML主要负责表达内容，比如：使用h1标签去表示一个标题。
<h1>大家好</h1>
CSS控制样式，包括元素的宽度、高度、位置以及字体颜色，背景颜色等等或者进行一些最基本的动画和过渡效果。
JavaScript主要负责控制行为，包括一些点击事件，高机动画的实现等等。
使用以上三种技术，通过网络协议发送请求，获得一些信息，展示到界面上，从而可以实现那一个动态的网页。
要考虑的方面
- 无障碍，是否所有人都可以用。
- 性能，页面以及程序的性能。
- 兼容性，页面对不同浏览器的兼容性等等。
- 外观，页面是否美观。
- 安全，用户数据，个人信息是否安全。
- 用户体验，页面的切换以及服务是否流畅。
HTML
什么是HTML
HTML，全称HyperText Markup Language，超文本标记语言。
HTML结构分析
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
-
<!doctype html>声明为HTML5文档，如果不写则会导致浏览器默认使用老旧的版本，出现一些不必要的错误。 -
<html>元素是HTML页面的根元素。 -
<head>元素包含了文档的元数据，例如：<meta charset="UTF-8">定义网页的编码格式- 外联样式表以及外联JavaScript
<title>表示网页的标题
-
<body>放可见的内容，包括文字，图片，音频以及视频等等。
语法
- 标签和属性不区分大小写，推荐小写。
- 空标签可以不闭合，比如 input、meta。
- 属性值推荐使用双引号包裹。
- 某些属性值可以省略，比如required，readonly。
常见的标签
标题标签（h1~h6）
代码
<h1>前端与HTML</h1>
<h2>前端与HTML</h2>
<h3>前端与HTML</h3>
<h4>前端与HTML</h4>
<h5>前端与HTML</h5>
<h6>前端与HTML</h6>
效果
链接标签
<a href="https://juejin.cn/">掘金官网</a>
输入标签
<input>，有很多种type，常见的有password、text、number、date、checkbox等等。
语义化
什么是语义化
HTML中的元素、属性以及属性值都拥有某些含义，比如：
- 写标题就使用标题标签h1~h6
- 有序列表用ol；无序列表用ul
开发者应该遵循语义来编写HTML。
使用语义化的好处
- 维护，自己和别人可以很简单的看懂
- 关键词提取，优化页面在搜索引擎的排序
- 读屏软件根据HTML来表示，选择合适的标签，可以提升其读取的效率
- 提升无障碍性
注意：尽量不要使用可视化的工具去生成代码，生成的代码无法控制
