【白话科普】10s 从零看懂 H5-低调大师

【白话科普】10s 从零看懂 H5

2022-01-06 580

最近大家有没有发现，很多微信公众号的动态内容变多了？我们常常可以看到，公众号内容中有很多动态图片甚至动画，还可以通过手指滑动切换页面，或者有一些小的点击互动。

这种看起来有点高级的小作品，其实是都是“互动形式的多媒体广告页面”，它是 H5 的移动端网页。

什么是 H5

H5 其实是缩写，我们一般所说的 H5，其实是指 HTML5，即第五代超文本标记语言。而超文本标记语言 HTML，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。需要注意的是 HTML 不是一种编程语言，因此 HTML 的上手极为方便。那为什么 HTML 直到第 5 代才这么热门的出现？

因为以前网页主要在电脑中访问，而如今访问网页的设备逐渐从电脑端转移到了移动设备。可是原本的网页如果用手机查看是很难看清楚内容的，这才推动了 HTML5 的出现。

而 HTML5 也不负众望，带着一些全新特性几乎完美的达成了适配多种设备的需求。

HTML5 的特性

语义化标签

语义是指对一个词或者句子含义的正确解释，HTML 语义化让我们仅通过 HTML 元素就能看出页面的大致结构。HTML5 新增的语义化元素，让我们能够通过标签名判断标签内容。这些元素分别是：

<header> 标签通常放在页面或页面某个区域的顶部，用来设置页眉；
<nav> 标签可以用来定义导航链接的集合，点击链接可以跳转到其他页面；
<article> 标签中的内容比较独立，可以是一篇新闻报道，一篇博客，它可以独立于页面的其他内容进行阅读；
<section> 标签表示页面中的一个区域，通常对页面进行分块或对内容进行分段，<section> 标签和 <article> 标签可以互相嵌套；
<aside> 标签用来表示除页面主要内容之外的内容，比如侧边栏；
<footer> 标签位于页面或页面某个区域的底部，用来设置页脚，通常包含版权信息，联系方式等。

增强型表单

之前的 HTML 版本的功能，比如日期、颜色、文本框等，是需要单独的控件进行支持的，而到了 HTML5，这些常用功能直接进入了表单标签中，比如你可以直接通过 <color> 控制颜色。

除此外， HTML 还增加了新的表单属性：

placeholder 提供对输入域的提示值
required 规定表单提交前输入域是否必填
pattern 规定用于验证 input 域的正则表达式
min 规定输入域允许的最小值
max 规定输入域允许的最大值
multiple 输入域可以选择多个值，适用于 email 和 file 类型

DOM 扩展

HTML5 为 DOM 作了一些专门扩展，包括 classList 属性、焦点管理、HTMLDocument 变化、字符集属性、插入标记、getElementByClassName() 方法等。这其中 getElementByClassName() 方法是最受欢迎的，它可以让添加事件处理程序不再局限于使用 ID 或标签名 (getElementsByTagName)。

媒体元素

HTML5 新增了两个与媒体相关的标签 <audio> 和 <video>，它们让开发人员不再需要依赖插件就能在网页中嵌入跨浏览器的音频和视频内容。<audio> 和 <video> 还包含了 autuplay、controls、src 等新属性，让开发人员在只需要少量 HTML 和 JavaScript 的就能编写出自定义音视频播放器。

Web Storage

Web Storage 有两个主要目标：

提供一种在 cookie 之外存储会话数据的途径
提供一种存储大量可以跨会话存在的数据的机制

常用的两个对象分别是：

localStorage：对象存储某个特定会话的数据，该数据只保持到浏览器关闭。
sessionStorage：目的是跨越会话存储对象，但有特定的访问限制，限制因浏览器而异。

WebSockets

HTML5 支持了 WebSockets。WebSockets 可以让双工、双向通信能在一个单独连接上持久存在，WebSocket 协议更好的节省了服务器资源和带宽，并且能够更实时地进行通讯。但是这个需要支持这种协议的专门服务器，当然我们也可以选择使用云服务来解决。详细可以查看《聊聊 WebSocket，还有 HTTP》

HTML5 的优劣

任何特性如果单独看可能并不能直白的体会到它的优势，那我们就来直白地看一下这些特性让 HTML5 相较之前的版本增加了多少优势：

提高了用户体验并且提高了可用性：这些特性让站点能够加入更多多媒体元素，音视频的使用更为广泛。同时它替代了 FLASH 和 Silverlight
对网站而言：对 SEO 的抓取和索引都更为友好了，让用户能够更容易的查找到网站。
提高了移植性：这让大量应用程序和游戏不再局限于 PC 端，而是能使用手机访问。
节省开发成本：充分提现了“响应式设计”的概念，只要使用一套代码就可以适配任何设备、任何系统、任何分辨率。

不过作为一个全新的版本，HTML5 有着新东西都有的痛点。最标志的就是不能被所有的浏览器支持，比如 IE，当前 IE9 以下的浏览器都不兼容 HTML5。

但是在移动端设备越来越普及，功能也越来越强大的当下。HTML5 占领全部市场只是时间问题，你看微信公众号内容都开始出现 HTML5 了不是么？

内网渗透基础总结

研究内网安全我们首先需要弄明白内网是什么？在渗透测试过程中我们一般把因特网称为外网，而将其余的网络（政务网、公安网、企业内网等）定义为内网。后来我仔细思考了一下，内外网的概念其实是相对而言的，比如一台电脑同处于办公室内的小型局域网和公司的大型局域网内，那么就可以把办公室内的局域网称为内网，公司的大型局域网称为外网。而通常情况下我们会同处于公司网和因特网之内，那么就会常常把因特网称为外网，公司网称为内网，久而久之这种概念也就形成了。内网相对于外网来说通信更快、传输文件更方便、共享更便利，但是相对来说安全性也更低，需要注意的点也有许多。本章主要讲解内网工作组、域、活动目录、域内权限解读等，同时包含内网渗透域环境、渗透测试环境的搭建方法以及常用的渗透测试工具。 0x01 内网基础知识在内网中会出现许多名词和概念，如工作组、域、活动目录、安全域、域权限等，本节将从这些点展开扩展。（一）工作组工作组简单理解就是根据工作特性不同而划分的计算机组。在一个局域网中，不同的计算机可以按照功能或部门的不同列入不同的工作组，例如销售部的计算机列入“销售部”工作组。财务部的计算机列入”财务部“工作组，技...

2022-01-06

749

修复开发模式下，某些情况下SQL文件的更新时间判断有误，导致及时文件没修改每次都更新的的Bug 代码生成模块，生成的sql文件里增加一个json映射配置。可以用此来编写复杂映射，无需从头新写 <dependency> <groupId>com.ibeetl</groupId> <artifactId>beetlsql</artifactId> <version>3.12.8-RELEASE</version> </dependency> BeetlSQL 自主研发自 2015 年，目标是提供开发高效，维护高效，运行高效的数据访问框架，它适用范围广，定制性强，写起数据库访问代码特别顺滑，不亚于 MyBatis。你不想写 SQL 也好，或者想更好地写 SQL 也好，BeetlSQL 都能满足这要求，目前支持的数据库如下传统数据库：MySQL (包括支持MySQL协议的各种数据库), MariaDB ,Oralce ,Postgres (包括支持 Postgres 协议的各种数据库)...

2022-01-06

754

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。