基础

URL

• URL由协议、域名、端口、路径、参数、锚点(片段标识符)组成浏览器中的地址就是URL，利用URL，浏览器可以从Web获取页面或其他资源；URL中的协议(Http)部分告诉浏览器使用什么方法获取资源，网址(域名和路径)告诉浏览器资源的位置(哪个计算机-IP，哪个目录文件)。

浏览器应对不支持的标签

• 当浏览器遇到一个不认识的(不支持的)HTML元素时，默认行为是显示元素的内容(开始和结束标记之间的内容)。例如<canvas>该浏览器不支持canvas元素</canvas>；当浏览器支持canvas元素时不会显示文本内容，当不支持时显示文本内容。

空白处理

• HTML中的多个空白字符(空格、Table、换行)会用一个空格替换。对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。 需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

• demo

<ul>
  <li><img src="xxx"></li>
  <li><img src="xxx"></li>
  <li><img src="xxx"></li>  
</ul>
li {
  display: inline-block;
  list-style-type: none;
}
<!-- 多个行内元素，换行被替换为空格，导致页面显示时图像水平之间有空格 -->

href与src的区别 & 可替换元素

• demo

<link href="https://***/style.css" rel="stylesheet">
<script src="https://**/jquery-1.9.1.min.js" type="text/javascript"></script>
<img src="**/**.jpg">

• href引用外部资源，建立该标签与资源之间的关系(rel)；

• src 替换该标签。href 引用 css 文件，HTML 的解析和渲染不会停止，不同于在 <style> 中的内联样式表；用@import导入的外部样式表在页面加载完成后再加载，可能导致页面重新渲染而闪烁，因此不建议使用。src将资源嵌入到当前标签所在位置，如 <script src=**> ，类似于在该标签位置编写js，页面会停止 HTML 解析直到浏览器拿到并执行该JS文件。src用外部资源填充、替换当前元素；

• 可替换元素是一种外部对象，它们外观的渲染不受 CSS 的控制，即可替换元素的内容不受当前文档样式的影响。CSS 可以控制它们的位置或定位；典型的可替换元素：iframe、video、embed、**img，**CSS的content属性用于在元素的::before::after伪元素中插入内容，插入的内容也是匿名的可替换元素。

加载图像

• 浏览器载入网页index.html，网页中含图像，HTML页面是纯文本的，图像不是HTML文件的一部分，<img> 只是指向图像浏览器会同时请求多个图像。浏览器在下载了HTML文件并开始显示页面后才下载图像。
• 浏览器从服务器获取文件index.html；当前窗口为空，尚未获取任何内容。
• 浏览器读取index,.html文件，显示html，发现其中有图像需要显示。
• 当前窗口显示html，尚未显示图像。浏览器向服务器请求图像文件；
• 获取图像后显示该图像，转向下一个媒体文件使用width和heigth实现缩放图像时，浏览器在缩放前仍然要获取整个大的图像，所以最好是修改图像的分辨率，并将width和height设置和图像实际宽高一致。

前端面试之htm5新特性

• header、导航栏 nav、main、section、aside、画布canvas、footer、video、audio
• 首先 html5 为了更好的实践 web 语义化，增加了header，footer，nav,aside,section 等语义化标签，在表单方面，为了增强表单，为 input 增加了color，emial,data ,range等类型，在存储方面，提供了sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素 audio 和 vedio，另外还有地理定位，canvas画布，拖放，多线程编程的 web worker 和 websocket 协议。

html标签区别

strong 和 b 的区别

• 相同: 页面渲染结果一致
• <b> 是样式加粗，<strong> 是逻辑加粗，带有强调的含义，
• 使用屏幕阅读器时 <b> 不会重读，<strong> 会重读，并且 <strong> 有利于SEO优化(更容易被搜索到)

特殊链接

1. 下载链接

使用带有 <a> 元素的 download 属性来指定当用户单击链接时，应下载而不是导航到链接的资源

<a href="document.pdf" download="document.pdf"> Download PDF </a>

2. 联系链接

<!-- Email link -->
<a href="mailto:name@example.com"> Send Email </a>

<!-- Phone call link -->
<a href="tel:+1234567890"> Call Us </a>

<!-- SMS link -->
<a href="sms:+1234567890"> Send SMS </a>

分组表单元素

使用 <fieldset> 标签将表单中的相关元素分组，并使用 <legend> 标签与 <fieldset> 一起为 <fieldset> 标签定义标题。

这对于创建更高效和更易访问的表单非常有用。

<form>
   <fieldset>
      <legend>个人信息</legend>
      <label for="firstname">名字:</label>
      <input type="text" id="firstname" name="firstname" />
      <label for="email">电子邮件:</label>
      <input type="email" id="email" name="email" />
      <label for="contact">联系方式:</label>
      <input type="text" id="contact" name="contact" />
      <input type="button" value="提交" />
   </fieldset>
</form>