这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
重点
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML 作用解析
- HTML 语义化
一、什么是前端？
🥧 三个要点：
- 解决GUI（图形界面）人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
- Web技术栈
前端工程师是使用Web技术栈，解决多端图形用户交互界面问题的工程师。
二、前端的技术栈？
🍔 基础前端开发要用到哪些技术？总的来说分为三层，即
- HTML（内容）
- CSS（样式）
- JavaScript（行为）
HTML(超文本标记语言,HyperText Markup Language)实现的是图形页面的框架，CSS(层叠样式表,Cascading Style Sheets)负责将这些框架进行修饰美化，JavaScript则为这些页面图形赋予生命，让它们可以与用户进行交互特效，比如鼠标点击会有弹窗等。
HTML,CSS,JavaScript都是运行在浏览器中，浏览器通过http网络协议和服务器端通信，即前端工程师将代码存储在服务器端，浏览器请求这些代码后渲染程网页上的内容；浏览器也可以把用户通过表单填写的内容，传回给服务器端
🍟 前端也要关注哪些方面？
- 功能
- 美观
- 无障碍
- 安全
- 性能
- 兼容
- 体验
🌭 前端开发需要什么？
在编辑器中编写代码 ---> 在浏览器中运行，展现效果
三、什么是HTML？
🍿 HyperText Markup Language
HyperText 超文本：图片、标题、链接、表格等
Markup Language 标记语言：以一个成对标签表示(<开始标签></结束标签>)
总结：通过标记语言表示表达超文本内容
<h1>文章标题</h1>
每个标签中会有各自的属性，来对标签进行修饰，如：
<img src="photo.jpg" />
这个标签的含义是，一个图片标签，用src属性指定哪张图片，src是属性名，photo.jpg是属性值
下面举例一个完整HTML代码块：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这里是页面标题</title>
</head>
<body>
<h1>这里是以及标题</h1>
<p>这里是段落内容</p>
</body>
</html>
效果：
标签<!DOCTYPE html>表示：标记当前使用的HTML文件是什么版本，浏览器会根据这个选择哪种渲染模式
<html></html>,是整个HTML文件的根标签，所有标签都要写在里面
<head></head>和<body></body> 顾名思义是文档的头标签和身体标签
🥓 DOM树
浏览器从服务器端请求到HTML文件后是怎么渲染成上面我们看到的页面呢？
其实浏览器引擎是通过把HTML解析成一种叫做“DOM树”的方式
🍳 HTML语法
-
标签和属性不区分大小，推荐小写
-
空标签可以不闭合，比如 input、meta
-
属性值推荐用双引号包裹
-
某些属性值可以忽略，比如 required、readonly
🌰 举个“栗子”：
四、HTML语义化
语义化顾名思义，将标签赋予含义，在构建HTML页面时避免大篇幅地使用无语义的标签。
如下图是一个基本页面的内容区域划分，在文章头部或者文章tab栏可以使用header标签，主题内容使用main标签，页面底部一些声明可以使用footer标签等。
🧇 语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化SEO
- 提升无障碍性
🥞 如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签适合描述这个内容
- 不适应可视化工具生成代码
🧈 常见语义化标签
<header></header>
<h1></h1>
<h2></h2>
<nav></nav>
<footer></footer>
<article></article>
<section></section>
<p></p>
<ul></ul>
<ol></ol>
<li></li>
<blockquote></blockquote>
