html5

最新推荐文章于 2022-05-09 00:06:11 发布

wlxxxxx

最新推荐文章于 2022-05-09 00:06:11 发布

阅读量282

点赞数

文章标签： html

原文链接：https://blog.csdn.net/weixin_45626442/article/details/101060404?ops_request_misc=&request_id=&biz_id=102&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1

版权

             <div id="article_content" class="article_content clearfix" style="height: 1971px; overflow: hidden;">
        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-211130ba7a.css">
                        <div id="content_views" class="markdown_views prism-atom-one-dark">
                <!-- flowchart 箭头图标 勿删 -->
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                </svg>
                                        <p><strong>前景及发展：</strong><br>

HTML5 是下一代 Web 开发标准，到现在的2012年， HTML5 规范编写完成了，虽然计划到2022年，浏览器将会完全支持整个 HTML5 ，但是现在经过浏览器厂商的努力，现代浏览器已经可以支持一部分 HTML5 的新功能。

此外，在 QQ空间、百度等网站，都已经使用 HTML5 进行了重构。浏览器也在不断的升级，将会对 HTML5 有一个更好的支持。

为什么使用HTML5？

（1）HTML5 的语法更简单精炼，语义性更强，便于编写代码和理解别人编写的代码。

（2）搜索引擎也在不断的提升自己对 HTML5 页面的抓取、提取信息技术，语义性的增强，也便于搜索引擎的理解，对 SEO （搜索引擎优化）也有一定的意义。

知识点科普

W3C
World Wide Web Consortium万维网联盟，是Web技术领域最具权威和影响力的国际中立性技术标准机构。主要制定Web技术标准及实施指南。
H5新增标签分类
①功能性标签（类似video 视频、audio音频等标签，用于实现一些新功能）；
②语义性标签（例如header、footer、nav 等标签，它们类似 div，没有什么新增的功能，但是语义性增强了。比如使用 header 括起来的内容，就会被认为是头部相关）

Web发展史

Web1.0
主流技术 —— HTML + CSS
Web2.0
主流技术 —— Ajax(JavaScript/DOM/异步数据请求)
Web3.0
主流技术 —— HTML5 + CSS3。（HTML5新增：Canvas、Web存储、Getlocation、Workers多线程处理、HTML5音视频；CSS3新增：2D变形、设计动画等等新特性）

HTML简介：
HTML（Hypertext Markup Language）超文本标记语言，本质其实就是文本，由浏览器负责将它解析成具体的网页内容。

旧版HTML缺点：
HTML语法松散，目前最新版本为HTML5.0，也称H5。虽然W3C努力为HTML制定规范，但由于绝大部分编写HTML页面的人并没有受过专业训练，他们对于HTML规范、XHTML规范也不甚了解，所以他们制作的HTML网页绝大部分都没有遵守HTML规范。
现有的HTML页面大量存在如下4中不符合规范的内容：
①元素的标签名大小写混杂
②元素没有合理结束
③元素中使用了属性，但没有制定属性值
④为元素的属性制定属性值时没有使用引号
为了解决上述问题W3C推出了HTML5

H5优势

本质：
HTML5并不是一种革新升级，而是一种向规范的妥协，因此HTML5并不会带给开发者过多的冲击，开发者从HTML4到HTML5过渡会非常轻松。
H5主要解决了以下四点问题：
①解决跨浏览器问题
②部分标签代替了原来的JavaScript
③更明确的语义支持
④增强了web应用程序和功能

H5规则

HTML5完全遵守以下3点规则：
①兼容性：HTML5在老版本的浏览器上也可以正常运行。
②实用性：HTML5内部并没有特别复杂的功能，它只封装了那些常用的简单功能
③非革命性：HTML5并不是革命性的发展，他只是一种“妥协式”的规范

H5语法变化

H5在语法方面同样进行了一些变化，主要表现如下
①标签不再区分大小写
②元素可以省略结束标签
③支持boolean值的属性
④允许属性值不适用引号
⑤HTML5新增了27个标签元素，废弃16个标签元素（涵盖了结构性标签、行内语义性标签、媒体标签、交互性标签、级块性标签）

