Web前端基础知识:HTML篇

539 阅读11分钟

先导

个人在学习过程中,涉及和遇见的一些基础知识,对其进行了简单归纳总结,浅尝辄止,略显杂而不精,做个人参考用

注:内容基本都是摘抄自博客、网络或MDN等


HTML篇

1、Doctype作用?严格模式与混杂模式如何区分?它们有何差异?

作用:

<!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。

严格模式与混杂模式:

严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。

混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。

区分:

  1. 如果文档包含严格的 DOCTYPE ,那么它一般以严格模式呈现。(严格 DTD ——严格模式)
  2. 包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。(有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式)
  3. DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。(DTD不存在或者格式不正确——混杂模式)
  4. HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。( HTML5 没有严格和混杂之分)

2、html的<head>标签

一般写入内容:

  • <title>: 标题,不写会自动添加

  • <encoding>:编码方式的规范是放在head的最前面,如果不指定,浏览器也会根据服务器的header进行判定,但是不一定准确。

  • <meta>

    • description

    • <meta name="description" content="这里是对网站的描述">:SEO用

    • viewport

      • <meta name="viewport" content="width=device-width, initial-scale=1">:移动端适配

        width:控制viewport的大小,一般情况下指定为device-width(单位为缩放为100%的CSS像素),也可以指定一个固定的值例如600.

        height:和width相应,指定高度。

        initial-scale:初始缩放比例,页面第一次load的时候的缩放比例。

        maximum-scale:允许用户缩放到的最大比例。

        minimum-scale:允许用户缩放到的最小比例。

        user-scalable:用户是否可以手动缩放

  • <link>:css文件


3、块级元素和行内元素

行内元素:

  • 与其他行内元素并排;
  • 不能设置宽、高。默认的宽度,就是文字的宽度。

块级元素:

  • 霸占一行,不能与其他任何元素并列;
  • 能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%。

从HTML的角度来讲,标签分为

  • 文本级标签:p、span、a、b、i、u、em
  • 容器级标签:div、h系列、li、dt、dd

从CSS的角度讲,CSS的分类和上面的很像,p标签不一样:

  • 行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级,但是是个块级元素。
  • 块级元素:所有的容器级标签都是块级元素,还有p标签。

注:p标签不能包含任何其他块元素(除了他本身和内联元素可以),a标签可以包含任何元素(除了它本身不可以)


4、一些基础细节问题

1)HTML 的 有两个关于背景的属性,

一个是 bgcolor,是 设置背景颜色 的; 一个是 background,是 设置 背景图片的。

2)HTML5全局属性:hidden

hidden属性功能是通知浏览器不渲染元素,使该元素处于不可见状态。但是元素中的内容还是浏览器创建的,也就是说页面装载后允许使用javascript脚本将该属性取消,取消后该元素变为可见状态,同时元素中的内容也即时显示出来。hidden属性是一个布尔值,为true时元素处于不可见状态;为false元素处于可见状态。

3)<abbr>标签

<abbr> 标签用来表示一个缩写词或者首字母缩略词,如"WWW"或者"NATO"。

<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。

4) a标签的href属性

# // 空链接,单击后仍停留在当前页面,但是会触发事件

javascript:; // 不会跳转,样式不变,即a:visited 、a:hover 、a:active的样式不起作用

5) dom树中的节点类型

  • Element类型(元素节点)
  • Text类型(文本节点)
  • Comment类型(注释节点)
  • Document类型(document节点)

6)DHTML

DHTML具有三个主要优点:动态样式、动态内容、动态定位

7) HTML元素分类

在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素内联元素(又叫行内元素)和内联(行内)块状元素

1. 常用的块状元素有

<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

设置display:block可以转为块状元素

2. 块级元素特点

  • 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行);
  • 元素的高度、宽度、行高以及顶和底边距都可设置。
  • 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

3. 常用的内联元素有

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

在html中,<span>、<a>、<label>、<strong> <em>就是典型的内联元素(行内元素)(inline)元素。

当然块状元素也可以通过代码display:inline将元素设置为内联元素

