html基础学习（一）_如何使用html5)设置网页标题为真实姓名-优快云博客

本文链接：https://blog.youkuaiyun.com/AIMing_byte/article/details/132840310

本文介绍了HTML相关知识。HTML是超文本标记语言，用于制作网页，有HTML 4.01和HTML5两个版本，后缀名常见为.html。还阐述了HTML文档基本结构，包括头部和主体部分，介绍了开发工具、浏览器、字符编码、SEO等内容，以及标签的组成、分类、关系、属性和HTML颜色的定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。 “超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。 HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如<title>,<img>,<a>,<p>等等。 HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，<title> 标签可以写成 <Title>，<TITLE> 或以任何其他方式。然而，习惯上与实践上都推荐将标签名全部小写。

一、HTML简介

1. HTML是什么

HTML：全称是Hyper Text Markup Language 中文名是超文本标记（标签）语言作用：由各种标签组成，用来制作网页，告诉浏览器该如何显示页面

HTML不是一种编程语言，而是一种标记语言，它有一套标记标签。
HTML使用标记标签来描述网页。
HTML文档包含了HTML标签及文本内容，HTML文档也叫做 Web 页面。

2. 作用

制作网页，控制网页和内容的显示
插入图片、音乐、视频、动画等多媒体
通过链接检索信息
使用表单获取用户信息，实现交互

3. 版本

W3C：World Wide Web Consortium 万维网联盟，制定Web技术相关标准和规范组织，HTML就是W3C制定的标准两个版本：HTML 4.01、HTML5 官网：w3cschool官网 - 1000多本编程教程免费学

4. 后缀名

HTML文档的后缀名包含.html、.htm(常用的是.html)

二、HTML文档结构

1. 基本结构

1.1 简介

HTML标签是由尖括号包围的关键词，如 <html > ，通过都是成对出现的，如 <html></html>
以<html>为根标签，包含： <head></head> 头部和 <body></body>主体部分
头部提供关于网页的相关信息，如标题、文档类型、字符编码、关键字等摘要信息
主体部分提供网页的具体内容，真正显示在页面中
合理的进行缩进
标签名不区分大小写，但一般都习惯全小写

1.2 开发工具

记事本notepad、Sublime、Notepad++、Dreamweaver、VSCode、WebStorm等使用步骤：

新建文件（Ctrl+N），然后保存（Ctrl+S），指定后缀名为.html
编写HTML代码
在浏览器中打开文件

使用技巧：

先保存再写代码，否则没有颜色提示
创建一个文件夹，用于保存所有的网页内容，将文件夹拖放到Sublime中，便于管理
显示/隐藏侧边栏

方式1：查看——>侧边栏——>显示/隐藏侧边栏方式2：先按Ctrl+K，紧接着按B

显示多栏

方式1：查看——>布局——>列数：2列方式2：按Alt+Shift+2

1.3 浏览器

常见浏览器：IE微软、Chrome谷歌、Firefox火狐、Safari苹果浏览器的作用是读取HTML文件，并以网页的形式显示浏览器不会直接显示HTML标签，而是使用标签来解释网页的内容

1.4 网页结构

基本结构:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> 
<title>这是页面标题(w3cschool.cn)</title>
</head>
<body>
  <h1>这是一个标题。</h1>
  <p>这是一个段落。</p>
</body>
</html>

注意：

对于中文网页需要使用 <meta charset="utf-8">声明编码，否则会出现乱码。

有些浏览器（如 360 浏览器）会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

虽然 Web 浏览器读取 HTML 文件作为网页显示，但并不直接显示 HTML 标签。

HTML 标签的使用决定了如何向用户展现 HTML 页面的内容。

这基础结构出现的标签是 <html> 标签

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签<html>，以及一个结束标签</html>。

<head> 标签 html <head>元素包含了所有的头部标签元素。

<head>元素必须包含文档的标题（`title`），可以包含样式、脚本、meta元数据信息以及其他更多的信息 <body>标签html <body> 元素定义文档的主体。

1.5 字符编码

<meta charset="UTF-8"> 识别网页所使用的字符编码

作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码。常见字符编码：

UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
GB2312：6000+ 汉字
GBK：20000+ 汉字

注意点：开发中统一使用 UTF-8 字符编码即可

<!--告诉浏览器所使用的HTML版本为HTML5-->
<!DOCTYPE html>
<!-- 中文网站 -->
<html lang="zh-CN">
<head>
    <!--charset="UTF-8" 规定网页的字符编码  -->
    <meta charset="UTF-8">

    <!-- ie(兼容性差) / edge -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 宽度 = 设备宽度 : 移动端网页的时候要用 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

1.6 SEO

1，简介 SEO（Search Engine Optimization）：搜索引擎优化 作用：让网站在搜索引擎上的排名靠前提升SEO的常见方法：

竞价排名
将网页制作成html后缀
标签语义化（在合适的地方使用合适的标签）
……

2，SEO三大标签

title：网页标题标签
description：网页描述标签
keywords：网页关键词标签

1.7 ico图标设置

场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

语法格式：

<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">

实例：

     <!-- link:favicon : 浏览器标题栏图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

1.6 HTML5文档头部相关标签

1.设置页面标题标签<title>

标签之间的内容将显示在浏览器窗口的标题栏中

2.定义页面元信息标签<meta>

在HTML中，<meta>标签一般用于定义页面的特殊信息，例如页面关键字，页面描述等。他是提供给“搜索蜘蛛”看的。

在WEB技术中,我们一般形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”

简单地说，<meta>标签就是告诉“搜索蜘蛛”这个页面是做什么的。让更多人可以搜到/

<meta>属性：

name：用于指定元数据的名称
http-equiv：用于指定HTTP头部信息。可以改变浏览器对待页面的行为方式

name属性的取值如表所示：

属性值	说明
keywords	网页关键字，可以有多个，而不只一个
description	网页描述
author	网页作者
copyrght(版权)	网页信息

2.1 <meta>中name属性

在<meta>标签中使用name和content属性可以为搜索引擎提供信息。

<meta name="名称" content="值">

属性说明：

name属性用于提供搜索内容的名称
content属性用于提供对应的搜索内容值

实例：

设置网页关键字，例如中国大学MOOC网站的关键字设置如下：

<meta name-"keywords"
content="中国大学Mooc,Mooc,慕课，在线学习，在线教育，
大规模开放式在线课程，网络公开课，视频公开课，大学公开课，大学Mooc,Icourse163,
幕课网，MOOc学院"/>

参数说明：

name属性的值为keywords,用于定义搜索内容名称为网页关键字

content属性用于定义关键字的具体内容，多个关键字内容之间可以用“,”分割。

设置网页描述，例如某图片网站的描述信息设置如下:

<meta name="description"  itemprop-"description" content-"中国大学MoOc(蒸课)是爱课程网携手网易云课堂打造的在线学习平台，每一个有提升意愿的人，
都可以在这里学习我国优质的大学课程，学完还能获得认证证书。
中国大学Mooc是国内优质的中文Mooc学习平台，拥有众多985高校的大学课程，与名师零距离接触。"/>

参数说明：

name属性的值为description,用于定义搜索内容名称为网页描述
content属性用于定义描述的具体内容

设置网页作者，例如可以为网站增加作者信息：

<meta name="author" content="技术部">

name属性的值为author,用于定义搜索内容名称为网页作者

content属性用于定义具体的作者信息

如果要声明网页文档的版权归属于某个人或某个组织，可以在meta标签中使用name属性，属性值为"copyright"：

<meta name="copyright" content="Copyright © 2023 TOM">

2 . <meta>中http-equiv属性

在<meta>标签中使用http-equiv和content属性可以设置服务器端发送给浏览器的头部信息，为浏览器显示该页面提供相关的参数标准

<meta http-equiv="名称" content="值">

属性说明：

http-equiv属性提供参数
content属性提供对应的参数值。

实例：

设置字符集

例如，将字符集设置为GBK，代码如下：

<meta http-equiv="Content-Type" content="text/html;charset=gbk">

http-equiv属性的值为Content-Type
Content属性的值为text/html和charset=gbk,这两个属性值中间用";"隔开。

这段代码用于说明当前文档类型为HTML，字符集为中文编码

