关于HTML的常见问题

文章目录

html的尺寸单位
- 绝对单位
- 相对单位
html 元素布局分类有哪些？
html 中 b 标签和 strong 标签的区别？
减少 dom 数量的办法？
一次性给你大量 dom 如何优化？
如何禁用 a 标签默认事件且禁用后如何实现跳转？
什么是 SEO？
前端如何进行 seo 优化？
什么是 meta 标签及其常用属性？
HTML页脚始终固定在底部
JS实现窗口横向滚动

html的尺寸单位

通常我们在项目开发中，使用px作为尺寸的单位，而不是使用相对单位，如：rem、em等。在万物互联的时代，最好的方式是相对单位rem、vh、vw等现代 CSS 布局（如 flexbox 和 grid）方式，最大限度的支持各种终端设备。

绝对单位

px ：是一个绝对单位，主要是因为它是固定的，不会根据任何其他元素的测量而改变。

相对单位

vw（viewpoint width）：相对于视口的宽度
vh（viewpoint height）：相对于视口的高度
rem（font size of the root element）：相对于根 ( ) 元素 (默认字体大小通常为 16px )
em（font size of the element）：相对于父元素
% ：相对于父元素

html 元素布局分类有哪些？

内联元素(display:inline)：无法设定宽高，元素大小由内容大小决定，不会自动换行，从左到右排列，内部不能嵌套块级元素
块级元素(display:block)：会自动换行，宽度默认父元素的宽度，高度默认内容高度
内联块级元素(display:inline-block)：可以设置宽高，排列方式从左向右

html 中 b 标签和 strong 标签的区别？

b：为了加粗而加粗
strong：为了标明重点加粗（盲人使用阅读设备 strong 会重读，b 不会）

减少 dom 数量的办法？

使用伪元素替代 dom 元素解决方案，比如清除浮动，样式实现等。
不滥用 dom 标签，结构合理。
按需加载，减少不必要的渲染。

一次性给你大量 dom 如何优化？

缓存 dom 对象，比如循环插入大量 dom 对象，将父 dom 在循环外获取，循环内插入。
使用 document.createDocumentFragement 创建文档碎片节点或者创建一个不在 dom 树上的节点，将大量 dom 一次性更新进入该节点，然后批量替换或插入 dom 中。
将连续的 appendChild 替换成使用 innerHtml，避免多次对 dom 造成影响（ps:appendChild 向父元素最后一个子节点插入元素，innerHtml 直接替换父元素下所有元素，appendChild 添加的元素如果是页面上已有的元素，执行完原元素会被销毁。）

如何禁用 a 标签默认事件且禁用后如何实现跳转？

禁用 a 标签默认事件

a 标签的 href 属性设置为href="javascript:;"||href="javascript:void(0);",通过执行空 js 代码，阻止跳转

在 a 标签点击事件上使用e.preventDefault()与window.event.returnValue=false，后者兼容 ie，以此阻止 dom 元素默认行为
实现跳转

点击事件使用 location.href = url 进行跳转。

什么是 SEO？

搜索引擎后台有个非常庞大的数据库，数据库存储海量关键词，每个关键词对应多个网址。这些数据由蜘蛛每天在互联网中收集获取，从一个链接爬行到另一个链接，对当前网页进行提炼关键词，之后将关键词与对应网站保存在数据库中，而当我们使用搜索引擎时，搜索引擎肯定会将与搜索词与数据库中存在的关键词对比，匹配程度越高的关键词对应的网站越是优先展示在前面。而 seo（seach engine optimization）就是在此基础上，对当前网站进行优化，改进网站对应关键词在搜索引擎中的排名，获取更多的曝光程度。

前端如何进行 seo 优化？

前端进行 seo 优化无非是期望通过对网页的处理，使得爬虫对当前网站提取出的关键词更加贴切，提高网站关键词在搜索引擎中的排名。

合理控制网站首页链接数量，链接足够多蜘蛛才能爬取内页，提高网站收录数量，但也不能太多，过多无意义链接不仅影响用户体验也会降低网站首页权重
控制网站结构层次在三层以内，让蜘蛛跳转三次就能到到达网站任何一个内页，这意味着层次低越容易被蜘蛛收录，如果层次太多蜘蛛可能就不愿意继爬取
导航尽量使用文字的方式，如果是图片也必须加入 alt 与 title 属性，告诉搜索引擎导航的定位
利用布局，将重要的的 html 放在前面，便于蜘蛛的优先爬取
控制页面大小，提高页面加载速度，如果页面加载速度很慢，蜘蛛就会离开
页面的keywords>尽量强调重点关键词，不要重复过分堆砌
正文标题使用 h1 标签，h1 标签自带权重，蜘蛛认为它最重要
使用 strong 标签 em 标签而不是 b 标签，因为 strong 与 em 目的就是标明重点而加粗，在搜索引擎能够得到高度重视
重要内容不要使用 js 输出，蜘蛛不会读取 js 输出，可以采用服务端渲染的办法将中药内容直接呈现在当前 html 中。
蜘蛛只抓取 get 请求页面，不抓去 post 请求页面，合理控制页面请求方式
外部链接需要加上el = nofollow属性，告诉蜘蛛不要去爬取，因为爬取外链可能蜘蛛就不回来了。
不要使用 iframe 框架，蜘蛛一般不会读取其内容

