HTML基础介绍
阅读原文时间:2023年07月10日阅读:1

前言:

H5是目前行业里非常热门的一种语言,学习难度较低,可以快速入门。我个人也在学习H5,采用写博客的方式来梳理我学到的知识点,也分享给更多想学习的人一起来学习。

Tip:个人学习过程中梳理的知识点,如果有错误,欢迎评论指出

HTML介绍

字面上的意思,HTML(Hyper Text Markup Language)超文本标记语言。是一种语言,但这里要注意的是,HTML不是编程语言。编程语言通常会有类、变量之类的,HTML没有,HTML只是一种标记语言。

1.1 超文本

超文本,本质上还是一种文本,不过比一般的文本功能强大的多。

普通文本只能包含文字,而超文本里可以包含音频视频游戏链接、甚至程序等等。比普通文本强大的多,所以称之为超文本。

1.2 标记语言

HTML中最重要的就是就是各种标记,标记指的是HTML中的语法。在HTML中所有的语法都是通过标记来实现的。标记因翻译不同,也称为标签节点元素等。

HTML的核心是语义:我们之后在使用标签的时候,不需要考虑标签到底在网页中显示成什么效果,只需要注意标签本身的含义是什么。

那么怎么来表示标记呢。标记在HTML中用表示。两个尖括号包住一个英文字符。

例如:


上面的就是一个标签,这个标签标示在网页中的功能是换行,相当于键盘上的enter回车键。这样单个出现的标签叫做单标签,之后还会介绍成对出现的标签叫做双标签。

需要注意的是,在HTML5之前。单标签在使用时,需要在标签的最后加上"/"

例如上面的
标签,在老版本的HTML中就需要写成

所以有时我们在看到标签后有“/”时,那就是老版本的HTML

2.1 如何创建HTML

html的创建非常简单,只需两步

第一步、空白处右击新建txt文本文档

第二部、将文本文档的后缀名.txt修改成.html

之前老版本的时候,后缀名存在.htm  这是三个字符的后缀,是收到当年操作系统限制的原因。现在开发html5网页文件必须使用.html后缀

2.2主体结构

当我们创建好html文件后,使用合适的编辑器打开(可以使用,sublime ,HBuilder ,WebStorm,DreamWeaver等编辑器)

这里不推荐使用记事本进行编辑,记事本中有隐藏字符,直接使用记事本编辑复制出去执行有可能会出错

下面我们来写下html网页文件的主题结构


