<标签名>aaaa<-这个就是标签的内容</标签名>
<h1>一级标签</h1>
HTML
HTML
-
HTML是网页的结构，css是网页的表现，js是网页的行为。
-
HTML：超文本标记语言。
-
word不是单独的文本，是复杂的文本，可以存储图片，但是那个记事本可以。
<html>
<head>
<title>
很明显，这个也是head的子标签。但是title也有子标签，干脆就title就叫html叫做祖先，而html叫title叫后代。
</title>
</head>这两个是html的子标签
<body></body>
</html>这个就是根标签有且只有一个，所有内容都写在里面
<img>
<img/>
<input>
<input/>
这些就是自结束标签，就是单标签。
注释
- 可以用来提示该段代码的作用。
- 可以将一些不必要的内容给隐藏。但是不是删除
- 注意，注释不可以嵌套的，所有的语言都是这样。
- 格式：
<!-- 内容-->
属性
-
标签中的开始标签和自结束标签可以设置属性
-
属性是用来呈现标签内容的，是通过名值对的方式来呈现的，x=y
-
属性之间要用空格隔开，不能按照自己的想法来添加属性，要看文档里面有的
-
标签的属性，标签可以设置属性，属性一般是名值对的形式来构建的
<html>
<head>
<title>
喂喂喂
</title>
</head>
<body>
<h1><font color="blue">只因你太美</font></h1>
<h2><font color="orange" size="5">你是我的，我是你的谁？</font></h2>
<h2>再<font color="green" size="10">多一眼看一眼</font>就会<font color="red" size="10">爆炸</font></h2>
<h2>再<font color="green" size="10">近一点靠近点</font>就快被<font color="red" size="10">融化</font></h2>
<h2>想要把你占为己有<font color="red" size="10">baby baby</font></h2>
<h2>不管走到哪里都会想起的人是你<font color="red" size="10">you you</font></h2>
</body>
</html>
网页版本
- 之前有HTML4，XHTML2.0 ，HTML5......（如果没有版本说明的话，浏览器的解析就会出现问题，所以要告知浏览器版本）。
- 版本声明是
<DOCTYPE HTML>,这里的大小写是不限的也可以写成<doctype html>的。
进制
- 十进制（常用进制）
- 特点：逢十进一
- 单位数字（0-9）
- 形式 0 1 2 3 4 5 6 7 8 9 10 11 12 .....
- 二进制（计算机用）
- 特点：逢二进一
- 单位数字（0-1）
- 形式 0 1 10 11 100 .....
- 拓展：
- 所有的数据都是以二进制的形式保存的
- 可以将内存想成一排排小格子组成的一个容器，每个小格子可以存储1位0或者1。
- 八进制（不常用）
- 特点：逢八进一
- 单位数字（0-8）
- 形式 0 1 2 3 4 5 6 7 10 11 12 13 ...17 20....
- 十六进制（与二进制联用，是很方便的）
- 特点：逢十六进一
- 单位数字（0-f）
- 形式 0 1 2 3 4 5 6 7 8 9 a b c d e f
8bit = 1byte
1024byte = 1kb
1024kb = 1Mb
1024Mb = 1Gb
1024Gb = 1Tb
1024Tb = 1Pb
字符集
- 编码和解码
- 编码
- 将字符或其他文件转化为二进制的形式，就叫做编码
- 解码
- 是将二进制形式的文件转化为文本字符
- 字符集
- 是编码和解码遵循的字符规则，如果不遵从，就会乱码
- 乱码
- 就是编码和解码采用不同的字符集，就会出现乱码
- 常见的字符集有
- ASCII
- GB2312
- GBk（是上面的拓展）
- ISO88591
- UTF-8
实体
- 用到转义字符可以参考一下www.w3school.com.cn/
- 下面用到的是 和>和<
<!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>
<p>
是大客户打开    撒大大口水都快
<!-- 这种浏览器只显示一个空格的原因，其实是浏览器不能完全解码 ，所以要用 这个-->
</p>
<!-- 像下面这种,其实是像说明b是最大的，这个时候不能转换的化，就要用转义字符来进行解码 -->
a < b > c
</body>
</html>
meta标签
- meta主要用于网页中的一些元数据
- meta的属性有charset，name，content等，可以通过zeal查看meta标签的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- meta主要用于设置网页中的一些元数据，元数据不是给用户看
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开
<meta name="Keywords” content="网上购物,网上商城,手机,笔记本,电脑
<meta name="keywords"content="网购,网上购物,在线购物,网购网站,网购
<meta name="keywords" content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,二次元,游戏视频,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid,日本动漫,国产动漫,手机游戏,网络游戏,电子竞技,ACG燃曲,ACG神曲,追新番,新番动漫,新番吐槽,巡音,镜音双子,千本樱,初音MIKU,舞蹈MMD,MIKUMIKUDANCE,洛天依原创曲,洛天依翻唱曲,洛天依投食歌,洛天依MMD,vocaloid家族,OST,BGM,动漫歌曲,日本动漫音乐,宫崎骏动漫音乐,动漫音乐推荐,燃系mad,治愈系mad,MAD MOVIE,MAD高燃">
description 用于指定网站的描述
<meta name="description" content="哔哩哔哩（bilibili.com)是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。">
<meta name="description” content="京东JD.COM-专业的综合网上购物商坊网站的描述会显示在搜索引擎的搜索的结果中
title标签的内容会作为搜索结果的超链接上的文字显示 -->
<meta name="keywords" content = "HTML,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
<!--
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">将页面重定向到另一个网站
这里是将页面重新定向到另一个网页，这个是3秒后定位的
<meta http-equiv="refresh" content="3;url=https://www.baidu.com"> -->
<title>Document</title>
</head>
<body>
</body>
</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>
<!--标题标签:
h1 ~ h6 一共有六级标题
从h1~h6重要性递诚，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中般情况下标题标签只会使用到h1~h3，h4~h6很少用
标题标签都是块元素
在页面中独占一行的元素称为块元素 (block element)
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到 hgroup
hgroup-->
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
<!-- p标签表示页面中的一个段落
p也是一个块元素 -->
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
<!-- em标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素 (inline element) -->
<p>今天天气<em>真</em>不错!</p>
<!-- strong表示强调，重要内容! -->
<p>你今天必须要<strong>完成作业</strong>!</p>
鲁迅说:<!-- blockquote 表示一个长引用 -->
<blockquote>
这句话我是从来没有说过的!
</blockquote>
<!-- q表示一个短引用 -->
子曰<q> 学而时习之，乐呵乐呵!</q>
</body>
</html>
块元素和行内元素
-
块元素
- 在网页中一般通过块元素来进行页面进行布局
- 标题都是块元素
- 标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
<hgroup> <h1>回乡偶书二首</h1> <h2>其一</h2> </hgroup> -
行内元素
- 行内元素主要用来包裹文字,比如span,a,br,img,b等
- 一些有趣的行内元素：blockquote 表示一个长引用, q为短引用,em标签是语音的加重,strong是重要的强调
-
块元素与行内元素的差别
- 一般情况下，块元素可以放行内元素，而不会在行内元素中放快元素
- 块元素中基本什么都可以放
- p元素中不能放任何的块元素
-
浏览器在解析网页的时候，会自动对网页中不符合规范的内容进行修正
- 标签写在了根元素的外部
- p元素中放了块元素
- 根元素出现了除head和body之外的子元素 .........
列表
- 有序列表，使用ol标签来创建有序列表，使用li表示列表项
- 无序列表，使用ul标签来创建无序列表，使用li表示列表项
- 定义列表，使用dl标签来创建一个定义列表
-使用dt来表示定义的内容
- 使用dd来对内容进行解释说明
- 列表之间是可以相互嵌套的
<!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>javascript</li>
<li>vue</li>
<li>React</li>
<li>小程序</li>
</ul>
<ul>
<li>
<a href="#"> 实施创新驱动发展战略</a>
</li>
<li>
<a href="#"> 中国跨度！我们这十年。</a>
</li>
<li>
<a href="#">意大利企业家在海南</a>
</li>
</ul>
<ol>
<li>
<a href="#"> 实施创新驱动发展战略</a>
</li>
<li>
<a href="#"> 中国跨度！我们这十年。</a>
</li>
<li>
<a href="#">意大利企业家在海南</a>
</li>
</ol>
<dl>
<dt>这是很棒的网站</dt>
<dd>有舞蹈区</dd>
<dd>有知识区</dd>
<dd>有影视区</dd>
<dd>有数码区</dd>
</dl>
</body>
</html>
布局标签
-
header 表示网页的头部
-
main 表示网页的主体（一个页面只有一个main）
-
footer 表示网页的底部
-
nav 表示网页的导航
-
aside 表示和主体相关的其他内容(侧边栏)
-
article表示一个独立的文章
-
section表示一个独立的区块，上边的标签都不能表示时使用section
-
div 没有语义，就用来表示一个区块，目前最主要的布局元素
-
span 行内元素，没有任何意义，一般用于网页中选中文字
2.文本标签
| 标签名 | 语义和功能 | 属性 | 单双 |
|---|---|---|---|
| em | 斜体，是用于语气的强调的 | 双 | |
| strong | 用于加粗标签内包裹的文字 | 双 | |
| del | 用于删除，在文本的中间加上划线 | 双 | |
| ins | 插入，在文本的下面加上下划线 | 双 | |
| sub | 是下标 | 双 | |
| sup | 是上标 | 双 | |
| span | 行内元素，是无意义的 | 双 |
一下文本标签-作为了解
<cite> 用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常 为斜体字
<dfn> 定义一个定义项目
<code> 定义计算机代码文本
<samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以 强调的极少情况下，才使用这个标签。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<abbr> 定义缩写 配合title属性 (IE6以上)
<bdo> 来覆盖默认的文本方向 dir属性 值: lrt rtl
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<small> 标签定义小型文本（和旁注）
<b> 粗体字标签 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时 才使用它。
<i> 斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
<u> 下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请 尽量避免使用该标签为文本加下划线，用户会把它混淆为一个超链接。
<q> 签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)
<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块 状元素)
<address> 定义地址 通常为斜体 (注意非通讯地址) 块状元素
<font> H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt> H5已删除 打字机文字
<big> H5已删除 大型字体标签
<strike> H5已删除 添加删除线
<acronym> H5已删除 首字母缩写 请使用<abbr>代替
标签查询地址：
www.w3school.com.cn/tags/html_r…
3. 图片
3.1 img标签
| 标签名 | 语义和功能 | 属性 | 单双 |
|---|---|---|---|
| img | 图片 | src alt | 单 |
总结：
当放置图片的时候，img有两个属性，一个是src，一个是alt。
src：图片的文件位置
alt：是当图片不能显示的时候，然后出现的一段文字
3.2 常见的图片格式
jpg/jpeg
png
gif
bmp
psd
....
4. 相对路径和绝对路径
当前文件：
目标文件：
4.1 绝对路径
网络绝对路径：
本地绝对路径：在某台电脑上的绝对地址。如：
本地绝对路径，开发中并不建议使用。
4.2 相对路径
- 是当前文件的相对目录开始寻找的
- ./是本级目录 ../是上级目录，通过这两个的重复使用，可以找到要地址
- 现在一般使用相对路径的，因为绝对路径是某台电脑的绝对地址
-但是可以用网络中的绝对地址来置放图片
4.3 HTML 中使用路径的场景
1. img 标签引入图片
2. video 标签引入视频
3. audio 标签引入音频
4. iframe 标签引入多种资料
5. script 标签引入js文件
6. a 标签设置超链接
7. link 标签关联css文件
...
5. 超链接和锚点
5.1 a 标签
| 标签名 | 语义和功能 | 属性 | 单双 |
|---|---|---|---|
| a | 超链接 | herf | 双 |
总结：
用超链接可以实现点击跳转，跳转主要是看herf的属性值是什么
- 如果herf的属性值是本地的路径，那么可以使用绝对路径和相对路径来找到
- 如果herf的属性值不是本地路径，而是网页的话，直接用网络的绝对地址
- 如果herf的属性是#，那么就是将网页回到顶部
- 如果herf的属性是 空，那么就是将网页进行刷新
- herf和img可以联用，使得点击图片也可以实现跳转
- 如果没用herf的属性的时候，不会出现跳转
5.2 超链接
① 目标文件是网页
<a herf="https://www.bilibili.com/video/BV1Dh41167W4?p=15&spm_id_from=pageDriver&vd_source=dc4903eec693de9fddb14afd51354664">
b站
</a>
<a herf="http://www.baidu.com">百度</a>
② 目标文件是网页以外的其他类型文件
<a href="img.html" target="_self">我是真的ikun</a>
<a herf="../CS/img.html" target="_blank">百度</a>
<!--这里就不是本页面，然后打开别的页面，而是打开一个新的页面-->
③ 超链接的其他特殊功能 （打开应用）
<a href="mailto:dalei@atguigu.com">发邮件</a>
<a href="tel:15165411236">call me</a>
<a href="sms:154856221221">message</a>
<!--下面的是打开第三方软件QQ，还可以使用其他的，比如百度云-->
<a href=" tencent://Message/?Uin=QQhaoma&websiteName=q-zone.qq.com&Menu=yes">QQQQQQwo</a>
④ href的值是空的 点击刷新
<a herf="">刷新</a>
<a herf="#">回到顶部</a>
5. 锚点
① 如何设置锚点
给标签设置 id 属性，该标签就可以作为锚点，id 属性的值就是锚点名。
② 如何跳转到锚点 （通过超链接跳转到锚点）
<!-- 跳转到本页面的锚点 -->
<a href="#锚点名"> </a>
<!-- 跳转到指定页面的锚点 -->
<a href="页面的地址#锚点名"> </a>
<!-- 返回页面顶部 -->
<a href="#"> </a>
<!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>
<a href="./04-锚点练习.html">第一部分</a>
<a href="./04-锚点练习.html">第二部分</a>
<a href="./04-锚点练习.html">第三部分</a>
<a href="./04-锚点练习.html">第四部分</a>
<a href="./04-锚点练习.html">第五部分</a>
<a href="./04-锚点练习.html">第六部分</a>
<div id="one">
<h2>第一部分</h2>
<img src="./images/image01.png" alt="图"></div>
<div id="two">
<h2>第二部分</h2>
<img src="./images/image02.png" alt="图"></div>
<div id="three">
<h2>第三部分</h2>
<img src="./images/image03.png" alt="图"></div>
<div id="four">
<h2>第四部分</h2>
<img src="./images/image04.png" alt="图"></div>
<div id="five">
<h2>第五部分</h2>
<img src="./images/image05.png" alt="图"></div>
<div id="six">
<h2>第六部分</h2>
<img src="./images/image06.png" alt="图"></div>
<a href="">回到顶部</a>
</body>
</html>
1 回顾
1. 文本标签
em strong del ins sub sup span
2. 图片标签
img 单标签 属性：src alt width heigh
3. 绝对路径和相对路径
绝对路径：网络绝对路径（前端专用） 本地绝对路径（后端专用）
相对路径： ./ ../
4. 超链接和锚点
4.1 超链接
a标签 属性 href target
目标文件是网页文件、目标文件可以是任意类型的文件、打开应用、点击刷新。
4.2 锚点
① 如何设置锚点
② 如何跳转到锚点。
2 列表
2.1 无序列表
<ul>
<li>超文本标记语言</li>
<li>层叠样式表</li>
<li>javascript</li>
<li>vue</li>
<li>React</li>
<li>小程序</li>
</ul>
<ul>
<li>
<a href="#"> 实施创新驱动发展战略</a>
</li>
<li>
<a href="#"> 中国跨度！我们这十年。</a>
</li>
<li>
<a href="#">意大利企业家在海南</a>
</li>
</ul>
无序列表可以用在网页中的文章列表、新闻列表、导航条等……
2.2 有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
有序列表适合表示一组有顺序的列表如各类排行。
2.3 定义列表（了解）
<!-- 一个dt 对应一个 dd -->
<dl>
<dt>html</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>浏览器脚本语言</dd>
</dl>
<!-- 一个dt 对应 多个dd -->
<dl>
<dt>如何掌握一个HTML标签</dt>
<dd>超文本标记语言</dd>
<dd>该标签的语义和功能</dd>
<dd>该标签的属性以及属性值如何设置</dd>
<dd>该标签是双标签还是单标签</dd>
</dl>
2.4 列表标签总结
| 标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| ul | 无序列表 | 双 | |
| ol | 有序列表 | 双 | |
| li | 列表项 | 双 | |
| dl | 定义列表 | 双 | |
| dt | 定义列表标题 | 双 | |
| dd | 定义列表描述 | 双 |
建议：
1. ul、ol 中只直接包裹li标签，li标签也只能被ul标签或ol标签包裹。
2. li 标签就可以包裹任何标签（li标签不能包裹li）
3 表格标签
3.1 表格的结构
<table border="1">
<!-- 表格的标题 -->
<caption>用户信息表</caption>
<!-- 表格头 -->
<thead>
<!-- 行 -->
<tr>
<!-- 表头单元格 -->
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
<th>地址</th>
</tr>
</thead>
<!-- 表格体 -->
<tbody>
<!-- 行 -->
<tr>
<!-- 单元格 -->
<td>1</td>
<td>曹操</td>
<td>男</td>
<td>18754321349</td>
<td>纽约</td>
</tr>
<tr>
<td>2</td>
<td>刘备</td>
<td>男</td>
<td>18754321348</td>
<td>伦敦</td>
</tr>
<tr>
<td>3</td>
<td>孙权</td>
<td>男</td>
<td>18754321347</td>
<td>莫斯科</td>
</tr>
<tr>
<td>4</td>
<td>高小乐</td>
<td>男</td>
<td>18754321346</td>
<td>新德里</td>
</tr>
</tbody>
<!-- 表格脚 -->
<tfoot></tfoot>
</table>
table
cpation
thead
tr
th/td
tbady
tr
td/th
tfoot
tr
td/th
如果省略：thead、tbody、tfoot、table 直接包裹tr，浏览器会自动添加一个 tbody 包裹所有 tr
3.2 表格整体样式设置
给 table 标签设置如下属性：
width：属性表格总宽度
height：设置表格总高度
border：设置边框的宽度
cellspacing：设置单元格之间的距离
cellpadding：设置单元格边框与里面的文本内容的距离。
3.3 单元格样式设置
① 设置单元格中内容的方式
1. thead、tbody、tfoot、tr、th、td 这些标签可以设置 align 属性，属性的值：left、right、center，该属性可以设置单元格中的内容的水平对齐方式。
2. thead、tbody、tfoot、tr、th、td 这些标签可以设置 valign 属性，属性的值：top、middle、bottom，该属性可以设置单元格的内容的垂直对齐方式。
② 设置单元格宽高
1. 给td/th 设置 width 属性，可以设置所在列的列宽。
2. 给td/th 设置 height 属性，可以设置所在行的行高；tr 也具有 height 属性可以设置行高。
3.4 单元格夸行和夸列（重要）
1. 给 th/td 设置 rowspan 属性，可以设置跨行的行数，默认值是 1 ，可以设置为其他数字。
2. 给 td/th 设置 colspan 属性，可以设置跨越的列数，默认值是 1 。可以设置为其他数字。
3.5 表格标签总结
| 标签名 | 功能和语义 | 属性 | 单双 |
|---|---|---|---|
| table | 表格 | width 表格宽度 height 表格主体高度 border设置表格边框，大小代表粗细 cellspacing 页内边距 cellpadding 内补白 | 双 |
| caption | 表格标题 | 双 | |
| thead | 表头 | valign 垂直设置：top bottom middle align 水平设置 ：center left right | 双 |
| tbody | 表格主体 | valign align | 双 |
| tr | 行 | valign align height | 双 |
| td | 单元格 | valign align width height rowspan 跨行 colspan 跨列 | 双 |
| th | 表头单元格 | align valign width height rowspan colspan | 双 |
4 表单
4.1 表单总体设置
<form action="url" target="_blank">
<input type="text" name="wd">
<button>
提交
</button>
</form>
4.2 表单控件
① 文本输入框
<input type="text"> <br>
<input type="text" maxlength="6"> <!-- maxlenth 可以设置最大可输入长度 -->
<input type="text" value="高小乐...">
<input> <!-- type 的默认值是 text -->
<input type="sb"> <!-- 给 type 设置了不存在的值，相当于 text -->
② 密码输入框
<input type="password">
<input type="password" maxlength="10" value="hello"> <!-- maxlenth 可以设置最大可输入长度 -->
③ 单选框
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="else" checked>其他
1. value 的值才是真正提交到后端的数据.
2. 如果想实现单选效果,必须给多个单选框的name值设置为一致的.
3. 设置checked 属性,可以默认设置选中,改属性不需要值.
④ 复选框
<input type="checkbox" name="hobby" value="1" checked>吃饭
<input type="checkbox" name="hobby" value="2"> 睡觉
<input type="checkbox" name="hobby" value="3"> 发呆
<input type="checkbox" name="hobby" value="4" checked> 敲代码
1.value 的值才是真正提交到后端的数据.
2.设置checked 属性可以默认选中,该属性不需要值.
⑤ 提交按钮
<!-- input 标签实现 value 属性可以设置按钮上的文字-->
<input type="submit">
<input type="submit" value="登录">
<!-- button 标签实现 , button 标签 type 属性的默认值是 submit -->
<button type="submit">免费注册</button>
<button>搜索</button>
⑥ 重置按钮
<!-- input 标签实现 -->
<input type="reset" value="重置">
<!-- button 标签实现 -->
<button type="reset">重置</button>
⑦ 普通按钮
⑦ 普通按钮
<!-- input 标签实现 -->
<input type="button" value="按钮">
<!-- button 标签实现 -->
<button type="button">按钮</button>
⑧ 文本域
<textarea rows="10" cols="60">我是文本域</textarea>
rows 设置行数,实际影响的区域高度.
cols 设置列数,实际影响区域的宽度.
⑨ 下拉选项
<select>
<option value="1">新疆维吾尔自治区</option>
<option value="2">广西壮族自治区</option>
<option value="3" selected>内蒙古自治区</option>
<option value="4">香港特别行政区</option>
</select>
1. option 的value 属性设置的是真正提交的数据,如果没有设置value,会将双标签所包裹的内容提交.
2.option 设置selected 属性可以默认选中.
4.3 表单控件的属性
① name 属性
1. 为该表单控件设置一个标识,提交到后端之后使用.
2. 多个单选框如果要实现单选,需要设置相同的值,编组,意为在此组中选一个.
3.下拉选项的name设置的select的标签.
② value属性
1. 文本输入框 密码输入框可以设置默认输入的内容.
2. 单选框 复选框设置真正提交的数据.
3. input 标签实现的按钮,可以设置按钮上的文字.
4. option 可以设置真正提交的数据
5. select \ textarea 没有value属性.
③disabled 属性
1. 表单控件设置该属性后,变为不可用状态.
2. 该属性不需要设置值.
3. 下拉选项,select 设置 disabled 属性,整个不可用.option 设置 disabled ,只有该选项被禁用.
4.4 label标签的使用
<!-- label 标签可以将描述文字与表单关联。 -->
<!-- for 关联谁？属性值：被关联的id名 关联选项时，不设置 for属性。-->
<!-- 此种形式适合于文本输入框、密码输入框、文本域、下拉选项 -->
<label for="usernameInp">用户名：</label>
<input type="text" id="usernameInp"> <br>
<!--
label 标签将表单控件与文字一起包裹
此种形式，适用于单选框和复选框
-->
<!-- 按钮文字就在按钮里面，无需关联。 -->
性别：
<label>
<input type="radio" name="gender" value="">男生
</label>
<label>
<input type="radio" name="gender" value="">女生
</label>
<label>
<input type="radio" name="gender" value="">保密
</label>
2.2 表单标签总结
| 标签名 | 语义和功能 | 属性 | 单标签和双标签 |
|---|---|---|---|
| form | 表单 | action:提交表单到后台的地址 target：提交后，打开的窗口形式 | 双标签 |
| input | 多种类型的表单控件 | type：类型 value： disabled：失效，禁用 maxlength: 最大长度 checked：默认的控件值 | 单标签 |
| button | 按钮 | type： disabled： | 双标签 |
| textarea | 文本域 | rows：行 cols：列 disabled： | 双标签 |
| select | 下拉选项框 | disabled： | 双标签 |
| option | 下拉选项的选项 | value: selected：默认的下拉表单选项 disabled： | 双标签 |
| label | 关联表单控件 | for： | 双标签 |
1. input 标签的 type 属性的值有 text、password、radio、checkbox、submit、reset、button，默认值是 text
2. button 标签的 type 属性的值有 submit、reset、button，默认值是 submit
