Loading... # HTML ## 举个例子 ```html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> <h1>一级标题</h1> <p>段落内容</p> </body> </html> ``` - 浏览器将html文件解析成一个dom树 - <img src="http://img.wyy.ink/images/2022/07/22/image-20220723105128978.png" alt="image-20220723105128978" style="zoom:50%;" style=""> ## HTML语法 - 标签和属性不区分大小写，推荐小写 - 媒体： - audio和video可以通过control属性展示默认的进度条 ```html <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg" alt="Metal movable type" width="400" style=""> <audio src="/assets/music.ogg" controls ></audio> <video src="/assets/video.mp4" controls ></video> ``` - <img src="http://img.wyy.ink/images/2022/07/22/image-20220723105718295.png" alt="image-20220723105718295" style="zoom: 50%;" style=""> - datalist：使用预制/用户自己输入 ```html <input list="countries" /> <datalist id="countries"> <option>Greece</option> <option>United Kingdom</option> <option>United States</option> </datalist> ``` - \<q>\</q>表示引用前文内容 - \<pre>\</pre>表示预编译框其内部文字格式固定 - \<strong>\</strong>表示语意上的强调 - \<em>\</em>表示在一句话中突出重音 ## 内容划分 <img src="http://img.wyy.ink/images/2022/07/22/image-20220723110453419.png" alt="image-20220723110453419" style="zoom:50%;" style=""> - header展示一些导航栏，或者其他头部信息。 - 一个页面有且仅有一个main标签，存放网站的正文。 - aside ## 语义化 - HTML中的元素，属性等都需要有特定的含义。（不要全使用div） - 例如 - 无序列表就用ul，有序就用ol - lang属性表示内容所使用的语言 ### 考虑谁在使用我们写的html - 开发者：便于开发者理解和修改html（代码可读性） - 浏览器：便于浏览器解析，对不同标签做出不同处理（可维护性） - 搜索引擎：便于搜索引擎提取文章关键词，更易被搜索（搜索引擎优化） - 屏幕阅读器：便于一些无障碍阅读插件提取页面内容（提升无障碍性） ### 要传达内容而不是样式 <img src="http://img.wyy.ink/images/2022/07/22/image-20220723111044693.png" alt="image-20220723111044693" style="zoom:50%;" style=""> ### 如何做到语义化？ - 了解清楚每个属性的含义 - 思考最适合当前内容的标签 - 不要使用可视化工具生成前端代码 # CSS基础 ## CSS是什么 - Cascading Style Sheets ## 举个例子 ```css h1 { color: white; font-size: 14px; } ``` <img src="http://img.wyy.ink/images/2022/07/22/image-20220723113413936.png" alt="image-20220723113413936" style="zoom:50%;" style=""> ## 在页面中使用css的三种方法 ```html <!-- 外链 --> <link rel="stylesheet" href="/assets/style.css"> <!-- 嵌入 --> <style> li { margin: 0; list-style: none; } p { margin: 1em 0; } </style> <!-- 内联 --> <p style="margin:1em 0">Example Content</p> ``` - 一般推荐使用外链形式 ## CSS的工作方法 <img src="http://img.wyy.ink/images/2022/07/22/image-20220723113646141.png" alt="image-20220723113646141" style="zoom:50%;" style=""> ### 选择器 - 通配选择器 ```css * { color: red } ``` 所有元素都会被通配选择器选中 - 标签选择器（直接使用标签类型选择） ```css h1 { color: orange; } p { color: gray; font-size: 20px; } ``` - id选择器（使用元素id选择元素） - 类选择器（通过class选择元素） - 属性选择器： ```html <label>用户名：</label> <input value="zhao" disabled /> <label>密码：</label> <input value="123456" type="password" /> <style> [disabled] { background: #eee; color: #999; } </style> ``` - a[href^="#"]：以"#"作为前缀的a标签 - a[href$="#"]：以"#"作为后缀的a标签 - 伪类选择器： - 不基于标签和属性定位元素 - 两种 - 状态伪类 - 结构性伪类 - 状态伪类 ```css a:active { color: red; } ``` - 结构性伪类 ```css <ol> <li>阿凡达</li> <li>泰坦尼克号</li> <li>星球大战：原力觉醒</li> <li>复仇者联盟 3</li> <li>侏罗纪世界</li> </ol> <style> li { list-style-position: inside; border-bottom: 1px solid; padding: 0.5em } li:first-child { color: coral } li:last-child { border-bottom: none; } </style> ``` - 通过first-child表示选中li中的第一个 - last-child选中li中的最后一个 - 组合选择器 - 将选择器简单的组合起来 ```css <label> 用户名： <input class="error" value="aa"> </label> <span class="error"> 最少3个字符 </span> <style> .error { color: red; } input.error { border-color: red; }/*要求既是input又有error类*/ </style> ``` - 组合方式 - 直接组合：AB 满足A同时满足B - 后代组合：A B 选中B，如果它是A的**子孙** - 亲子组合：A > B 选中B，如果他是A的**直接子元素** - 兄弟选择器：A ~ B 选中B，如果它在A的**后面**并且和A**同级** - 相邻选择器：A + B 选中B，如果它紧跟在A后面 - 选择器组：用逗号将选择器分隔开 ## 颜色的表示 - RGB - #93ac12 或者 rgb(123, 231, 43) - HSL - rgb不能与颜色的一些特性直接关联起来 - hsl(0~360, 0~100%, 0~100%) - h：色相，基础的颜色 - s：饱和度，越高颜色越鲜艳 - l：亮度，越高颜色越亮 - alpha 透明度（在css里其实是不透明度） - rgba(255, 0, 0, 0.00~1.00) - hsla(0, 100%, 50%, 0.00~1.00) - #ff0000**78** 78表示透明度范围00~ff ## 字体 - font-family - todo --- # 理解CSS ## 选择器的特异度 - id优先级最高，然后是类选择器，最后是标签选择器 ```css <button class="btn">普通按钮</button> <button class="btn primary">主要按钮</button> <style> .btn { display: inline-block; padding: .36em .8em; margin-right: .5em; line-height: 1.5; text-align: center; cursor: pointer; border-radius: .3em; border: none; background: #e6e6e6; color: #333; } .btn.primary { color: #fff; background: #218de6; } </style> ``` ## 继承 - 有一些属性的值会自动继承父元素的属性值，称为继承。 - 继承的值是父元素的计算值！！！（计算值的概念在求值过程中） - 除非显示的指定子元素的属性值。 - 与文字相关的属性是一般是可以继承的（font-size，font-family），和盒模型相关的属性一般不可继承（宽度，高度）。 ### 显示继承 ```css * { box-sizing: inherit; } html { box-sizing: border-box; } .some-widget { box-sizing: content-box; } ``` ### 初始值 - css中每一个元素都有一个默认值 - 可以使用initial关键字表示设置为初始值 ### CSS求值过程 - filtering：获取dom树和样式规则，通过选择器匹配，属性有效等将规则中适用本元素的筛选出来 - 声明值：对于一个元素所匹配到的样式规则，可能有0～多个 - cascading：按照声明值中的来源，是否适用important，选择器特异性，顺序等选出优先级最高的**一个**属性值 - 层叠值：在cascading中最高优先级的值，比如2em，也可能为空 - defaulting：如果层叠值为空，使用继承的或者初始值 - 指定值：通过了cascading和defaulting之后，指定值一定不为空 - resolving：把一些相对值转换为绝对值，例如将em转换为px - 计算值：在浏览器在不开始进行具体布局的情况下所能得到的最具体的值。例如定义body宽度为60%必须在布局时获取设备宽度才能计算出具体值。 - formatting：将计算值的剩余部分继续转换，将某些关键字，百分数等都转化为具体值。 - 使用值：实际布局时候使用的值，不会再有相对值和关键字，例如400.2px - constraining：将使用值的小数转化成整数 - 实际值：渲染时实际生效的值，比如400px ## 布局(Layout)是什么 - 确定内容大小和位置的算法 - 依据元素、容器、兄弟节点和内容等信息来计算 ### 布局相关技术 - 常规流 - 行级 - 块级 - 表格布局 - FiexBox - Grid布局 - 浮动 - 绝对定位 <img src="http://img.wyy.ink/images/2022/07/23/image-20220723163056121.png" alt="image-20220723163056121" style="zoom:50%;" style=""> - width：指定Content-box宽度；如果为百分数，其相对于容器的contentbox宽度 - height：指定content-box高度；如果为百分数，其相对于容器的contentbox宽度；容器如果有指定的高度时，百分数才生效； ### box-sizing: border-box; <img src="http://img.wyy.ink/images/2022/07/23/image-20220723164307846.png" alt="image-20220723164307846" style="zoom:50%;" style=""> ```css <p class="a"> This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. </p> <p class="b"> Length and percentages values for width and height (and respective min/max properties) on this element determine the border box of the element. </p> <style> html { font-size: 24px; } .a { width: 100%; padding: 1em; border: 3px solid #ccc; } .b { box-sizing: border-box; width: 100%; padding: 1em; border: 3px solid #ccc; } </style> ``` <img src="/Users/yorkwu/Library/Application Support/typora-user-images/image-20220723164515768.png" alt="image-20220723164515768" style="zoom:50%;" style=""> ### 块级 VS 行级 - 块级盒子（CSS） - 不和其他盒子并列摆放 - 适用所有盒模型属性 - 行级盒子（CSS） - 和其他行级盒子放在一起或者拆开成多行 - 盒模型中height，width不可用 - 块级元素 - 生成一个块级盒子 - body，article等 - display: block; - 行级元素 - 生成行级盒子 - 内容分散在多个行盒（line box）中 - display: inline; #### display属性 - block 块级 - inline 行级 - inline-block 它本身是一个行级，可以放在行盒中；可以设置宽高；不会被拆开分成多行。 - none 排版时完全忽略 ## 常规流 - 根元素，浮动和绝对定位会脱离常规流，其他元素均在常规流之内 - 每个元素在一个排版上下文中参与布局 - 行级排版上下文 - 块级排版上下文 - Table排版上下文 - Flex排版上下文 - Grid排版上下文 ### 行级排版上下文 - Inline Formatting Context - 如果一个盒子内部仅包含行级元素，则会创建一个IFC - IFC内部的排版规则： - 盒子在行内水平摆放 - 一行放不下换行显示 - text-align表示一行内盒子的水平对齐 - vertical-align表示一个盒子在行内的垂直对齐 - 避开浮动元素 - overflow-wrap: break-word; - 行内排版时加上这句可以使得长单词能够换行 <img src="http://img.wyy.ink/images/2022/07/23/image-20220723171240912.png" alt="image-20220723171240912" style="zoom:50%;" style=""><img src="http://img.wyy.ink/images/2022/07/23/image-20220723171309200.png" alt="image-20220723171309200" style="zoom:50%;" style=""> ### 块级排版上下文 - Block Formatting Context - 某些容器会创建一个BFC： - 根元素 - 浮动、绝对定位、inline-block - Flex和Grid的子元素 - overflow不为visible的块盒 - display: flow-root; - BFC内部排版规则 - 盒子从上到下摆放 - 垂直的mergin会合并 - 盒子内部的mergin不和外部的mergin合并 - 避开浮动元素 ### 举个例子 ```html <span> This is a text and <div>block</div> and other text. </span> <style> span { line-height: 3; border: 2px solid red; background: coral; } div { line-height: 1.5; background: lime; } </style> ``` <img src="http://img.wyy.ink/images/2022/07/23/image-20220723171759243.png" alt="image-20220723171759243" style="zoom:67%;" style=""> - 在行级元素span内部放置了块级元素div - 浏览器渲染时，会对div前边的半部分和后边的半部分分别创建两个匿名块，此时span创建了一个BFC，不存在行级元素 - **元素内部要么只有行级元素要么只有块级元素** ### Flex Box是什么 - 可以控制box中的 - 摆放的流向 - 摆放顺序 - 盒子宽度和高度 - 水平和垂直方向的对齐 - 是否允许换行 - 在对齐时，使用主轴侧轴定位  - flex-direction：设置flex的布局方向，从左到右从右到左从上到下从下到上四个方向 - justify-content：主轴对齐方式 <img src="https://media.slid.es/uploads/42347/images/9253027/justify-content.svg" alt="justify-content" style="zoom:50%;" style=""> - align-items：侧轴对齐方式 <img src="https://media.slid.es/uploads/42347/images/9253044/align-items.svg" alt="align-items" style="zoom:50%;" style=""> - align-self：单独设置对齐  - order：排序 #### Flexibility - 可以设置盒子弹性，在有空余的时候，盒子可以伸展，空间不够也可以收缩。 - flex-grow：伸展 - flex-shrink：收缩 - flex-basis：基础大小（没有伸展时候的大小，也可以用width） ##### flex-grow - ```html <div class="container"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div> <style> .container { display: flex; } .a, .b, .c { width: 100px; } .a { flex-grow: 2; } .b { flex-grow: 1; } </style> ``` <img src="http://img.wyy.ink/images/2022/07/23/image-20220724020504097.png" alt="image-20220724020504097" style="zoom:50%;" style=""> ##### flex-shrink - ```html <div class="container"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div> <style> .container { display: flex; } .a, .b, .c { width: 400px; } .a { flex-shrink: 0; } </style> ``` <img src="http://img.wyy.ink/images/2022/07/23/image-20220724020557695.png" alt="image-20220724020557695" style="zoom:50%;" style=""> #### flex简写 - flex: 1 <=> flex-grow: 1 - flex: 100px <=> flex-basis: 100px - flex: 2 1 <=> flex-grow: 2; flex-shrink: 1 - flex: 1 100px <=> flex-grow: 1; flex-basis: 100px - flex: 2 0 100px <=> flex-grow: 2; flex-shrink: 0; flex-basis: 100px - flex: auto <=> flex: 1 1 auto - flex: none <=> flex: 0 0 auto ### Grid是什么 <img src="http://img.wyy.ink/images/2022/07/23/image-20220723173447054.png" alt="image-20220723173447054" style="zoom:50%;" style=""> - 使用display: grid 生成一个块级的grid容器 - 使用grid-template相关属性将grid划分为网络 - 设置每一个子元素占哪些行，列 - grid line网格线 <img src="http://img.wyy.ink/images/2022/07/23/image-20220724021044119.png" alt="image-20220724021044119" style="zoom:50%;" style=""> - grid area网格区域 <img src="http://img.wyy.ink/images/2022/07/23/image-20220724021130323.png" alt="image-20220724021130323" style="zoom:50%;" style=""> - grid-area: 1/1/3/3;将1，1，3，3围成的区域作为元素位置 例子： ```css .a { grid-area: 2/2/4/4; } .b { grid-area: 1/1/3/3; } ``` <img src="http://img.wyy.ink/images/2022/07/23/image-20220724021306800.png" alt="image-20220724021306800" style="zoom:50%;" style=""> ## position属性 - static 默认属性 - relative - 在常规流内进行布局 - 相对于自己本来应该在的位置偏移 - 使用top，bottom，left，right定位 - 流内其他元素当他没有偏移一样布局 - absolute - 脱离常规流布局 - 相对于最近的**非static**的元素进行定位 - 不会对流内布局造成影响 - fixed - 脱离常规流布局，和absolute差不多 - 相对于窗口进行布局 ## 总结 - 布局时在常规流中进行布局 - 脱离出常规流单独定位 - 在出现嵌套情况时，比如一个绝对定位的元素有一些子元素，那么会创建一个新的常规流对于这个元素的子元素进行渲染。 Last modification：July 26, 2022 © Allow specification reprint Like 如果觉得我的文章对你有用，请随意赞赏