Technology growth

Basic Web Design

HyperText Markup Language 5 And Cascading Style Sheets Level 3

Ziyi Xie

Dec 19, 2019 • 9 min read

Red Clouds And Blue Sky

HyperText Markup Language

Background Information

HTML5 始于 2004 年，直到 2014 年才正式成为 W3C 的推荐标准。除开文档类型声明 <!DOCTYPE html> 不再需要指定特定的版本外，HTML5 还引入了许多新的功能和特性，如语义化标签、媒体支持、本地存储和拖放功能等。

与 Extensible Hypertext Markup Language 不同，HTML 对标签的闭合和嵌套不作强制要求，XHTML 需要严格遵守 XML 规范。此外，HTML 文档的 MIME 类型是 text/html，而 XHTML 文档是 application/xhtml+xml。

Multipurpose Internet Mail Extensions 类型是一种用于标识互联网上各种文件类型的标准：

在网络通信中，发送方通过在消息头部添加正确的 MIME 类型，使接收方能够识别数据的类型和格式。
当浏览器接收到服务端返回的数据时，会根据响应头中的 MIME 类型来确定如何解析和渲染数据。

Web Worker

在 V8 引擎线程执行 JavaScript 期间，渲染主线程会停止解析 HTML，以确保渲染主线程不会进行布局和绘制。如果存在有耗时的 JavaScript 执行，那么渲染线程将无法及时更新页面，这就会导致页面失去响应。HTML5 引入的 Web Worker 允许在并行的 Worker 进程中执行脚本，而不会阻塞页面的渲染和用户交互。

尽管 Web Worker 提供了一个并行的执行环境，但并不适合所有的 JavaScript 代码都在其中运行。Web Worker 不能直接访问或操作 DOM 元素，任何涉及 DOM 操作的需求都应该通过主线程来处理。Worker 线程通常用于执行计算密集型或耗时的任务，以避免阻塞主线程并提高性能。

在当前 JavaScript 主线程中，使用 Worker() 构造函数新建一个 worker 实例加载某段 JS 文件，发送给一个后台线程处理。

// 新建worker实例
var worker = new Worker('worker.js'); // 参数url表示需要发送到后端线程处理的JavaScript文件的路径
worker.postMessage("zszszs"); // 向后端发送数据给worker线程 => 跳入后端
// 接收后端处理完成的数据
worker.onmessage = function(e){
    console.log(e.data) // e.data获取发过来的数据 szszsz
};

// 后端 worker.js
onmessage = function(e){
    // 通过e.data获取前端发送来的数据
    var str = e.data.split("").reverse().join("");
    postMessage(str);
};

Async & Defer In Script Tag

当 HTML 解析过程中遇到 <script async> 或 <script defer> 标签时，浏览器会将脚本的加载操作交给网络进程来处理，异步加载脚本文件。一旦文件下载完成，浏览器会将脚本传递给浏览器的主线程。设置 async 的脚本执行会中断 HTML 的解析，而设置 defer 的脚本执行会推迟到 HTML 解析完毕后执行。推荐查看。

注意，事件 DOMContentLoaded 在 HTML 解析完成并构建 DOM 树后触发，表示 DOM 树已经可以与 JavaScript 进行交互。那么可以得出：在 DOMContentLoaded 事件触发时，设置 defer 属性的脚本已经执行完毕，但是与设置 async 属性的脚本并没有任何直接的关系。

此外，<script> 标签还提供 integrity 以及 crossorigin 属性用于处理 CDN 相关的资源：

integrity 用于验证所获取的资源的完整性，其值是通过 sha256 算法生成的哈希
crossorigin 用于处理跨域请求中的凭证，控制是否发送 Cookies 或 HTTP 信息

<script src="https://example.com/jquery.js" integrity="sha256-hash" crossorigin="anonymous"></script>

W

HTTP 协议是一种无状态的请求/响应协议，无法实现实时、双向的通信。HTML5 引入了 WebSocket 协议，它提供了一种全双工、实时的通信通道，允许客户端和服务器之间进行双向通信。WebSocket 建立在 TCP 协议之上，通过一个持久的连接，实现了客户端和服务器之间的实时数据传输。

Cascading Style Sheets Level

CSS3 引入了一些新的选择器（属性选择器、伪类选择器、伪元素选择器等）、盒模型 box-sizing 属性、弹性和网格布局、自定义字体、媒体查询和特殊效果（动画和过渡、2D/3D 转换和变换等）等。

Browser Compatibility

在确定兼容范围时，可以使用 Can I use 和 Browserslist 来查看浏览器的支持情况。通过 CSS Hack 来处理浏览器兼容的情况，就目前来说已经过时，Vendor Prefixes 和 Polyfills 是更普遍的做法。

