前端基础
文章平均质量分 52
总结前端基础知识,搭建前端知识体系
XD1998
但行好事 莫问前程
展开
-
【HTML/CSS】HTML5和CSS3的新特性
目录1 HTML51.1 语义化标签1.2 画布canvas1.3 新增API1.3.1 拖拽1.3.2 地理定位1.4 音视频Audio/Video1.5 Web存储1.6 WebWorker1.7 WebSocket1.8 新增表单控件2 CSS32.1 新增属性2.2 @font-face2.3 2D/3D转换2.4 过渡2.5 动画2.6 媒体查询2.7 弹性布局2.8 用户界面属性 1 HTML5 1.1 语义化标签 举例:header、main、section、aside、footer、nav原创 2021-03-02 17:21:06 · 256 阅读 · 0 评论 -
【HTML/CSS】SEO的概念和实现
1 SEO的概念 SEO就是使用特定的技术使得网站的各种关键词排名提升到搜索引擎的理想位置,从搜索引擎中获得更多的免费流量,以及更好地展现网站形象。 2 SEO优化 设置合理的title、description、keywords 重要的关键词不要超过2次,而且要靠前,不同页面的title要不同 使用语义化的html代码,符合w3c规范,语义化代码让搜索引擎容易理解网页 重要的内容放在html代码最前,搜索引擎抓取页面是自上而下的,有的搜索引擎对抓取的长度有限制 重要的内容不要通过JS输出,搜索引擎不会执行原创 2021-03-02 16:28:44 · 394 阅读 · 0 评论 -
【HTML/CSS】单位小结
1 px和rpx 1.1 px px是相对于显示器屏幕分辨率而言的,在PC端经常使用的单位,设计图纸中的px不用计算,直接使用,但是不能自适应。 1.2 rpx rpx是小程序中css的尺寸单位,根据屏幕宽度自适配。 规定屏幕的宽度为750px,如果设备的宽度为375px, 设备宽度/屏幕宽度 = 1/2,也就是1rpx = 0.5px 屏幕宽度/设备宽度 = 2,也就是1px = 2rpx 2 em和rem 2.1 em em是相对单位,是相对父节点的字体大小计算的。 2.2 rem rem是相对单位,是原创 2021-03-02 16:06:00 · 344 阅读 · 0 评论 -
【HTML/CSS】display相关属性
1 display的定义 display规定元素应该生成的框的类型 display使用不谨慎,可能会违反HTML中定义的显示层次结构 2 display的取值 常用的取值: none:不显示 block:显示为块级元素,元素前后会带有换行符 inline:默认,元素会被显示为内联元素 inline-block:行内块元素 list-litem:作为列表显示 flex:弹性盒子布局 grid:网格布局 不常用的取值 run-in:会根据上下文作为块级元素或内联元素显示 table:块级表格 inline原创 2021-03-02 15:28:30 · 235 阅读 · 0 评论 -
【HTML/CSS】浮动模型和清除浮动的方法
1 浮动 浮动是让元素脱离文档流,浮动前后的非定位元素会无视浮动元素,可能沿着元素另一侧垂直流动。 浮动元素会生成一个块级框,具有块级元素的特性,但是不占整行。 浮动元素脱离了文档流,无法为文档流中的父元素撑起高度,造成父盒子塌陷的问题。 2 清除浮动 clear:left左侧不允许浮动元素 clear:right右侧不允许浮动元素 clear:both两侧不允许浮动元素 3 清除浮动的技巧 添加一个空的div + clear:both清除浮动,添加了无意义的html代码 给父元素添加overfl原创 2021-03-02 15:04:24 · 248 阅读 · 0 评论 -
【HTML/CSS】margin塌陷和合并问题
1 margin塌陷问题 1.1 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin塌陷</title> <style>原创 2021-03-02 14:24:37 · 126 阅读 · 0 评论 -
【HTML/CSS】定位方式及区别
1 文档流 文档流是浏览器默认的排版方式 文档流的排版方式是块级元素垂直排布,行内元素和行内块元素水平排布。 2 脱离文档流 脱离文档流是不按照文档流的排版方式进行排版,脱离后,元素不在布局中,不在流中占有位置,处于漂浮状态,后面的文档流中的元素会补上去。 会造成脱离文档流的情况: 浮动:给元素添加float属性,且属性值不为none。 定位:设置position为absolute和fixed。fixed会固定在窗口上,absolute会随着滚动条滚动 元素脱离文档流存在的问题: 会导致父元素高度塌陷原创 2021-03-02 12:50:58 · 292 阅读 · 0 评论 -
【HTML/CSS】CSS盒模型及其理解
1 盒模型 概念:CSS盒模型本质是一个盒子,包括:外边距margin、边框border、内边距padding、内容content 分类:标准盒模型(W3C)和怪异盒模型(IE) 标准盒模型:width的值就是content的值 怪异盒模型:width的值等于content+padding+border 2 如何解决样式兼容性问题 不要给子元素设置内边距 可以给父元素加内边距或者给子元素加外边距 3 CSS3指定盒模型 可以使用box-sizing指定盒模型的类型: content-box:标原创 2021-03-02 12:31:32 · 156 阅读 · 0 评论 -
【HTML/CSS】HTML元素种类的划分
1 种类划分 1.1 块级元素 特征:独占父元素的一行,可以设置宽高,高度默认由内容决定。 常用标签:div、p、h1~h6、ul、ol、li、dl、dt、dd、table、form 不常用标签:pre用来定义预格式化文本,pre内的文本会保留空格和换行符。blockquote用来定义引用文本。hr水平分割线。 语义化标签:article、aside、footer、header、main、nav、section 1.2 行内元素 特征:一行可以放置多个行内元素 1.2.1 替换元素 特征:可以设置宽高原创 2021-03-02 12:09:03 · 374 阅读 · 0 评论 -
【HTML/CSS】CSS权重、继承及引入方式
1 CSS权重 1.1 权重规则 CSS匹配的选择器中每一种选择器类型的数组决定了选择器的权重,CSS的优先级规则: 权重高的样式会被应用到元素上。 如果权重相同则使用最后声明的样式。 属性后加上!important,无条件优先 1.2 权重计算 内联样式的权重:1000 ID选择器的权重:100 类选择器、属性选择器、伪类选择器的权重:10 元素选择器的权重:1 通配符*、子选择器>、兄弟选择器+的权重:0 /* ul=1 + #nav=100 + li=1 + .active=10 + a=1原创 2021-03-02 11:49:48 · 243 阅读 · 0 评论