整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者 | Thaís V
译者 | 弯月，责编 | 屠敏
以下为译文：
为了让你的 HTML5 代码引起Google等搜索引擎的注意，你需要在HTML语言规则上下一番功夫，并在编写代码时应用一些策略。编写这样的代码其实并不难，而且还有很多好处。
在本文中，我们将介绍：
HTML5 结构化语义的作用是什么？
为什么这种语义如此重要？
如何才能引起Google等搜索引擎的注意？我会举例说明！
如何善加利用验证工具？
下面，让我们开始吧！
HTML5 结构化语义的作用
HTML5结构化语义的作用是通过语义标签来组织文档的内容，它用到了设计目的各异的若干标签。
语义化的HTML标签旨在描述HTML文档内容的含义，还可以帮助程序员、浏览器和搜索引擎更加清楚地了解这些含义。
因此，语义化的代码可以让用户导航更易于访问、模式化且易于维护。HTML的作用不是构造文档本身，而是通过语义标签赋予内容含义。
正确使用语义元素对于构建现代化、组织化、标准化的网页至关重要，而且还能方便阅读和维护代码。
语义真的很重要吗？
语义是Web平台特有的主要优势之一，因此语义很有必要性。编写具有恰当结构的代码有助于搜索引擎（比如Google）评估网站的内容。除此之外，还有一些有价值的原因值得注意：
正确的标签可以增加网站的竞争力；
正确的标签可以方便有特殊需求的用户访问网站的内容，例如视力障碍者；
正确的标签可以减轻其他开发人员维护网站的压力；
正确的标签可以让你的工作更加专业；
正确的标签甚至可以影响到你的网站是否会出现在Google的搜索结果中。
猜猜看，谁将阅读网站的语义，并决定网站的内容是否与搜索关键字相关？没错，正是Google等搜索引擎！网站在搜索结果中的排名也是由搜索引擎决定。
你是不是应该重视起来了？
而引起等搜索引擎注意的正是主要的语义标签！
下面，我列出了一些主要的语义标签：
<!DOCTYPE html>：<!DOCTYPE>不是HTML的标签。这个标签为浏览器提供了有关HTML版本的信息，在创建HTML时我们首先应该写明的就是这个标签。
<head>：<head>是<title>、<link>、<script>等元素的容器，这些元素不会在浏览器中显示。
<html>：<html>标签是HTML元素的容器，包括那些不会显示在浏览器中的元素。
<nav>：<nav>由一组链接列表组成。
<main>：一个HTML文件应该只有一个<main>，它的作用是组织主要内容，它不应该出现在页脚或文章等其他标签中。
<section>：每个<section>都可以包含一系列有序的文章标题和其他标签。它代表文档的一个部分，例如文档的章节、页脚、旁边或其他信息。
<article>：<article>应该用于标记出一段独立的内容，不需要依赖其他内容。
<aside>：<aside>的内容应该作为对主题的补充。你还可以用它添加与文档主要内容不相关的内容，比如广告。
<figure>：<figure>的出现表明文档中包含图像。
<figcaption>：<figcaption>包含了对图像的说明。
<footer>：<footer>定义了站点的页脚，或某一部分的页脚。这个标签的内容多种多样，例如导航菜单、社交媒体链接、服务条款、隐私政策、商标等等。
如果你有兴趣查看更多标签，那么请访问w3school 在线教程。
验证工具
验证工具可以检查你的代码是否符合结构化语义的规则，还会说明需要修改的地方。
在这里介绍一个工具：Validator W3（https://validator.w3.org/），这个工具使用起来非常简单。首先你需要上传HTML文件，或将代码复制粘贴到网站上。你可以在网站上练习正确的语义结构，并找到最佳实践。
总结
本文提及的实践非常重要。因为这种实践可以提高网站的访问量，提高你的网站在搜索引擎中的排名，而且也可以方便理解和维护你的代码。
我们需要花点心思钻研代码，并让我们的努力更加有价值。让我们一起努力吸引Google等搜索引擎的注意！
原文：https://hackernoon.com/you-and-html5-can-impress-googles-robots-and-be-on-the-first-pages-s5122b8a
本文为 CSDN 翻译，转载请注明来源出处。
、XHTML与HTML的区别
文档结构
XHTML DOCTYPE 是强制性的
<html>中的 XML namespace 属性是强制性的
<html>、<head>、<title>以及 <body>也是强制性的
元素语法
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
属性语法
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的
二、HTML5中一些新特性
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]--> /*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
三、HTML5web存储
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
浏览器支持：
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
注意: Internet Explorer 7 及更早IE版本不支持web 存储.
localStorage 和 sessionStorage
客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
四、HTML5 应用程序缓存
HTML5 -应用程序缓存=>使用文章链接跳转点这里
五、HTML5 服务器发送事件（Server-Sent Events）
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。
所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。
<h1>获取服务端更新数据</h1>
<div id="result"></div>if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}六、HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
详情和代码示例：.
七、HTTP状态消息
1xx: 信息
2xx: 成功
3xx: 重定向
4xx: 客户端错误
5xx: 服务器错误
详情
八、HTTP 方法：GET 对比 POST
两种最常用的 HTTP 方法是：GET 和 POST。
什么是 HTTP ？
超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。
HTTP 的工作方式是客户端与服务器之间的请求-应答协议。
web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。
举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。
GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。
GET 方法
请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：
/test/demo_form.php?name1=value1&name2=value2有关 GET 请求的其他一些注释：
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据
POST 方法
请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：
有关 POST 请求的其他一些注释：
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求
下面的表格列出了其他一些 HTTP 请求方法：
原文链接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah
程序员web前端教程分享初学HTML5的几点建议，最近几年，移动互联网发展正处在飞速增长的态势，Web前端开发工程师的岗位吸引了不少人，很多人通过学习来转行从事这个行业，作为Web前端开发中热门的语言HTML5的热度也一直居高不下，那么零基础的时候应该怎么学习呢？
前端初始的知识点，都不算很难，但是内容比较多，此时在学习的时候需要戒骄戒躁，一定要沉下心来，HTML为结构，CSS是样式，JS是功能等等，梳理好清晰的知识点思维导图，这部分内容其实并没有想象中的那么难。
在学习时还需要注意以下几个方面：
1、制定一个系统的学习计划。HTML5虽然难度不大，但是内容却比较多，在学习的过程中要循序渐进，一个比较常见的计划就是依次学习HTML5、CSS和JavaScript，JavaScript是学习的一个重点。一个好的学习计划，能够让自己在学习的时候更加专注，每完成一天的任务，都会有一种成就感，久而久之，对于编程语言的学习就会更有兴趣和动力。而且一个良好的学习计划，会让自己的效率提高不少。
2、实战编写能力是重中之重。实践是学习HTML5的重要环节，由于HTML5的细节比较多，要想详细的掌握这些内容一定是通过自己不断写代码来加深印象和查缺补漏的。切记编程语言是一门技术，如果没有大量的实践练习，是很难将HTML5中的知识点掌握的，如果了解了各个知识点的内容而不去练习，不用多久就会将这些知识点给忘记，到时候再去返工复习，平白会浪费不少自己的宝贵时间和精力。
3、技术想要进步，交流是很关键的一种途径。交流的方式也有很多种，不一定是要和同行们通过聊天工具才算是交流。现在因为互联网的发展和进步，我们能够在各个搜索引擎上找到我们想要的知识点，这些知识点就是这个行业的前辈们，将他们的学习思维或是工作时编写程序的技巧等分享给我们。现在前端开发的技术更新速度还是比较快的，几乎每隔一段时间就会有新的框架，我们如果不去和其他人交流，只是闭门造车的话，进步只会越来越慢，甚至还会退步。
4、前期就要养成清晰、整洁的代码编写习惯。有一个良好的代码规范习惯，不仅方便我们自己检测自己的代码，在以后的工作中也能为同项目的同事们节省出大量的时间和精力。
*请认真填写需求信息，我们会在24小时内与您取得联系。
