Web前端开发笔记——第二章 HTML语言第二节基本标签

Posted 2021-09-07 晚风(●•σ )

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端开发笔记——第二章 HTML语言第二节基本标签相关的知识，希望对你有一定的参考价值。

前言

本节主要讲解html的一些基本标签。

一、标题标签

下面红框中的内容就是标题标签。

我们用h1～h6来表示不同的标题标签，依次是一级标题到六级标题，表示为<h1～h6>标题内容 </h1～/h6>，它会被自动加黑，一般建议一个页面只有一个一级标题，标题标签之间是该标题的内容即正文，如下：

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
...

简单地来说，就像这样，一级标题到六级标题它的标题字号大小依次递减：

例如下列html代码：

<!DOCTYPE html>
<html>
<body>
    <h1>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h1>
    <h2>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h2>
    <h3>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h3>
    <h4>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h4>
    <h5>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h5>
    <h6>聚焦半年报｜腾讯二季度收入1382亿元，净利润425亿</h6>
</body>
</html>

其运行结果是：

二、段落标签和段内换行

当编辑一行文字时，就要用到段落，其实在HTML中就是段落标签，它表示为<p>段落内容</p>，且在多个段落标签之间浏览器会默认添加一个段落间距。
而如果想要在段内换行时，就要用到段内换行标签，表示为<br />，它跟其它标签不一样，是单独出现的，表示这段内一行的直接结束，即换行。
例如下图中的红框内容：

实际在html源文件表示是这样的，如下：

<!DOCTYPE html>
<html>
<body>
    <p>8月18日，腾讯控股（00700.HK，以<br />下简称“腾讯”）发布2021年第二季度<br />及半年度业绩报告。</p>
    <p>财报显示，在今年第二季度，腾讯收<br />入1382.59亿元人民币（下同），净利<br />润425.87亿元，非国际财务报告准则<br />下的净利润340.39亿元。</p>
</body>
</html>

运行结果如下：

三、预留格式标签

可以通过预留格式标签来对文本中的空格和换行符进行保留，它表示为<pre>文本</pre>，文本中的内容都会被保留其原本的格式。
例如，下列html代码，我们在"javascript"后面敲了空格以及文字和代码之间空了一行，还有代码的格式：

<!DOCTYPE html>
<html>
<body>
	<pre><p>JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
	以下是一个JavaScript源代码中的一部分：
	
	function myFunction()
	{
	    document.getElementById("myPar").innerHTML="你好世界！";
	    document.getElementById("myDiv").innerHTML="你最近怎么样?";
	}
	</p>
	</pre>
</body>
</html>

运行结果如下，空格和换行以及代码中的格式都得到保留：

四、行内组合标签

当要对一段文本当中的部分内容进行标注时，要用到行内组合标签，表示为<span>文本</span>，即将要另外标注的文本放在span标签之内，它的作用是组合行内的元素，以便在CSS样式中进行格式化。
例如，下列html代码中，用了CSS代码对span标签进行特殊样式的设置：

<!DOCTYPE html>
<html>
<body>
	<p>
    我最喜欢她 
    <span style="color:blue;font-weight:bold">
    蓝色
    </span> 
    的眼睛。
	</p>
</body>
</html>

运行结果如下：

五、水平线标签

首先要知道水平线标签也是单独出现的，它表示为<hr />。例如，下列html代码中，我们在两个段落之间加入了水平线标签：

<!DOCTYPE html>
<html>
<body>
    <p>8月18日，腾讯控股（00700.HK，以<br />下简称“腾讯”）发布2021年第二季度<br />及半年度业绩报告。</p>
    <hr />
    <p>财报显示，在今年第二季度，腾讯收<br />入1382.59亿元人民币（下同），净利<br />润425.87亿元，非国际财务报告准则<br />下的净利润340.39亿元。</p>
</body>
</html>

运行结果如下：

六、注释标签

很多编程语言中都有注释，html中也有注释标签，它表示为，可以跨行注释，要注意注释的内容是不会在浏览器中显示的，只有在源代码中可以找到。
例如，下列html代码中添加三行注释内容：

<!DOCTYPE html>
<html>
<body>
    <p>8月18日，腾讯控股（00700.HK，以<br />下简称“腾讯”）发布2021年第二季度<br />及半年度业绩报告。</p>
    <!--这里是注释内容第一段。
    这里是注释内容第二段。-->
    <hr/>
    <p>财报显示，在今年第二季度，腾讯收<br />入1382.59亿元人民币（下同），净利<br />润425.87亿元，非国际财务报告准则<br />下的净利润340.39亿元。</p>
    <!--这里是注释内容第三段。-->
</body>
</html>

运行结果如下：

七、空格字符

当要在段落中使用空格时，要用到空格字符，它必须是全小写，表示为 ，注意这里的";"不能漏掉。
例如，下列html代码，在文本的开头桥加上了两个空格字符以及在"JavaScript"后面也加了一个空格字符：

<!DOCTYPE html>
<html>
<body>
	<p>&nbsp;&nbsp;JavaScript&nbsp;基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
	</p>
</body>
</html>

运行结果如下：

例题（创建一个网页）

这里将通过一个例题，通过简单的制作网页过程以及结合上面的内容来更加深入地了解HTML语言。

例、用html语言编写这个页面。

1、打开SublimeText 3，新建文件并保存至本地路径。
3、生成html5的基本结构。

3、编辑网页的标题部分，即在<title></title>之间输入标题，如“我的网页”：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <meta charset="utf-8">
</head>
<body>

</body>
</html>

4、编写body内容，先用标题标签，输入标题的内容为“前端开发”，然后输入段落文字以及两条水平线，如下：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <meta charset="utf-8">
</head>
<body>
	<h1>前端开发</h1>
<pre><p>     前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，<br />CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户<br />界面交互。</p></pre>
<hr />
<pre><p>     前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页<br />制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用<br />网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更<br />加美观，交互效果显著，功能更加强大。</p></pre>
<hr />
<pre><p>     前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，<br />Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p></pre>

</body>
</html>