掌握HTML5和CSS3语言核心
- HTML语义化
- CSS3高级属性
HTML语义化
对文本内容的结构化(内容语义化)，选择合乎语义的标签(代码语义化)，便于开发者阅读，让浏览器的爬虫和辅助技术更好的解析。
用正确的标签做正确的事情
- 利于SEO优化
- 利于团队开发和维护
如何写出更优的html:
- 尽可能少的使用无意义的标签
- 使用CSS控制样式
- input标签对应的说明文本应该使用label标签，并且通过input设置id属性，在label标签中设置
for=someId来让说明文本和对应的input关联起来 - 在所有不能自动结束的元素末尾添加结束标签
- 统一单引号和双引号
- 使用小写字母来写标签和属性
- 在适当的地方使用HTML5的新元素
- 换行可以使用block或者css的display元素，尽量避免使用<br/>来换行
- 不要滥用div和span标签
- 盒子模型十分重要
- flex布局越来越流行
- 标签嵌套规范
- 块元素可以包含内联元素和某些块元素，但是内联元素却不能包含块元素，只能包含其他的内联元素
- 块元素不能放在p标签内
- 标题和p标签只能包含内嵌元素
- 网页的title,keywords,description一定要写，精简全面。
HTML5新增标签
- 图形新元素：canvas
- 新多媒体元素：audio、video
- 新表单元素: deatalist
- 新的语义和结构元素：article、aside、footer、header、nav、section
HTML扩展
-
文档声明
帮助浏览器正确的显示网页，浏览器会识别这句话，按照这个类型去解析这个文档
- 不区分大小写
- 必须放在第一行（浏览器从上到下解析）
- 必须写文档声明，如果不写就会发生怪异事件
-
meta元信息
提供关于HTML文档的元数据
- charset: 编码格式
- keywords: 页面关键词
- description: 页面描述
- viewport: 视口-移动设备
-
字符实体
- 实体名称
- 实体编号
-
SVG
- 使用xml格式定义图形
- 在放大或改变尺寸的情况下图形质量不会有损失
CSS3高级属性绘制技巧
-
线性渐变
- linear-gradient(color1, color2)
- linear-gradient(direction, color1, color2)
- from
- to
- linear-gradient(angle, color1, color2)
- 还可以规定颜色的占比
-
径向渐变
-
background-size: 背景尺寸
- 提供2个参数值，第一个定义宽度，第二个定义高度
- 只提供一个，第二个值默认为auto,等比例缩放
- cover: 覆盖，充满。背景图像宽高同时等比例缩放，会有超出裁剪的情况
- contain: 宽度或者高度，等比例缩放，常常出现留白的情况
-
background-origin:
设置或检索对象的背景图像计算background-position时的从参考原点
- border-box
- padding-box
- content-box
-
background-clip
- 属性值同上，指定对象的背景图像向外裁剪的区域
- padding-box: padding往外开始裁剪，不包含padding,裁掉border
- border-box:裁掉margin
- content-box: 裁掉padding + border
- text：以文字作为裁剪
-
border-radius圆角
-
每个值有两个参数：以
/分隔，第一个参数表示水平半径，第二个参数表示垂直半径 -
一个值：四个角
-
两个值：左上=右下，右上=左下
-
三个值：左上，右上/左下、右下
-
四个值：左上，右上，右下，左下
-
-
box-shadow
- 第一个值设置对象的阴影水平偏移值，可以为负值
- 第二个值设置对象的垂直偏移值，可以为负值
- 模糊半径，不允许负值
- 阴影外延值：可以为负值（阴影扩展半径）
- 颜色：设置阴影的颜色，带透明度,rgba()
- inset:设置阴影类型，设置了为内阴影
-
text-shodow
- 水平偏移值
- 垂直偏移值
- 模糊值
- 颜色
-
Filter滤镜
- 高斯模糊：属性值为像素值，值越大越模糊
- opacity: 属性值为百分比，设置透明度
-
clip-path
- 属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏
CSS机制At-rule
- @import
- @font-face
- @keyframes:动画
- @media:媒体查询
CSS变量
原生CSS定义变量--variable，使用的方式使用var(--variable)。
只能用作变量名，而不能作为变量值。
body {
// 默认变量
--blue: #369;
// 默认参数
background-color: var(--blue, red)
}
// 全局变量
:root {
--color: blue;
}
- 如果变量值是一个字符串，可以与其他字符串连接
- 如果变量值是数值，不能与数值单位直接连用
- 如果变量值带有单位，就不能写成字符串
.foo {
--foo: '20px'; // 无效
--foo: 20px;
}
.foo {
--gap: 20;
margin-top: calc(var(--gap)* 1px);
}
- CSSb变量的响应式处理
- CSS变量的兼容性处理