这是我参与「第四届青训营」笔记创作活动的的第1天

前端与HTML

什么是前端？

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

前端技术栈

JavaScript（行为）
CSS（样式）
HTML（内容）

前端应该注意那些方面

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

HTML是什么？

HTML是超文本标记语言(HyperText Markup Language)

HTML结构

一个标准HTML页面如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

从上到下依次为

文档声明头

页面语言-- en：英语 zh-CN:中文

头标签-- 表示的是页面相关配置：字符集、关键词、页面描述、页面标题、视口等等

body标签

}CKU1E8~20Y0Q6B{J4UZ%8Y.png

HTML的语法

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

HTML内容划分

$~DG%KBZ_9S5@N94{RWWWN.png$

语义化是什么？

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

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

语义化的好处

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

记住一点 HTML是传达内容的，而不是样式

如何做到语义化

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

多看看技术文档的规范

最后与大家共勉！

吹灭读书灯一身都是月多多自省

前端与HTML|青训营笔记