文档解析标准

文档解析标准分两种，即标准模式与兼容模式
①标准模式
若文档为标准模式，则该文档的排版与JS运作模式都是以该浏览器支持的最高标准运行
②兼容模式
兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作，所以一些老网站经常使用兼容模式，即HTML4的定义文档类型语法去定义。

H4声明文档类型语法

HTML4文档声明：
H4 规定了三种不同的声明，不是使用<!DOCTYPE> ，而是：Strict、Transitional 和 Frameset
即Strict严格定义类型、Transitional过渡定义类型、Frameset框架定义类型
HTML4文档声明：
①Strict严格定义类型
不允许使用表现性、废弃元素（如font）以及框架集（如frameset）
在这里插入图片描述
此类型定义的文档，对于文档内的代码要求比较严格，不允许使用任何表现层的标记和属性（例如：u、b等标签），不可以使用框架。
②Transitional过渡定义类型
允许使用表现性、废弃元素（如font），不允许使用框架集（如frameset）
在这里插入图片描述
此类型定义的文档，对于标记和属性的语法要求并不是很严格，可以使用HTML中的标签与元素包括一些修饰性标签（例如：u、b等标签），不可以使用框架。
③Frameset框架定义类型
允许表现性元素，废弃元素以及框架集
在这里插入图片描述
此类型定义的文档，除了 frameset 元素取代了 body 元素之外，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架。

H5声明文档类型语法

（1）声明定义文档类型语法
①H5定义文档类型
HTML 5 只有一种<!DOCTYPE> 声明，<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
作用：<!DOCTYPE>声明告知浏览器的解析器用什么文档标准解析这个文档（标准模式）。若文档为标准模式，则该文档的排版与JS运作模式都是以该浏览器支持的最高标准运行；
H5与H4声明文档类型语法区别缘由：
在html4中，<!DOCTYPE>声明需要引用DTD（文档类型声明），因为它是基于SGML（Standard Generalized Markup Language 标准通用标记语言）。
DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。html5不基于SGML因此不需要引用DTD。

文档编码格式声明

要声明文档编码需要使用 meta 标签，在 HTML5 中，meta 标签直接添加了一个 charset 属性，用来描述文档编码。
（1）H5声明编码格式
在这里插入图片描述
（2）H4声明编码格式

Content-Type规定文档的字符编码

H5网站重构

H5网站重构：
结构清晰合理的、使用 H5 重构过的网站有很多，要重构 H5 页面，就是使用 H5 的新标签和相关的新用法，针对原来的用法进行相应的替换。
重点介绍重构网页比较常用的 H5 语义性标签的用法，以及如何合理正确的使用这些标签来替换之前网页的相应标签

在这里插入图片描述

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                                <div data-report-view="{&quot;mod&quot;:&quot;popu_387&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/weixin_45626442/article/details/101060404&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"></div>
                    
        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/weixin_45626442">
                <img src="https://profile.csdnimg.cn/4/8/F/3_weixin_45626442" class="avatar_pic" username="weixin_45626442">
            </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit "><a href="https://blog.csdn.net/weixin_45626442" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" target="_blank">scavengers~</a></span>
                    <!-- 等级，level -->
                                            <img class="identity-icon" src="https://csdnimg.cn/identity/blog3.png">                                            </div>
                <div class="text"><span>原创文章 51</span><span>获赞 0</span><span>访问量 1208</span></div>
            </div>
                            <div class="right-message">
                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}">关注</a>
                                                            <a href="https://im.csdn.net/im/main.html?userName=weixin_45626442" target="_blank" class="btn btn-sm bt-button personal-letter">私信
                    </a>
                                </div>
                        </div>
                    
    </div>
</article>

wlxxxxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5

<div id="article_content" class="article_content clearfix" style="height: 1971px; overflow: hidden;"> <link rel="stylesheet" href="https://csdnimg.cn/release/ph...
复制链接

扫一扫