这是我参与「第四届青训营 」笔记创作活动的的第1天
1.什么是前端
-
解决 GUI 人机交互问题
-
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR 等
-
Web 技术栈
以一句话总结：前端就是利用Web技术栈解决多端图形界面下人机交互问题的技术。
2.前端技术栈
“三大件”：HTML、CSS、JavaScript。
- HTML负责页面的内容
- CSS负责页面的样式
- JavaScript负责页面的行为（交互）
这是一名前端工程师立足继而前进的基石。
3.理解HTML
HTML：即Hyper Text Markup Language，超文本标记语言。
HTML 是用使用一系列标记标签来描述网页的一种语言，它不是一种编程语言，而是一种标记语言 (markup language)。
简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我是一级标题</h1>
<p>我是段落内容</p>
</body>
</html>
小提示：在VSCode中可利用输入 ！+ Tab键 或者 html : 5 快速生成模板。
4.DOM树
DOM（Document Object Mode） 即文档对象模型
- 文档：HTML文档
- 文档对象：页面中的元素
- 文档对象模型：对象被组织在一个树形结构中，用来表示文档中对象的标准模型就叫DOM，目的为了让程序（js）去操作元素
DOM描绘了一个层次化的节点树，通过节点的操作，来实现对文档内容进行增删改查。
5.HTML语法
- 标签和属性不区分大小写，推荐使用小写
- 空标签可以不闭合，如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
标签使用简单示例：
HTML标题：从 <h1> 到 <h6> 进行定义，<h1> 定义最大的标题，<h6> 定义最小的标题。
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
HTML列表：分为 <ol> （有序列表）、 <ul> （无序列表）和 <dl> （定义列表）。
<!-- 我是有序列表 -->
<h3>编程语言排行榜随手搜</h3>
<ol>
<li>C</li>
<li>Java</li>
<li>Python</li>
</ol>
<!-- 我是无序列表 -->
<ul>
<li>香蕉</li>
<li>苹果</li>
</ul>
<!-- 我是定义列表 -->
<dl>
<dt>JDK</dt>
<dd>
Java Development Kit: Java 开发工具包，提供了 Java
的开发环境和运行环境。
</dd>
<dt>JRE</dt>
<dd>
Java Runtime Environment: Java 运行环境，为 Java 的运行提供了所需环境。
</dd>
</dl>
HTML链接：href属性规定链接的目标。
<a href="https://www.bytedance.com/zh">字节跳动</a>
HTML内容划分：
6.HTML语义化
什么是语义化： HTML 中的元素、属性及属性值都拥有某些含义
<div>和<span>无法提供关于其内容的信息。<form>、<table>以及<img>清晰地定义其内容。
语义化的好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化：
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
7.最后总结
今天的内容更多还是复习巩固，但将其整理成一篇笔记却没想象中那么轻松，心里想的，嘴上说的，键盘上敲打出来的内容经常不能协调一致，这里还要感谢一下Victor252同学，参考了他笔记的排版。
参考链接：
Victor252同学的笔记：重讲前端与HTML | 青训营笔记
