HTML超文本标记语言-头部标签、标题和段落标签、文本格式化标签

来聊前端
323 阅读3分钟

HTML头部标签

学习目标

image-20230704231036154.png

HTML头部标签介绍

​ HTML头部标签head中可以包裹很多的标签，它更像是一个容器，可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等。

美团网站头部标签实例：

1620888882(1).png

HTML头部标签包含的内容

标签描述
<title>...</title>标题定义文档的标题
<meta>元数据标签
<link>CSS样式引入标签
<script>JS引入标签

HTML常用的头部标签和作用

<!DOCTYPE html>
<html>
	<head>
		<title>页面标题</title>
		<meta charset='UTF-8'> <!-- 声明文档使用的字符编码 -->
		<meta name="descirption" content="不超过150个字符"> <!-- 页面描述 -->
		<meta name="keywords" content="VPN"> <!-- 页面关键词 -->
		<meta name="author" content="name,email@gmail.com"> <!-- 网页作者 -->
        <link rel="icon" href="favicon.ico" type="image/x-icon" /> <!--自定义图标-->
	</head>
	<body>
        
	</body>
</html>

1.<meta>定义文档元数据

​ <meta>标签位于文档的头部，不包含任何文字内容。<meta>用来定义文档的元数据，使用“名称=值”的形式来表示。一般使用它来描述当前页面的特性，比如：文档字符集、关键字、网页描述信息、作者等内容。<meta>是一个辅助性标签，对HTML页面可以进行很多方面的特性的设置。下面，主要介绍如何使用<meta>来设置页面字符集、关键字和描述信息。

2.使用<meta>设置关键字

​ 关键字是为了便于搜索引擎搜索而设置的，用户在网页中是看不到关键字的。它的作用主要体现在搜索引擎优化。对于SEO优化而言，关键字起到画龙点睛的作用。为提高网页在搜索引擎中被搜索到的概率，可以设定多个与网页主题相关的关键字。需注意的是，虽然设定多个关键字可提高被搜索到的几率，但目前大多数的搜索引擎在检索时都会限制关键字的数量，一般10个以内关键字比较合理，关键字多了会分散关键字优化，反倒影响排名。

3.使用<meta>设置网页描述信息

​ 网页的描述信息主要用于概述性地描述页面的主要内容，是对关键词的补充性描述，当描述信息包含部分关键字时，会作为搜索结果返回给用户。像关键字一样，搜索引擎对描述信息的字数也有限制，一般允许70~100字，所以描述信息的内容应尽量简明扼要。

image-20210909085158448.png

课程总结

image-20230704231036154.png

标题和段落标签

学习目标

image-20230704231439141.png

HTML标题标签

HTML 标题（Heading）是通过<h1> - <h6>标签来定义的。

功能：HTML标题标签的功能就是将网页上的重点部分标出来。

​ 标题很重要确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

1620878186(1).png

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML标题标签</title>
	</head>
	<body>
		<!--标题标签-->
		<h1>标题一共六级，</h1>
        <h2>文字加粗效果。</h2>
        <h3>字体从大到小，</h3>
        <h4>具有换行效果。</h4>
        <h5>标题不重复用，</h5>
        <h6>h7标签可以吗？</h6>
	</body>
</html>

思考：h7标签的效果是什么？ h0标签的效果是什么？

答案：会被浏览器默认解析，不会报错。

HTML段落标签

HTML 段落是通过标签 <p> 来定义的。 功能: 修饰段落、自动换行

1620878476(1).png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML段落标签</title>
	</head>
	<body>
		<!--段落标签-->
		<p>这是一个段落。</p>
		<p>这是另外一个段落。</p>
	</body>
</html>

思考：HTML 段落标签有换行的功能，如何不使用段落标签也进行换行呢？
答案：使用<br/>标签自动换行。

思考：为什么不能直接通过回车键Enter在网页中换行？或者通过空格进行页面排版呢？
答案：我们无法确定 HTML 被显示的确切效果。

课程总结

image-20230704231439141.png

文本格式化标签

学习目标

image-20230704231528578.png

常用的文本格式化标签

标签描述
<b>...</b>加粗标签
<i>...</i>斜体标签
<u>...</u>下划线标签
<del>...</del>删除线标签
<sub>...</sub>下标标签
<sup></sup>上标标签
<br/>换行标签
<hr/>分割线标签

代码：

<!DOCTYPE html>
<html>
	<head>
		<title>文本格式化标签</title>
		<meta charset="utf-8">
	</head>
	<body>
		
		<i>斜体</i>
		<br/>
		<b>加粗</b>
		<u>下划线</u>
		<del>删除线</del>
		<hr/>
		H<sub>2</sub>O
		2<sup>2</sup>=4
		<p>
			段落标签
		</p>
	</body>
</html>

课程总结

image-20230704231528578.png

avatar
文章
阅读
粉丝