什么是 meta 标签及其常用属性？

meta 标签位于 html 的 head 区域，它描述了当前网页的各种信息，比如页面的说明，关键字，修改日企等。对于用户它是不可见的，它服务于浏览器，搜索引擎及其他网络服务。

charset：定义文档字符编码
content：定义 name 属性或者 http-equiv 属性相关元信息
name：将 content 属性关联到一个名称
http-equiv：将 content 属性关联到 http 头部

// 当前网页字符编码utf-8
<meta charset="utf-8"/>
// 当前网页关键字，seo优化会用到
<meta name="keywords" content="便于seo优化"/>
// 描述当前网页干什么的
<meta name="description" content="当前网页说明"/>
// 声明网页字符编码
<meta name="content-Type" content="text/html"/>

HTML页脚始终固定在底部

页脚固定在底部分两种情况考虑，一种是有滑动栏的情况，一种是没有的。后者比较简单，直接加上定位属性就是了，但是在页面内容是扩充整个页面以至于可以下滑浏览时，这时候单纯加上定位属性就不那么可行了，鉴于此我写了一个通用的js方法帮我搞定所有可能页脚固定的情况。

废话不多说，直接来干货：

<!DOCTYPE html>
<html>
<head>
<style>
*{margin: 0;padding: 0;
}
div{vertical-align: middle;display: inline-block;float:left;text-align: center;
}
.footer{height: 50px;width: 80%;background:#111;color:white;
}
</style>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</script>
<script>
$(document).ready(function(){
function t(){
var e = $(".footer");//获取页脚div的对象
var h = e.offset().top + e.height() ;//获取页脚偏移量加页脚高度的值
//判断页脚div底部到页面顶端的实际距离是否小于页面可见区域高度
if(h < document.body.clientHeight){
//当页面刚好可以包容所有内容不需要下拉时直接加上个定位就是了，当然这里也可以用绝对和相对属性
//具体设置根据你实际情况来定吧$(".footer").css({position:"fixed",left:"20%",bottom:"0px"});return;
}function t2(){var a = $(document).scrollTop()+document.documentElement.clientHeight;//获取页面滑动偏移量加页面可见区域的高度
//判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度
if(a >= h){
//如果页面内容太多，需要下滑展示的时候，给页脚一个固定定位属性
$(".footer").css({position:"fixed",left:"20%",bottom:"0px"});
}else{
//当页面重新上滑页脚需要被隐藏的时候移除它的定位属性，这样不论何时，它肯定是被页面撑起来固定到底部展示的。$(".footer").removeAttr("style");
}
}
t2();
//在页面大小改变时触发方法t2$(document).resize(t2);//在页面滑动时触发方法t2$(document).scroll(t2);
}
//直接运行方法t
t();});
</script>
</head>
<body>
<div style='height:1500px;width:20%;background:blue;'><span style="line-height: 500px;color:white;">左侧导航栏</span></div>
<div style='height:80px;width:80%;background:#ccc;'><span style="line-height: 80px;">这是一个页头</span></div>
<div style='height:300px;width:30%;background:#AAA;'></div>
<div style='height:150px;width:30%;background:#dda;'></div>
<div style='height:150px;width:30%;background:#bbb;'></div>
<div style='height:900px;width:80%;background:#eee;'></div>
<div class='footer'><span style="line-height: 50px;">这是一个页脚</span></div>
</body>
</html>

显示效果为

JS实现窗口横向滚动

在页面上直接用鼠标的滚轮垂直滚动，可以实现三个页面之间横向滚动的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现窗口横向滚动</title>
<style>
.container {display: flex;overflow-x: scroll;
}
.page {width: 100vw;height: 100vh;flex-shrink: 0;
}.page:nth-child(1) {background: hsl(140deg, 50%, 50%);
}.page:nth-child(2) {background: hsl(210deg, 50%, 50%);
}.page:nth-child(3) {background: hsl(270deg, 50%, 50%);
}
</style>
</head>
<body><div class="container"><div class="page">页面1</div><div class="page">页面2</div><div class="page">页面3</div></div>
</body>
</html><script>
let container = document.querySelector(".container");
container.addEventListener("wheel", (event) => {event.preventDefault();container.scrollLeft += event.deltaY;
});</script>

本代码仅供参考，如有漏洞之处,欢迎指出。