本文介绍了HTML相关知识。HTML是超文本标记语言，用于制作网页，有HTML 4.01和HTML5两个版本，后缀名常见为.html。还阐述了HTML文档基本结构，包括头部和主体部分，介绍了开发工具、浏览器、字符编码、SEO等内容，以及标签的组成、分类、关系、属性和HTML颜色的定义。
前言
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(橙色)等。
扫一扫
8193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
