HTML的几个注意点

时间:2022-02-09 20:29:35

一、HTML

1.HTML5有哪些新特性?新增的标签有哪些?

  新特性:

  1. 语义标签——语义化标签使得页面的内容结构化,见名知义
  2. 增强型表单——拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证(包括取色器控件、日期时间控件等)
  3. 视频和音频——HTML5 提供了播放音频文件的标准,即使用 <audio> 、<video>元素
  4. Canvas绘图——标签只是图形容器,必须使用脚本来绘制图形
  5. SVG绘图——SVG是指可伸缩的矢量图形
  6. 地理定位——HTML5 Geolocation(地理定位)用于定位用户的位置
  7. 拖放API——拖放是一种常见的特性,即抓取对象以后拖到另一个位置
  8. Web Worker——web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行
  9. Web Storage——对本地离线存储有更好的支持, 提供了两种在客户端存储数据的新方法:localStorage - 没有时间限制的数据存储;sessionStorage - 针对一个 session 的数据存储
  10. WebSocket——是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,实现了更有效的服务器推送技术。

  新增标签:

  1. 多媒体:<audio>、<video>、<source>为媒介元素定义媒介资源、<embed>、<track>外部文本轨道[有字幕的视频]
  2. 新表单元素:<datalist>、<output>、<keygen>、<color>、<date>、<datetime>、<email>......
  3. 新文档节段和纲要:<header>页面头部、<section>章节、<aside>侧边栏、<article>文档内容、<footer>页面底部

2.HTML5语义化的好处?

  1. 易于用户阅读,提高了用户体验,比如:title、alt用于解释名词和图片信息,样式丢失的时候能让页面呈现清晰的结构。
  2. 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重,和搜索引擎简历良好的关系,有利于爬虫抓取更多的有效信息(爬虫依赖于标签来确定上下文和各个关键字的权重)
  3. 方便其他设备解析,如屏幕阅读器、盲人阅读器、移动设备,根据语义渲染网页
  4. 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐,如果遵循W3C标准的团队都遵循这个标准,可以减少差异化,有利于规范

3.浏览器标准模式和怪异模式?

  在标准模式页面按照HTML,CSS的定义渲染,而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式,如果存在一个完整的DOCTYPE则浏览器将会采用标准模式,如果缺失就会采用怪异模式。以下是几点区别:

  • 盒模型:

  在怪异模式下,盒模型为IE盒模型                          而在W3C标准的盒模型中为

  HTML的几个注意点                         HTML的几个注意点

  • 图片元素的垂直对齐方式:

       对于inline元素和table-cell元素,标准模式下vertical-align属性默认取值为baseline,在怪异模式下,table单元格中的图片的vertical-align属性默认取值为bottom,因此在图片底部会有及像素的空间。

  • <table>元素中的字体:

  CSS中,对于font的属性都是可以继承的,怪异模式下,对于table元素,字体的某些元素将不会从body等其他封装元素中继承得到,特别是font-size属性。

  • 内联元素的尺寸:

  标准模式下,non-replaced inline元素无法自定义大小,怪异模式下,定义这些元素的width,height属性可以影响这些元素显示的尺寸。

  • 元素的百分比高度:

  a:CSS中对于元素的百分比高度规定如下:百分比为元素包含块的高度,不可为负值,如果包含块的高度没有显示给出,该值等同于auto,所以百分比的高度必须在父元素有高度声明的情况下使用。

  b:当一个元素使用百分比高度时,标准模式下,高度取决于内容变化,怪异模式下,百分比高度被正确应用。

  • 元素溢出的处理:

  标准模式下,overflow取默认值visible,在怪异模式下,该溢出会被当做扩展box来对待,即元素的大小由其内容决定,溢出不会裁减,元素框自动调整,包含溢出内容。

4.CSS\JS引入的位置一般在哪里?为什么?

  要解释放置位置就要依据网站加载的整个完整过程:

  1. 首先浏览器从服务器接收到html代码,然后开始解析html
  2. 构建DOM树(根据html代码自顶向下进行构建),并且在同时构建渲染树
  3. 遇到js文件加载执行,将阻塞DOM树的构建;遇到css文件,将阻塞渲染树的构建
  • script标签中的defer属性:构建DOM树的过程和js文件的加载异步(并行)进行,但是js文件执行需要在DOM树构建完成之后
  • script标签中的async属性:构建DOM树、渲染树的过程和js文件的加载和执行异步(并行)进行

综上所述,script标签最好放在</body>标签的前面,因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况,可以持续的给用户提供视觉反馈,同时在有些情况下,会降低错误的发生。而css标签应该放在<head></head>标签之间,因为如果放在</body>标签的前面,那么当DOM树构建完成了,渲染树才构建,那么当渲染树构建完成,浏览器不得不再重新渲染整个页面,这样造成了资源的浪费。效率也不高。如果放在<head></head>之间,浏览器边构建边渲染,效率要高的多。

  下面是BS标准模板:

<!DOCTYPE html>
<html>
  <head>
     <!--网页页面字符集-->
    <meta charset="utf-8">
 
    <!--让IE使用最新的渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <!--针对移动设备,网站显示宽度等于设备屏幕显示宽度,内容缩放比例为1:1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!--将下面的 <meta> 标签加入到页面中,可以让部分国产浏览器默认采用高速模式渲染页面:-->
    <meta name="renderer" content="webkit">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
 
    <title>Bootstrap Basic Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--下面这一大块的注释是说:"为了让IE9以下的浏览器支持响应式和HTML5标签.需要引入下面两个JS文件"-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
 
    <!-- 英:jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!--中:必须在JS文件引入之前引入JQ文件,这里src引用的是本地.线上建议使用CDN引用)
    <script src="js/jquery-2.1.3.min.js"></script>
 
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>    

 5.link和@inport引入CSS的区别?

  • 适用范围不同
    • @import可以在网页页面中使用,也可以在css文件中使用,用来将多个CSS文件引入到一个CSS文件中
    • link只能将CSS文件引入到网页页面中
  • 功能范围不同
    • @import是CSS提供的一种方式,只能用于加载CSS
    • link属于XHTML标签,除了可以加载CSS外,还可以定义RSS,定义rel连接属性等
  • 加载顺序不同
    • 当一个页面被加载的时候,@import引用的CSS会等到页面全部被下载完再被加载,所以有时候在浏览@import加载CSS的页面时开始会没有样式(闪烁),这种情况在网速慢的时候比较明显。
    • Link引用的CSS会同时被加载
  • 兼容性的差别
    • @import是有CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上才能识别
    • link标签没有这个问题
  • 控制样式的差别
    • 使用link方式可以让用户切换CSS样式