html如何跳转到另一个页面_另一个角度看HTML

781f716a75a0711a19b3369b763cc153.png

在前端体系中,JS作为一种单线程脚本语言拥有其他编程语言通用的数据结构,数据类型,其他语言的学习者很容易迁移。CSS有其既定的规律性,尝试有规律的利用和使用,也很容易上手使用。如果你是初学者,最容易忽略的知识点反而会在HTML上堆积。

e0d5981b254cb87bee832ff9eca2111a.png

我们简单把HTML 分为HTML5之前和HTML5及之后,来整理一下看似立马能上手的HTML到底包含什么内容。

一、HTML

HTML(超文本标记语言),它是网页的骨架,主要作用是将文本结构化为文本块并在网页中将其语义化排布。HTML最开始的目标是保证一篇文本内容能在网页上正常显示,所以所有的元素也都围绕文章内容来做考量。比如一篇文章内的标题,文本块,注释,表格,表单,图片块,媒体内容在初期的HTML中都有一定考量,上图右侧列出的点是在HTML4及之前阶段就产生的。可以看到此时的HTML还只是一些小标签,它们的意义就是将文章排布准确。

语义化标签:语义化标签就是类似tiltle,head,foot,meta这样的标签,这样的标签在规则制定之初就是为了显示相关内容而存在的,所以合理运用这些元素有利于网页的渲染速度和SEO。

元素:行内元素和块元素是为了区分文本块存在的。我们日常写作时常常会将文章分段,分节。在浏览器内,为了让这样的内容可以正常显示,HTML规定了块元素,如:(文章标题标签(h),段落(p), 表格(table),块(div),表单(form)),这些元素通常可以是文本的一块独立内容,需要自己占一行的空间。而内联元素就是这些块内比较常用的表现形式, 如(链接(a),强调(strong),span(万能内联元素 ))

DTD(文档类型说明):因为HTML4基于SGML标准,所以!DOCTYPE声明引用SGML的DTD,HTML5就不会。(DOCTYPE声明不是一个HTML标签,它是一个指示web浏览器使用HTML版本的指示器)

XML和HTML的区别:XML标准整体来讲要比HTML更为严格,比如标签区分大小写。XML中有些特殊符号必须用实体转义字符去替换。

Iframe:这个框架用户放置一些媒体文件,比如视频,pdf阅读器,图片等等。它的优点是兼容性比较好。不影响其他文本,缺点是可能造成点击劫持,浏览器对它的并发请求有限制,当超过限制时iframe内部资源只能等待外部资源全部加载完毕再通信。

二、HTML5

为了让网页内容丰富化,CSS开始产生,同时HTML5标准也慢慢应用。HTML5作为目前来讲最常用的标准新增了很多内容:1.动画效果2.拖放3.新增语义化标签(nav,section,article,footer等等)4.存储相关的内容6.浏览器数据库

动画效果:二维动画主要是svg,使用了js的canvas,这两者适用于不同的场景。svg基于xml,适合简单的大型区域渲染应用,适合在原图基础上变动的应用。例如地图。canvas是基于js的。适合图像固定且多的,适合需要保存图片的需求和游戏相关的对象。三维主要是webGL主要用于3D动画效果或者大型游戏应用等等。

数据存储:localstorage,sessionstorage是web存储是常用方式,利用setItem添加,getItem获取,removeItem删除。前者不手动清除会一直存在,后者浏览器关闭后就失效。cookie是浏览器和服务器端传输的数据,它和web存储有一定的区别。它不适合传递重要信息,但它可以设置过期时间。

浏览器数据库:webSQL和indexedDB,使用样例之后的感觉就是前者更接近关系型数据库,后者更接近于非关系型数据库。但毕竟存在浏览器里,安全性相对较差。

Webworker:为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。线程可以执行任务而不干扰用户界面。ie不兼容。在worker内,不能直接操作DOM节点,也不能使用window对象的默认方法和属性。如果需要的话 worker 能够生成更多的 worker。这就是所谓的subworker,它们必须托管在同源的父页面内。而且,subworker 解析 URI 时会相对于父 worker 的地址而不是自身页面的地址。这使得 worker 更容易记录它们之间的依赖关系。(只有火狐支持MDN用法文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers

HTML5 SSE 和websocket:SSE 使用 HTTP 协议,现有的服务器软件都支持。WebSocket 是一个独立协议。SSE 属于轻量级,使用简单;WebSocket 协议相对复杂。SSE 默认支持断线重连,WebSocket 需要自己实现。SSE 一般只用来传送文本,二进制数据需要编码后传送,WebSocket 默认支持传送二进制数据。SSE 支持自定义发送的消息类型。

HTML从简单展示文本页面到文本页面美化到文本页面和媒体页面的浏览器端存储,发展历程比较复杂,但是不难理解。希望我的梳理能让你从另一个方向看看你所熟悉的HTML。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值