在介绍HTML语义化的案例分析之前，我们先来介绍一下前端与HTML的关系。

首先，你知道什么是前端吗？

一、前端：

- [1] 解决GUI人机交互问题

- [2] 跨终端

• PC/移动浏览器
• 客户端/小程序
• VR/AR等

- [3]Web技术栈

二、前端技术栈：

• JavaScript（行为）

• CSS（样式）

• HTML（内容）

三、前端应该关注哪些方面？

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

四、前端的边界

五、开发环境

• 浏览器：IE/Edge、CHrome、FIrefox、SAfari
• 编辑器：VSCode、Vim、WebStorm

六、HTML是什么？

HyperText Markup Language的英文大写字母缩写

七、HTML的格式及展示效果为：（如下图所示）

八、DOM树

九、HTML语法：

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如 input、meta
• 属性值推荐用双赢好包裹
• 某些属性值可以省略，比如 required、readonly

1.有序序列：ol(有序语法示例及展示效果)

2.无序序列：ul(无序语法示例及展示效果)

3.自定义序列：dl(自定义语法示例及展示效果)

十、链接

*文字标签，通过点击文字进入该链接对应的网站，进行访问（示例如下图所示）

*图片、音频、多媒体视频标签，点击则可以访问相关信息（示例如下图所示）

十一、输入标签

下图中，照片左边部分展示的是输入标签对应的相关代码（其中部分代码代表了输入时的限制范围），照片右边部分展示的是呈现给用户进行输入的界面。

十二、当网页中需要让用户在已有的选项中进行选择时

下图中，照片左边部分展示的是展现出用户所选择信息的相关代码，照片右边部分展示的是呈现给用户进行选择的界面。

十三、网页界面内容划分：（如下图所示）

十四、语义化是什么？

-HTML中的元素、属性及属性值都拥有某些含义

-开发者应该遵循语义来编写HTML

*******有序列表用ol;无序列表用ul

*******lang属性表示内容所使用的语言

十五、谁在使用我们写的HTML：

开发者、浏览器、搜索引擎、屏幕阅读器 （以某一个网址页面为例：）

十六、语义化的好处：

代码可读性、可维护性、搜索引擎优化、提升无障碍性

十七、如何做到语义化：

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码