HTML超详细基础知识总结

2023/3/28：微改了一些样式和排版…

一、互联网基本原理

1、在本地开发，在服务器共享

程序员 → 在本地开发（html，css，js）→ 上传到服务器（共享）→ 所有用户都能访问

2、关于 HTTP 协议

HTTP 协议 （HyperText Transfer Protocol）超文本传输协议，是互联网数据传输的常见协议
 
一次 HTTP 事物由 “HTTP 请求” 和 “HTTP 响应” 构成
 
网址前的http://就表示用http协议请求页面，https://表示用https加密协议请求页面，比http://更安全
 

HTTP请求： 用户通过输入网址对服务器发起访问请求的形式，叫做HTTP请求

HTTP响应： 服务器接收HTTP请求，处理后响应给用户的流程，叫做HTTP响应

3、前后端请求交互基本流程

① 用户发送 HTTP 请求

② 在服务器上：后端语言程序运行时执行数据库“增删查改” 等业务

③ 服务器返回 HTTP 响应

④ 在浏览器中，前端语言程序将运行， 执行页面结构渲染、美化、交互效果等业务

---

二、HTML基础及延伸

1、HTML解析

1.1、什么是HTML

HTML 是用来描述网页的一种语言：

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页

超文本有两层含义：

• 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
• 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

1.2、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

• HTML 标签是由尖括号包围的关键词，通常成对出现
• 标签对中的第一个标签是开始（开放）标签，第二个标签是结束（闭合）标签
• 单标签：
  • 有的标签不是成对出现的，而是只有起始标签，称之为单标签
  • 在 HTML4 代中，单标签必须写一个结尾的反斜杠，HTML5 就不用写

1.3、HTML文档

HTML 文档被称为网页，用来 描述网页 ，包含 HTML 标签和纯文本
 
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

2、常用浏览器

浏览器是网页显示、运行的平台：

• 常用浏览器有 IE(已关闭)、火狐（Firefox）、谷歌（Google）、Safari（苹果官方）、Opera 、Edge（微软）等

• 全球浏览器市场份额：https://gs.statcounter.com/browser-market-share

3、浏览器内核

浏览器内核（渲染引擎）：

• 负责读取网页内容，整理信息，计算网页的显示方式并显示页面

• 浏览器内核检测工具：https://ie.icoa.cn/

浏览器	内核	说明
IE	Trident	IE 浏览器内核
Edge	WebKit	微软 Microsoft Edge（简称 ME 浏览器）
Chrome/Opera	Blink	由 Google 和 Opera Software 共同研发，Blink 其实是 WebKit 的分支，以前 Google 是 WebKit 内核、现在是 Blink
Firefox	Gecko	火狐浏览器内核
Safari	WebKit	苹果浏览器内核
360、猎豹、2345 浏览器	Trident+Blink	双内核
UC、搜狗、遨游、QQ 浏览器	Trident+Webkit	双内核
百度（已关闭）、世界之窗浏览器	Trident	IE 浏览器内核

4、页面编码

4.1、Unicode标准

因为 ISO-8859 中字符集大小是有限的，且在多语言环境中不兼容，所以 Unicode 联盟开发了 Unicode 标准。

• Unicode 标准覆盖了（几乎）所有的字符、标点符号和符号。

• Unicode 使文本的处理、存储和运输，独立于平台和语言。

• HTML5 中默认的字符编码是 UTF-8
   

统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。

4.2、字符集

字符集	涵盖字符	1 个汉字的字节数	适用场景
UTF-8	涵盖全球所有国家、民族的文字和大量图形字符	3	开发有非汉字文字的网页
gb2312（gbk）	收录所有汉字字符（简体、繁体）和英语、少量韩文、日语和少量图形字符	2	开发只有汉语和英语的网页，由于 1 个汉字仅占 2 个字节，网页文件尺寸大小明显减少

使用VSCode时要注意：
 
无论使用哪种字符集，一定要在 VSCode 中将文件也设置为相同的字符集，否则会出现乱码；

