【HTML】HTML5的介绍

最新推荐文章于 2022-04-30 14:37:50 发布

小可小可

最新推荐文章于 2022-04-30 14:37:50 发布

阅读量374

点赞数

分类专栏： HTML和CSS的学习文章标签： html css

本文链接：https://blog.csdn.net/qq_44054938/article/details/106056133

版权

HTML和CSS的学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【HTML】HTML5的介绍

学习完python基础以后，我们来了解一下 html 的相关知识，有助于我们以后对于爬虫内容的学习理解。

制作我们第一个网页

在我们进行正式学习之前，先来热热身，首先在桌面创建记事本，然后在其中复制以下代码，更改记事本后缀 .txt 为 .html ，完成我们的第一个html网页吧。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>制作我的第一个网页</title>
</head>

<body>
<h1>hello,world!</h1>
</body>

</html>

网页打开效果是这样子的：
在这里插入图片描述

html和css的关系

css 是用来修饰 html 样式的，在这里我举个简单的例子，假设 html 是一个女生，那么css就是女生身上穿着的色彩风格各异的衣裳！其实事实上，html本身是有一些默认样式的，但如果如果我们想改变html标签的样式,就需要借助css为其增加个性化的风格，所以html+css构成了我们网页的基本页面结构和样式。
下面我们把上文的代码做一些个性化修改，运用上css，我们把代码修改成如下样子：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Html和CSS的关系</title>
<style type="text/css">
        h1{
    font-size:30px;
    color:#930;
    text-align:center;
        }
        </style>
</head>

<body>
<h1>hello,world!</h1>
</body>

</html>

HTML结果展示：
在这里插入图片描述
在此，我做出解释：

代码 font-size:30px用于修改窗口文字显示的大小；
代码 color:#930用于修改窗口文字颜色的变化；
代码 text-align:center用于修改窗口文字居中的变化；

标签的语法

标签由英文尖括号 < > 括起来，例如 < head > 就是一个标签。

HTML 中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个‘ / ’。
例子如下：
< head >< /head > 和 < p > < /p > 。

标签与标签之间是可以嵌套的，但先后顺序必须保持一致，我们可以看上文代码来感受这一特点。

而且HTML标签是不区分大小写，例如 < h1 > 和 < H1 >是一样的，但一般我们建议小写，因为大部分程序员都以小写为准。

我们通过下述代码来深化对本块知识的理解：

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>标签的语法</title>
    </head>

    <body>
        <h1>为何北方高校还迟迟不开学？</h1>
        <p>近日，随着疫情情况好转，各大高校纷纷开学，可北方高校仍无消息。</p>
    </body>

</html>

HTML结果展示：
在这里插入图片描述
在这里，我解释一下 < h1 >标签 和 < p >标签 的含义： < h1 >标签代表意为一级标题，我们在这单纯的理解为标题的意思，< p >标签代表意为段落，可以看做是正文内容。

html5文档结构

参考上文中的代码，我们来讲一下，html的结构骨架：

< !DOCTYPE html >：意为文档类型声明，表示该文件为 HTML5文件。< !DOCTYPE > 声明必须是 HTML 文档的第一行，位于 < html > 标签之前。

< html >< /html >标签对：< html >标签位于HTML文档的最前面，用来标识HTML文档的开始；< /html >标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。

< head >< /head >标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如< title >，< link / >，< meta / >，< style >，< script >等，但是浏览器除了会在标题栏显示< title >元素的内容外，不会向用户显示 head 元素内的其他任何内容。

< body >< /body >标签对：它是HTML文档的主体部分，在此标签中可以包含< p >，< h1 >，< br >等众多标签，< body >标签出现在< /head >标签之后，且必须在闭标签< /html >之前闭合。

认识head标签

head标签显示在文档的头部，描述了文档的各种属性和信息，包括文档的标题等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

head标签为双标签，有头标签，也有尾标签，< head >< /head >。

< head >标签表示头部标签,通常用来嵌套meta、title、style等标签。

下面我们来介绍一下这些子标签：
< title >标签：在< title >和< /title >标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。
网页的 title 标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的 title 。

< meta http-equiv=Content-Type content=text/html;charset=gb2312 >标签：它表示强制浏览器编码设为简体中文(GB2312)。这一标签的作用是相当关键的，在制作网页的过程中千万不可省略，因为缺少该标签可能会导致网页中出现乱码现象。

< style >标签：< style >标签是双标签，用于设置当前网页的个性化样式。

认识body标签

在网页上要展示出来的页面内容一定要放在body标签中。

我们来看下面的脚本代码来加深理解：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>龙岭迷窟</title>
</head>

<body>
    <!-- 标题标签 -->
    <h1>龙岭迷窟</h1>
    <!-- 段落标签 -->
    <p>《龙岭迷窟》主要讲述了胡八一、王胖子和大金牙（佟磊饰）因为一只出自陕西乡间的绣花鞋，前往古蓝县开启寻宝之旅，并偶遇了寻找龙骨天书的Shirley杨，在了解她此行的目的之后，决心一齐探险龙岭迷窟寻找雮尘珠的下落。</p>
    <!-- 段落标签 -->
    <p>在整个历程中，这支探险小分队面临重重险阻，既要智解变幻莫测的机关陷阱，勇斗神秘罕见的奇虫异兽，又要应对地痞恶霸马大胆（周晓鸥饰）一伙的威胁，而铁三角的默契也将伴随着危险的升级实现深化。</p>
</body>

</html>

html显示结果：
在这里插入图片描述

html的标签注释

什么是标签代码注释？

代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。

代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

标签注释的语法如下：< !-- 注释文字 – >

正是因为代码注释是为了方便程序员对脚本代码的理解，所以注释代码是不会在结果窗口中显示出来的，而是在程序员修改脚本的时候才出现，而对于基本用户是不显示的。

知识拓展

我们上文中所说的代码，为什么只需要在文本文件中编写完，修改后缀名之后就可以打开使用呢？
我们之前的博客中，讲到 python 的时候，第一件事就是下载 python 的编译环境，然后才是深入学习，而我们今天学的 html 则不需要编译环境，原因是 HTML的代码不同于python等语言的代码，html 的代码是通过纯解释执行的，而python代码是需要编译的（但不是严格的编译执行）。

相关知识可以参考以下网站：
https://zhidao.baidu.com/question/17789065.html（编译执行和解释执行的区别）
https://www.sohu.com/a/207310296_776230 （Python代码是编译执行还是解释执行？）

今日份学习就到这里了！