前端三板斧——HTML、CSS、JavaScript
- HTML负责页面结构和内容
- CSS负责设置页面的样式
- JavaScript负责定义网页的行为
三者都是运行在浏览器中的，浏览器通过HTTP协议和服务器进行通信。
做前端的关注点
- 功能：产品有哪些功能？解决了哪些问题？有没有满足用户的需求？
- 美观：做出的页面是否好看？
- 无障碍：我们做出的网站是不是所有人都可以用到？（比如说，有色盲症的人群）
- 安全：我们做的产品是否能保障用户数据的安全？（是否存在一些漏洞）
- 性能：我们的网站速度是否足够快？动画足够流畅？用户体验是否足够好？
- 兼容：我们的网站是否能够在各种各样的设备上正常使用？
- 体验：带给用户的体验是否足够好？
前端的边界
前端的开发环境
HTML
超文本标记语言
这是一段完整的HTML代码
<!DOCTYPE html>
(1)作用：告知浏览器该页面文件的文档类型，指示使用哪个HTML版本编写页面。
(2)位置：声明于HTML文档第一行，标签前。
(3)声明对大小写不敏感。
(4)声明没有结束标签
<html lang="en">...</html>
(1)告知浏览器其是一个HTML文档。
(2)和标签限定了文档的开始点和结束点。文档的头部由标签定义，主体由标签定义。
(3)lang属性(语言属性)：当搜索引擎或浏览器拿到语言属性后，可能做一些针对语言的辅助操作，en-表示英文
- 标签属性
(1)标签-零或多个标签属性，注意:标签属性和标签名称、标签属性和标签属性之间需要空格隔开
(2)标签属性 key="value" 即 名称="值" 形式
(3)常见标签属性:class、id、style、lang、src等
- 文件的头部...
(1)通常引用样式表、提供元信息等
(2)文档头部中的 ... 定义文档的标题，在网页上体现为网页标签的标题。
(3)一个元素必须包含且只能包含一个元素
- 文档的主体
<body>...</body>
body元素定义文档的主体，包含文档的所有内容（文本、超链接、图像、表格和列表等等）
标题 H1~H6
列表
- 第一部分为有序列表
- 第二部分为无序列表
- 第三部分为表单列表
链接
二者区别在于target="_blank" 表示点击跳转到另一个窗口
媒体
- 图片 其中alt 表示替代文本，会在图片加载不出来的时候展示文字
- 音频
- 视频 两个controls 都表示手动开启
输入
<input>标签更多属性：：输入（表单输入）元素 - HTML（超文本标记语言） | MDN (mozilla.org)
<textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本
- 多选框
- 单选框
- 选择菜单
- 数据列表搜索框
一些文本示例
- blockquote 快捷引用
- cite 短引用
- q 具体引用内容
- cite 摘要