网页标题<title> </head> <body> 网页主体内容 </body> </html></p> <p>上面的html主体结构是每个html网页中都必须有的结构</p> <h3 id="23主体结构介绍">2.3主体结构介绍</h3> <p><!DOCTYPE html></p> <p>表示文档声明,告诉浏览器,当前页面使用的是HTML5的文档格式。如果不写此声明,浏览器会将网页降级处理,可能会使用老版本html4或更低的文档格式。</p> <p><html> </html></p> <p>声明html标签的主体,所有的html网页内容都写在<html></html>标签中</p> <p><head> </head></p> <p>head标签中写的是网页的一些设置信息,包含字符集,标题,css样式等。</p> <p><body> </body></p> <p>body标签中写的是网页的主体内容,我们浏览网页时所看到的所有内容都是写在body标签中</p> <p><meat charset="UTF-8"></p> <p>meat标签的作用有很多,通常只需要写这一句,表示将网页文档的字符集设置为UTF-8,让网页能够支持常见中文</p> <p><title><title></p> <p>title标签里写的是网页的标题,我们打开网页时,最上方浏览器标签栏里显示的内容就是title标签里的</p> <p>如图所示:</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2307/3c766db5-53e2-47f8-b815-cf31e97274cb.png" alt="" /></p> <p>HTML:构建网页的结构</p> <p>CSS:网页的美化</p> <p>JavaScript:网页的交互</p> <p>举个例子:这样开发网页的过程就相当于是</p> <p>毛坯房 –> 装修 –> 智能家居</p> <p>H5草案 前身名为Web Application 1.0 ,于2004年被WHATWG提出,于2007年被W3C接受,并成立了新的HTML工作团队</p> <p>HTML5 狭义上为:html4的下一代产品</p> <p>HTML5广义上为:新一代的富客户端解决方案</p> <p>HTML 1.0超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准) ​</p> <p>HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时 ​</p> <p>HTML 3.2——1997年1月14日,W3C推荐标准 ​ HTML 4.0——1997年12月18日,W3C推荐标准 ​</p> <p>HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准 ​ XHTML1.0——发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布 ​ XHTML 1.1,于2001年5月31日发布,W3C推荐标准 ​ XHTML 2.0,W3C工作草案 ​ XHTML 5,从XHTML 1.x的更新版,基于HTML 5草案 ​ HTML 5——2014年10月28日,W3C推荐标准 ​ 前身:Web Applications 1.0 ​ 于2004年被WHATWG提出 ​ 于2007年被W3C接纳 ​ 在2008年1月22日,第一份正式草案发布 ​</p> <p>HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5 支持。 ​</p> <p>2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。” ​</p> <p>2013年5月6日, HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。 ​</p> <p>本次草案的发布,从2012年12月27日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg`也进行了改进,性能得到进一步提升。 ​</p> <p>目前在开发的领域,大家说的H5开发其实指的是HTML5 + CSS3 + JavaScript等技术。 ​ 在目前的软件开发生态链中,H5的技术充斥着很多的领域。无论是网站开发、移动端开发、软件开发、游戏等等。 ​ ​</p></div></div><div class="MuiGrid-root jss8 MuiGrid-item MuiGrid-grid-xs-true MuiGrid-grid-md-3"><div class="MuiTypography-root jss26 MuiTypography-body1"><div class="MuiTypography-root jss27 MuiTypography-body1"><canvas style="height:108px;width:108px" height="108" width="108"></canvas><div class="MuiTypography-root jss28 MuiTypography-body1"><p class="MuiTypography-root jss29 MuiTypography-body1">手机扫一扫</p><p class="MuiTypography-root jss29 MuiTypography-body1">移动阅读更方便</p></div></div></div><div class="MuiTypography-root jss9 MuiTypography-body1"><div class="MuiTypography-root jss30 MuiTypography-body1" style="height:150px"><div class="swiper-container jss32"><div class="swiper-pagination"></div><div class="swiper-wrapper"><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/aliyun"><img alt="阿里云服务器" class="jss31" src="https://article.cdnof.com/promotion/aliyun.jpg"/></a></div><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/tencent"><img alt="腾讯云服务器" class="jss31" src="https://article.cdnof.com/promotion/tencent.jpg"/></a></div><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/qiniu"><img alt="七牛云服务器" class="jss31" src="https://article.cdnof.com/promotion/qiniu.png"/></a></div></div></div></div></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiTypography-root jss33 MuiTypography-body1"><p class="MuiTypography-root jss34 MuiTypography-body1">你可能感兴趣的文章</p><div class="MuiList-root MuiList-padding" aria-label="main mailbox folders"><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><svg class="MuiSvgIcon-root MuiSvgIcon-colorError" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2V9h-2V7h4v10z"></path></svg></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/a08f4c4b-d425-4ea8-82f3-93da615c8f95">https原理及其中所包含的对称加密、非对称加密、数字证书、数字签名</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8c0 1.11-.9 2-2 2h-2v2h4v2H9v-4c0-1.11.9-2 2-2h2V9H9V7h4c1.1 0 2 .89 2 2v2z"></path></svg></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/0062527d-a212-4f33-b1fc-48ccee81071a">HTTPS原理和CA证书申请(转)</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><svg class="MuiSvgIcon-root MuiSvgIcon-colorSecondary" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.01 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7.5c0 .83-.67 1.5-1.5 1.5.83 0 1.5.67 1.5 1.5V15c0 1.11-.9 2-2 2h-4v-2h4v-2h-2v-2h2V9h-4V7h4c1.1 0 2 .89 2 2v1.5z"></path></svg></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/84d39819-54fe-4943-827f-77b6d7ccd70e">iOS https认证 && SSL/TLS证书申请</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">4</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/bcb52961-633d-498a-afdc-e1e752d7c168">如何从零开始编写一个Kubernetes CRD</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">5</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/c121cb89-6211-47ac-8b37-c594706e2803">webpack是如何处理css/less资源的呢</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">6</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/5240ba5c-dcee-481a-b9b2-b83bd88a5710">log4j2同步日志引发的性能问题</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">7</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/fef3d7d6-ad10-4c65-a010-661216fbaca2">WebKit Inside: CSS 样式表的匹配时机</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">8</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/156f0bbc-7c15-4184-b421-615b187980af">HTML学习笔记(二)HTML格式化</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">9</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/18c552e0-d7dc-48b1-b284-b3e50324b84d">热力图heatmap使用</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">10</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/7493805b-d029-486b-afd2-c1c5353fdf7c">【微信小程序的开发】初步认识</a></div></div></div></div></div></div></div></div><footer style="margin-top:30px"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-alignCenter">Copyright © <a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit" href="https://v2as.com" title="哇哦,有大量工具等你探索">V2AS | 问路</a> <!-- -->2024<!-- --> <!-- -->.</p><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-alignCenter"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit" rel="nofollow noopener noreferrer" href="https://beian.miit.gov.cn/">浙ICP备15029886号</a></p></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"article":{"article_id":"882001b0-5abb-4579-8b6e-2b26b4ab0518","title":"HTML基础介绍","link":"","description":"前言:\nH5是目前行业里非常热门的一种语言,学习难度较低,可以快速入门。我个人也在学习H5,采用写博客的方式来梳理我学到的知识点,也分享给更多想学习的人一起来学习。\nTip:个人学习过程中梳理的知识点,如果有错误,欢迎评论指出\nHTML介绍\n\n字面上的意思,HTML(Hyper Text Markup Language)超文本标记语言。是一种语言,但这里要注意的是,HTML不是编程语言。编程语言通","image":"https://article.cdnof.com/2307/3c766db5-53e2-47f8-b815-cf31e97274cb.png","keywords":["HTML","标签","html","网页","HTML5","介绍","js","W3C","基础","Node"],"created_at":"2023-07-09T22:49:20.353Z","html":"\u003ch1 id=\"前言:\"\u003e前言:\u003c/h1\u003e\n\u003cp\u003eH5是目前行业里非常热门的一种语言,学习难度较低,可以快速入门。我个人也在学习H5,采用写博客的方式来梳理我学到的知识点,也分享给更多想学习的人一起来学习。\u003c/p\u003e\n\u003cp\u003eTip:个人学习过程中梳理的知识点,如果有错误,欢迎评论指出\u003c/p\u003e\n\u003ch1 id=\"html介绍\"\u003eHTML介绍\u003c/h1\u003e\n\u003cp\u003e字面上的意思,HTML(\u003cstrong\u003eH\u003c/strong\u003eyper \u003cstrong\u003eT\u003c/strong\u003eext \u003cstrong\u003eM\u003c/strong\u003earkup \u003cstrong\u003eL\u003c/strong\u003eanguage)\u003cstrong\u003e超文本标记语言\u003c/strong\u003e。是一种语言,但这里要注意的是,HTML不是编程语言。编程语言通常会有类、变量之类的,HTML没有,HTML只是一种标记语言。\u003c/p\u003e\n\u003ch3 id=\"11-超文本\"\u003e1.1 超文本\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e超文本\u003c/strong\u003e,本质上还是一种文本,不过比一般的文本功能强大的多。\u003c/p\u003e\n\u003cp\u003e普通文本只能包含文字,而超文本里可以包含\u003cstrong\u003e音频\u003c/strong\u003e、\u003cstrong\u003e视频\u003c/strong\u003e、\u003cstrong\u003e游戏\u003c/strong\u003e、\u003cstrong\u003e链接\u003c/strong\u003e、甚至\u003cstrong\u003e程序\u003c/strong\u003e等等。比普通文本强大的多,所以称之为超文本。\u003c/p\u003e\n\u003ch3 id=\"12-标记语言\"\u003e1.2 标记语言\u003c/h3\u003e\n\u003cp\u003eHTML中最重要的就是就是各种标记,标记指的是HTML中的语法。在HTML中所有的语法都是通过标记来实现的。\u003cstrong\u003e标记\u003c/strong\u003e因翻译不同,也称为\u003cstrong\u003e标签\u003c/strong\u003e、\u003cstrong\u003e节点\u003c/strong\u003e、\u003cstrong\u003e元素\u003c/strong\u003e等。\u003c/p\u003e\n\u003cp\u003eHTML的核心是\u003cstrong\u003e语义\u003c/strong\u003e:我们之后在使用标签的时候,不需要考虑标签到底在网页中显示成什么效果,只需要注意标签本身的含义是什么。\u003c/p\u003e\n\u003cp\u003e那么怎么来表示标记呢。标记在HTML中用\u003cstrong\u003e\u003cany\u003e\u003c/strong\u003e表示。两个尖括号包住一个英文字符。\u003c/p\u003e\n\u003cp\u003e例如:\u003c/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c/p\u003e\n\u003cp\u003e上面的就是一个标签,这个标签标示在网页中的功能是换行,相当于键盘上的enter回车键。这样单个出现的标签叫做单标签,之后还会介绍成对出现的标签叫做双标签。\u003c/p\u003e\n\u003cblockquote\u003e\n \u003cp\u003e需要注意的是,在HTML5之前。单标签在使用时,需要在标签的最后加上\"/\"\u003c/p\u003e\n \u003cp\u003e例如上面的\u003cbr\u003e标签,在老版本的HTML中就需要写成\u003cbr/\u003e\u003c/p\u003e\n \u003cp\u003e所以有时我们在看到标签后有“/”时,那就是老版本的HTML\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch3 id=\"21-如何创建html\"\u003e2.1 如何创建HTML\u003c/h3\u003e\n\u003cp\u003ehtml的创建非常简单,只需两步\u003c/p\u003e\n\u003cp\u003e第一步、空白处右击新建txt文本文档\u003c/p\u003e\n\u003cp\u003e第二部、将文本文档的后缀名.txt修改成.html\u003c/p\u003e\n\u003cblockquote\u003e\n \u003cp\u003e之前老版本的时候,后缀名存在.htm\u0026nbsp; 这是三个字符的后缀,是收到当年操作系统限制的原因。现在开发html5网页文件必须使用.html后缀\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch3 id=\"22主体结构\"\u003e2.2主体结构\u003c/h3\u003e\n\u003cp\u003e当我们创建好html文件后,使用合适的编辑器打开(可以使用,sublime ,HBuilder ,WebStorm,DreamWeaver等编辑器)\u003c/p\u003e\n\u003cp\u003e这里不推荐使用记事本进行编辑,记事本中有隐藏字符,直接使用记事本编辑复制出去执行有可能会出错\u003c/p\u003e\n\u003cp\u003e下面我们来写下html网页文件的主题结构\u003c/p\u003e\n\u003cp\u003e\u003c!DOCTYPE html\u003e \u003cbr /\u003e\n \u003chtml\u003e \n \u003chead\u003e \n \u003cmeat charset=\"UTF-8\"\u003e \n \u003ctitle\u003e网页标题\u003ctitle\u003e \n \u003c/head\u003e \n \u003cbody\u003e \n 网页主体内容 \n \u003c/body\u003e \n \u003c/html\u003e\u003c/p\u003e\n\u003cp\u003e上面的html主体结构是每个html网页中都必须有的结构\u003c/p\u003e\n\u003ch3 id=\"23主体结构介绍\"\u003e2.3主体结构介绍\u003c/h3\u003e\n\u003cp\u003e\u003c!DOCTYPE html\u003e\u003c/p\u003e\n\u003cp\u003e表示文档声明,告诉浏览器,当前页面使用的是HTML5的文档格式。如果不写此声明,浏览器会将网页降级处理,可能会使用老版本html4或更低的文档格式。\u003c/p\u003e\n\u003cp\u003e\u003chtml\u003e \n\u003c/html\u003e\u003c/p\u003e\n\u003cp\u003e声明html标签的主体,所有的html网页内容都写在\u003chtml\u003e\u003c/html\u003e标签中\u003c/p\u003e\n\u003cp\u003e\u003chead\u003e \n\u003c/head\u003e\u003c/p\u003e\n\u003cp\u003ehead标签中写的是网页的一些设置信息,包含字符集,标题,css样式等。\u003c/p\u003e\n\u003cp\u003e\u003cbody\u003e \n\u003c/body\u003e\u003c/p\u003e\n\u003cp\u003ebody标签中写的是网页的主体内容,我们浏览网页时所看到的所有内容都是写在body标签中\u003c/p\u003e\n\u003cp\u003e\u003cmeat charset=\"UTF-8\"\u003e\u003c/p\u003e\n\u003cp\u003emeat标签的作用有很多,通常只需要写这一句,表示将网页文档的字符集设置为UTF-8,让网页能够支持常见中文\u003c/p\u003e\n\u003cp\u003e\u003ctitle\u003e\u003ctitle\u003e\u003c/p\u003e\n\u003cp\u003etitle标签里写的是网页的标题,我们打开网页时,最上方浏览器标签栏里显示的内容就是title标签里的\u003c/p\u003e\n\u003cp\u003e如图所示:\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2307/3c766db5-53e2-47f8-b815-cf31e97274cb.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003eHTML:构建网页的结构\u003c/p\u003e\n\u003cp\u003eCSS:网页的美化\u003c/p\u003e\n\u003cp\u003eJavaScript:网页的交互\u003c/p\u003e\n\u003cp\u003e举个例子:这样开发网页的过程就相当于是\u003c/p\u003e\n\u003cp\u003e毛坯房 –\u0026gt; 装修 –\u0026gt; 智能家居\u003c/p\u003e\n\u003cp\u003eH5草案\u0026nbsp;前身名为Web Application 1.0 ,于2004年被WHATWG提出,于2007年被W3C接受,并成立了新的HTML工作团队\u003c/p\u003e\n\u003cp\u003eHTML5\u0026nbsp;狭义上为:html4的下一代产品\u003c/p\u003e\n\u003cp\u003eHTML5广义上为:新一代的富客户端解决方案\u003c/p\u003e\n\u003cp\u003eHTML 1.0超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准) ​\u003c/p\u003e\n\u003cp\u003eHTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时 ​\u003c/p\u003e\n\u003cp\u003eHTML 3.2——1997年1月14日,W3C推荐标准 ​ HTML 4.0——1997年12月18日,W3C推荐标准 ​\u003c/p\u003e\n\u003cp\u003eHTML 4.01(微小改进)——1999年12月24日,W3C推荐标准 ​ XHTML1.0——发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布 ​ XHTML 1.1,于2001年5月31日发布,W3C推荐标准 ​ XHTML 2.0,W3C工作草案 ​ XHTML 5,从XHTML 1.x的更新版,基于HTML 5草案 ​ HTML 5——2014年10月28日,W3C推荐标准 ​ 前身:Web Applications 1.0 ​ 于2004年被WHATWG提出 ​ 于2007年被W3C接纳 ​ 在2008年1月22日,第一份正式草案发布 ​\u003c/p\u003e\n\u003cp\u003eHTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5 支持。 ​\u003c/p\u003e\n\u003cp\u003e2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。” ​\u003c/p\u003e\n\u003cp\u003e2013年5月6日, HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。 ​\u003c/p\u003e\n\u003cp\u003e本次草案的发布,从2012年12月27日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg`也进行了改进,性能得到进一步提升。 ​\u003c/p\u003e\n\u003cp\u003e目前在开发的领域,大家说的H5开发其实指的是HTML5 + CSS3 + JavaScript等技术。 ​ 在目前的软件开发生态链中,H5的技术充斥着很多的领域。无论是网站开发、移动端开发、软件开发、游戏等等。 ​ ​\u003c/p\u003e"},"seo":{"title":"HTML基础介绍","description":"前言:\nH5是目前行业里非常热门的一种语言,学习难度较低,可以快速入门。我个人也在学习H5,采用写博客的方式来梳理我学到的知识点,也分享给更多想学习的人一起来学习。\nTip:个人学习过程中梳理的知识点,如果有错误,欢迎评论指出\nHTML介绍\n\n字面上的意思,HTML(Hyper Text Markup Language)超文本标记语言。是一种语言,但这里要注意的是,HTML不是编程语言。编程语言通","image":"https://article.cdnof.com/2307/3c766db5-53e2-47f8-b815-cf31e97274cb.png","url":"https://v2as.com/article/882001b0-5abb-4579-8b6e-2b26b4ab0518","keywords":["HTML","标签","html","网页","HTML5","介绍","js","W3C","基础","Node"]},"viewsCount":1,"promotionList":[{"title":"阿里云服务器","image":"https://article.cdnof.com/promotion/aliyun.jpg","link":"https://qd.rs/aliyun"},{"title":"腾讯云服务器","image":"https://article.cdnof.com/promotion/tencent.jpg","link":"https://qd.rs/tencent"},{"title":"七牛云服务器","image":"https://article.cdnof.com/promotion/qiniu.png","link":"https://qd.rs/qiniu"}],"similarKeywordsList":[{"article_id":"a08f4c4b-d425-4ea8-82f3-93da615c8f95","title":"https原理及其中所包含的对称加密、非对称加密、数字证书、数字签名","link":"","description":"声明:本文章已授权公众号Hollis转载,如需转载请标明转载自https://www.cnblogs.com/wutianqi/p/10654245.html(安静的boy)\n\n使用https的原因其实很简单,就是因为http的不安全。\n当我们往服务器发送比较隐私的数据(比如说你的银行卡,身份证)时,如果使用http进行通信。那么安全性将得不到保障。首先数据在传输的过程中,数据可能被中间人抓包拿到","image":"https://article.cdnof.com/2009/5a2effa3-ff20-45e6-af29-41f551eaa7de.jpg","keywords":["加密","https","数字证书","非对称","服务器","密匙","客户端","对称","报文","公匙"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"0062527d-a212-4f33-b1fc-48ccee81071a","title":"HTTPS原理和CA证书申请(转)","link":"","description":"原文地址:http://blog.51cto.com/11883699/2160032\n众所周知,WEB服务存在http和https两种通信方式,http默认采用80作为通讯端口,对于传输采用不加密的方式,https默认采用443,对于传输的数据进行加密传输\n目前主流的网站基本上开始默认采用HTTPS作为通信方式,一切的考虑都基于对安全的要求,那么如何对自己的网站配置HTTPS通信,是本文着重介绍","image":"https://article.cdnof.com/2009/defb2a7b-03a8-4fe6-bed1-70edd997fa0f.jpg","keywords":["证书","https","加密","SSL","CA","com","域名","http","申请","秘钥"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"84d39819-54fe-4943-827f-77b6d7ccd70e","title":"iOS https认证 \u0026\u0026 SSL/TLS证书申请","link":"","description":"1.下面列出截止2016年底市面上常见的免费CA证书:\n腾讯云SSL证书管理(赛门铁克TrustAsia DV SSL证书)阿里云云盾证书服务(赛门铁克DV SSL证书)百度云SSL证书服务Let's Encrypt国内BAT免费证书期限均为1年,每个证书对应一个独立的域名,可以申请多个证书,前提是需要注册账号。Let's Encrypt免费证书期限均为3个月,证书支持泛域名(支持多个域名)。另外","image":"","keywords":["SSL","证书","https","ac","网站","加密","http","com","www","域名"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"bcb52961-633d-498a-afdc-e1e752d7c168","title":"如何从零开始编写一个Kubernetes CRD","link":"","description":"本文首先向你简单介绍了 Kubernetes,然后教你从零开始构建一个 Kubernetes CRD。如果你已经对 Kubernetes 十分了解的话可以跳过本文前半部分的 Kubernetes 介绍,直接从 Controller 部分开始阅读。\n\n快速入门Kubernetes\n\nKubernetes是一个容器管理系统。\n\n具体功能:\n\n\n基于容器的应用部署、维护和滚动升级\n负载均衡和服务发现\n跨","image":"https://article.cdnof.com/2009/3678ed63-d6f1-4b8a-8d6d-1f06974f72f3.png","keywords":["Pod","pod","CRD","kubectl","MyDeployment","https","nginx","pods","Kubernetes","kubernetes"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"c121cb89-6211-47ac-8b37-c594706e2803","title":"webpack是如何处理css/less资源的呢","link":"","description":"上一篇文章 体验了webpack的打包过程,其中js文件不需要我们手动配置就可以成功解析,可其它类型的文件,比如css、less呢?\ncss-loader\n首先,创建一个空文件夹,通过 npm init -y 初始化项目,项目结构如下\ndemo\n├─ src\n│ ├─ css\n│ │ └─ index.css\n│ ├─ js\n│ │ └─ component.js\n│ └","image":"https://article.cdnof.com/2310/ce670638-91a9-4309-9848-8db675769784.png","keywords":["css","loader","webpack","index","浏览器","js","style","postcss","积木","文件"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"5240ba5c-dcee-481a-b9b2-b83bd88a5710","title":"log4j2同步日志引发的性能问题","link":"","description":"1 问题回顾\n1.1 问题描述\n在项目的性能测试中,相关的接口的随着并发数增加,接口的响应时间变长,接口吞吐不再增长,应用的CPU使用率较高。\n1.2 分析思路\n谁导致的CPU较高,阻塞接口TPS的增长?接口的响应时间的调用链分布是什么样的,有没有慢的点?\n1)使用火焰图分析应用的CPU如下,其中log4j2日志占了40%左右CPU,初步怀疑是log4j2的问题。\n\n2)调用链的分析\n通过pfin","image":"https://article.cdnof.com/2310/9b2531c1-b0e3-4988-8a4b-6d04333dad00.jpg","keywords":["日志","异步","log4j2","输出","AsyncLogger","线程","同步","AsyncAppender","使用","性能"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"fef3d7d6-ad10-4c65-a010-661216fbaca2","title":"WebKit Inside: CSS 样式表的匹配时机","link":"","description":"WebKit Inside: CSS 的解析 介绍了 CSS 样式表的解析过程,这篇文章继续介绍 CSS 的匹配时机。\n无外部样式表\n内部样式表和行内样式表本身就在 HTML 里面,解析 HTML 标签构建 DOM 树时内部样式表和行内样式就会被解析完毕。因此如果 HTML 里面只有内部样式表和行内样式,那么当 DOM 树构建完毕之后,就可以进行样式表的匹配了。\n假设 HTML 里面的行内样式在 ","image":"https://article.cdnof.com/2310/baca4377-070c-44a3-8b02-a3e393b474be.png","keywords":["样式表","CSS","代码","匹配","注释","HTML","外部","body","TreeResolver","函数"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"156f0bbc-7c15-4184-b421-615b187980af","title":"HTML学习笔记(二)HTML格式化","link":"","description":"很多标签都可以用来改变文本的外观,并为文本关联其隐藏的含义。总地来说,这些标签可以分成两类:基于内容的样式(content-based style)和物理样式(physical style)。\n一、基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。然后浏览器就会把与该含义、上下文或者用法一致的格式应用在文本上。基于内容的标签赋予含义,而不是格式化。因此,它们对于自动处理来","image":"","keywords":["定义","笔记","标签","java","学习","HTML","样式","使用","文本","adsbygoogle"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"18c552e0-d7dc-48b1-b284-b3e50324b84d","title":"热力图heatmap使用","link":"","description":"参考:https://www.cnblogs.com/julinhuitianxia/p/7755246.html\n1.首先到echarts官网下载应用实例:http://echarts.baidu.com/examples/editor.html?c=heatmap-bmap\n2.在A页面中用iframe标签进行跳转(使用该方法的原因:如果你的主页面有应用到其他版本的echarts或jQuery","image":"https://article.cdnof.com/2309/31a000f4-6d61-470c-beb6-c67520abea2d.png","keywords":["script","echarts","js","type","com","var","javascript","src","text","http"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"7493805b-d029-486b-afd2-c1c5353fdf7c","title":"【微信小程序的开发】初步认识","link":"","description":"目录\n\n项目结构\n页面组成\njson配置文件\n​\tapp.json\n​\tproject.config.json\n​\tsitemap.json\n​\t每个页面的json\n​\t实例\nwxml\n​\t标签名称\n​\t属性结点\n​\t模块语法\nwxss\n​\trpx尺寸单位\n​\t全局样式和局部样式\n​\tcss选择器\njs文件\n宿主环境\n​\t小程序宿主环境\n​\t通信主体\n​\t通信模型\n​\t运行机制\n组件\n​\t视图容器","image":"https://article.cdnof.com/2309/322b1710-5ad4-45d6-9692-49b9db34c69e.png","keywords":["view","页面","程序","微信","json","item","list","组件","swiper","px"],"created_at":"0001-01-01T00:00:00Z"}]},"__N_SSG":true},"page":"/article/[article_id]","query":{"article_id":"882001b0-5abb-4579-8b6e-2b26b4ab0518"},"buildId":"7EtL49Y65E8zx1NwcIC_o","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>