HTML语义化与CSS技巧：提升网页可读性和SEO-CSDN博客

本文链接：https://blog.csdn.net/qq_54030660/article/details/127647217

本文探讨了HTML语义化的重要性，介绍了常用语义标签，如<hn>、<header>等，并强调了这对代码结构和设备适配的优势。CSS部分讲解了盒子模型、优先级、居中方法及CSS3新特性，如边框和背景。此外，还涵盖了HTTP和HTTPS的区别，以及JavaScript的变量类型、DOM操作和浏览器兼容解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML篇

1、简述一下你对html语义化的理解

用正确的标签做正确的事情

2、语义化标签有哪些

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。

3、语义化标签的优势

代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。

4、http和https

基本概念

http：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器请求和应答的标准，用于从www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更高效，使网络传输减少
https：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入ssl层，HTTPS是安全基础的SSL，因此加密的详细内容就需要SSL

区别

https协议需要一定费用
http是明文传输，https是加密传输
http的端口是80，https的端口是443
http连接简单无状态，https是有ssl加http协议构建的加密传输、身份认证的网络协议，比http协议安全

https的优点

使用https可认证用户和服务器，确保数据传输到正确的客户机和服务器

CSS篇

1、css的盒子模型

有俩种盒子模型：IE盒子模型和W3C盒子模型

盒子有什么撑起来：content、padding、margin、border

俩种盒子的区别：IE盒子的content把padding和border算进去啦

2、css选择器的优先级

!important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性

3、让盒子水平垂直居中

子绝父相，然后绝对定位的left50%和top50%
margin：auto
flex布局：display: flex; justify-content: center; align-items: center;
transfrom:还是子绝父相，然后在子元素里面加个transform: translate(-50%, -50%);

4、css3新增的新特性

边框

border-radius：创建圆角边框
box-shadow：为元素添加阴影
border-image：使用图片来绘制边框

背景

background-clip：用于确定背景画区

background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box

background-origin：当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的

background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position

background-size：常用来调整背景图片的大小

background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包含元素的尺寸

background-break：用来控制背景怎样在这些不同的盒子中显示

background-break: continuous; 默认值。
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景

文字

word-wrap: normal（使用浏览器默认的换行）|break-word（允许在单词内换行）
text-overflow：clip（修剪文本）| ellipsis（使用省略号代替被修剪的文字）
text-shadow：横向阴影纵向阴影模糊的距离阴影的颜色；
text-decoration：underline（文本下的一条线）|overline（文本上的一条线）|line-through（贯穿文本的一条线）

颜色

rgba（红色值，绿色值，蓝色值，透明度（0~1））

其他的不常用hsl、hex

transition过渡

transition：css属性，花费的时间，效果曲线，延迟时间；

transform转换（也就是可以2D转换成3D）

属性有：translate位移、scale缩放、rotate旋转、skew倾斜

transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

animation动画

有一个animation动画库可以直接使用Animate.css | A cross-browser library of CSS animations.

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式

渐变

linear-gradient：线性渐变
radial-gradient：径向渐变

5、解决浏览器兼容性问题

加一个全局的*{margin:0;padding:0;}来统一
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

JS篇

1、js的数据类型

值类型：string（字符串）、null（空）、number（数字）、Boolean（布尔）、underfind（未定义）、symbol 这些直接会存储在栈内存中

引用数据类型：对象、数组、函数，还有俩个特殊对象正则和日期同时存在在栈内存和堆内存

2、判断值的类型

typeof 运算符
instanceof 运算符
Object.prototype.toString 方法

3、==和===的区别

简单来说==是代表相等，===是代表严格的相等。

==：当且仅当两个运算数相等时，它返回 true，即不检查数据类型
===：只有在无需类型转换运算数就相等的情况下，才返回 true，需要检查数据类型

4、let,const,var的区别

var是ES5提出来的，const和let是ES6提出来的
const声明的是常量，必须赋值。（一旦声明必须赋值，不能使用null占位；声明后不能再修改；如果声明的复合类型数据，可以修改属性；）
let和var声明的是变量，声明后可以修改，声明时候可以不赋值；
var允许重复声明变量，后一个变量会覆盖前面一个变量。（let和const不能，这样会报错）；
var可以在声明之前调用，值为underfind。let和const一定要在声明后使用，否则报错
var不存在块级作用域。let和const存在块级作用域

5、this指向问题

在全局作用域中，this指向window
在普通函数中，this取决于谁调用我，this就指向谁，跟定义无关
在箭头函数中，this就是上下文中定义的this
在事件绑定中，this指向的事件源
在定时器中，this指向window
在构造函数中，构造函数配合new使用，而new关键字会将构造函数中的this指向实例化对象

6、闭包

什么是闭包：

闭包函数：声明在一个函数中函数；

闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回

闭包优点

可以从内部函数访问外部函数的作用域中的变量，且访问到的变量长期驻扎在内存中，可供之后使用
避免变量污染全局
把变量存到独立的作用域，作为私有成员存在

闭包的缺点

对内存消耗有负面影响。因内部函数保存了对外部变量的引用，导致无法被垃圾回收，增大内存使用量，所以使用不当会导致内存泄漏
对处理速度具有负面影响。闭包的层级决定了引用的外部变量在查找时经过的作用域链长度
可能获取到意外的值(captured value)

应用场景

模块封装，防止变量污染全局

循环体中创建闭包，保存变量

7、localStorage、sessionStorage 和 Cookie

localStorage：永久存储，除非手动删除本地存储

sessionStorage：只保存在浏览器，关闭就没有啦会话存储

cookie：要是在cookie设置的时间之内cookie一直有效用户本地终端是的数据

localStorage和sessionStorage的存储空间是5M，cookie是4KB

8、向数组里面添加删除和排序数组

添加

push：向数组的末尾追加

unshift：向数组的开头添加

splice：向数组的指定index处插入

删除

pop：从尾部删除一个元素

shift：从头部删除一个元素

splice：在index处删除一个元素

排序

reverse：反转或者倒置改变原有数据

sort：按指定规则排序，默认升序

举例：升序（降序就让里面的b-a）

var arr=[11,12,1,2,3];
arr.sort(function(a,b){
     retrun a-b;
});

9、for...in forEach for...of和map

for...in

只遍历可枚举属性

let obj = {a:1,b:2,c:3}
for (let key in obj) {
  console.log(key) // a,b,c
}

for...of

可迭代的对象有：Array，map,set,String,TypedArray，arguments等

let arr = [1,2,3]
arr.foo = 'hello'
for (let i of arr){
  console.log(i) //1 2 3
}

map

会返回新数组，对元素不产生影响；无法使用return、break中断循环

let arr = [1,2,3]
const result = arr.map(item=>{
   return item*2
})
console.log(arr) // [1,2,3]
console.log(result) // [2,4,6]

forEach

不会返回执行结果，返回值为underfind；会修改原来数组；不能使用break中断循环

 let arr = [1,2,3,4]
  let res = arr.forEach((item,index,input) => {
    return input[index] = item*2
  })
  console.log(arr)// [2, 4, 6, 8]
  console.log(res)// undefined