Live Server 插件不支持 gb2312、gbk 字符集，只支持 UTF-8 字符集；

文件编码集与 meta 标签编码不一致网页会出现乱码。

5、W3C组织

• W3C 指万维网联盟（World Wide Web Consortium）是万维网的主要国际标准组织
• W3C 创建于 1994 年 10 月，主要负责制定 WEB 标准
• W3C 由 Tim Berners-Lee（蒂姆·伯纳斯·李） 创建 ，被誉为 “互联网之父”
• W3C 是一个会员组织
• W3C 创建并维护 WWW 标准
• W3C 标准也被称为 W3C 规范，主要是 HTML 和 CSS
• W3C 组织官网：https://www.w3.org/
• JavaScript 由 Brendan Eich 于 1995 年发明，并于 1997 年成为 ECMA 标准。

6、网页组成

网页由 结构（Structure）、表现（Presentation）和行为（Behavior）三部分组成；结构，表现，行为要相分离。

标准	简介	描述
结构	用于对网页元素进行整理和分类，即 HTML	网页的骨骼
表现	表现用户设置网页元素的外观样式，即 CSS	网页的皮肤
行为	行为是指网页模型的定义、交互等编写，即 JavaScript	网页的神经

7、SEO网页代码优化

• SEO，全称Search Engine Optimization (搜索引擎优化)

• 利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，为自己的网站获取免费流量

• 以用户体验为核心，为目标用户提供高质量的内容

• 对页面的代码和网页阅读体验，网站性能等进行优化

7.1、网页三要素优化规范

1、页面标题（title），30 字以内：
 

标题	格式
网站首页	<title>网站首页：品牌词 - 产品中文全称、特色服务、xxxx</title>
列表页（栏目页）	<title>产品和主题概述 - 品牌词</title>
内容页（产品详情页、文章页）	<title>具体产品或内容主题概述-品牌词</title>
	注 ：强调重点即可，重要的关键词出现不要超过 2 次，而且要靠前，不同页面的 title 要有所不同； 三要素代码顺序为 页面标题 -> 页面描述 -> 页面关键字。

2，页面描述（Description），150字符以内，描述内容要和页面内容相关：

<meta name="description" content="品牌名-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、生鲜等丰富品类，满足各种购物需求。" />

3，页面关键字（Keywords），告诉搜索引擎本页的重点、关键词：

<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜" />

7.2、搜索引擎的索引方式

• robot terms 是一组使用逗号 , 分割的值。
• 通常有如下几种取值：none，noindex，nofollow，all，index 和 follow。确保正确使用 nofollow 和 noindex 属性值。

<meta name="robots" content="index,follow" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
   index：文件将被检索；
    follow：页面上的链接可以被查询，告诉蜘蛛可以被追踪，传递权重；
   noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询，告诉蜘蛛无需追踪，不传递权重。一般用于站外链接。
 -->

页面重定向和刷新：

<meta http-equiv="refresh" content="0; url=" />
<!-- 
content 内的数字代表时间（秒），既多少时间后刷新。
如果加 url，则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚） 
-->

7.3、搜索引擎注意事项

注意	说明
重要内容尽量靠前放	搜索引擎抓取 HTML 的顺序是从上到下的，而有的搜索引擎对抓取的内容长度有一定的限制。
重要内容不要用 JS 输出	搜索引擎不会抓取 JS 的生成内容。
其他	页面结构尽量扁平化，目录结构不宜过深，最好不超过 三级，每级都有 面包屑导航，成树状结构分布。否则不利于搜索引擎抓取； 做 404 页面，不仅提高蜘蛛体验，也提高用户体验。

8、HTML5模板代码解析

<!--声明当前文档类型为 html5标准-->
<!DOCTYPE html>
<!--声明当前页面的语言类型-->
<html lang="en">
  <head>
    <!--网页的编码集-->
    <meta charset="UTF-8" />
    <!--IE8及以上的版本按照最新的标准去渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--用户移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--网页标题-->
    <title>宇宙中心</title>
    <!--网页描述-->
    <meta name="description" content="为每个宇宙人提供高质量的玩乐平台" />
    <!--网页关键词-->
    <meta name="Keywords" content="宇宙中心,银河系,皮卡丘" />
  </head>
    <!--网页主体-->
  <body></body>
