前端与HTML | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第1天
什么是前端
通常指网站的前台部分（用户可以看到的部分）
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端小程序 （APP）
- VR/AR等
- Web技术栈
- 前端应该关注：
- 功能
- 美观
- 无障碍
- 安全
- 性能
- 兼容
- 体验
前端技术栈
- 前端
- 三件套(html，css，js)
- 其他语言和框架(ts，vue，react......)
- 服务器端
前端的边界
开发环境
（不限于）
- 浏览器
- 编辑器
HTML
超文本标记语言
- HyperText
- 图片
- 标题
- 链接
- 表格
- Markup Language
<!--元素、标签 -->
<h1>一级标题</h1>
<img src="photo.png"/>
HTML文档结构
<!doctype html>
<!-- <>标签 !强调/声明 doctype文档类型 html 说明文档使用的版本，告诉浏览器按照HTML5标准来进行解析-->
<html> <!--所有的网页文档内容都需要写在此标签内 -->
<!--双标签，结构性标签，内部需要包裹内容或者其他标签 -->
<head> <!--网页头部，包含网页基本信息 -->
<meta charset="utf-8"><!--设置网页的展示语言，设置字符集编码，utf-8:国际编码/万国码 -->
<meta name="keywords" content="前端，html"> <!--设置网页关键字，可在搜索引擎中搜索关键字找到网页 -->
<meta name="description" content="前端基础学习"> <!--网页描述信息 -->
<title>The title of the web page</title> <!--网页的标题标签，用户可见 -->
</head>
<body> <!--网页主体内容展示区域，用户可见 -->
</body>
</html>
DOM树
基于上述文档结构，可构建DOM树
内容划分
关于语义化
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 传达的是内容，而不是样式
如何做到语义化
- 了解每一个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
