HTML与前端（一）

前端的关注要点是什么？图形界面下的人机交互

关注要点

• 功能
• 美观
• 安全
• 性能
• 无障碍

前端技能树

HTML中的列表

• 有序列表 ol+li
• 无序列表 ul+li
• 定义列表 dl+dt+dd

HTML中的链接

a标签

• href表示链接地址
• target表示链接的打开方式 _blank 新窗口打开

img audio video

• img 的alt属性是在图片无法加载时候的默认值
• audio和video如果设置controls 会自动渲染一个滚动条

HTML的控件

input

• placeholder 占位符
• type="range" 是一个滚动条
• type="number" 一个数字输入框，可以设置最大最小值
• type="data" 是一个日期选择框
• type="checkbox" 允许用户选择多个值
• type="radio" 单选框
• type="password" 最后两个外面要有label标签包裹

select option

这两个标签组成下拉选择组件

textarea

多行文本输入框

有提示的输入框

<input list="countries">
<datalist id="countries">
    <option>Greece</option>
    <option>United Kingdom</option>
    <option>United States</option>
</datalist>

HTML中的文本语义化标签

• blockquote 长引用
• cite 短引用
• q 前文提到的内容
• code 表示代码
• pre + code 包裹多行代码
• strong em标签都可以加粗文本，前者表示重要性，后者表示突出（重音？）

HTML内容划分标签

• header 导航/介绍
• main 表示主内容
• aside 侧栏
• article 一般在main里面
• footer 参考链接/版权信息

HTML语义化

谁在使用HTML

• 开发者--开发/修改/维护
• 浏览器--展示
• 搜索引擎--SEO
• 屏幕阅读器--为盲人提供

好处？

• 代码可读性
• 可维护性
• SEO优化
• 提示无障碍性

CSS（二）

如何使用CSS？

• 外链
• 嵌入
• 内联

选择器优先级

！important > id > class||伪类||元素 > 标签|| *

属性选择器

可以配合一定的正则表达式，选择属性的值进行样式的添加

伪类选择器

基于DOM状态或者DOM结构来进行选择。

a -- 状态形

• a:link
• a:visited
• a:hover
• a:active 以上也是一个伪类优先级顺序，可以通过 LoVe HAte规则记忆。
• :focus 选中输入的状态

结构性伪类

• :first-child
• :last-child
• :nth-child 是父标签的第n个元素的同时必须是选中的元素
• :nth-of-type 父标签之下的第n个选择元素标签，两者都可以使用odd，even作为参数

组合选择器

• 直接后代 div > p
• 后代 div p
• 并列 div,p

color

• RGB RGB(x,y,z) #xyz(转换16进制)
• HSL Hue/Saturation/Lightness
• keyword
• alpha 透明度，在6位16进制表示的后面再加2位用于表示透明度-原图---全红

字体

font-family

• 可以一次性设置多个值，预防系统没有相应字体，优先级以此下降
• 通用字体簇:serif, sans-serif，cursive
• 字体最后写上通用字体组，英文字体放在中文字体前面。

font-size

• 可继承，chrome最小12px
• em表示相对于父级字体大小的倍数，百分比也是

font-style

可以设置字体风格

font-weight

• 可以设置文字粗细 100-900
• normal-400
• bold-700

行高的设置

• 直接用px单位设置
• 使用不加单位的整数或者小数，表示为自己font-size属性的倍数。

字体属性合并

font: style weight size/height family 例子： font: bold 14px/1.7 sans-serif

对齐

• text-align: left center right justify(空格自适应)

字母距离

• word-spacing: px
• letter-spacing:px

文字缩进

• text-indent: px

文字装饰text-decoration

• none
• underline,
• line-through
• overline

空格控制 white-space

• normal(多个空格合并)
• nowrap(永不换行)
• pre(保留html中的空格和换行，并不合并)
• pre-wrap(显示不下的话自动换行)
• pre-line(合并空格，保留换行)

CSS(三)布局和继承

继承

某些属性会自动继承其父元素的计算值。

• font-size
• color
• visibility

显式继承

使用 inherit 关键字可以使不能继承的属性以显式继承的方式获取值。

属性初始值

每个属性都有一个默认的初始值，可以使用initial恢复初始值。

CSS求值过程

• filtering 过滤合法属性
• cascading 选择显式赋予的优先级最高的值，不一定有
• defaulting 如果没有cascading值，使用默认值
• resolving 将相对数值转化为绝对值，比如em
• formatting 将百分比转化为绝对值
• constraining 将计算绝对值进行规则的应用，比如小数转化整数