</html>

meta标签的属性如下：

属性	值	描述
http-equiv	content-type / expire / refresh / set-cookie	把 content 属性关联到 HTTP 头部。
name	author / description / keywords / generator / revised / others	把 content 属性关联到一个 name。
content	some text	定义与 http-equiv 或 name 属性相关的元信息

10、HTML5 特性

10.1、空白折叠现象

1. 文字和文字之间的多个空格、换行会被折叠成一个空格；
2. 标签 内壁 和 文字之间的空格会被忽略。

10.2、常用转义符

<body>
  <h1>HTML常用转义符</h1>

  <p>空格：&nbsp;&nbsp;&nbsp; 这是三个空格</p>
  <p>大于号：&gt;</p>
  <p>小于号：&lt;</p>
  <p>&符号：&amp;</p>
  <p>“双引号：&quot;</p>
  <p>版权符号：&copy;</p>
  <p>已注册商标：&reg;</p>

  <p>在网页中直接显示原标签:</p>

  显示p标签 &lt;p>&lt;/p> <br /><br />

  显示div标签：&lt;div&gt;&lt;/div&gt;
</body>

10.3、HTML注释

作用： 提高代码的可阅读性，方便自己阅读或他人阅读；增强代码的可维护性。

语法： <!-- 注释的内容，注释在网页中是不显示的，只有自己能看到 -->

10.4、新增与移除的元素

新增的有	移除的有
语义化标签（header、nav、main、section、article、aside、details、figcaption、figure、mark、summary、time、footer 等）	纯表现的元素：basefont，big，center，font, s，strike，tt，u
Canvas 画布和 SVG 矢量图	对可用性产生负面影响的元素：frame，frameset，noframes
拖放（Drag and drop）
音频、视频（audio、video）
地理定位（Geolocation）
本地离线存储（localStorage）长期存储数据，关闭浏览器后不丢失。
会话储存（sessionStorage）数据在关闭浏览器后自动删除。
表单控件（calendar、date、time、email、url、search）
新技术（Web Worker、Web Socket）
新的文档属性（document.visibilityState）

---

三、HTML常用标签

1、标题标签

h 系列标签表示的是 “标题” 的含义，h 是 headline（标题） 的意思，用法如下：

<h1>我是h1标题标签</h1>
<h2>我是h2标题标签</h2>
<h3>我是h3标题标签</h3>
<h4>我是h4标题标签</h4>
<h5>我是h5标题标签</h5>
<h6>我是h6标题标签</h6>

注意：

• h1 一个页面只可有一个（超过一个会被搜索引擎视为作弊），首页多用于包含 logo，其他页面用于主标题
• h2 模块标题
• h3 段落的小节标题
• h4, h5, h6 基本上不使用

2、段落标签

• p 标签表示段落标签，p 是英语 Paragraph（段落） 的意思；
• 任何段落都要放到 p 标签中，因为 HTML 代码中即使代码换行了，页面显示效果也不会换行，必须写在 p 标签中；
• p 标签中不能嵌套 h 标签、其他 p 标签和其他块级元素。

3、div标签

• div 标签 是英语 division（分隔） 的缩写；

• div 标签对是用来将相关内容组合到一起，以和其他内容分隔，使文档结构更清晰；

• div 结合 CSS 来实现网页的布局，这种布局形式叫做 DIV+CSS；

• div 像一个容器，什么都可以容纳，因此工程师们习惯称呼 div 为 盒子。

4、列表标签

4.1、无序列表

• 无序列表一组无顺序之分的列表；
• 无序列表 ul ，是英文unordered list（不排序列表） 缩写；
• 每个列表项都是 li 标签，是英文单词 list item（列表项目）缩写；
• ul 父标签，li 子标签，不能单独出现，ul 里面只能嵌套 li 子标签。
   

