[前端与 HTML | 青训营笔记]
这是我参与「第五届青训营」伴学笔记创作活动的第 1 天 🎉
📌 课程主要内容
📌 什么是前端
一句话总结便是：使用 Web 技术栈来解决多端图形用户界面交互问题
因此，前端开发时应着重关注以下几个层面：
- 功能是否满足用户需求
- 页面是否美观
- 是否具备无障碍特性
- 能否保证安全
- 是否具备流畅使用的性能
- 是否具备适配各种设备的兼容性
- 能否给用户好的使用体验
📌 前端技术栈都有什么
前端技术栈可以分为三层：
📃 结构层
- HTML （构建页面结构与内容）
📃 表现层
- CSS （设置页面样式）
📃 行为层
- JavaScript （定义网页的行为）
除上述三个外，网络协议也应是前端开发者不可忽视的需要掌握的技术之一
📌 浅谈 HTML
HTML，即超文本标记语言（HyperText Markup Language）
其中，“超文本”一词，体现在由 HTML 编写的页面中，可以包含图片、媒体、链接、表格等多种元素；而“标记”一词，则体现在 HTML 的语法格式上，HTML 文件一般都由形如 <h1>Hello world</h1> 这样的标签对及其标签之间的内容组成
下面是使用 HTML 编写的一个简单页面：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 </head>
8
9 <body>
10 <h1>Hello World</h1>
11 <img src="Hello.png" />
12 </body>
13
14 </html>
在以上代码中：
-
第 1 行的
<!DOCTYPE html>标记了当前的 HTML 文件是 HTML 的哪个版本，这样浏览器就会根据不同 HTML 版本选择不同的渲染模式 -
第 2 行的
<html>标签，为页面的根标签，其余所有标签均应写在其内 -
第 4 行的
<head>标签，主要包含一些关于页面元数据的标签，如<title>、<meta>等，这些元数据往往不直接呈现给用户 -
第 9 行的
body标签，其内容就是需要呈现给用户的，如<h1>、<p>等 -
第 11 行的
<img src="Hello.png" />，为图像标签，可以在页面中显示出指定的图像文件- 其中的
src是<img>标签的属性，用于指定图像文件的地址，该地址可以是本机磁盘内的某一文件，也可以是互联网中某个文件的 URL - 在 HTML 中，一般的标签都要求双闭合，即
<h1></h1>，但此处的<img>标签是一种空标签，以<img />这样的方式闭合标签，或者干脆不闭合都是可以的
- 其中的
📃 DOM 树
在浏览器获取到 HTML 文件后，会先进行对其内代码的解析，根据标签生成一个 DOM 树：
document
html
head
meta
title
body
h1
img
每一个标签在 DOM 树中，都有与之相对应的 DOM 节点
📃 HTML 语法
除 HTML 所规定的必须遵守语法之外，在编写 HTML 时可以遵循以下几点规范：
- 标签和属性不区分大小写，但是推荐统一小写
- 空标签可以不进行闭合，如
input、meta等 - 属性值推荐使用双引号包裹
- 要么为
true，要么为false的属性值可以省略，如required、readonly等
📃 语义化
未完待续...