Vendor Prefixes 是针对不同的浏览器使用不同的 CSS 属性前缀来确保代码在各个浏览器中正确渲染。如 -webkit- 前缀适用于 WebKit 内核的浏览器（如 Chrome 和 Safari），-moz- 适用于 Firefox，-ms- 适用于旧版的 Internet Explorer，-o- 适用于 Opera。

新增选择器

在 CSS2 选择器基础上（元素、id、class、群组、层次选择器），CSS3 新增加了三大类选择器：属性选择器、结构伪类选择器、UI伪类选择器。

/* 属性选择器 */
E[attr^|$|*="xxx"]
/* 百度文档分类图示实现示例 */
a[href$="doc"]::before{
    content: url("..."); /* ::before|after 常配合 content 属性使用 */
}

/* 结构伪类选择器 */
ul li:nth-child(odd|even|num)
E:nth-of-type(n) /* 父类型下的第n个子元素,和上方法有差别 */

/* UI伪类选择器 */
:focus | ::selection | :checked | :enabled和:disabled | read-write和:read-only

颜色样式

在 CSS3 中增加了定义颜色方面样式的属性，主要包括3种：opacity透明度、RGBA颜色、CSS3渐变。opacity 属性在实际开发中可以配合 :hover 来开发悬停在某个按钮或图片上改变透明度的动态的效果。需要注意的是 opacity 属性效果会渗透到其子元素中。RGB是一种色彩标准，语法为 rgba(R, G, B, Alpha)。渐变有线性渐变和径向渐变，都是由定位以及始末颜色组成。

background:linear-gradient(to right|left, start-color, stop-color);
background:radial-gradient([position,[ shape[ size,]]] start-color, stop-color)

边框样式

边框样式即对元素边框增加了修饰属性。主要由 border-radius、box-shadow、border-image 组成。

border-radius: 左上角、右上角、右下角、左下角;
<!-- 半圆原理: 左上角和右上角的圆角半径定义与元素的高度一致，而右下角和左下角的圆角半径定义为0 -->
border-radius:50px 50px 0 0;
<!-- border-radius属性来实现椭圆: x表示圆角的水平半径，y表示圆角的垂直半径 -->
border-radius:x/y;
<!-- 派生子属性 -->
border-position1-position2-radius: xx; <!-- position1 position2 角 -->
box-shadow:x-offset y-offset blur spread阴影尺寸 color outset|inset;
<!-- 可以使用 border-image 属性为边框添加背景图片 -->
border-image:url() 切割宽度 repeat|round|stretch;

Pseudo-class & Pseudo-element

伪类以单冒号开头，用于向已有的元素选择器添加特殊效果。伪元素以双冒号开头，用于将特殊效果添加到不存在于文档树中的虚拟元素中，浏览器会自动创建这些虚拟元素。经典应用有勾选文字提醒和输入框超出变色。

input { margin: 10px; }
input::after {content: '已勾选'; display: none; width: 50px; height: 30px; margin-left: 50px;}
input:checked::after {display: block}

<input type="checkbox" style="display: block;">
<input type="checkbox" style="display: block;">
<input type="checkbox" style="display: block;">

input { font-size: 3em; width: 100px; height: 50px; border-radius: 10px; }
input:out-of-range:focus { background-color: #FF4D4D; }
input:out-of-range + span::after {content: '超出范围'}

<b>请输入</b>
<input type="number" min="1" max="40">
<span>结果</span>

Grid Layout

CSS3 不仅新增了多列布局和弹性盒模型，还引入了网格布局作为一种更强大和灵活的布局方式。

Additional Supplement

HTML5 中有两种主要的 2D 图形技术：Canvas 和 SVG。Canvas 基于位图，适用于像素处理和动态渲染，但图形放大会影响质量。而 SVG 是基于矢量的，图形放大不会影响质量，并且不需要重绘。简单来说，使用 Canvas 绘制的是位图，而使用 SVG 绘制的是矢量图。

CSS3 中的 transform 属性注重于元素的变形结果，而 transition 属性则专注于实现平滑的变形过渡过程。与 animation 属性不同，transition 属性只能实现简单的、一次性的动画效果。

filter 属性是 CSS3 中引入的新特性。它允许在元素的渲染过程中对其内容进行图形特效处理，类似于 Photoshop 中的滤镜效果，如模糊、灰度、对比度调整、色彩反转等，而无需使用额外的图像编辑软件来处理图片。

除开文本样式 text-shadow、text-overflow、word-wrap 外，CSS3 还引入了 @font-face 规则加载自定义字体。

通过设置 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap 这三个属性，可以实现一行文本的省略效果。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

结束

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！