示例：

<h1>无序列表</h1>
<ul>
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
</ul>
<!--
type属性：用于定义前导符号的样式，在 HTML5 中已经被废弃，使用 CSS 替代
type的属性值：disc(实心圆)、square(实心正方形)、circle(空心圆)
-->

应用场景：

• 导航栏（头部导航栏，侧边导航栏等等）
• 列表页（商品列表，新闻列表）

4.2、有序列表

• 有序列表是一组有顺序之分的列表；
• 有序列表ol，是英文 ordered list（排序列表） 缩写；
• ol的特性与ul，li一样，不同的是前导样式与属性值。
   

示例：

<h1>编程语言排行榜</h1>
<ol>
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
</ol>
<!--
type属性：用来设置编号的类型
type的属性值：1(数字编号、默认值)、A/a(大写/小写英文字母编号)、I/i(大写/小写罗马数字编号)
start属性：start属性值必须是个整数，设置该值后，就会把该值当做初始值
reversed属性：reversed 属性是 HTML5 中的新属性（是个布尔属性）；指定列表中的条目设置了 reversed 属性后就会倒序排列；reversed 属性不需要值，只需要写 reversed 单词即可
-->

应用场景：

• 排行榜，热搜榜等等

4.3、定义列表

• 定义列表是一组需要逐条给出定义描述的列表；

• dl 是英文 definition list（定义列表） 的缩写；

• dt 是英文单词 data term（数据项） 的缩写；

• dd 是英文单词 data definition (数据定义) 的缩写；

• dd 内容是对 dt 的解释说明。
   

示例：

<h1>定义列表</h1>
<dl>
  <dt>服务支持</dt>
  <dd>售后政策</dd>
 <dd>关注我们</dd>
</dl>

应用场景：

• 网页底部导航（小米官网底部导航既是如此）

5、多媒体标签

5.1、图片标签

• img 标签 是 image（图片）的缩写；

• img 标签用来在网页中插入图片，基础格式如下；

• 图片必须存放在项目文件夹中；

• 图片只是引入到网页中，本质上没有被插入到网页中。
   

示例：

<img src="images/logo.png" alt="logo" width="66" height="66" />
<!--
src：source（来源）的缩写, "" 中填写图片的路径。

alt：alternate（代替者）的缩写，对图像的文本描述，不强制；
如果图片无法显示，浏览器就会显示alt属性的值；
对于搜索引擎优化友好，告诉搜索引擎图片的含义，利于搜索引擎爬虫抓取；
为视障用户使用网页朗读器提供便利，它会朗读 alt 中的文本。

width & height：width & height 属性设置图片宽度和高度，单位是 PX（像素），可不写；如果省略其中一个属性，则表示按原始比例缩放图片
-->

图片标签规范：

• PC 端 img 图片必须填写 src、width、height、alt 属性，统称图片标签的四要素；
• 移动端必须填写 alt 属性；
• alt 应为有意义字符，需要能表现出图片的含义。

应用场景：

• 商品介绍图，logo图等等

5.2、图片格式（网页上支持的）

支持格式	描述
.bmp	Windows 画图软件默认保存的格式，位图
.jpeg（.jpg）	有损压缩图片，通常用于照片显示
.png	便携式网络图像，用于 logo，背景图形等。支持透明和半透明
.gif	动画 ，如：表情包
.svg	矢量图片
.webp	最新的压缩算法，非常优秀的图片格式

5.3、相对路径和绝对路径

相对路径：

<!--
从当前文件出发，要找到图片的路径就叫相对路径
../ 表示回退上一级目录，./ 表示当前目录
. 表示文件夹，通过 cmd 命名行 dir 命令可查
-->
<img src="images/logo.png" />
<img src="../images/logo.png" />
<img src="../../images/logo.png" />
.....

绝对路径：

<!--描述文件或文件夹的精准完整地址-->
<img src="D:\web\icoding-web\images\logo.png" />
<img src="https://www.icodingedu.com/files/system/10086.png"/>

