前端技术栈

1. HTML负责页面的结构跟内容

2. CSS负责页面的样式

3. JavaScript来定义网页的行为

HTML，CSS和JavaScript都是运行在浏览器中，浏览器通过HTTP协议与服务器进行通信

前端应该关注那些方面？

- 前端要解决的根本问题是：图形界面下的人机交互的问题

1. 功能 是否满足用户的某些需求
2. 美观 界面是否好看
3. 无障碍 网站可以让所有人都能正常观看
4. 安全 是否可以保障用户数据的安全
5. 性能 做出的网站使用速度是否足够快
6. 兼容性 网页是否可以在各种设备上正常使用
7. 体验 前端是用户对产品最直观的感受，所以前端的体验非常重要

前端的开发环境

HTML是什么？

HyperText Markup Language

第一行十分重要 它标记了当前HTML的版本，保证你的代码可以正常运行

浏览器获取到HTML后会进行解析 解析成一个DOM树

stateDiagram-v2
doucument--> html
html --> head
html --> body
head --> meta
head --> title
body --> h1
body --> p

HTML的语法

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

具体语法

下面所有的代码都需要用<>包裹起来

代码	效果
h1~h6	标题起强调作用 （ h1权重最高 ）
ol li	有序列表（每一行前面有数字写明123......）
ul li	无序列表（每一行前面只有 . ）
dl dt dd	每一行前面只有空白
a href="网页地址"	链接 从一个页面跳到另一个页面上
img src="图片的地址"	展示图片 （如果前面有alt属性 则在图片加载的情况下用alt的属性值显示）
audio src="音频的地址"	显示音频
video src="视频的地址"	展示视频
input	输入框 （举个例子就是你写账号密码 选择日期的 的那个框框）
select option	选择框 （举个例子就是问卷调查 select是问题 option是你可以选择的选项）

网页页面的划分

HTML的语义化

• 在HTML中的元素，属性和属性值都具有某些含义
• 开发者应该遵循语义进行编写HTML

如何做到语义化？

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