html基础知识点

AlwaysloveIT

已于 2022-09-06 21:10:35 修改

阅读量141

点赞数

文章标签： html 前端 javascript

于 2022-09-05 19:23:07 首次发布

本文链接：https://blog.csdn.net/AlwaysloveIT/article/details/126709040

版权

一、W3C标准是什么？

万维网联盟（W3C）标准是一系列标准的集合。包括结构标准（HTML、XML等）、表现标准（CSS等）和行为标准（DOM、ES等）。

二、XHTML是什么？与HTML区别？

XHTML指可扩展超文本标签语言（EXtensible HyperText Markup Language），是在HTML4.0基础上的优化和改进，可以说是强化版HTML，它更严谨更纯净。在XHTML语法下：
1.属性名称必须小写
2.属性值必须加引号
3.属性不能简写
4.用 Id 属性代替 name 属性
5.XHTML DTD 定义了强制使用的 HTML 元素

三、对HTML语义化的理解

缺少语义化可能带来的结果是，网页大量使用div，结构不清晰不易开发。
HTML语义化概念的提出，是将每个标签赋予意义，在合适的地方使用，如p标签用于定义段落，那么就不要用于定义标题。即用HTML提供的标签，明晰标签含义去进行排版。
语义化的好处：
1.网页结构清晰，提高代码可读性，易于开发
2.有利于seo

四、什么是seo?

seo指搜索引擎优化，利用搜索引擎的规则提高网站的搜索排名。

五、HTML5新特性

1.HTML5新增许多标签，包括header、article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video
   header、footer、aside、main、section、nav等语义化标签用于区别网页结构。
   canvas标签可用于在网页上绘制图形、路径。
   audio标签可以在网页上添加音频文件。
   其他像progress标签可用于制作进度条。
2.新增localStrorage和sessionStrorage
3.应用程序缓存、web workers、web socket

六、localStorage、sessionStrorage和cookie的区别

三者都是用于存储客户端（网页）数据的对象。
localStorage存储时间永久（只要文件还在），储大小5M左右（不同浏览器可能不一样）。
sessionStorage，存储时间为一次会话（通常是窗口关闭为会话结束），会话结束自动清空，存储大小也是5M左右。
cookie存储空间4K左右，存储有效时间可以自己设置，通信时携带在HTTP头中，因此cookie保存过多会影响性能。

七、块级元素、行内元素、行内块元素

块级元素（div、form、table、h1-h6、p等）：
   1.总是另起一行
   2.宽高和内外边距可以自己控制
   3.可以容纳其他元素（包括块元素）
行内元素（span、a、strong、em等），又称内联元素：
   1.内容在一行上
   2.宽高和内外边距不可改变
   3.宽高就是内容宽高
   4.只能容纳文本或其他行内元素
行内块元素（img、textarea、input）
   1.支持宽高自己控制
   2.不独占一行
   （个人认为空元素属于另一种概念，指没有内容，不需要闭合标签。如br，闭合就写<br/>，而不是<br></br>）

八、<!DOCTYPE HTML>是什么？有什么用？

<!DOCTYPE HTML>是文档类型声明。它声明该文档类型是html5，使用的html5标准。<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

九、meta标签

meta标签可提供有关页面的信息，它不会显示在网页上，但是对于计算机可读。可用于优化搜索和web服务。
常用属性值：
   keywords：用于定义网页关键字；
   description：用于定义网页的描述；
   charset：用于定义页面的编码格式；
   http-equiv：用于设置网页过期时间，自动刷新等；
   content-type：用于定义文件类型；
   等等。

十、src与href的区别

src是引用资源，替换当前元素，常用于img、script和iframe。
href是超文本引用，将当前元素与资源之间建立联系，常用于a和link。

十一、引入css样式的方法

行内样式，即直接在标签中使用style属性引入css样式，不推荐使用，因为可读性不高且后续维护困难。
内部样式，在style标签中引入css样式，通常写在head标签中。
外部样式，在.css文件中写css样式，通过link标签应用。实际开发中外部样式运用最多。

十二、什么是渐进增强？什么是优雅降级？

渐进增强是指保证低版本浏览器能正常运行的同时，针对高版本浏览器优化网页。
优雅降级是指一开始针对主流版本浏览器开发，后再对低版本浏览器兼容。

十三、重排和重绘

浏览器下载完HTMl，CSS，JS后会生成两棵树：DOM树和渲染树。当Dom的几何属性发生变化时，比如Dom的宽高，或者颜色，position，浏览器需要重新计算元素的几何属性，并且重新构建渲染树，这个过程称之为重绘重排。
重排（回流）：当DOM节点位置大小发生变化，会引起回流
重绘：改变元素的颜色，字体和透明度会引起重绘
（重排必然引起重绘，但重绘不会重排）