在HTML5中，字符集的写法简化，变为如下代码：

<meta charset="utf-8">

设置页面自动刷新与跳转

例如，定义某个页面6s后跳转到百度页面，代码如下：

<meta http-equiv="refresh" content="6; url=http://www.baidu.com">

http-equiv属性的值为refresh
content的值为数值和URL，中间用“；”隔开。

这段代码用于在规定的时间后跳转到目标页面，时间以秒为单位

2. 标签

2.1 标签组成

一个完整的HTML标签的组成：

<标签名 属性名="属性值">内容</标签名>

说明：属性值要用引号引起来，一般使用双引号

2.2 标签分类

根据标签是否关闭，分为：关闭型、非关闭型

关闭型：有结束标签，即成对出现

<title></title>
<body></body>
<h1></h1>

非关闭型：没有结束标签根据标签是否独占一行，分为：块级标签、行级标签
块级标签：显示为块状，独自占一行

<h1></h1>
<hr/>

行级标签：在行内显示，可以与其他内容在同一行显示

<span></span>

行内块标签：具有行内元素的特性，又具有块级元素的特性。

<textarea rows="4" cols="50" style="width: 100%; height: 50px;"></textarea>
<img>
<input>

提示：行内块标签可以在一行内显示，并且可以设置宽度和高度。

2.3 标签关系

包含（嵌套）关系：<head> <title></title> </head> 
父子关系，<title>嵌套在<head>中<head>为父、<title>为子。

并列关系：<html> <head></head> <body></body> </html>  
兄弟姐妹<head>`与`<body>`并列同级于<html>`中，<head>和<body>是兄弟关系。

注意：在并列关系的例子中，<head>和<body>两者与<html>也是父子关系。

2.4 标签属性

属性是 HTML 元素提供的附加信息。

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以键值对（名称/值）的形式出现，比如：name="value"。

设置属性的基本语法格式：

<标签名 属性1=“属性值”  属性2=“属性值”  属性3=“属性值”....>内容</标签名>

属性实例： 这是一个链接使用了 href 属性。

<a href="http://www.baidu.cn">这是一个链接</a>  <!--点击该标签，跳转到地址所在的地方-->

键值对的定义：

键：值的编号或名称。

值：要存放的数据。

2.4.1 html属性值

属性值应该始终被包括在**引号内**。

注意：**双引号**是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

注意：

属性和属性值对大小写不敏感。

但在推荐标准中，依然推荐使用小写的属性/属性值。

2.4.2 HTML 常用的属性

下面列出了 HTML 常用的属性，适用于大多数 HTML 元素。

属性	描述
class	为 html 元素定义一个或多个类名（类名从外部样式文件引入或在 HTML 文件的`<style>`标签中定义）
id	定义元素的唯一 id
style	规定元素的内联样式
title	规定元素的额外信息（可在工具提示中显示）

class 属性 定义：为 HTML 元素定义一个或多个类名。

注意：class 属性通常用于指向样式表中的类。可重复

例子

<p class="intro">这是一个段落，定义了一个类名。</p>

<p class="intro color">这是另一个段落定义多个类名。</p>

id 属性 定义： HTML 元素的唯一的 id。

注意：id 在 HTML 文档中必须是唯一的。

例子：

<h1 id="header">hello,world</h1>

注意： 一个 id 属性只能定义给一个 HTML 元素，即 id 是唯一的。**

style属性 定义：用于为元素提供内联CSS样式

注意：内联CSS是指直接在HTML元素中应用CSS样式，而不是在外部或内部样式表中定义样式。

<p style="background-color:blue; color:white;">这是一个段落。</p>
<!-- 该标签使p标签范围中的背景颜色是蓝色，字体颜色是白色 -->

多个属性要用分号（;）隔开

2.5 HTML颜色

HTML颜色除了特定的标签要求外，都是由十六进制符号，颜色的英文单词

1. HTML 颜色由一个十六进制符号来定义，这个符号就由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是 0（十六进制：#00），最大值是 255（十六进制：#FF）

rgb:red green blue的缩写

2. 由英文单词来定义，就是普通的red(红色),blue(蓝色)，orange(橙色)等。