前端HTML的总结

最新推荐文章于 2022-01-22 21:16:31 发布

TongQiHang

最新推荐文章于 2022-01-22 21:16:31 发布

阅读量142

点赞数

分类专栏： HTML1 文章标签： HTML

原文链接：https://www.jianshu.com/p/fb4301a547e9

版权

HTML1 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、什么是盒模型

在我们的HTML页面中，每一个元素都可以被看成一个盒子，而这个盒子由:内容(content)、内边距(padding)、边框(border)、外边距(margin) 四部分组成。

对于盒模型，分为标准盒模型和怪异盒模型两种。

标准(W3C)盒模型

标准盒模型的范围包括margin、border、padding、content,并且宽高只包含content，不包含其他部分。

怪异(IE)盒模型

怪异盒模型的范围包括margin、border、padding、content,和标准盒模型不同的是，怪异盒模型的宽高包含了padding和border。

在css3中，我们可以通过box-sizing属性来修改元素的盒模型。

div {
    box-sizing: border-box;  // `在这里插入代码片`怪异盒模型
    box-sizing: content-box;  // 标准盒模型
}

2、行内、块元素、空元素分别举例

块级元素
div、p、ul、ol、dl、li、dt、dd、form、h1、h2、h3、h4、h5、h6、table、thead、tbody、tfoot
H5新增
header、main、footer、aside、article、address、blockquoke、audio、video、section···

行内元素
span、a、b、u、i、label、em、strong、del、sub、sup、code

行内块元素
img、input、button

空元素
br、meta、hr、link

3、src和href的区别

首先看一下使用src属性的元素和使用href属性的元素：
使用src的元素

<img src="haochenguang.png" />
<iframe src="home.html"><iframe>
<script src="index.js"></script>

使用href的元素

<link href="app.css" />
<a href="https://baidu.com">百度一下</a>

接着，我们来对比一下这些标签的区别：

使用src属性的元素，例如img、iframe、script，如果src路径出现问题的话，页面的内容会受到影响，用户没有办法看到页面本来应该显示的内容和使用页面应该实现的功能。
使用href属性的元素，例如link、a,如果href路径出现问题的话，页面不会有很大的影响，对于样式文件来说，只是影响页面的美观度，而不会影响页面的正常浏览和使用，对于超链接来说，只是页面无法与其它页面建立链接，对当前页面的影响也不大。
由此，我们可以总结：

src表示引用资源，是页面不可少的一部分，它会替换掉当前的元素，而href是关联，是将当前页面与指定资源建立链接。

4、`HTML5 为什么只需要写 <!DOCTYPE HTML>？`

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

5、link和@import的区别

区别

从属关系
1.1 link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性
1.2 @import：@import是css提供的语法，只有导入样式表的作用

加载顺序
2.1 link：link在页面加载时CSS同时被加载
2.2 @import：引入的CSS要等页面加载完毕后再加载

兼容性问题
3.1 link是HTML提供的语法，不存在兼容性问题
3.2 @import是css2.1提供的语法，ie5以上才兼容

DOM可控性
js控制DOM时，可以通过插入link标签来改变样式，不能通过@import改变

权重问题（有争议）
link标签引入的样式权重大于@import标签

6、Doctype作用，标准模式与兼容模式有什么区别

<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。
告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
 

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,
模拟老式浏览器的行为以防止站点无法工作。

7、至少用两种方法写两列布局，左列定宽200px，右侧自适应

首先我们假定页面上已有下列元素：

<body >
    <div id="left" ></div>
    <div id="right"></div>    
</body>

第一种方法：float+margin-left
这种方法是最简单也是最容易想到的方法(至少在我看来)，请看如下CSS：

div{
    height:200px;
}
#left{
    float: left;
    width: 200px;
    background: blue;
}            
#right{
    margin-left: 200px;
    background: red;
}

第二种方法：display+flex

body{
    display: flex;
    flex-flow: row;
}
#left{                
    width: 200px;
    background: blue;
}            
#right{
    flex: 1;
    background: red;
}

8、写出HTML5新增的语义化标签

1、<header></header> 页眉：主要用于页面的头部的信息介绍，也可用于板块头部；

2、<hgroup></hgroup> 页面上的一个标题组合：一个标题和一个子标题

3、<nav></nav> 导航：包含链接的一个列表；

4、<section> <section> 页面上的版块：用于划分页面上的不同区域

5、<article></ article > 用来在页面中表示一套结构完整且独立的内容部分：
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容
可互动的页面模块挂件等；

6、<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏
广告、nav元素组，以及其他类似的有别与主要内容的部分

7、<figure> < figure > 用于对元素进行组合：一般用于图片或视频；

8、<figcaption> <figcaption> figure的子元素：用于对figure的内容 进行说明；

9、<time></time>用来表现时间或日期；

10、<datalist></datalist>选项列表：与 input 元素配合使用，来定义 input 可能的值；

11、<details></details>用于描述文档或文档某个部分的细节：①该元素用于摘录引用等，应该与页面的主要内容区分开的其他内容，②Open属性默认展开；

12、< summary></summary> details 元素的标题；

13、<dialog></dialog>定义一段对话；

14、<address></address> 定义文章或页面作者的详细联系信息；

15、<mark></mark> 需要标记的词或句子；

16、<keygen>给表单添加一个公钥；

17、<progress><progress>定义进度条；

18、<footer></footer>页脚：页面的底部或者版块底部。

9、前端页面由那三层构成，分别是什么，作用是什么。

一 HTML 内容标记语言也就是指网页的标签，标签只对网页内容的语义和含义做出描述，不包含任何关于如何显示内容的信息。
二 css样式作用是对内容如何显示做一定的控制。
三 JS组成由JavaScript语言和DOM创建。作用是控制用户做出一个事件该如何显示

10、请描述一下cookies，sessionStorage和localStorage的区别

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
本文来自前端常见面试题（十一）@郝晨光

TongQiHang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端HTML的总结

1、什么是盒模型在我们的HTML页面中，每一个元素都可以被看成一个盒子，而这个盒子由:内容(content)、内边距(padding)、边框(border)、外边距(margin) 四部分组成。对于盒模型，分为标准盒模型和怪异盒模型两种。标准(W3C)盒模型标准盒模型的范围包括margin、border、padding、content,并且宽高只包含content，不包含其他部分。怪异(...
复制链接

扫一扫