HTML一些标记的认识

端碗吹水

发布于 2020-09-23 11:11:44

1.7K0

发布于 2020-09-23 11:11:44

HTML5的一些特性

在HTML5中主要的特性之一就是减少网页对Flash的依赖，很多视频网站和网页游戏都依赖着Flash来运行，很多时候会发现，没有安装Flash就无法打开一些网页，运行Flash对浏览器压力比较大，使用HTML5就可以直接剔除Flash直接通过HTML5来播放视频或者运行网页游戏，这样可以很大程度减轻对浏览器的压力，并且网站开发人员维护起来也要方便得多。虽然HTML5出来有一段时间了，但是国内普遍还是使用着Flash，在国外的网站大部分都已经转用了HTML5，例如YouTube视频网站。

除此之外，HTML5能够支持不同终端，不同尺寸的屏幕，在跨平台上更加方便了，不局限于PC。HTML5相对于HTML4，增加了很多新标记，并且语法也更简洁了，将原本HTML4的一些过时的标记去除了。HTML5还能够具有网页存储数据的功能，能够支持浏览器内嵌的WEB Database，增加了网页缓存。

因为HTML5的许多改进，令CSS3更强大能够做出更加丰富的页面效果，例如画面层叠、图像透明、图片动画等等。

HTML5的几个主要特性总结：

减少网站对Flash的依赖
支持多终端不同屏幕的设备（手机、平板、智能手表）
增加了新标记、语法更简洁和多达百项的改进
具有存储功能，有一些浏览器有内嵌的WEBDB（网页数据库）
网页缓存
将原本HTML4的一些标记去除了
令CSS3更丰富的做出页面效果

HBuilder工具

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。

这是国产的一个免费的IDE，能够直接在百度或官网上下载到：

官网下载地址：

http://www.dcloud.io/

下载打开可以能会要求注册账户，账户注不注册都可以的，然后经过一系列提示后进入到主要界面：

在项目管理器里右键点会看到有一个新建的选项，或者点击菜单栏上的文件也会看到有一个新建的选项，把鼠标移动到“新建”就能看到一系列的项目和网页相关的文件创建，例如我创建一个Web项目：

打开文件html文件：

在body标记内写上Hello World，然后选择一个浏览器运行：

运行结果：

HTML文件后缀

常见的html文件的后缀有html、htm、xhtml等等，这些文件可以直接使用浏览器运行，而且html文件可以直接使用记事本编辑：

运行结果：

HTML5标记

HTML5是一个超文本标记语言，我们学习html就是学习这些标记，标记里还有许多的属性，但是这些属性在很多标记里都是相通的，有大概70%的相通性。

现在我们来看一些标记的格式：

第一种写法：

<html>：标记的开始 </html>：标记的结束

在html里并不严格区分大小写，所以大写也是可以的：

<HTML>：标记的开始 </HTML>：标记的结束

第二种写法，标记里加上属性：

href是一个属性，””里写属性的值

属性的值必须要用””（双引号）或者’’（单引号）引起来，即便是数字也是如此。

第三种写法，空标记：

这是一个没有内容包含的标记，也就是空标记。

标记里可以嵌套标记，例如：

<table>

<tr>

</tr>

</table>

解释：

td标记嵌套在tr标记里，tr标记嵌套在table标记里，这种嵌套也很好理解，就像其他编程语言一样，类里面嵌套着方法，方法里面嵌套着循环或者条件分支语句。

在HBuilder里创建的html文件可以看到开头的一个标记就是DOCTYPE，这是一个文档规范的引入、声明，在HTML5里可能看不出引入了什么，但是在HTML4的语法里就不一样了，例如我在HBuilder里创建一个HTML4文件：
文件内容：

从HTML4的文件内容可以看到DOCTYPE标记里引用了一个网址，可以看到这个网址的末尾是引用的一个名为strict.dtd的文件，strict是严格详细的意思，所以这就是HTML4的文档规范文件，引用了这个文档规范文件后，所有的语法、标记、属性都要严格遵守此文件里制定的规范。

在HTML5里则简化了这些：

接下来第二个标记就是html，这是根标记也称之为根元素，在一个html文件里，根标记只需要写一个即可，不要写多个，所有的标记内容都嵌套在根标记内，这类似于Java的类的大括号，所有的静态、实例成员都写在类的大括号里，这个没有什么好说的明白就行。

然后就是head标记，head标记是用于说明页面的相应配置，例如里面的title就是用于设置网页的标题，示例：

运行结果，这就是网页的标题：

head里的meta标记是用于设置网页页面中的相关信息的，meta的charset属性是用于设置网页的字符集的，一般使用UTF-8编码，因为能兼容各国语言和符号。如果想要只显示中文简体和繁体则可以使用GBK字符集，仅仅显示中文简体的话就使用GB2312字符集，设置成其他字符集后，其他的语言就会变成乱码一般，网页上就只能显示字符集对应的语言。
例如我把网页字符集改为GB2312，然后添加日文内容：

运行结果：

如果使用UTF-8则不会出现这种问题：

运行结果：

meta标记里还有一个常用属性，这个属性是http-equiv，给这个属性赋一个关键字为refresh（刷新），然后再用content属性赋值一个网址和指定一个时间，就能指定页面在指定的时间后跳转到指定的网址上：

示例：

运行结果，在五秒钟之后就跳转到了以下网站：

http-equiv属性里赋值expire关键字，并且使用content属性赋值一个时间，可以设定网页的缓存过期时间：

在HTML里使用来注释内容

在浏览器里按F12可以查看控制台，在控制台里可以查看缓存信息：

在meta标记里，有一个name属性，这个属性可以设置关键字、作者、和网页描述：

当我们使用搜索引擎时，搜索引擎去爬取数据就是靠网页html设置的这些关键字和描述来爬取的，所以我们在搜索框里输入要搜索的关键字，然后搜索引擎就依靠这样的原理帮我们找到了这个关键字的网站或相关网站。

同样的使用content属性去进行设置：

以上就是html头部分的一些标记与属性还有关键字的介绍，接下来进入到body标记的学习，body标记里面就是网页的内容，前面我们也在body标记里写了一句Hello World，运行后在网页上就能显示出来。在body标记可以写任意的文本内容，但是有一点就是换行、空格、特殊字符之类的要使用规定的标记或者实体来表示，直接按回车或空格键是不管用的，示例：

运行结果：

在网页上是不会按照你编辑的样式显示的，有些符号得用标记或者实体来表示。

例如回车就得使用<br />表示：

运行结果：

同样的空格也不能直接使用空格键：

运行结果：

空格要使用实体来表示，实体就是html里的转义符，实体的格式是以&开头，以 ; 结束，例如空格的实体写法示例：

一个实体代表一个空格，所以每行里有四个空格

运行结果：

没办法直接表示的字符都可以使用实体来表示，这些实体都可以在网络上搜索到，需要什么字符的实体就去网络搜索就行了，平时只需要记住几个常用的就行了，而且IDE里也有提示。

<hr />标尺线，标尺线就是一条横线，示例：

运行结果：

标尺线可以调整大小、长度、居中、居左、居右等等，还能设置颜色，设置大小使用size属性，设置长度也就是宽度使用width属性，设置居中、居左、居右等使用align属性，单位可以使用px像素，使用像素作为单位的话，以后在任何浏览器上都不会改变，也不会因为浏览器的窗口缩放而发生变动。除了像素之外也可以使用%为单位，使用%就是取上容器的百分比，上容器发生变化那么这个单位就会变动，也就是会随着上容器大小变动而变动，示例：