html基础面试题
1、内元素和块级元素的区别？
行内元素：不会独立出现在一行，单独使用的时候后面不会有换行符的元素。eg：span, strong, img, a等。这些元素，默认的高宽，总是其内容的高宽。并且，margin和padding值，只有左右有效。
块级元素：独立在一行的元素，他们后面会自动带有换行符。eg：div, p,form, ul, li, ol, dl等。它们的出现，往往独自占领一行。在没有设置宽度的情况下，默认宽度总是其父元素的宽度。
行内元素转换成块元素，只要设置其display属性为block即可，display:block;。块元素转换成行内元素，只要将其display属性设置为inline即可，display:inline;。
（1）行内元素有：a b span img input select
    （2）块级元素有：div p ul ol li dl dt dd h1-h6
    （3）常见的空元素：br-换行，hr-水平分割线
2、Doctype作用？标准模式与混杂模式如何区分？
!DOCTYPE告诉浏览器使用哪个版本的html规范来渲染文档。DOCTYPE不存在或形式不正确会导致html文档以混杂模式呈现。
标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。
3、引入样式时，link和@import的区别？
链接样式时，link只能在HTML页面中引入外部样式
导入样式表时，@import既可以在HTML页面中导入外部样式，也可以在css样式文件中导入外部css样式。
4、html5有哪些新特性？
HTML5现在已经不是 SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
    (1)绘画 canvas;
    (2)用于媒介回放的 video和 audio元素;
    (3)本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失;
    (4)sessionStorage的数据在浏览器关闭后自动删除;
    (5)语意化更好的内容元素，比如 article、footer、header、nav、section;
    (6)表单控件，calendar、date、time、email、url、search;
    (7)新的技术webworker, websocket, Geolocation;
IE8/IE7/IE6支持通过ateElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim
移除的元素：
纯表现的元素：basefont big center font s strike tt u
    性能较差元素：frame frameset noframes
区分：
html中提交表单用什么属性
DOCTYPE声明的方式是区分重要因素
    根据新增加的结构、功能来区分
5、介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和js引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
    js引擎：解析和执行JavaScript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
6、常见的浏览器内核有哪些？
Trident( MSHTML )：IE MaxThon TT The World 360搜狗浏览器
    Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
    Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)
    Webkit：Safari Chrome
7、简述一下你对HTML语义化的理解？
去掉或丢失样式的时候能够让页面呈现出清晰的结构。
有利于seo和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定
上下文和各个关键字的权重。
方便其它设备解析。
便于团队开发和维护，语义化根据可读性。
8、label标签的作用是什么?是怎么用的?
去掉或丢失样式的时候能够让页面呈现出清晰的结构。
label标签用来定义表单控件间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label中有两个属性是非常有用的, FOR和ACCESSKEY。
FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如
    Label FOR="InputBox"姓名/Labelinput ID="InputBox" type="text"
9、HTML5的form如何关闭自动完成功能？
TML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。
但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。
方法：
在IE的internet选项菜单中里的自动完成里面设置
    设置form输入框的autocomplete为on或者off来来开启输入框的自动完成功能
11、title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
    strong标明重点内容，语气加强含义；b是无意义的视觉表示
    em表示强调文本；i是斜体，是无意义的视觉表示
    视觉样式标签：b i u s
    语义样式标签：strong em ins del code
12、元素的alt和title有什么异同？
在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字.
13、浏览器页面有哪三层构成，分别是什么，作用是什么?
浏览器页面构成：结构层、表示层、行为层
    分别是：HTML、CSS、JavaScript
    作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。
14、div+css的布局有什么优点？
（1）改版的时候更方便只要改css文件。
    （2）页面加载速度更快、结构化清晰、页面显示简洁。
    表现与结构相分离。
    （3）易于优化（seo）搜索引擎更友好，排名更容易靠前。
15、网页制作会用到的图片格式有哪些？
Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。
    并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
    Apng：是PNG的位图动画扩展，可以实现png格式的动态图片效果，有望代替GIF成为下一代动态图标准。
16、简述一下src与href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系
17、从浏览器地址栏输入url到显示页面的步骤
浏览器根据请求的URL交给DNS域名解析，到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。
18、HTML全局属性(global attribute)有哪些
class:为元素设置类标识
data-*:为元素增加自定义属性
draggable:设置元素是否可拖拽
id:元素id，文档内唯一
lang:元素内容的的语言
style:行内css样式
title:元素相关的建议信息
19、Canvas是什么？怎样写Canvas？
Canvas是HTML5的一个元素，它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。
如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。
    canvas id="myFirstCanvas" width="100" height="100" /canvas
20、你能列出HTML5中新的输入类型属性吗？
search：用于搜索域，比如站点搜索或 Google搜索，域显示为常规的文本域。
url ：用于应该包含 URL地址的输入域在提交表单时，会自动验证 url域的值。
email：用于应该包含 e-mail地址的输入域，在提交表单时，会自动验证 email域的值。
datetime：选取时间、日、月、年（UTC时间）
date：选取日、月、年
month：选取月、年
week：选取周和年
time：选取时间（小时和分钟）
datetime-local：选取时间、日、月、年（本地时间）
number：用于应该包含数值的输入域，您还能够设定对所接受的数字的限定。
range：用于应该包含一定范围内数字值的输入域，类型显示为滑动条。
21、简述几个css hack?
(1)图片间隙
    在div中插入图片，图片会将div下方撑大3px。hack1：将div与img写在同一行。hack2：给img添加display：block；
dt li中的图片间隙。hack：给img添加display：block；
(2)默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
hack1：给元素添加：font-size：0；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。