前端html+css面试题

【简答题】

1、<!DOCTYPEhtml>文档声明的意义是什么，如果不加会怎么样

是html5版本的声明，它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。放在xHTML文档的顶部

2、常见的块级标签、行内标签、行内块标签都有哪些

块级：div，table tr td，dl dt dd，ul li，p，fieldset，legen，h1-h6，input，form❓
行级：a，span，em，strong，sub，sup
行内块级：img，input，textarea，select，option❓
说明：fieldset：对表单进行分组，一个表单可以有多个fieldset。
legend：说明每组的内容描述。

3、a标签都有哪些用法

a标签是一个跳转标签，控制页面之间的跳转。href属性里设置跳转页面的路径，target属性里设置是在当前页面跳转还是新建页面跳转。target默认属性为_self（在当前页面跳转），设置为_blank则表示要新建页面跳转。title属性为鼠标悬停时展示的信息。
a标签不仅可以让文字点击，也可以让图片被点击
一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方
如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https:// 除了URL地址，还可以指定一个本地地址

4、img中的src title alt属性都是什么意思

src"的值为一个文件路径，用于告诉浏览器图片放在那个文件的。（相对路径和绝对路径）
alt属性
1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。
2、alt属性值得长度必须少于100个英文字符
3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=“”
4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO
title属性
1、title属性并不是必须的。
2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。
3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。

5、html5新增的标签都有哪些

新增标签讲解
canvas，audio、video、source、embed、track、datalist、keygen、output、article、aside、bdi、nav、mark、rt、rp、ruby、time、wbr等
其他说明：在html5中，针对用户的输入框增加了许多语义，如用户在界面搜索时，搜索的输入框的类型应该为"search"

6、什么是语义化，为什么要语义化呢

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.
语义化的HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

7、哪些样式可以继承呢

css继承样式
css继承样式有：visibility、cursor、letter-spacing、color、font、text-indent、text-align、list-style、list-style-type等

8、选择器的优先级是什么

作用范围越小，优先级越高
由选择器的优先级（权重）来决定，优先级高的优先显示。

9、什么是盒子模型，都有哪几部分组成

盒模型是CSS中使用的一种思维模型，可分为两类，一类是标准盒模型是W3c盒模型标准，另一类是怪异盒模型（也称IE模型）是IE低版本盒模型标准
盒模型的组成：content(内容区)+padding(填充区)+border(边框区)+margin(外界区)
作用：控制元素和元素之间，或者元素和内容之间的位置关系。
不同部分的说明：
content(内容)：盒子的内容，显示文本和图像。
border(边框)：围绕在内边距和内容外的边框。
padding(内边距)：清除内容周围的区域，内边距是透明的。
margin(外边距)：清除边框外的区域，外边距是透明的。

10、什么是浮动、浮动有什么特点、如何清除浮动

概念：元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制移动到指定位置。
浮动float，CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中浮动让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
作用：可以实现盒子的左右对齐等等.
浮动最早是用来控制图片，实现文字环绕图片的效果。
语法： 选择器 {
float: 属性值;
}
属性值：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

清除浮动的本质就是清除浮动元素造成的影响。特别地，如果父盒子本身有高度，则不需要清除浮动。
语法： 选择器 { clear: left/right/both; }
清除浮动的方法：
1.额外标签法（隔墙法）：
在浮动元素末尾添加一个空的块级元素标签（是W3C推荐的做法），例如：

优点：通俗易懂，书写方便 缺点：增加额外的标签使HTML结构不够简洁 2.父级添加overflow： 给父级添加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll。 优点：代码简洁 缺点：无法显示溢出的部分

11、有几种定位，他们都是相对什么参照物定位的

1、相对定位(relative相当于灵魂出窍的场面)
特点：
参照物为自身的默认位置
占据空间
不会破坏布局流
相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
2、固定定位(fixed)
特点：
参照物为浏览器窗口
固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
3、粘性定位(sticky 存在兼容问题)
特点：
是relative 和fixed的结合
当页面没有触发滚动条的时候，执行的效果是position：relative，反之执行的是position：fixed
应用是：页面吸顶
4、静态定位（static 默认）
当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适应，取得相对较好的布局效果。
一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。
left,top属性对static没有效果，static是靠margin这些定位的
5