5.4、超级链接 - a标签

• a 标签是英语 anchor (锚)的首字母，也叫超链接或超级链接，用于网页与网页之间链接跳转，发送请求到后端等。
   

语法：

<a href="https://www.baidu.com">百度一下，你就知道</a>
<!--
href属性：是 hypertext reference （超文本引用）的缩写，设置跳转的路径，支持相对路径和绝对路径

title属性：设置鼠标悬停时浮现的文本

target属性：规定在何处打开链接文档
target属性值：
_blank / blank：在新窗口中打开网页
_self：默认，当前页面跳转
_parent：在父窗口打开链接
_top：在当前窗口打开链接，并替换当前的整个窗体（框架页）
-->

超链接规范：

• 给 a 标签加上 title 属性
• a 标签的 href 属性必须写上链接地址，暂无的加上javascript:alert('敬请期待！')
• 非本页面间跳转，采用打开新窗口模式：target="_blank"

优化方式：

• 内部链接，要加 title 属性加以说明
• 外部链接，要加 rel="nofollow" 属性，告诉蜘蛛无需追踪，传递权重

页面锚点：

• 给标签添加 id属性，就能将它变成页面的 “锚点”；

• 当点击锚点链接时，浏览器地址栏就会出现 #id属性名称 ，页面就会自动滚动到锚点处；

• 从其他页面点击带 # 号的链接，就可以直接定位到锚点位置；

• 在 HTML5 中 直接使用 #top 即可回到顶部，不用定义 id="top" 。

特殊链接：

下载链接：

<!--指向 exe、zip、rar、word、excel 等文件格式的链接，将自动成为下载链接-->
<a href="doc/1.zip">Java学习资料zip下载地址</a>

邮件链接：

<!-- mailto：前缀的链接 即 邮件链接，系统将自动打开 email 相关软件，即可发送邮件 -->
<a href="mailto:wxr@nonono.com">给外星人发邮件</a>

电话链接：

<!-- tel：前缀的链接 即 电话链接，系统将自动打开手机拨号键 -->
<a href="tel:18966666666">给皮卡丘打电话</a>

5.5、音视频标签

5.5.1、音频标签

• audio 标签可直接在网页中插入音频，并自动生成默认 的编辑器
• 浏览器中常用的音频格式：mp3 和 ogg 格式

<audio controls src="mp3/不错哟.mp3" autoplay loop>
 亲爱的，您的浏览器不支持audio标签，请升级您的浏览器> 哟 ^_^
</audio>
<!--
controls：显示播放空间
src：音频路径
autoplay：音频自动播放，不会等待整个音频文件下载完成
loop：循环播放音频
如果不兼容 audio 标签的浏览器将会显示标签对的文字
-->

注： 视频 video 标签与音频 audio 标签写法差不多，只不过属性不大相同。

5.5.2、音/视频的子标签

• source 标签为媒体元素定义媒体资源，该标签允许定义多个格式的音视频文件，供浏览器选择自己支持的媒体类型进行播放。

<!--注：浏览器需要选择它支持格式的源文件进行播放，如果都支持则任选个（默认选择第一个）-->
<h2>audio 子标签 source</h2>
<audio controls>
	<source src="audio/不错哟.mp3" type="audio/mpeg" />
	<source src="audio/不错哟.ogg" type="audio/ogg" />
	<source src="audio/不错哟.wav" type="audio/wav" />
	亲爱的，您的浏览器不支持audio标签，请升级您的浏览器> 哟 ^_^
</audio>

<h2>video 子标签 source</h2>
<video controls width="500">
	<source src="video/1.mp4" type="video/mp4" />
	<source src="video/1.webm" type="video/webm" />
	<source src="video/1.ogv" type="video/ogv" />
	<source src="video/1.avi" type="video/avi" />
	亲爱的，您的浏览器不支持video标签，请升级您的浏览器哟 ^_^
</video>

常用音频格式有如下三种：

