文章目录
- 一. HTML中的标签
- 1. HTML 元素格式
- 2. 标签拥有自己的属性
- 3. 标签分为：单标签和双标签
- 4. 标签语法
- 二. HTML头部标签
- 1. <head>标签
- 2. <title>标签
- 3. <base>标签
- 4. <link>标签
- 5. <style>标签
- 6. <meta>标签
- 7. <script>标签
- 8. <head>标签和<header>标签区别
- 三. HTML主体标签
- 1. 设置网页的正文颜色和背景颜色
- 2. 添加网页背景图片
- 3. 设置网页链接文字颜色
- 4. 设置网页边距
- 四. 语义化标签
- 1. 标题标签
- (1). 标题属性
- (2). 标题大小和字体大小的关系
- 2. 分组标签
- 3. 段落标签
- 4. 强调标签
- 5. 引用标签
- 6. 换行标签
- 7. 水平线标签
- 8. 注释标签
- 9. 格式化标签
- 10. 上下标字体标签
- 11. font标签
- 四. 块元素和行内元素
- 五. 布局标签
- 六. HTML属性
- 1. 定义
- 2. 实例
- 3. 属性值加引号
一. HTML中的标签
HTML 文档由 HTML 元素定义。
1. HTML 元素格式
开始标签 | 元素内容 | 结束标签 |
<p> | 这是一个段落 | </p> |
<a href=“default.htm”> | 这是一个链接 | </a> |
<br> | 换行 |
开始标签常被称为起始标签(opening tag)，结束标签常称为闭合标签(closing tag)
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 标签名大小写不敏感
- 大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）
- HTML 文档由相互嵌套的 HTML 元素构成。
2. 标签拥有自己的属性
大多数 HTML 元素可拥有属性
- 分为基本属性：bgcolor=“red”
可以修改简单的样式效果
- 事件属性：οnclick=“alert(‘你好’)”
可以直接设置事件响应后的代码
3. 标签分为：单标签和双标签
单标签根式：<标签名/>
<p> .... <p>
双标签格式：<标签名>…封装的数据…</标签名>
<br/>换行
- 即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
<p>这是一个段落 - 以上实例在浏览器中也能正常显示，因为关闭标签是可选的。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
4. 标签语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0-标签语法.html</title>
</head>
<body>
<!-- ①标签不能交叉嵌套 -->
正确：<div><span>早安，pudding</span></div>
错误：<div><span>早安，pudding</div></span>
<hr />
<!-- ②标签必须正确关闭 -->
<!-- i.有文本内容的标签： -->
正确：<div>早安，pudding</div>
错误：<div>早安，pudding
<hr />
<!-- ii.没有文本内容的标签： -->
正确：<br />1
错误：<br >2
<hr />
<!-- ③属性必须有值，属性值必须加引号 -->
正确：<font color="blue">早安，pudding</font>
错误：<font color=blue>早安，pudding</font>
错误：<font color>早安，pudding</font>
<hr />
<!-- ④注释不能嵌套 -->
正确：<!-- 注释内容 --> <br/>
错误：<!-- 注释内容 <!-- 注释内容 -->-->
<hr />
</body>
</html>
二. HTML头部标签
1. 标签
<head>元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
2. 标签</h3>
<title>标签定义了不同文档的标题。
<title>在 HTML/XHTML 文档中是必须的。
<title>元素:
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个title标签</title>
</head>
<body>
</body>
</html>
3.
<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
如果一个文档中<a>、<img>、<link>、<form>等标签中的绝大部分的链接URL的前面部分都是一样时，我们可以将URL这个公共的部分提取出来放到<base>中进行设置。
我们等标签的链接目标窗口大部分相同时，我们也可以将这个公共的目标放到<base>标签进行设置，不必分别在每个标签一一设置
语法：
<base href="..." target="..."/>
注：<base>在一个文档中，只能最多出现一次，而且必须放到<head>标签对内
<head>
<base href="https://blog.net/qq_44853882/category_10144385.html" target="_blank">
</head>
4. 标签
<link>标签定义了文档与外部资源之间的关系。
<link>标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
5. <style>标签
</style><style>标签定义了HTML文档的样式文件引用地址.
在<style>元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
6. <meta/>标签
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
还可以设定网页自动刷新和网页自动跳转
<meta> 一般放置于<head>区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
meta主要用于设置网页中的一些元数据，元数据不是给用户看的
常用属性：
charset 指定网页字符集
name 指定数据的名称
content 指定数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
例子：<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,京东"/>
<meta name="keywords" content="网购,网上购物,在线购物,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
description 用于指定网站的描述
例子：<meta name="description" content="网上购物【京东正品行货，全国配送，心动不如行动，立即购买享受更多优惠哦！】">
网站的描述会显示在搜索引擎的搜索结果中
title标签的内容会作为搜索结果的超链接上的文字显示
例子：<title>亚马逊网上购物商城，给你更大的世界</title>
http-equiv
例子：<meta http-equiv="refresh" content="3,url=https://www.baidu.com">
将页面重定向到另一个网站（过3秒跳转到百度的网址）
-->
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
<meta http-equiv="refresh" content="3,url=https://www.baidu.com">
<meta http-equiv="refresh" content="3"> //页面每隔3秒自动刷新一次
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">//在当前页面停留3s后，自动跳转到百度首页
<title>meta功能</title>
</head>
<body>
</body>
</html>
7. <script>标签
</script><script>标签用于加载脚本文件，如： JavaScript。
8. 标签和标签区别
head 标签用于定义文档头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
如：
<html>
<head>
<title>文档标题</title>
</head>
</html>
header 标签用于定义文档的页眉（介绍信息）。
如：
<html>
<body>
<header>
<p>段落</p>
<h1>一级标题</h1>
</header>
</body>
</html>
三. HTML主体标签
<body>标签封装了页面的主体内容，此外，使用<body>标签，还可以设置页面的背景、页面的文字颜色、页边距等页面属性
1. 设置网页的正文颜色和背景颜色
<body bgcolor="颜色值" text="颜色值">
2. 添加网页背景图片
在页面中添加背景图像，并设置背景属性为固定
<body background="背景图片" bgproperties="fixed">
3. 设置网页链接文字颜色
link属性设置未访问状态下的链接文字颜色，vlink属性设置访问过后的链接文字颜色
alink属性设置正在访问中的链接文字颜色
<body link="颜色值" vlink="颜色值" alink="颜色值">
4. 设置网页边距
设置网页与浏览器的上、下、左、右边框间距的属性
<body leftmargin="边距值" rightmargin="边距值" topmargin="边距值" bottommargin="边距值">
四. 语义化标签
1. 标题标签
(1). 标题属性
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
在网页中HTML专门用来负责网页的结构
所以在使用HTML标签的时候，应该关注的是标签的语义，而不是他的样式
标题标签：
h1~h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只有一个h1
一般情况下标题标签只会使用到h1~h3，h4~h6很少用
标题标签都是块元素
在页面中独占一行的元素称为块元素（block element）
align属性是对齐属性
left 左对齐
center 居中
right 右对齐
-->
<h1>一级标题</h1>
<h2 align="left">二级标题</h2>
<h3 align="right">三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
(2). 标题大小和字体大小的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>
<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>
<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>
<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>
<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>
</body>
</html>
2. 分组标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
-->
<hgroup>
<h1>回乡偶书（二首）</h1>
<h2>其一</h2>
</hgroup>
</body>
</html>
3. 段落标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
p标签表示页面中的一个段落
p也是一个块元素
-->
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
</body>
</html>
4. 强调标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
em标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素（inline element）
-->
<p>今天天气<em>真</em>不错</p>
<!--
strong表示强调，重要内容！
-->
<p>你今天必须要<strong>完成作业</strong></p>
</body>
</html>
5. 引用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- blockquote 表示一个长引用 -->
鲁迅说：
<blockquote>
这句话我是从来没说过的！
</blockquote>
<!-- q表示一个短引用 -->
子曰：
<q>学而时习之，乐呵乐呵！</q>
</body>
</html>
6. 换行标签
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，
比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
br标签表示页面中的换行
-->
<br>
<br>
今天天气不咋样
</body>
</html>
7. 水平线标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
</body>
</html>
8. 注释标签
<!-- 注释内容 -->
9. 格式化标签
HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式,
如：粗体 or 斜体
这些HTML标签被称为格式化标签
通常标签 <strong> 替换加粗标签 <b> 来使用，<em> 替换<i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup>上标</sup><br><br>
</body>
</html>
10. 上下标字体标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上下标标签</title>
</head>
<body>
<p style="text-align:justify; text-indent: 2em;">
引用文献<sup>【5】</sup>是上标字体
</p>
<p style="text-align:justify; text-indent: 2em;">
CO <sup>2</sup>是代表二氧化碳分子符号
</p>
</body>
</html>
11. font标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.font标签.html</title>
</head>
<body>
<!-- 字体标签 -->
<font color="red" face="宋体" size="6">我是字体标签</font>
</body>
</html>
参考w3cschool的HTML参考手册，里面有所有的 标签介绍和使用说明
四. 块元素和行内元素
大多数 HTML 元素被定义为块级元素或内联元素。
HTML 区块元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
块元素（block element）
- 在网页中一般通过块元素来进行布局
行内元素（inline element）
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
... ...
-->
<p>
<h1>哈哈哈</h1>
</p>
</body>
</html>
<h1>我写在了html标签的外面！</h1>
五. 布局标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
布局标签（结构化语义标签）
-->
<!--
header表示网页的头部
main表示网页的主体部分（一个页面中只会有一个main）
footer表示网页的底部
nav表示网页中的导航
aside和主体相关的其他内容（侧边栏）
article表示一个独立的文章
section表示一个独立的区块，上边的标签都不能表示时使用section
div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素，一行只能放一个，类似于一个大盒子
span是一个行内元素，没有任何的语义，一般用于在网页中选中文字，一行可以放多个，类似于一个小盒子
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
</body>
</html>
六. HTML属性
1. 定义
属性为 HTML 元素提供附加信息。
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=“value”。
属性总是在 HTML 元素的开始标签中规定。
2. 实例
- 属性例子1
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://www.w3school.com.cn"> This is a link </a>
- 属性例子2
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。-->居中排列标题
- 属性例子3
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
- 属性例子4
<table> 定义 HTML 表格。
<table border="1"> 拥有关于表格边框的附加信息。
3. 属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号
例如：
name='Bill "HelloWorld" Gates'
具体详细请见：HTML属性参考手册
具体详细请见：html的标签信息