本堂课重点内容
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML 作用解析
- HTML 语义化
详细知识点介绍
前端技术栈
- JavaScript（行为）
- CSS（样式）
- HTML（内容）
关注方面
- 功能
- 美观
- 无障碍
- 安全
- 性能
- 兼容性
开发环境
浏览器
- IE / Edge
- Chrome
- Firefox
- Safari
编辑器
- VSCode
- Vim
- WebStorm
HTML
HyperText Markup Language
- 标签内包含标签名、属性名和属性值
- 可避免浏览器使用怪异模式来解析渲染页面
- <head></head> 用于存放页面元数据
- <html></head> 内的所有元素均在 DOM 树中
- 空标签可不闭合
- 某些属性值可以忽略，例如 required 等
标签
-
<dl> 可创建一个列表 <dt> 放置表明 <dd> 放置内容
-
<img> 可创建一个图片 可使用 src 属性进行展示图片 也可以使用 alt 为图片创建别名以来优化 SEO
-
<audio> 则是音频标签 同样使用 src 属性进行显示
-
<video> 则是视频标签 使用 src 属性进行显示
-
可以使用 <a> 标签进行页面跳转 使用 href 属性即可
-
<input> 可以创建一个输入框
- placeholder 可以进行输入框的提示或者表达该输入框需要填写的内容 作为引导使用
- type 用于设置输入框的类型 例如 password 则会让输入的内容都隐藏 date 可用于输入日期
- min max 可用于规范输入的最小值和最大值
-
<select> 和 <option> 可创建一个下拉选择框，方便用户进行选择
-
<blockquote> 可以创建一个引用 cite 属性可以传入引用的地址
-
<cite> 标签创建一个短引用
-
<code> 标签用于显示代码内容
-
<strong> 用于给内容加粗
课后个人总结
- 传达内容，而不是传达样式
- 要多注意兼容性的问题
- 要了解 HTML 的各个标签的含义