格式	类型	描述
MP3	audio/mpeg	一种音频压缩技术，用来大幅度的降低音频数据量
Ogg	audio/ogg	一种新的音频压缩格式，是完全免费、开发和没有专利限制的
Wav	audio/wav	微软公司开发的一种声音文件格式，声音文件质量和 CD 相差无几

常用视频格式有如下三种：

格式	类型	描述
mp4	video/mp4	MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器
webm	video/webm	WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
avi	video/avi	avi 文件支持 256 色和 RLE 压缩，他对视频文件采用了一种有损压缩方式
ogv	video/ogv	Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器

6、语义化标签

什么是语义化标签?

• 有英文语义的标签。

为什么要用语义化标签?

• 使代码结构清晰，方便阅读，有利于团队合作开发；
• 有利于SEO优化：有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；
• 可访问性：利于无障碍阅读；
• 国际化：遵循 W3C 标准通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；
• 可维护性：语义化更具可读性，减少网页间的差异性，方便后期开发和维护。

6.1、文本格式化标签

6.1.1、span 标签

• span 标签是文本中的区块标签，没有任何显示的效果，可以结合 css 来定义区块的样式；

• 需要被特殊标记的元素也会使用 span 标签。

6.1.2、文本格式化标签

标签	描述
<b>	定义粗体文本 （已被 CSS 替代）
<em>	定义着重文字，显示为斜体 （被强调的文本）
<i>	定义斜体字（已被 CSS 替代）
<u>	定义文字的下划线（已被 CSS 替代）
<strong>	定义加重语气，显示为粗体，表示特别重要的文字； strong 和 em 都表示强调， strong 的强调程度要比 em 更高
<sub>	定义下标字
<sup>	定义上标字
<del>	定义删除字
<pre>	定义预格式文本。被包围在 pre 标签 元素中的文本通常会保留空格
<mark>	一段需要被高亮的文本（HTML5 新标签）
<figure>	figure 标签规定独立的流内容（图像、图表、照片、代码等等）。与 figcaption 标签配合使用。
<figcaption>	一个独立的引用单元，标签为 <figure> 元素定义标题

6.2、区块标签

标签	描述
<section>	文档的区域，语义比 div 大 通常由标题以及内容组成，不推荐没有标题的内容使用section标签
<article>	文档的核心文章内容，会被搜索引擎主要抓取 它比 section 具有更明确的语义，可以包含一个或多个section
<aside>	文档的非必要相关内容 独立于内容的一部分，且可以被单独的拆分出来而不会使整体受影响
<nav>	导航栏
<header>	页头
<main>	网页核心部分 用来呈现文档或应用的主体部分，一个页面只能有一个 main 标签
<footer>	页脚

注意： article、section、aside、nav 标签都可以拥有自己的 header 和 footer 标签
 
如何增强语义性： 当现有的 HTML 标签不能充分表达语义的时候，可以借助 role 属性来说明

7、表单元素

HTML 表单用于收集不同类型的用户输入；

如：登录、注册、发布、提交、编辑信息 等等。

7.1、HTML 表单基本用法

• 所有的 HTML 表单都是以 <form> 元素包裹：

<h1>HTML的form表单</h1>

<form action="/user/login" method="get">......</form>

action属性：提交表单时向何处发送表单数据
method属性：规定用于发送表单数据的 HTTP 方法

7.2、单行文本框

用户名： <input type="text" />
真实姓名：<input type="text" placeholder="请输入您的真实姓名 ..." />
所在城市：<input type="text" value="北京市海淀区" disabled />
<!--
type="text"：单行文本框，单标签
value=""：文本框的值
placeholder=""：提示文本，以浅灰色显示在文本框中，并不是文本框中的值
disabled：表示用户不能与元素交互，即：禁用
-->

7.3、密码框

<!--与单行文本框类似，type属性值为password 显示内容为 隐藏-->
请输入密码：<input type="password" />

7.4、单选按钮

