1.h1标签和title标签之间的区别是什么？
- h1标签：写在文章正文的标题部分，是展示给用户看的。一个页面最好只用一个h1，h1用得太多，会稀释主题;一个网站可以有多个title，最好一个单页用一个title以便突出网站页面主题信息。从SEO角度看，title的权重高于h1，其适用性要比h1广。
- title标签：写在网页的head部分，是展示给搜索引擎看的，搜索引擎的搜索结果中展示的标题就是这个title标签里的内容。h1与title权重的高低比较，title无疑是页面中权重最高的，其次是h1标签。一个好网站是：h1与title并存，既突出h1文章主题，又突出网站主题和关键字，达到双重优化网站的效果。
2.img标签中的title属性和alt属性的区别
alt属性是在图片无法加载的时候才会显示的替代文本，而title是关于元素的注释信息，主要是给用户解读，当鼠标放到文字或是图片上时有title文字显示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。
3.HTTP有哪些请求方法和它们的用途
1.GET方法
- 发送一个请求来取得服务器上的某一资源
2.POST方法
- 向
URL指定的资源提交数据或附加新的数据
3.PUT方法
- 跟
POST方法很像，也是向服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
4.HEAD方法
- 只请求页面的首部
5.DELETE方法
- 删除服务器上的某资源
6.OPTIONS方法
- 它用于获取当前
URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
7.TRACE方法
TRACE方法被用于激发一个远程的，应用层的请求消息回路
8.CONNECT方法
- 把请求连接转换到透明的
TCP/IP通道
4.HTTP状态码及其含义
-
1XX：信息状态码100 Continue继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
-
2XX：成功状态码200 OK正常返回信息201 Created请求成功并且服务器创建了新的资源202 Accepted服务器已接受请求，但尚未处理
-
3XX：重定向301 Moved Permanently请求的网页已永久移动到新位置302 Found临时性重定向303 See Other临时性重定向，且总是使用GET请求新的URI304 Not Modified自从上次请求后，请求的网页未修改过
-
4XX：客户端错误400 Bad Request服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求401 Unauthorized请求未授权403 Forbidden禁止访问404 Not Found找不到如何与URI相匹配的资源（实际开发中，出现404就表示前端负责的模块出问题了）
-
5XX:服务器错误500 Internal Server Error最常见的服务器端错误（实际开发中，出现500就是后台或服务器的问题，不关前端的事）503 Service Unavailable服务器端暂时无法处理请求（可能是过载或维护）
5.你对语义化怎么理解？
- 用正确的标签做正确的事情
HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析- 在没有样式
CSS情况下也以一种文档格式显示，并且是容易阅读的 - 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于
SEO - 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
6.Html5有哪些新特性
Html5 现在已经不是SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
- 新增选择器
document.querySelector、document.querySelectorAll - 拖拽释放(
Drag and drop) API - 媒体播放的
video和audio - 本地存储
localStorage和sessionStorage - 离线应用
manifest - 桌面通知
Notifications - 语意化标签
article、footer、header、nav、section - 增强表单控件
calendar、date、time、email、url、search - 地理位置
Geolocation - 多任务
webworker - 全双工通信协议
websocket - 历史管理
history - 跨域资源共享(CORS)
Access-Control-Allow-Origin - 页面可见性改变事件
visibilitychange - 跨窗口通信
PostMessage Form Data对象- 绘画
canvas
7.块级元素有哪些？行内元素（内联元素）有哪些？行内块级元素（内联块元素）有哪些？它们的区别是？
常见的block块级元素：
div、p、h1…h6、ol、ul、dl、table、address、blockquote、form
常见的inline行内元素：
span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）
常见的inline-block行内块级元素：
img、input
inline元素、block元素、inline-block元素的区别：
- 块级元素会独占一行，而行内元素和行内块级元素则会在一行内显示。
- 块级元素和行内块级元素可以设置 width、height 属性，而行内元素设置无效。
- 块级元素的 width 默认为 100%，而行内元素则是根据其自身的内容或子元素来决定其宽度。
8.strong标签和b标签的异同；em标签和i标签的异同
strong标签和b标签它们起的都是加粗字体的作用
b标签是一个实体标签，它所包围的字符将被设为 bold(粗体)， 而 strong 标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold(粗体)来实现的。“强调”可以用加粗来强调，也可以用其它方式来强调，比如下划线，比如字体加大，比如红色，等等，可以通过css来改变 strong的具体表现。
但是 B 标签本身不具备HTML语义，如果精通HTML的人很快就会知道这个标签在HTML代码里面只有加粗的意思。Strong标签在HTML语义为强调，表示语气上的强调、加重。从web标准上来说，不提倡使用B标签，不过Google的matt曾经说b标签更具有微小的优势，虽然后来修正为和strong标签优势一样。
就表现而言em标签和i标签表现都一样，都是表示斜体。
但是em标签是“含有语义”的标签，搜索引擎会了解这些语义。其在HTML中是特意被设定为表示“强调”的意思。当发现这些表示“强调”的标签时，一些屏幕阅读器可能使用不同的inflection，更利于SEO。而i标签表示对所包含内容显示斜体文本效果。
strong标签和em标签有语义，b标签和i标签则没有。
9.简述一下src与href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素
<script src ="js.js"></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式
10.jpg格式和png格式和jpeg格式有什么区别？
- 二者大小差距很大，png格式的图片所占存储大小明显大于jpg图片多倍以上。
- png即可移植网络图形格式，也是一种位图文件存储格式，可以进行无损压缩。而jpg是我们最常见的图片格式了，图片占用存储较少，但是也牺牲了图片质量。
- jpeg格式与jpg格式相似，该种图片格式是文件相对jpg大，因为里面存储了很多相机里的拍摄参数，像色相、饱和度、对比度等；在通常情况下面 jpg与jpeg是一样的，只是里面保存的数据不一样，但我们多数使用的是jpg。
以上皆是本人目前在广州找实习期间亲身经历过的面试题中的HTML问题，部分答案源于网上，如有错漏或有更好的答案也欢迎大家指出，仅作为笔记收录使用，也衷心希望各位能少走弯路，找到自己心仪的工作！
求职前端开发的小伙伴可以私信我进群交流一下（一群已满500人，已开启二群）！
