html基础
一：基本格式
HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的。开发中一定要养成良好的编写注释的习惯，注释要求简单明了
[文档：HTML.mindmap]https://note.youdao.com/ynoteshare/index.html?id=d30ed2bb7082b5267abd8fa1c4cb6afa&type=note&_time=1638518614003
关于标签的属性
<html>
<head>
<title>标签的属性</title>
</head>
<body>
<!--
属性：在标签中（开始标签或自结束标签），还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来
-->
<h1>
这是我的<font color="red">第三个</font>网页
</h1>
</body>
</html>标签属性
属性就是特性 比如手机的颜色手机的尺寸,总结就是手机的。。。
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下:
<标签名 属性1="属性值" 属性2="属性值2"...>内容</标签名>
在上面的语法中， 1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。 2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 3.任何标签的属性都有默认值，省略该属性则取默认值。 采取键值对的格式key="value" 的格式
关于网页的基本结构
<!--文档声明，声明当前网页的版本-->
<!doctype html>
<!--html的根标签(元素)，网页中的所有内容都要写根元素的里边
-->
<html>
<!--head是网页的头部，head中 的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页
-->
<head>
<!--meta标签用来设置网页的元数据,这里meta用来设置网页的字符集，避免乱码问题
-->
<mate charsrt="utf-8">
<!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容
-->
<title>网页的标题</title>
</head>
<!--body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里
-->
<body>
<!--h1网页的一级标题-->
<h1>网页的大标题</h1>
</body>
</html>标签之间的关系：嵌套关系，并列关系
实体
<!--
文档类型：<!DOCTYPE> 这句话就是告诉我们使用哪个html版本
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
<!--
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候，我们不能直接书写一些特殊符号
比如:多个连续的空格，比如字母 两侧的大于和小于号
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体(转义字符)
实体的语法：
&实体的名字;
例如： (空格)
> (大于号)
< (小于号)
© (版权符号)
-->
<p>
努力没用要刻苦!
</p>
</body>
</html>mate
语义化标签
（标签的语义化=标签的含义）
html专门负责网页结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
b i s u只有使用没有强调的意思， strong em del ins 语义更强烈
<br />：（单标签），换行标签
<hr />:（单标签），水平线标签
<!--
块元素(block element)
- 在网页中-般通过块元素来对页面进行布局
行内元素(inline element)
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如:
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
--><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化标签</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>列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--列表(list)
1、铅笔
2、尺子
3、橡皮
在html中也可以创建列表，htm1列表一 共有三种:
1、有序列表
2、无序列表
3、定义列表
无序列表，使用ol标签来创建无序列表
使用li表示列表项
无序列表，使用u1标签来创建无序列表
使用li表示列表项
定义列表，使用d1标签来创建-个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套
-->
<ul>
<li>结构</li>
<li>表现</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示。。。。。。。。。</dd>
</dl>
</body>
</html>
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到其他页面，
或者是当前页面的其他的位置
使用a标签来定义超链接
属性：
href指定跳转目标路径
- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
超链接也是一个行内元素，在a标签中可以嵌套除它本身外的任何得元素
-->
<a href="https://www.baidu.com">超链接</a>
<a href="06-list.html">超链接</a>
</body>
</html>相对路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对路径</title>
</head>
<body>
<!--
我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
相对路径都会使用.或..开头
./
../
./可以省略不写，如果不写./也不写../则就相当于写了./
./表示当前文件所在的目录
../表示当前文件所在目录的上一级目录
-->
</body>
</html>跳转特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接补充特点</title>
</head>
<body>
<!--
一：
target属性：用来指定超链接打开的位置
可选值：
_self默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
-->
<a href="06-list.html" target="_self">超链接(self)</a>
<br><br>
<a href="06-list.html" target="_blank">超链接</a>
<br><br>
<a href="#bottom">去底部</a>
<br><br>
<a href="#p3">去第三个自然段</a>
<p>1-1、努力没用要刻苦。2、因为有想要追逐的光，所以即使是迷茫痛苦的时刻，也是幸福的。3、你再低落和沮丧，人生还是会被各种各样的事情改变包围着。就像是站在一台你没办法控制的跑步机上时间速度都不是你能控制的，那我就选择跑得更从容一点更帅一点。尽我所能的在这个被动的人生里，争取一些主动。4、遇见喜欢的就多吃两口，不喜欢就换个口味，别等吃不到的时候后悔。5、想让别人喜欢你：你得先喜欢你自己。想让别人接受你，你得先接受你自己。6、现在不累，以后连累的机会都没有了。7、选定了一条路，就不要想着怎么去放弃它，比起放弃我更讨厌后悔，我不想让自己后悔。8、你要做的就是相信你的好总会有人懂。9、当大家都在期待一场85分的演出的时候，其实，只有做到85分以上才会让人感觉到更加精彩。10、这个世界没有什么是永恒的，可以变坏，当然也能变好。而我们能做的，只有一步一步努力地向前奔跑，并坚信，前方的路一定可以达到。</p>
<p>2-1、努力没用要刻苦。2、因为有想要追逐的光，所以即使是迷茫痛苦的时刻，也是幸福的。3、你再低落和沮丧，人生还是会被各种各样的事情改变包围着。就像是站在一台你没办法控制的跑步机上时间速度都不是你能控制的，那我就选择跑得更从容一点更帅一点。尽我所能的在这个被动的人生里，争取一些主动。4、遇见喜欢的就多吃两口，不喜欢就换个口味，别等吃不到的时候后悔。5、想让别人喜欢你：你得先喜欢你自己。想让别人接受你，你得先接受你自己。6、现在不累，以后连累的机会都没有了。7、选定了一条路，就不要想着怎么去放弃它，比起放弃我更讨厌后悔，我不想让自己后悔。8、你要做的就是相信你的好总会有人懂。9、当大家都在期待一场85分的演出的时候，其实，只有做到85分以上才会让人感觉到更加精彩。10、这个世界没有什么是永恒的，可以变坏，当然也能变好。而我们能做的，只有一步一步努力地向前奔跑，并坚信，前方的路一定可以达到。</p>
<p id="p3">3-1、努力没用要刻苦。2、因为有想要追逐的光，所以即使是迷茫痛苦的时刻，也是幸福的。3、你再低落和沮丧，人生还是会被各种各样的事情改变包围着。就像是站在一台你没办法控制的跑步机上时间速度都不是你能控制的，那我就选择跑得更从容一点更帅一点。尽我所能的在这个被动的人生里，争取一些主动。4、遇见喜欢的就多吃两口，不喜欢就换个口味，别等吃不到的时候后悔。5、想让别人喜欢你：你得先喜欢你自己。想让别人接受你，你得先接受你自己。6、现在不累，以后连累的机会都没有了。7、选定了一条路，就不要想着怎么去放弃它，比起放弃我更讨厌后悔，我不想让自己后悔。8、你要做的就是相信你的好总会有人懂。9、当大家都在期待一场85分的演出的时候，其实，只有做到85分以上才会让人感觉到更加精彩。10、这个世界没有什么是永恒的，可以变坏，当然也能变好。而我们能做的，只有一步一步努力地向前奔跑，并坚信，前方的路一定可以达到。</p>
<p>4-1、努力没用要刻苦。2、因为有想要追逐的光，所以即使是迷茫痛苦的时刻，也是幸福的。3、你再低落和沮丧，人生还是会被各种各样的事情改变包围着。就像是站在一台你没办法控制的跑步机上时间速度都不是你能控制的，那我就选择跑得更从容一点更帅一点。尽我所能的在这个被动的人生里，争取一些主动。4、遇见喜欢的就多吃两口，不喜欢就换个口味，别等吃不到的时候后悔。5、想让别人喜欢你：你得先喜欢你自己。想让别人接受你，你得先接受你自己。6、现在不累，以后连累的机会都没有了。7、选定了一条路，就不要想着怎么去放弃它，比起放弃我更讨厌后悔，我不想让自己后悔。8、你要做的就是相信你的好总会有人懂。9、当大家都在期待一场85分的演出的时候，其实，只有做到85分以上才会让人感觉到更加精彩。10、这个世界没有什么是永恒的，可以变坏，当然也能变好。而我们能做的，只有一步一步努力地向前奔跑，并坚信，前方的路一定可以达到。</p>
<p>5-1、努力没用要刻苦。2、因为有想要追逐的光，所以即使是迷茫痛苦的时刻，也是幸福的。3、你再低落和沮丧，人生还是会被各种各样的事情改变包围着。就像是站在一台你没办法控制的跑步机上时间速度都不是你能控制的，那我就选择跑得更从容一点更帅一点。尽我所能的在这个被动的人生里，争取一些主动。4、遇见喜欢的就多吃两口，不喜欢就换个口味，别等吃不到的时候后悔。5、想让别人喜欢你：你得先喜欢你自己。想让别人接受你，你得先接受你自己。6、现在不累，以后连累的机会都没有了。7、选定了一条路，就不要想着怎么去放弃它，比起放弃我更讨厌后悔，我不想让自己后悔。8、你要做的就是相信你的好总会有人懂。9、当大家都在期待一场85分的演出的时候，其实，只有做到85分以上才会让人感觉到更加精彩。10、这个世界没有什么是永恒的，可以变坏，当然也能变好。而我们能做的，只有一步一步努力地向前奔跑，并坚信，前方的路一定可以达到。</p>
<p>6-1、努力没用要刻苦。2、因为有想要追逐的光，所以即使是迷茫痛苦的时刻，也是幸福的。3、你再低落和沮丧，人生还是会被各种各样的事情改变包围着。就像是站在一台你没办法控制的跑步机上时间速度都不是你能控制的，那我就选择跑得更从容一点更帅一点。尽我所能的在这个被动的人生里，争取一些主动。4、遇见喜欢的就多吃两口，不喜欢就换个口味，别等吃不到的时候后悔。5、想让别人喜欢你：你得先喜欢你自己。想让别人接受你，你得先接受你自己。6、现在不累，以后连累的机会都没有了。7、选定了一条路，就不要想着怎么去放弃它，比起放弃我更讨厌后悔，我不想让自己后悔。8、你要做的就是相信你的好总会有人懂。9、当大家都在期待一场85分的演出的时候，其实，只有做到85分以上才会让人感觉到更加精彩。10、这个世界没有什么是永恒的，可以变坏，当然也能变好。而我们能做的，只有一步一步努力地向前奔跑，并坚信，前方的路一定可以达到。</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos nostrum iste consectetur debitis, alias, explicabo ea repellendus quibusdam itaque impedit iusto eligendi expedita distinctio quisquam? Nostrum odio optio maiores suscipit.</p>
<br></br>
<!--在开发中可以将#作为超链接的路径的占位符使用（创建了一个超链接，但是还没想好让其跳转到什么位置，不给属性又不是超链接）-->
<a href="#">这是一个新的超链接（还没有指定跳转方向）</a>
<!--
- 但是你会发现上面那种方式，因为使用#占位符，所以，计是将其作为占位符使用，它仍然会有回到顶部的作用
- 而我们需要的使创建一个完全没有作用的超链接
可以使用 javascript:; 来作为href的属性，此时点击这个超链接时什么也不会发生
-->
<br><br>
<a href="javascript:;">这是一个没有作用的新的超链接</a>
<!--
二：
可以将超链接的属性设置为#，这样点击超链接以后
页面不会发生跳转，而是转到当前页面顶部的位置
可以跳转到页面的指定位置，只需将href属性设置为 #目标元素的id属性值
id属性（唯一不重复的）
- 每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识，同一个页面中不能出现同一个id属性
-->
<br><br>
<a id="bottom" href="#">回到顶部</a>
<br><br>
</body>
</html><a href="跳转目标" target="目标窗口弹出的方式" id="">
引入
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<!--
图片标签用于想当前页面引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（介于块元素和行内元素之间,具有两中元素的特点）
属性：
- src属性指定的是外部图片的路径（路径规则和超链接是一样的）
- alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
- title 鼠标悬停时显示的内容
- width图片的宽度(单位是像素)
- height图片的高度
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放
border 设置图像边框的宽度
注意:
一般情况在pc端， 不建议修改图片 的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放(一般情况下进行大图缩小)
图片的格式:
jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片(专为网页而生)
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一-种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- 缺点:兼容性不好
base64
- 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的
效果不一样，用效果好的
-->
<img width="500" src="./image/1.jpg"><br />
<img width="500" src="./image/1pk.jpg" alt="这是一张好看的图片"><br />
<img width="500" src="./image/1.jpg" title="这是刘耀文"><br />
<img width="500" src="./image/1.jpg" ><br />
</body>
</html>内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联框架</title>
</head>
<body>
<!--
内联框架，用于向当前网页中引入一个其他页面
src 指定药引入的网页的路径
frameborder 指定内联框架的边框
-->
<iframe src="https://www.weibo.com" width="800" height="600" frameborder="0"></iframe>
</body>
</html>多媒体标签
-
embed，标签定义嵌入的内容
-
audio，播放音频
-
video，播放视频
多媒体embed（会使用）
embed可以用来插入各种多媒体，格式可以是Midi、WaV、AIFF、 AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。 因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解audio和video视频多媒体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多媒体</title>
</head>
<body>
<iframe src="//player.bilibili.com/player.html?aid=676212624&bvid=BV1RU4y1F7Ky&cid=427814283&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<!--
图片标签用于想当前页面引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（介于块元素和行内元素之间,具有两中元素的特点）
属性：
- src属性指定的是外部图片的路径（路径规则和超链接是一样的）
- alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
- title 鼠标悬停时显示的内容
- width图片的宽度(单位是像素)
- height图片的高度
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放
border 设置图像边框的宽度
注意:
一般情况在pc端， 不建议修改图片 的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放(一般情况下进行大图缩小)
图片的格式:
jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片(专为网页而生)
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一-种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- 缺点:兼容性不好
base64
- 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的
效果不一样，用效果好的
-->
<img width="500" src="./image/1.jpg"><br />
<img width="500" src="./image/1pk.jpg" alt="这是一张好看的图片"><br />
<img width="500" src="./image/1.jpg" title="这是刘耀文"><br />
<img width="500" src="./image/1.jpg" ><br />
</body>
</html>音视频引入标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音视频导入</title>
</head>
<body>
<!--
audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
controls 是否允许客户控制播放
autoplay 音频文件是否自动播放
- 如果设置了altoplay则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop音乐是否循环播放
-->
<!-- <audio src="./source/PIggy小著 - 不喜欢下雨天.mp3" controls autoplay loop ></audio> -->
<!-- <audio src="./source/七爷 - 好久不见 (热播版_remix_ 陆政廷Lil Jet_Remix).mp3" controls></audio> -->
<!--
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径
-->
<!-- <audio controls>
对不起，您的浏览器不支持播放音频，请升级播放器
<source src="./source/七爷 - 好久不见 (热播版_remix_ 陆政廷Lil Jet_Remix).mp3">
embed 作用主要是让不兼容的浏览器也能支持播放音视频
<embed src="./source/PIggy小著 - 不喜欢下雨天.mp3" type="audio/mp3" width="300" height="500">
</audio> -->
<!--
使用video标签来向网页中引入一个视频文件
-->
<video controls>
<source src="./source/y2.mp4">
<embed src="./source/刘耀文.mp4" type="vidio/mp4">
</video>
</body>
</html>
表格
合并单元格(难点)
跨行合并: rowspan 跨列合并: colspan 合并单元格的思想:
-
将多个内容合并的时候，就会有多余的东西，把它删除。例如 把3个td合并成- -个，那就多余了2个， 需要删除。
-
公式: 删除的个数 =合并的个数- 1
-
合并的顺序先上，先左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<!--
1. table用于定义一-个表格。
2.tr用于定义表格中的- -行，必须嵌套在table标签中，在table中包含几对tr, 就有几行表格。
3.td /td: 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对<tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。
-->
<table width="500" height="300" border="1">
<tr>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
</tr>
<tr> <td>一</td>
<td>二</td>
<td>三</td>
<td>四</td></tr>
<tr> <td>一</td>
<td>二</td>
<td>三</td>
<td>四</td></tr>
</table>
<!--
表头标签：<th></th> 用th标签替代相应的单元格标签td即可
-->
<!--表格标题标签 caption，放在table中-->
</body>
</html>
表单
label标签的使用：
label标签为input元素定义标注(标签)。 作用:用于绑定一 个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点
1.用lalbe直接进行包裹input就可以了 2.如果label里面有多个表单，想定位到某个可以通过for id的格式来进行
文本域
textarea标签
下拉菜单
1.</select>中至少应包含一对 <option></option>。
2.在option中定义selected =" selected "时，当前项即为默认选中项。
表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建单的基本语法格式如下:
<from action="地址" method="提交方式" name="表单名称">
各种表单控件
<!--
常用属性:
1. Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性 用于指定接收并处理表单数据的服务器程序的ur|地址。
2. method
用于设置表单数据的提交方式，其取值为get或posto
3. name
用于指定表单的名称，以区分同一个页面中的多个表单。
注意:每个表单都应该有自 己表单域。
-->
</from>练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="" method="post" name="userMessage">
<label>姓 名：<input type="text"><br /></label>
<label>密 码：<input type="password"><br /></label>
<label>性 别：<input type="radio" name="sex">女
<input type="radio" name="sex">男
<input type="radio" name="sex">人妖</label>
<br />
<label>爱 好: <input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">跳舞
<input type="checkbox" name="hobby">打篮球
<input type="checkbox" name="hobby">追星</label>
<br />
住 址：<select name="省份">
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="重庆">重庆</option>
<option value="四川">四川</option>
</select><br />
自我描述：<br />
<textarea name="自我描述" id="" cols="30" rows="10"></textarea><br />
提交<input type="submit" value="提交"><br />
重置<input type="reset" value="重置"><br />
图片形式提交<input type="image" src="image/2.jpg" width="100"><br />
添加文件<input type="file" value="选择文件"><br />
</form>
</body>
</html>新语义标签
w3c手册中文官网: w3school 在线教程
●header: 定义文档的页眉头部
●nav:定义导航链接的部分
●footer: 定义文档或节的页脚底部
●article: 定义文章。
●section: 定义文档中的节(section、 区段)
●aside: 定义其所处内容之外的内容侧边
●datalist 标签定义选预列表。请与input元素配合使用该元素
●fieldset 元素可将表单内的相关元素分组，打包
datalist 标签
fieldset标签 将表单内相关元素进行分组打包，通常和legend联合使用legend放在fieldset中,legend表示组合表单的标题
[HTML新的输入属性] HTML5 新元素
autocomplete标签
-
首先需要提交按钮
-
该表单需要一个name
综合案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例</title>
</head>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label>姓 名：<input type="text" placeholder="请输入学生名字"/></label><br><br>
出生日期：<input type="date"><br><br>
<label>手机号：<input type="tel"></label><br><br>
<label>邮 箱：<input type="email"></label><br><br>
所属学院：<input type="text" placeholder="请选择学院" list="xueyuan">
<datalist id="xueyuan">
<option>java学院</option>
<option>C++学院</option>
<option>python学院</option>
<option>前端学院</option>
<option>php学院</option>
</datalist><br><br>
<label>成 绩：<input type="number"></label><br><br>
<!--提交按钮-->
<input type="submit">
<!--重置按钮-->
<input type="reset">
</fieldset>
</form>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