性别： <input type="radio" name="sex" /> 男 
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" checked /> 保密
<!--
注：以上代码，点击文字时，不能选中按钮，需要使用 label标签
type="radio"：单选按钮
name=""：设置互斥 ，需将多个 name 属性为相同的值
value=""：向服务器提交的值
checked：表示默认被选中
-->

7.5、label标签

• 用来将文字和单选按钮进行绑定，实现点击文字等同于点击单选按钮。

• 在 HTML5 中直接使用 label 标签包裹单选按钮和文字即可：

性别：<label> <input type="radio" name="sex" /> 男 </label>

• 在 HTML4 中label 标签是通过 for 属性和单选按钮的 id 属性进行绑定的：

所在城市：
<input type="radio" name="city" id="beijing" />
<label for="beijing">北京市</label>

7.6、复选框

<label> 
	<input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球 
</label>
<label> 
	<input type="checkbox" name="hobby" value="书法" checked /> 书法 
</label>
<!--
type="checkbox"：复选框
name=""：同组复选框应该设置 name 为相同值
value=""：向服务器提交的值
checked：表示默认被选中
-->

7.7、下拉菜单

请选择 省：
<select>
	<option value="湖北省">湖北省</option>
	<option value="湖南省">湖南省</option>
	<option value="安徽省">安徽省</option>
</select>
<!--
<select>标签就是下拉菜单
<option>是内部选项
-->

7.8、多行文本框

用户评论： <textarea cols="100" rows="10"></textarea>
<!--
<textarea>表示多行文本框
rows和cols属性，用于定义多行文本框的行数和列数
-->

7.9、按钮

<button>我是一个button标签，是一个普通按钮</button>
<input type="button" value="我是一个普通按钮" /> <!--可简写为<button></button>-->
<input type="submit" value="提交表单信息" />
<input type="reset" value="重 置" />

7.10、总结

1、常用表单控件

type 属性	描述
text	单行文本框
radio	单选按钮
checkbox	复选框
password	密码框
button	普通按钮，也可以简写为 <button></button>
submit	提交按钮
reset	重置按钮

2、HTML5新增的表单控件

type 属性	描述
color	颜色选择控件
date、time	日期、时间选择控件
email	电子邮件输入控件（提交自动效验）
file	文件选择控件
number	数字输入控件 属性（min：最小值，max：最大值）
range	拖拽条控件
search	搜索框（多一个清空按钮）
url	网址输入控件

8、表格

8.1、HTML表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题（作为 table 的第一个子元素出现）
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

8.2、表格标签属性

属性	描述
border	表格的边框
width	表格的宽度（HTML5 不支持）
cellpadding	单元边沿与其内容之间的空白（HTML5 不支持）
cellspacing	单元格之间的空白（HTML5 不支持）

8.3、表格标签跨行跨列

td & th 标签的属性：colspan(规定单元格可横跨的列数)、rowspan(设置单元格可纵跨的行数)。

<table border="1" width="800">
        <caption>
            同学通讯录
        </caption>
        <tr>
            <th>专业</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <tr>
            <th>计算机</th>
            <td>arry</td>
            <td rowspan="2">男</td>
            <td>18</td>
        </tr>
        <tr>
            <th>外语</th>
            <td>豆豆</td>
            <td>21</td>
        </tr>

        <tr>
            <th>备注</th>
            <td colspan="4"></td>
        </tr>
    </table>

效果图：

8.4、thead,tbody,tfoot标签

<table border="1" width="500">
  <caption>
      同学通讯录
  </caption>
  <thead>
      <tr>
          <th>专业</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
      </tr>
  </thead>

  <tbody>
      <tr>
          <th>计算机</th>
          <td>布丁</td>
          <td>男</td>
          <td>18</td>
      </tr>
      <tr>
          <th>外语</th>
          <td>豆豆</td>
          <td>女</td>
          <td>21</td>
      </tr>
  </tbody>

  <tfoot>
      <tr>
          <th>备注</th>
          <td colspan="4"></td>
      </tr>
</tfoot>
</table>

效果图：

---

上一篇文章	下一篇文章
无	CSS基础认知（一）