Layout

盒模型

width

• 指定content box宽度
• border-box content-box 下的区别
• auto由浏览器根据其他属性确定

height

• auto 由子元素决定
• border-box content-box 下的区别
• 容器没有定高，子元素百分比不会生效（相对容器的content）

padding

• 指定四个方向的内边距
• 百分比设置是相对容器的width

border

• 指定边框的样式 粗细 颜色
• 当border的上下宽度占据了元素的全部的时候可以用于模拟三角形

margin

• 定宽 使用margin:auto 水平居中
• margin collapse. 当上下两个元素垂直轴对应的情况下会发生margin 折叠，选取大的那个

block&inline

• block 独占一行
• 相邻inline会在一行
• height，width对inline无效
• inline 元素会组合成一个line box
• inline-block 本身是行级，生成line box；但是可以设置宽高，因为会给里面的元素生成一个块级元素

overflow

当元素定高，可能会发生内容的移除

• visible 默认值 全部可见
• hidden 溢出不可见
• scroll 元素有个单独的滑动框

常规流

默认的layout方法，根元素，浮动和绝对定位的元素会脱离常规流。

行级排版上下午 IFC

• 只包含行级box的容器会创建一个IFC
• IFC规则
• inline box在一行水平摆放，超出换行
• text-align 决定水平对齐
• vertical-align 垂直对齐
• 避开float元素

块级排版上下文 BFC

• 根元素/浮动/绝对定位/flex grid子项/overflow不是visible的block会创建BFC
• BFC规则
• 盒子从上到下摆放
• 垂直margin合并（内部合并，BFC和BFC不会）
• 不会和浮动元素重叠
• 没有高度坍塌

Flex Box 弹性盒子

• display:flex/inline-flex 分别生成块级/行级的flex容器
• 默认 flex-direction:row 强制所有元素从左到右摆放（还有row-reverse,column等选项）
• flex-grow 默认 0 flex-shrink 默认 1 flex-basis 默认auto
• justify-content: flex-start/flex-end/center/space-between/space-around/space-evenly
• align-items: stretch（默认,默认填满高度/宽度）flex-start/flex-end/center/baseline
• align-self:针对flex item进行单独定位设定
• order: 主轴上摆放的优先级

Grid布局

• 相对flex是一个二维的布局方式，使用display:grid生成块级grid容器，然后grid-template划分每个格子
• 可以使用grid-row-start/endandgrid-column-start/end以基线顺序来选取格子
• grid-area是上面那种方法的简写 1/3/1/3

CSS(四)

平移 transform

• 可以传递2个距离在x和y轴上移动。如果用百分比表示，是以自身的width，height为基准。而且原位置任然被一个空气元素占据，其他元素不能使用。
• 旋转rorate，可以使用deg，或者turn来决定旋转角度。
• transform-origin 决定元素的旋转基点，默认是中心。
• 缩放scale，第一个参数是放大倍数，2个参数就是x，y轴上分别放大。
• skewX,skewY,skew 在x，y轴上倾斜。
• 可以通知设置两种变形函数。

3D变形

transform: perspective

设置人眼相对屏幕的距离，距离越小，3D效果越明显

transform: translate3D

设置3D情况下 3轴的移动

transition 过渡

指定元素从一个状态到另一个状态时如何过渡

• transition-property 元素哪些属性变化的时候需要过渡
• transition-duration 过渡时间
• transition-timing-function 过渡func ease 还是linear，step()
• transition-delay

animation

动画效果

• 定义关键帧 @keyframs name
• 然后写每一帧的状态 from(0%) xx% to(100%)
• 可以使用margin-top，transform，opacity来对元素进行样式的修改
• 在元素上使用 animation属性绑定动画效果
• animation-direction:normal,alternate 选择动画的播放方向

响应式设计

同一个页面可以适应不同的设配

• 设置viewport <meta name="viewport" content="width=device-width>将视口设置成设备自适应。
• 图片尺寸设置 img可以设置 max-width:100%
• 背景图片 background-size : cover | contain 分别是填满容器和保证完整等比例显示。 前者适合展示装饰性的背景图片

media query

• @media screen and(min-width:480) 在480像素以上的屏幕，该css才生效
• 可以查询的media
• width/height
• device-width/height
• orientation

使用不同分辨率的图片

img 的 srcset 属性可以指定多个大小的图片和其宽度，浏览器会根据屏幕大小选择图片

字体大小适配

使用rem作为字体单位(2rem= 2root value)，然后@media调整root节点的字体大小