一、什么是前端

• 解决GUI人机交互问题
• 跨终端
• web技术栈

二、前端技术栈

graph TD
服务器端 --> JS,CSS,HTML
JS,CSS,HTML -->服务器端

• HTML：负责页面结构内容
• CSS: 设置页面样式
• JS: 定义网页行为

前端应关注哪些方面

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

HTML是什么？

HTML 全名为HyperText Markup Language

标签上可以写入属性，例如:

<img src="photo.png"></img>，src为属性名，photo.png为属性值

HTML语法

• 标签属性推荐小写
• 空标签可以不闭合

如 input、meta

• 属性值使用双引号包裹
• 某些属性值可以忽略，

如required，readonly

标题 <h1>到<h6> （依次减小）

有序列表 <ol>

无序列表 <ul> 列表标签 <dl>

其中父标签<dt>子标签<dd>

链接<a herf="https://baidu.com">

最重要的属性是herf，代表链接跳转到的地址

target属性为_blank时，点击链接会新开一个页面

输入

<input type="range">

type 属性有滑块条 range 数字框 number 日期输入框date 多选输入框 checkbox 单选框 radio

语义化

好处

• 提高代码可读性
• 提高可维护性
• 有利于搜索引擎优化
• 提升无障碍性

如何做到语义化

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