本课小节

这节课介绍了什么是前端，前端应该关注的内容以及前端能干什么。本节课着重的讲解了前端语言的HTML。

何为前端？

简单来说就是解决人机交互问题，大致可以分为如下几个方面：

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

前端技术栈

HTML、CSS、JS、网络协议、服务器端构成了一个最基础的前端技术。把浏览器上的HTML、CSS、JS通过网络协议传输到服务器端进行渲染，大致如下图：

屏幕截图 2023-07-27 215959.png

前端应注意的内容

美观安全性能功能体验兼容无障碍

前端的革新

随着时代的发展，前端所做的东西超出了页面的范畴。我们可以用不同的开发不同的内容，比如：我们可以用nodeJS开发服务器端内容，ELECTRON开发后端内容.....

屏幕截图 2023-07-27 220838.png

HTML

HTML（HyperText Markup Language）

HyperText译为超文本。什么是“超”文本 ——图片、标题、链接、表格这类丰富的文本即为超文本

Markup Language译为标记语言。这一点在第一课提及过。例如 <h1>文章标题</h1>。

基本的HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

第一行的<!DOCTYPE html>声明你使用的是哪个版本的HTML版本
第二行的<html> </html> 是文档的根标签（标签推荐小写），所有标签写在根标签下。其中lang是标签的属性，"zh-CN" 是标签的属性值，通常用双引号。有些标签的属性值可以省略。
第三行的<head> </head> 存放的原数据，可理解为不让人见到的内容。
第七行的<body> </body> 写的东西可以被看见

DOM树

HTML文件会被解析成树状的DOM树

屏幕截图 2023-07-27 223009.png

一些标签

标题标签h1~h6<h1>这是一个标题</h1>
列表标签有序列表（order list）<ol>....</ol> 无序列表（unorder list）<ul>...</ul> 列表（list）<li>...</li>在浏览器中呈现如下：

屏幕截图 2023-07-27 224159.png

链接标签<a href="https://www.4399.com/" target="_blank"> </a> 其中target=_blank表示打开一个新的界面。
图像标签<img src="..." alt="..." width="..."/> alt表示图片未被正确加载显示的内容 width表示宽度 src表示路径
输入标签<input>输入的内容后续由JS处理
其他标签可以在这里进行查看

前端的页面布局

基本布局如下图

屏幕截图 2023-07-27 225423.png

语义化是什么？

我们在编写HTML都应该遵循语义化

HTML中的元素、属性及属性值都拥有某些含义
- 有序列表用ol 无序列表用ul等等

使用语义化能提升代码可读性，提高可维护性，优化搜索引擎，提升无障碍性

前端与HTML总结 ｜ 青训营