前端技术栈介绍
- HTML(内容）
- CSS（样式）
- JavaScript（行为）
- 以上三个前端三件套与网络协议构成前端技术栈
关注点
功能、美观、无障碍（对所有人都可以用）、安全性、性能（动画流畅、速度快、用户体验）、兼容性（多设备）
开发环境
浏览器、编辑器
HTML（HyperText Markup Language)
HTML语法
- 标签、属性不区分大小写（推荐小写）
- 空标签可以不闭合（input、meta）
- 属性值推荐双引号包裹
- 某些属性可以忽略（required、readonly）
something
-
标题h1~h6
-
列表
-
链接 a标签 herf
-
输入 input标签 通过type属性进行生成不同的类型样式，取值、输入用户名、日期等等
选项二选一 则将type类型改为 radio 可以实现勾选 还可以通过select标签包裹option 进行下拉标签的选择实现
- 引用（四种标签）：快捷引用 blockquote 标签 cite标签（短引用、用了别人的作品或者名字） q标签（短引用，具体引用的内容） code标签（引用代码，外面包裹pre标签引用多行代码）
- 内容划分
语义化
HTML中的元素、属性、属性值都拥有某些含义 有序列表用ol，无序列表有ul。。。 lang属性表示内容所用的语言
CSS
选择器的特异度
- id 、（伪）类 、标签
- 先后顺序如上
- 这种写法有利于在基础样式上对于特殊样式的修改，用特殊样式覆盖基础样式的定义
继承：某些属性会自动继承父元素的计算值，除非显式指定一个值
- 显示继承：inherit
- 如果一直往上找都没找到可继承的，就会用初始值例如：
- background-color初始值：transparent
- margin-left初始值为0
- 也可以利用关键字initial设置为初始值，background-color：initial
CSS 进阶
选择器和优先级
CSS的选择器决定了哪些HTML元素会应用这些样式。选择器的优先级决定了当多个规则冲突时，哪个规则会生效。
- ID选择器：
#id，优先级最高。 - 类选择器：
.class，优先级次之。 - 属性选择器：
[type="text"]，可以根据元素的属性来选择元素。 - 伪类选择器：
:hover,:first-child等，用于用户交互或根据文档结构选择元素。 - 标签选择器：
div,p等，选择所有相同类型的标签。
优先级顺序：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器。
盒模型
CSS中的盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。盒模型的宽度和高度的计算会影响到元素的布局。
width和height属性控制内容区域的尺寸。padding属性增加了内容区域的内边距。border属性在内边距之外添加边框。margin属性在边框之外添加空间，用于元素之间的间隔。