4. 内联元素特点

  • 和其他元素都在一行上;
  • 元素的高度、宽度及顶部和底部边距不可设置;
  • 元素的宽度就是它包含的文字或图片的宽度,不可改变。

5. 常用的内联块状元素有

<img>、<input>

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。

6. inline-block 元素特点

  • 和其他元素都在一行上;
  • 元素的高度、宽度、行高以及顶和底边距都可设置。

8) <meta>标签

<meta name="viewport"content="width=device-width, initial-scale=1.0">

  • width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
  • height:和 width 相对应,指定高度。
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale:允许用户缩放到的最大比例。
  • minimum-scale:允许用户缩放到的最小比例。
  • user-scalable:用户是否可以手动缩放。

5、Canvas和SVG的区别

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
  • Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

6、HTML5代码要求

  1. 使用正确的文档类型:文档类型声明位于HTML文档的第一行
  2. 使用小写元素名
  3. 关闭所有 HTML 元素
  4. 关闭空的 HTML 元素
  5. 使用小写属性名
  6. HTML5 属性值可以不用引号,但推荐使用

7、HTML5的优缺点

优点:

  1. 网络标准统一、HTML5本身是由W3C推荐出来的。
  2. 多设备、跨平台
  3. 即时更新。
  4. 提高可用性和改进用户的友好体验;
  5. 有几个新的标签,这将有助于开发人员定义重要的内容;
  6. 可以给站点带来更多的多媒体元素(视频和音频);
  7. 可以很好的替代Flash和Silverlight;
  8. 涉及到网站的抓取和索引的时候,对于SEO很友好;
  9. 被大量应用于移动应用程序和游戏。

缺点:

  1. 安全:像之前Firefox4web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
  2. 完善性:许多特性各浏览器的支持程度也不一样。
  3. 技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socket、web storage 等新特性,后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战
  4. 性能:某些平台上的引擎问题导致HTML5性能低下。
  5. 浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没。

8、Web程序对象作用域

常用的有三个:

  • 请求作用域,
  • 会话作用域,
  • 应用上下文。

请求作用域req范围最小,需要的资源最少,作用当前请求

session会话作用于本次对话,每个对话都有JSessionID,

ServletContext作用域范围大:web应用中所有都能够访问,生命周期和web容器一样长,维护所需资源多。 在满足需求内耗费的资源越小越好


9、Web Worker

1)简介

JavaScript主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。

注意点:

  • 同源限制。必须与主线程的脚本文件同源。
  • DOM限制。Worker线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。但是,Worker 线程可以navigator对象和location对象。
  • 通信限制。Worker线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成 (postMessage)。
  • 脚本限制。Worker线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
  • 文件限制。Worker 线程无法读取本地文件,它所加载的脚本,必须来自网络。

2)WORKER线程

Web Worker 有自己的全局对象,不是主线程的window,而是一个专门为 Worker 定制的全局对象。因此定义在window上面的对象和方法不是全部都可以使用。

Worker 线程有一些自己的全局属性和方法:

  • self.name: Worker 的名字。该属性只读,由构造函数指定。
  • self.onmessage:指定message事件的监听函数。
  • self.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件。
  • self.close():关闭 Worker 线程。
  • self.postMessage():向产生这个 Worker 线程发送消息。
  • self.importScripts():加载 JS 脚本,可以同时加载多个脚本。

10、WebGL

WebGL(全称 Web Graphics Library )是一种 3D 绘图标准,这种绘图技术标准允许把 JavaScriptOpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定, WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了,还能创建复杂的导航和数据视觉化。

显然, WebGL 技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂 3D 结构的网站页面,甚至可以用来设计 3D 网页游戏等等。

WebGL完美地解决了现有的 Web 交互式三维动画的两个问题:

  1. 它通过HTML脚本本身实现 Web 交互式三维动画的制作,无需任何浏览器插件支持 ;
  2. 它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。

通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂,我们经常会使用一些三方的库,如 three.js 等,这些库多数用于 HTML5 游戏开发。