前言
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(橙色)等。