文章目录
- 一、html基础
-
- 1.什么是html
- [2.HTML 标签](#2.HTML 标签)
- [3.HTML 文档-网页](#3.HTML 文档-网页)
- 4.html基础
-
- [1.HTML 标题](#1.HTML 标题)
- [2.HTML 段落](#2.HTML 段落)
- [3.HTML 链接](#3.HTML 链接)
- [4.HTML 图像](#4.HTML 图像)
- 5.html元素
-
- [1.嵌套的 HTML 元素](#1.嵌套的 HTML 元素)
- [2.空的 HTML 元素](#2.空的 HTML 元素)
- [6.HTML 属性](#6.HTML 属性)
- 7.html标题
-
- [1.HTML 水平线](#1.HTML 水平线)
- [2.HTML 注释](#2.HTML 注释)
- [8.HTML 段落](#8.HTML 段落)
-
- [1.HTML 换行](#1.HTML 换行)
- [9.HTML 样式](#9.HTML 样式)
- [10.HTML 文本格式化](#10.HTML 文本格式化)
- [11.HTML 引用](#11.HTML 引用)
- [12.HTML 注释](#12.HTML 注释)
- [13.HTML 颜色](#13.HTML 颜色)
- [14.HTML CSS](#14.HTML CSS)
- [15.HTML 链接标签](#15.HTML 链接标签)
- [16.HTML 媒体标签](#16.HTML 媒体标签)
- [17.HTML 列表标签](#17.HTML 列表标签)
- [18.HTML 表格标签](#18.HTML 表格标签)
- 19.表单标签
- 20.语义化标签
- 21.字符实体
一、html基础
web标准
构成 | 语言 | 说明 |
---|---|---|
结构 | HTML | 页面元素和内容 |
表现 | CSS | 网页元素的外观和位置等页面样式(如:颜色、大小等) |
行为 | JavaScript | 网页模型的定义与页面交互 |
HTML5是Web标准的最新版本(2014年正式发布),它整合了HTML4/XHTML,并强调语义化(semantic HTML)。除了结构(HTML)、表现(CSS)和行为(JavaScript),HTML5还内置了更多多媒体和API支持(如Canvas绘图、WebSockets实时通信)。注意HTML5的DOCTYPE声明必须是<!DOCTYPE html>
,这简化了旧版的复杂声明。
1.什么是html
HTML 指的是超文本标记语言 (H yper T ext M arkup Language)
HTML 使用标记标签来描述网页
网页由哪些部分组成?
文字、图片、音频、视频、超链接
HTML骨架结构由哪些标签组成?
- html标签:网页的整体
- head标签:网页的头部
- body标签:网页的身体
- title标签:网页的标题
2.HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和</b>
- 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
- 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。


HTML标签与标签之间的关系可分为:
-
父子关系(嵌套关系)
html<html lang="en"> <head> </head> </html>
html<head> <title> </title> </head>
-
兄弟关系(并列关系)
html<head> </head> <body> </body>
3.HTML 文档-网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:
html
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

例子解释
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 </p> 之间的文本被显示为段落
4.html基础
1.HTML 标题
HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。


2.HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
3.HTML 链接
HTML 链接是通过 <a> 标签进行定义的。
html
<a href="http://www.baidu.com">This is a link</a>
**注释:**在 href 属性中指定链接的地址。
4.HTML 图像
HTML 图像是通过<img> 标签进行定义的。
html
<img src="text.jpg" width="104" height="142" />
5.html元素
HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
开始标签 | 元素内容 | 结束标签 |
---|---|---|
<p> | This is a paragraph | </p> |
<a href="default.htm" > | This is a link | </a> |
<br/> |
开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。
HTML 元素语法:
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
1.嵌套的 HTML 元素
大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文档由嵌套的 HTML 元素构成。
2.空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br>就是没有关闭标签的空元素(<br> 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
6.HTML 属性
HTML 标签可以拥有属性 。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性实例:
HTML 链接由<a> 标签定义。链接的地址在 href 属性中指定:
html
<a href="http://www.baidu.com">This is a link</a>
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
html
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
</body>
</html>

<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body>
</html>

<table> 定义 HTML 表格。
<table border="1">
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
html
name='Bill "HelloWorld" Gates'
7.html标题
标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
标题很重要
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
特点:
- 文字都有加粗
- 文字都有变大,并且从h1 → h6文字逐渐减小
- 独占一行
1.HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
html
<html>
<body>
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>

使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。
2.HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释是这样写的:
html
<!-- This is a comment -->
开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。
8.HTML 段落
可以把 HTML 文档分割为若干段落。
段落是通过 <p> 标签定义的。
html
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)

使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它
特点:
-
段落之间存在间隙
-
独占一行
1.HTML 换行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:
特点:
- 单标签
- 让文字强制换行
html
<html>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>
</body>
</html>

换行+水平线


9.HTML 样式
style 属性用于改变 HTML 元素的样式
html
<html>
<body style="background-color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
</html>

style 属性的作用:
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。
1.背景颜色
background-color 属性为元素定义了背景颜色:
html
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

2.字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:
html
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

3.文本对齐
html
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>上面的标题相对于页面居中对齐。</p>
</body>
</html>

10.HTML 文本格式化
场景:需要让文字加粗、下划线、倾斜、删除线等效果
HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。

突出重要性的强调语境⬇

标签 | 描述 |
---|---|
<b> | 定义粗体文本。 |
<big> | 定义大号字。 |
<em> | 定义着重文字。 |
<i> | 定义斜体字。 |
<small> | 定义小号字。 |
<sub> | 定义下标字。 |
<sup> | 定义上标字。 |
<ins> | 定义插入字。 |
<del> | 定义删除字。 |
html
<html>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
</body>
</html>

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<strong>加粗strong</strong> <em>倾斜em</em> <ins>下划线ins</ins> <del>删除线del</del>
</body>
</html>

11.HTML 引用
标签 | 描述 |
---|---|
<abbr> | 定义缩写或首字母缩略语。 |
<address> | 定义文档作者或拥有者的联系信息。 |
<bdo> | 定义文本方向。 |
<blockquote> | 定义从其他来源引用的节。 |
<dfn> | 定义项目或缩略词的定义。 |
<q> | 定义短的行内引用。 |
<cite> | 定义著作的标题。 |
1.用于短引用
HTML <q> 元素定义短的引用。
浏览器通常会为 <q> 元素包围引号。
html
<html>
<body>
<p>浏览器通常会在 q 元素周围包围引号。</p>
<p>WWF 的目标是 <q>构建人与自然和谐相处的世界。</q></p>
</body>
</html>

2.用于长引用
HTML <blockquote>元素定义被引用的节。
浏览器通常会对 <blockquote> 元素进行缩进处理。
html
<html>
<body>
<p>浏览器通常会对 blockquote 元素进行缩进处理。</p>
<blockquote>
五十年来,WWF 一直致力于保护自然界的未来。
WWF 工作于 100 个国家,并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
</body>
</html>

3.用于缩略词的
HTML <abbr> 元素定义缩写或首字母缩略语。
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
html
<html>
<body>
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
</body>
</html>

4.用于定义的
HTML <dfn> 元素定义项目或缩写的定义。
html
<html>
<body>
<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
</body>
</html>

12.HTML 注释
注释标签 <!-- 与 --> 用于在 HTML 插入注释。
1.注释多行 HTML 代码
html
<!DOCTYPE html>
<html>
<body>
<!-- 什么也不显示
<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">
<111111111>
<h1> 22222 </h1>
<p> aaaaa </p>
-->
</body>
</html>
2.条件注释
您也许会在 HTML 中偶尔发现条件注释:
html
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
条件注释定义只有 Internet Explorer 执行的 HTML 标签。
3.注释的快捷键
在VS Code中:ctrl + /
13.HTML 颜色
颜色由红色、绿色、蓝色混合而成。
1.颜色值
颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
每种颜色的最小值是 0(十六进制:#00)。最大值是 255(十六进制:#FF)。
这个表格给出了由三种颜色混合而成的具体效果:

2.颜色名
大多数的浏览器都支持颜色名集合。
**提示:**仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色,需要使用十六进制的颜色值。
14.HTML CSS
通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。
html
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>

15.HTML 链接标签
HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
1.HTML 超链接(链接)
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式:
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
2.HTML 链接语法
链接的 HTML 代码很简单。它类似这样:
html
<a href="url">Link text</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
特点:
- 双标签,内部可以包裹内容
- 如果需要a标签点击之后去指定页面,需要设置a标签的href属性
实例
html
<a href="http://www.baidu.com/">访问百度</a>
上面这行代码显示为:访问百度
点击这个超链接会把用户带到 百度 的首页。
提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
显示特点:
- a标签默认文字有下划线
- a标签从未点击过,默认文字显示蓝色
- a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)
空链接
html
<a href="#">空链接</a>
功能:
- 点击之后回到网页顶部
- 开发中不确定该链接最终跳转位置,用空链接占个位置
3.target 属性
使用 Target 属性,设置a标签的跳转方式。

下面的这行会在新窗口打开文档:
html
<a href="http://www.baidu.com/" target="_blank">访问百度</a>
4.name 属性
name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法:
html
<a name="label">锚(显示在页面上的文本)</a>
**提示:**锚的名称可以是任何你喜欢的名字。
**提示:**您可以使用 id 属性来替代 name 属性,命名锚同样有效。
实例
首先,我们在 HTML 文档中对锚进行命名(创建一个书签):
html
<a name="tips">基本的注意事项 - 有用的提示</a>
然后,我们在同一个文档中创建指向该锚的链接:
html
<a href="#tips">有用的提示</a>
在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。
html
<html>
<body>
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

16.HTML 媒体标签
1.图片标签
通过使用 HTML,可以在文档中显示图像。
html
<img src="" alt="">
特点:
- 单标签
- img标签需要展示对应的效果,需要借助标签的属性进行设置!

属性注意点:
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
属性 | 说明 |
---|---|
src | 指定图片的路径 |
alt | 替换文本 |
title | 提示文本 |
width | 宽度 |
height | 高度 |
src属性:
属性值:目标图片的路径
当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可
alt属性:
属性值:替换文本
当图片加载失败时,才显示alt的文本
title属性:
属性值:提示文本( 当鼠标悬停时,才显示的文本 )
title属性不仅仅可以用于图片标签,还可以用于其他标签
width和height属性:
属性值:宽度和高度
如果只设置width或height中的一个,另一个没设置的会自动等比例缩放。
如果同时设置了width和height两个,若设置不当此时图片可能会变形。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./cat.gif" alt="">
<img src="" alt="这个图片不见了">
<img src="./images/dog.gif" alt="" title="这是一只狗">
</body>
</html>

2.路径
场景:页面需要加载图片,需要先找到对应的图片
- 绝对路径
- 相对路径(常用)
3.音频标签
场景:在页面中插入音频
html
<audio src="" controls></audio>
常用属性:

注意: 音频标签目前支持三种格式:MP3、Wav、Ogg
4.视频标签
场景:在页面中插入视频
html
<video src="" controls></video>
常用属性:

注意: 视频标签目前支持三种格式:MP4 、WebM 、Ogg
17.HTML 列表标签
1.列表的应用场景
在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等
特点:按照行的方式,整齐显示内容
种类:无序列表、有序列表、自定义列表



2.无序列表
在网页中表示一组无顺序之分的列表,如:新闻列表。
标签组成:
标签名 | 说明 |
---|---|
ul | 表示无序列表的整体,用来包裹li标签 |
li | 表示无序列表的每一项,用来包含每一行的内容 |
显示特点:
列表的每一项前默认显示圆点标识
注意点:
- ul标签中只允许包含li标签
- li标签可以包含任意内容
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>草莓</li>
<li>榴莲</li>
</ul>
</body>
</html>
3.有序列表
在网页中表示一组有顺序之分的列表,如:排行榜。
标签组成
标签名 | 说明 |
---|---|
ol | 表示有序列表的整体,用来包裹li标签 |
li | 表示有序列表的每一项,用来包含每一行的内容 |
显示特点:
列表的每一项前默认显示序号标识
注意点:
- ol标签中只允许包含li标签
- li标签可以包含任意内容
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>小明</li>
<li>张三</li>
<li>李四</li>
</ol>
</body>
</html>

4.自定义列表
在网页的底部导航中通常会使用自定义列表实现。
标签名 | 说明 |
---|---|
dl | 表示自定义列表的整体,用来包裹dt/dd标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义列表针对主题的每一项内容 |
标签 | 英文全称 |
---|---|
dl | definition list |
dt | definition term |
dd | definition description |
显示特点:
dd前会默认显示缩进效果
注意点:
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dt>线下门店</dt>
<dd>服务网点</dd>
<dd>授权体验店</dd>
<dt>关于</dt>
<dd>企业社会责任</dd>
<dd>举报</dd>
</dl>
</body>
</html>

总结
无序列表最常用,有序列表偶尔用,自定义列表底部导航用
18.HTML 表格标签
在网页中以行+列的单元格的方式整齐展示和数据
基本标签:
标签名 | 说明 |
---|---|
table | 表格整体,可用于包裹多个tr |
tr | 表格每行,可用于包裹td |
td | 表格单元格,可用于包裹内容 |
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="800" height="200">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>张三</td>
<td>100分</td>
<td>真棒</td>
</tr>
<tr>
<td>李四</td>
<td>80分</td>
<td>还行</td>
</tr>
</table>
</body>
</html>

1.表格相关属性
注意:
实际开发时针对于样式效果推荐用CSS设置
属性名 | 属性值 | 效果 |
---|---|---|
border | 数字 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
2.表格标签
表格标题和表头单元格标签:在表格中表示整体大标题和一列小标题
标签名 | 名称 | 说明 |
---|---|---|
caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
th | 表头单元格 | 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示 |
注意:
- caption标签书写在table标签内部
- th标签书写在tr标签内部(用于替换td标签)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="300" height="50">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>张三</td>
<td>100分</td>
<td>真棒</td>
</tr>
<tr>
<td>李四</td>
<td>80分</td>
<td>还行</td>
</tr>
</table>
</body>
</html>

3.表格的结构标签
让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰


html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="300" height="100">
<caption><strong>学生成绩单</strong></caption>
<thead>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小哥哥真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</tfoot>
</table>
</body>
</html>
4.合并单元格
将水平或垂直多个单元格合并成一个单元格

合并原则:
- 上下合并:只保留最上的,删除其他
- 左右合并:只保留最左的,删除其他
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并(上下合并),将多行垂直合并 |
colspan | 合并单元格的个数 | 跨列合并(左右合并),将多列水平合并 |
注意:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)
Document
姓名 | 成绩 | 评语 |
---|---|---|
小哥哥 | 100分 | 小哥哥真帅气 |
小姐姐 | 100分 | 小哥哥真漂亮 |
[学生成绩单] |

19.表单标签
表单(Form)是网页中一个 专门用来收集用户输入数据 的区域,它可以把这些数据发送到服务器,让网站根据这些数据做出响应。(搜索、登录、注册)
1.input系列标签
在网页中显示收集用户信息的表单效果,如:登录页、注册页
input标签可以通过type属性值的不同,展示不同效果。
标签名 | type属性值 | 说明 |
---|---|---|
input | text | 文本框,用于输入单行文本 |
input | password | 密码框,用于输入密码 |
input | radio | 单选框 |
input | checkbox | 多选框 |
input | file | 文件选择 |
input | submit | 提交按钮 |
input | reset | 重置按钮 |
input | button | 普通按钮,默认无功能,之后配合js添加功能 |
文本框
在网页中显示输入单行文本的表单控件
type属性值:text
常用属性:
placeholder:占位符,提示用户输入内容的文本
value:用户输入的内容,提交之后会发送给后端服务器
name:当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式为: name的属性值 = value的属性值
密码框
在网页中显示输入密码的表单控件
type属性值:password
常用属性:
placeholder:占位符,提示用户输入内容的文本
单选框
在网页中显示多选一的单选表单控件
type属性值:radio
常用属性:
name:分组,有相同name属性的单选框为一组,一组中同时只能有一个被选中
checked:默认选中
复选框
在网页中显示多选多的多选表单控件
type属性值:checkbox
常用属性:
checked:默认选中
文件选择
在网页中显示文件选择的表单控件
type属性值:file
常用属性:
multiple:多文件选择
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是: <input type="radio" name="我是"> 男
<input type="radio" name="我是" checked> 女
<br>
<br>
常住地: <input type="text" placeholder="请输入住址">
<br>
<br>
密码: <input type="password" placeholder="请输入密码">
<br>
<br>
婚姻状况: <input type="checkbox"> 未婚
<input type="checkbox"> 已婚
<input type="checkbox"> 丧偶
<br>
<br>
上传文件: <input type="file" multiple>
</body>
</html>

按钮
在网页中显示不同功能的按钮表单控件
type属性值:
标签名 | type属性值 | 说明 |
---|---|---|
input | submit | 提交按钮 |
input | reset | 重置按钮 |
input | button | 普通按钮,默认无功能,之后配合js添加功能 |
如果需要实现以上按钮功能,需要配合form标签使用
form使用方法:用form标签把表单标签包裹起来即可
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
用户名: <input type="text">
<br>
<br>
密码: <input type="password">
<br>
<br>
<input type="submit" value="注册">
<input type="reset">
<input type="button" value="普通按钮">
</form>
</body>
</html>

总结

2.button按钮标签
同input的按钮
标签名 | type属性值 | 说明 |
---|---|---|
button | submit | 提交按钮 |
button | reset | 重置按钮 |
button | button | 普通按钮,默认无功能,之后配合js添加功能 |
3.select下拉菜单标签
在网页中提供多个选择项的下拉菜单表单控件
标签组成:
- select标签:下拉菜单的整体
- option标签:下拉菜单的每一项
常见属性:
selected:下拉菜单的默认选中
4.textarea文本域标签
在网页中提供可输入多行文本的表单控件
标签名:textarea
常见属性:
- cols:规定了文本域内可见宽度
- rows:规定了文本域内可见行数
注意:
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用CSS设置

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="" id="">
<option value="">小猫</option>
<option value="">小狗</option>
<option value="">小牛</option>
<option value="" selected>小马</option>
</select>
<br>
<br>
<textarea name="" id=""></textarea>
</body>
</html>
5.label标签
常用于绑定内容 与表单标签的关系。
标签名:label
使用方法①:
- 使用label标签把内容(如:文本)包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法②:
- 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
选择性别:<input type="radio" name="sex" id="man"> <label for="man">男</label>
<label>
<input type="radio" name="sex" > 女
</label>
</body>
</html>

点击文字即可选中radio
20.语义化标签
1.无语义标签
div标签:一行只显示一个(独占一行)
span标签:一行可以显示多个
2.有语义标签


21.字符实体
字符实体可以在网页中显示特殊符号
在网页中展示特殊符号效果时,需要使用字符实体替代
