这里推荐两个对新手比较友好的学习网站
w3school: w3school链接
菜鸟教程： 菜鸟教程链接
当然还有各种各样强大的学习网站和资源，对于目前学html来说，这两个网站已经足够了。
1.标题创建标准html文档
- css样式分类
内联css样式（优先级two）：
<style type="text/css">
书写css代码）
</style>
外联css样式（优先级three）：
<link rel="stylesheet" type="text/css" href="css文件位置"/>
行内css样式（优先级one）：
<p style="color: red;">文档</p>
link:引入外部文件
rel ：定义当前文档与被链接文档间的关系
type：定义被链接文档的mime类型
href：定义被链接文档的路径
关键字和描述：
关键字和描述不是给人看，是用于供搜索引擎使用。关键字和描述是网页优化很重要的部分
关键字：name=“keywords”
content=“要设置的关键字，可以使用多个，建议不超过5个。多个关键字用英文状态的“,”分隔。”
描述设置： meta标签
name=“description”
content=“要设置的描述内容，建议不超过100字”
2.基本标签的使用
标签的分类：分为单标签和双标签
如 < img />就是单标签 只有开始标签，结束符号“/” 是在自身当中
如 p 标签就是双标签 成双成对的出现 <p> </p>
网页自动跳转：
//自动刷新
<meta http-equiv="refresh" content="多少秒后执行跳转"/>
//多少秒之后自动跳转
<meta http-equiv="refresh" content="多少秒后执行跳转;url=要跳转的地址"/>
//5秒后跳转到我要自学网
<meta http-equiv="refresh" content="5;url=https://www.51zxw.net"/>
超链接（点击跳转）：
超链接的4种状态
未被访问的链接，link状态：文字为蓝色，有下划线
已被访问的链接，visited状态：文字为紫色，有下划线
鼠标移动到链接上的状态，hover状态：有下划线,鼠标变手形
正在点击的状态，activer状态：文字红色，有下划线
重置a标签的默认样式5种方式
a标签的基本使用：（href可以放置网址也可以放置自己的html文件地址）
a元素为：行级元素
a {
text-decoration: none;
}
/*正常的未被访问过的链接*/
a:link {
text-decoration: none;
}
/*已经访问过的链接*/
<a href="https://www.baidu.com" target="_blank">百度</a>
a:visited {
text-decoration: none;
}
/*鼠标划过(停留)的链接*/
a:hover {
text-decoration: none;
}
/* 正在点击的链接，鼠标在元素上按下还没有松开*/
a:active {
text-decoration: none;
}
/* 获得焦点的时候 鼠标松开时显示的颜色*/
a:focus {
text-decoration: none;
}
a元素属性：
href:要链接的地址
target:指定在哪里打开目标页面
_blank：在新窗口中打开目标页面
_self: 在当前窗口中打开目标页面（默认值）
_parent 把文档载入父窗口或包含了超链接引用的框架的框架集
_top 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架
id和class详解
特殊属性：元素特有的属性（id）
1.是元素唯一标识（就如每个人的身份证号码一样）
2.同一个页面中不能有相同的id
3.同一页面中，不同元素有相同id也不行
标准属性：几乎所有元素都可以拥有的属性（class）
1.相同的元素，不同的元素可以有相同的类名
2.同一个元素可以有多个类名，用空格隔开 class=“name1 name2”
3.主要用来选择一堆元素，定义样式
4.规定类名时，类名不能以数字开头
title属性：
1.规定元素的额外信息
2.鼠标移到元素上时显示提示文字
style属性：
1.规定元素的行内样式
2.style设置的样式会覆盖其它方式设置的样式
3.可以设置多个属性值，用";"隔开
自定义属性：几乎所有标签都可以有的属性
1.自己定义属性名，属性值
2.定义属性用得不多
1.用于存储页面或应用程序的私有自定义数据
2.data-属性包括两部分：
a.""表示自定义的属性名，在data-之后必须包含至少一个字符
b.属性值可以是任何字符串
3.在微信小程序中用得多
如：data-togle=“className”
文件下载：
<a href="文件路径" download="设置文件名称">文件下载</a>
href属性：指定文件下载路径
download属性：指定下载文件名称
不添加download属性时：浏览器不能识别文件，可以直接下载。如果浏览器能识别文件，会直接显示
添加download属性时：不管浏览器是否可以识别文件，都会直接下载
3.图像音频以及音频的使用
img标签
网页中引入图片：使用img标签
src属性：
1.用来指定图片文件所在的路径，必须要有
2.图片路径可以是相对路径，也可以是绝对路径
…/表示上级路径
alt属性：
1.图片无法正常显示时替换文本，可以使用中文，也可以使用英文
2.路径不对，网速过慢，浏览器版本过低，图片格式不对…
3.<img src="图片路径" alt="替换文本" />
width属性和height属性：
1.width属性：设置图片宽度，height属性：设置图片高度
2.不设置，图片会按原始尺寸显示
3.如果只设置1个属性，另一个会根据已设置的属性等比例缩放
4.如果2个属性都设置，可能会变形
5.默认单位为像素，也可以使用百分比(使用100%时，会撑满父元素的宽度，并且会随着浏览器缩放而变化)
5.border:设置图片的边框宽度
像素：
1.指设备屏幕上的一个点，单位px
2.当屏幕分辨率固定时，像素就是一个固定的值，精确的值
3.同样大小的屏幕，像素点越多，图像越清晰，画面越细腻。
4.像素是网页开发中使用最多的尺寸单位
图片类型详解：
jpg/jpeg 格式:
1.色彩丰富，压缩比高，画质损失小，体积小
2.不支持透明度，不支持动画
3.适用于色彩丰富,要求体积小的场景
png格式:
1.色彩丰富，压缩比高，体积小，比jpg大
2.支持任意透明度，不支持动画
3.适用于色彩丰富,需要透明度的场景
gif格式:
1.仅支持256种颜色，画质损失大，体积最小
2.支持完全透明度，支持动画
3.适用于要求动画，有透明，图片颜色少的场景
audio:在网页中引入音频
属性名和属性值一样，可以只写属性名
src属性:指定音频文件路径，必须要有
controls属性：显示播放控件,
autoplay属性：音频在就绪后马上播放
loop属性：音频播放结束后重新开始
muted属性：音频输出应该被静音
preload属性：页面加载时就开始加载音频，并预备播放.如果使用了“autoplay”属性，preload属性不会生效
<audio src="音频文件位置.音频文件类型" controls autoplay></audio>
video:在网页中引入音频
IE8以及之前版本不支持
属性名和属性值一样，可以只写属性名
src属性:指定视频文件路径，必须要有
controls属性：显示播放控件,
autoplay属性：视频在就绪后马上播放
loop属性：视频播放结束后重新开始
muted属性：视频输出应该被静音
preload属性：页面加载时就开始加载视频，并预备播放.如果使用了“autoplay”属性，preload属性不会生效
width属性和height属性：
1.width属性：设置视频窗口宽度，height属性：设置视频窗口高度
2.不设置，视频窗口会按原始尺寸显示
3.如果只设置1个属性，另一个会根据已设置的属性等比例缩放
4.如果2个属性都设置，可能会变形
5.默认单位为像素，也可以使用百分比
poster属性：用于在视频加载时或用户在点击播放前显示的图片,属性值是图片路径
代码实例：<video src="v/wdzg.mp4" poster="img/logo.png" width="600" height="400" controls loop muted preload > 您的浏览器不支持video </video>
source标签用来为和定义媒介资源
src属性：定义资源路径
type属性：规定媒介资源的类型
浏览器会自动从上往下找能识别的资源类型然后进行播放
<video width="400" controls >
<source src="v/movie.ogg" type="video/ogg"></source>
<source src="v/wdzg.mp4" type="video/mp4"></source>
当前浏览器不支持 video直接播放
</video>
4.文本内容标签
h1~h6标签
h1-h6标签可以用来定义标题
标题标签有强调作用，有确切的语言义，h1-h6重要性递减
h1定义最大的标题，h6定义最小的标题
h1标签在同一个页面只能使用一次,h2-h6可以多次使用
标题标签会独占一行
建议：不要利用h标签来改变文字大小，使用css更方便，更美观
h1~h6标签效果展示：
p标签：
浏览器会忽略代码中的格式，多个空格符，回车符，制表符，会解析成一个空格（非常重要）
p标签用来标记一个段落，是常见的一个标记
p标签是块级元素： 会独占一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p元素</title>
<style type="text/css">
h1{
text-align: center;
}
p{
text-indent: 2em;
}
</style>
</head>
<body>
<h1>桃花源记</h1>
<p>晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷，渔人甚异之，复前行，欲穷其林。</p>
<p>林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田美池桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。</p>
<p>见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云：“不足为外人道也。”</p>
<p>既出，得其船，便扶向路，处处志之。及郡下，诣太守，说如此。太守即遣人随其往，寻向所志，遂迷，不复得路。</p>
<p>南阳刘子骥，高尚士也，闻之，欣然规往。未果，寻病终，后遂无问津者。</p>
</body>
</html>
斜体标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>斜体标签</title>
</head>
<body>
<!--i标签：单纯显示斜体文本效果-->
<i>i斜体标签</i>
<!--em标签：
1.显示斜体文本效果
2.有强调作用
-->
<em>斜体标签</em>
<!--强调需要技巧，强调太多，有些重要语句会被漏掉，不要滥用强调
如果仅需要单纯的斜体，请使用i标签，而不要使用em标签-->
</body>
</html>
粗体标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>粗体标签</title>
<style type="text/css">
</style>
</head>
<body>
<!--b标签：单纯显示加粗文本效果-->
<b>b标签加粗效果</b>
<!--strong标签：
1.显示加粗文本效果
2.有强调作用,比em标签的强调作用更强
-->
<strong>strong标签加粗效果</strong>
<!--强调需要技巧，强调太多，有些重要语句会被漏掉，不要滥用强调
如果仅需要单纯的粗体，请使用b标签，而不要使用strong标签-->
</body>
</html>
换行标签br（单标签）
1.在不另起一段的情况下进行强制换行。
2.一个br标签表示1次换行 ，连续多个标签可以实现多次换行。
3.br标签不仅可以对文本换行，其它元素也可以使用br标签进行强制换行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>换行</title>
</head>
<body>
<p>君不见黄河之水天上来</p>
<br>
<p>奔流到海不复回</p>
</body>
</html>
水平分隔线标签hr
1.在视觉上将文档分隔成几个部分，使得文档结构清晰，层次分明
2.hr标签可以在网页上画出一条水平分隔线
3.hr标签的所有属性都不赞成使用，不要试图使用属性改变标签的样式
4.应该使用css来修改hr标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平分隔线</title>
<style type="text/css">
</style>
</head>
<body>
<h2>登高</h2>
<h5>杜甫</h5>
<p>风急天高猿啸哀，渚清沙白鸟飞回。</p>
<p>无边落木萧萧下，不尽长江滚滚来。</p>
<p>万里悲秋常作客，百年多病独登台。</p>
<p>艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
<hr /> <!-- 此处就是水平分割线 -->
<h2>登高</h2>
<h5>杜甫</h5>
<p>风急天高猿啸哀，渚清沙白鸟飞回。</p>
<p>无边落木萧萧下，不尽长江滚滚来。</p>
<p>万里悲秋常作客，百年多病独登台。</p>
<p>艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>。
</body>
</html>
span标签
span标签的使用非常灵活，到后面学css和一些框架之后可以用于装一些字体或者图标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>span标签和字符实体</title>
<style type="text/css">
.font{
color: red;
}
</style>
</head>
<body>
<!--span标签：
1.没有任何样式，是为了给文本增加额外的结构
2.使用css给span元素中的内容添加丰富的样式
3.span标签是使用最多的文本标签-->
<!--字符实体：
html中预留字符必须替换成字符实体，才能被浏览器正常识别
常见的字符实体：
小于号：<
大于号：>
空格：
-->
<<书名>> 文字开始内容 文字结束内容
<br> <br>
<span class="font">
添加样式的span标签
</span>
<br> <br>
<span >
无样式的span标签
</span>
</body>
</html>
其他文本标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>其它文本标签</title>
</head>
<body>
<!--ins标签：定义下划线-->
<!--del标签：定义删除线-->
<!--sup标签：定义上标文本，高度为当前文本的一半-->
<!--sub标签：定义下标文本，高度为当前文本的一半-->
<!--mark标签：为文本添加黄色背景，突出显示文本-->
<!--以上标签仅作了解，基本不用，css可以很好实行相应的功能-->
<ins>文档内容1</ins>
<br />
<del>文档内容2</del>
<br />
X<sup>2</sup>
<br />
X<sub>2</sub>
<br />
<mark>文档内容3</mark>
® ™ ©
</body>
</html>
5.列表与表格
无序列表：ul li
样式相同的一组元素，可以称为列表
1.列表中各个元素在逻辑上没有先后顺序，没有级别之分
2.无序列表中，列表项之间属于并列关系，ul和li都属于块级元素
3.无序列表里的li可以根据自己的需求增加，个数无限制
无序列表语法：
<ul>无序列表开始
<li></li>每一个列表项
</ul>无序列表结束
<ul >
<li>无序列表元素1</li>
<li>无序列表元素2</li>
<li>无序列表元素3</li>
</ul>
有序列表
1.列表中各个元素在逻辑上有先后顺序
2.有序列表中，列表项之间属于并列关系
3.有序列表里的li可以根据自己的需求增加，个数无限制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<!--有序列表语法：-->
<!--<ol>有序列表开始-->
<!--<li></li>每一个列表项-->
<!--</ol>有序列表结束-->
<!--4.有序列表中的列表项默认以数字开头，可以用"type"属性修改-->
<!--5.type属性：数字：1 小写英文：a 大写英文：A 小写罗马：i 大写罗马：I-->
<!--6.不赞成使用type属性修改，可以使用css代替-->
<!--7.有序列表基本用不上-->
<ol type="1">
<li>有序列表元素1</li>
<li>有序列表元素2</li>
<li>有序列表元素3</li>
<li>有序列表元素4</li>
</ol>
<ol type="I">
<li>有序列表元素1</li>
<li>有序列表元素2</li>
<li>有序列表元素3</li>
<li>有序列表元素4</li>
</ol>
<ol style="list-style-type: upper-alpha;">
<li>有序列表元素1</li>
<li>有序列表元素2</li>
<li>有序列表元素3</li>
<li>有序列表元素4</li>
</ol>
</body>
</html>
自定义列表
1.自定义列表是两个层次的列表，由三种标签构成<dl> <dt <dd>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<!--基本语法：-->
<!--a.<dl></dl>标签表示自定义列表的开始和结束-->
<!--<dt></dt>标签表示列表标题的开始和结束-->
<!--<dd></dd>标签表示每个列表项-->
<!--3.<dd>标记定义的列表项会向右缩进-->
<!--4.自定义列表可以实现在一个列表中进行多个分组-->
<!--自定义列表用得不多-->
<dl>
<dt>前端</dt>
<dd>html</dd>
<dd>css3</dd>
<dd>JavaScript</dd>
<dt>后端</dt>
<dd>java</dd>
<dd>mysql</dd>
<dd>linux</dd>
</dl>
</body>
</html>
表格的使用：
表格的基本结构
table标签的常用属性
属性名 功能
border 给表格设置边框 单位是像素 取值：0~n
width 给表格设置宽度 取值：固定值和百分比
height 给表格设置高度 一般不用 因为表格的高度一般是由其内容来决定的
background 给表格设置背景图片 可以使用相对路径和绝对路径
bgcolor 给表格设置背景颜色
align 给表格设置水平方向的对齐方式
取值： left(居左对齐 默认值)
center 居中对齐
right 居右对齐
cellpadding 表格中单元格中的内容到边框的距离 内填充
cellspacing 表格中单元格与单元格之间的距离 外边距
tr标签的属性
属性名 功能
align 用来设置行里面的内容水平方向对齐方式
left 默认值 居左对齐
center 居中对齐
right 居右对齐
valign 用来设置行里面的内容垂直对齐方式
top 顶部对齐
middle 居中对齐 默认值
bottom 底部对齐
bgcolor 给行设置背景颜色
height 给行设置高度
td标签的属性
属性名 功能
align 用来设置单元格里面的内容水平方向对齐方式
left 默认值 居左对齐
center 居中对齐
right 居右对齐
valign 用来设置单元格里面的内容垂直对齐方式
top 顶部对齐
middle 居中对齐 默认值
bottom 底部对齐
bgcolor 给单元格设置背景颜色
height 给单元格设置高度
width 给单元格设置宽度
rowspan 跨行合并单元格
colspan 跨列合并单元格
基本表格的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--table标签用来定义表格-->
<!--tr标签表示表格中的一行-->
<!--th标签表示表头单元格-->
<!--th中的文本会加粗，文本会居中-->
<!-- caption:表格的标题 -->
<!--td标签表示一个单元格-->
<!--td中的文本是左对齐的普通文本-->
<table border="2">
<caption align="center">表格标题</caption>
<tr>
<th>表头第1格</th>
<th>表头第2格</th>
<th>表头第3格</th>
<th>表头第4格</th>
<th>表头第5格</th>
</tr>
<tr>
<td>第2行第1格</td>
<td>第2行第2格</td>
<td>第2行第3格</td>
<td>第2行第4格</td>
<td>第2行第5格</td>
</tr>
<tr>
<td>第3行第1格</td>
<td>第3行第2格</td>
<td>第3行第3格</td>
<td>第3行第4格</td>
<td>第3行第5格</td>
</tr>
</table>
</body>
</html>
单元格合并注意事项：
1 . 一定要明白我们是跨列合并还是跨行合并
2 . 要明确的知道在哪一个单元格中书写合并单元格的属性
3 . 要明确的知道要合并多少个单元格 合并多少个单元格 那么就是多少
4 . 合并后要删除对应的单元格 n-1
单元格的合并
合并单元格：
1.在代码中找到要合并的单元格
2.保留要合并的第一个单元格，删除其它的单元格
3.给保留的单元格指定横跨的行数或列数
a.合并左右单元格（合并列）用：colspan=“横跨的列数”;
b.合并上下单元格（合并行）用：rowspan=“横跨的行数”;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<th>表头第1格</th>
<th>表头第2格</th>
<th>表头第3格</th>
<th>表头第4格</th>
<th>表头第5格</th>
</tr>
<tr>
<td colspan="2">第2行第1格</td>
<td>第2行第3格</td>
<td rowspan="2">第2行第4格</td>
<td>第2行第5格</td>
</tr>
<tr>
<td>第3行第1格</td>
<td>第3行第2格</td>
<td>第3行第3格</td>
<td>第3行第5格</td>
</tr>
<tr>
<td>第4行第1格</td>
<td rowspan="2" colspan="2">第4行第2格</td>
<td>第4行第4格</td>
<td>第4行第5格</td>
</tr>
<tr>
<td>第5行第1格</td>
<td>第5行第4格</td>
<td>第5行第5格</td>
</tr>
</table>
</body>
</html>
6.布局元素
元素的类型：
1.块级元素：
独占一行，不和其它元素呆在一起
2.可以设置宽高
3.用来网页进行布局，承载内容
2.行级元素
a.不会独占一行，可以和其它元素呆在一行
b.不可以设置宽高,宽高由里面的内容决定
3 . 行内块级元素
a.不会独占一行，可以和其它元素呆在一行
b.可以设置宽高
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素的类型</title>
</head>
<body>
<!--元素类型可以相互转换，css中学习-->
<h1 style="width: 205px;height: 150px; background: aqua;">块级元素</h1>
<b style="width: 250px;height: 150px; background: aqua;">行级元素</b>
<span style="width: 250px;height: 150px; background: aqua;">行级元素2</span>
<p style="width: 200px;height: 150px; background: aqua;">块级元素</p>
<!-- 行内块级元素 -->
<img src="https://www.runoob.com/wp-content/uploads/2013/07/pic_html5.gif" style="width: 400px;"/>
<img src="https://www.runoob.com/wp-content/uploads/2013/07/pic_html5.gif"/>
</body>
</html>
div标签
div标签定义文档中的区块，可以把文档分割为独立的，不同的部分
div标签可以嵌套任何元素，包括div自己
div是用来承载内容，相当于一个容器。没有其它任何样式
是使用最广泛的布局元素，所有浏览器都支持div标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div标签</title>
</head>
<body>
<div style="width: 200px; height: 200px; background-color: red; margin: 0 auto;">
外层div
<div style="width: 100px;height: 100px; background-color: #7FFF00;margin: 0 auto;">
里层div
</div>
</div>
</body>
</html>
header和footer标签
header:定义文档的页眉，通常用来定义可见内容的头部
footer:定义文档的页脚，通常用来定义可见内容的尾部
header和footer标签只是div标签的变种，功能和div标签一样
header和footer标签有很强的语义,使得网页结构更清晰
IE8以及更早的版本不支持header和footer标签
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>header和footer标签</title>
</head>
<body>
<header></header>
<div class="content">内容部分</div>
<footer></footer>
</body>
</html>
nav和aside标签
nav和aside标签:是html5中新标签
nav:定义导航栏
aside:定义侧边栏
nav和aside标签只是div标签的变种，功能和div标签一样
nav和aside标签有很强的语义,使得网页结构更清晰
IE8以及更早的版本不支持nav和aside标签
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nav和aside标签</title>
</head>
<body>
<header>网页头部</header>
<div class="content">
主体内容
<nav>导航栏盒子</nav>
<aside>侧边栏</aside>
</div>
<footer>网页尾部</footer>
</body>
</html>
section和article标签
section和article标签:是html5中新标签
section:对页面上的内容进行分块，通常由内容及其标题组成
article:定义独立的，完整的，可以独自被外部引用的内容
section和article标签只是div标签的变种，功能和div标签一样
section和article标签有很强的语义
section和article标签对于初学者不建议使用
IE8以及更早的版本不支持section和article
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>section和article标签</title>
</head>
<body>
<header></header>
<div class="content">
<section></section>
<article></article>
</div>
<footer></footer>
</body>
</html>
7.表单元素
form元素属性
form标签用于创建一个表单，会将里面的内容一起发送服务器，结构类似于表格
表单中的其它元素都要包含在form标签中
form元素属性：
1.必须，action指定表单发送的地址（服务器地址）
2.method:表单数据发送至服务器的方法，常用的有两种：get/post,默认：get
3.name:用来为当前表彰定义一个独一无二的名称，控制表单与后台程序之间的关系
4.novalidate:设置数据提交时不进行验证,通常不会用到
5.target:设置目标窗口打开方式,通常不会用到
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form元素属性</title>
</head>
<body>
<form action="" method="get" name="51zxw" >
<input type="text" name="myname" id="uname" value="请输入..." />
<input type="submit" value="发送" />
</form>
</body>
</html>
get/post提交方式的区别
get/post区别
get方法提交：提交的数据会附在网址之后提交给服务器，不安全.数据量很小
post方法提交：提交的数据不会附在网址之后，会将表单中的所有数据进行打包发送服务器，等待服务器读取。安全过程。数据量不受限制。 是使用最多的提交方法.
type和name属性
1.input元素是最常用的表单控件
2.input元素可以在表单之外使用
input元素的type属性：(必须要有)
1.指定输入内容的类型
2.默认为text,单行文本框–>
input元素的name属性：(必须要有)
1.传递参数时的参数名称
2.表单接收找的就是name属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>type和name属性</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="Theogin"/> -->
<input type="submit" />
</form>
</body>
</html>
input元素中的placeholder和value
input元素的value属性：
1.输入框中的默认值
2.value值会发送到服务器
input元素的placeholder属性：
1.输入框中的默认值,当文本框获得焦点时被清空
2.placeholder中的值不会发送到服务器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>value和placeholder属性</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="Theogin" placeholder="请输入..."/>
<input type="submit" value="确定"/>
</form>
</body>
</html>
input和maxllength
input元素的maxlength属性:
1.控制输入的最大字数
2.包括英文，数字，汉字等
input元素的mainlength属性:
1.控制输入的最小字数
2.包括英文，数字，汉字等
input元素的disabled属性:
1.设置为不可用，不可操作，不能修改，不提交到服务器
2.用于格式提示
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>maxlength和disabled和minlength属性</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="abc" placeholder="请输入电话号码" maxlength="11"/> <br />
<input type="text" name="abc" placeholder="密码" minlength="6"/>
格式提示：<input type="text" placeholder="XX省XX市XX区XX号" disabled="disabled"/>
<br />
输入地址：<input type="text" name="Theogin" placeholder="请输入地址" />
<input type="submit" value="确定"/>
</form>
</body>
</html>
autofocus和autocomplete属性
input元素的autofocus属性:
1.让输入框自动获得焦点。
2.打开页面以后，光标自动处于编辑状态
2.input元素的autocomplete属性:
1.属性值：on/off.
2.定义是否开启浏览器自动记忆功能
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>autofocus和autocomplete属性</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="abc" placeholder="请输入..." autofocus="autofocus"/>
<input type="text" name="abc" placeholder="请输入..." autocomplete="off"/>
<input type="submit" value="确定"/>
</form>
</body>
</html>
input元素的type属性
单行文本框:
1.type=“text”
2.可以输入任何类型的文本，数字，汉字，字母。
3.输入的内容以单行显示
密码输入框:
1.type=“password”
2.输入的字符会以圆点或星号显示
3.输入的内容会被隐藏
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单行文本框和密码输入框</title>
</head>
<body>
<form action="" method="post">
用户名：<input type="text" name="uname"/>
<br />
密码：<input type="password" name="password"/>
<input type="submit" value="登录"/>
</form>
</body>
</html>
input元素的type属性
提交按钮:
1.type=“submit”
2.点击后将数据发送到服务器
3.可以用value改变按钮的名称
重置按钮:
1.type=“reset”
2.清空输入框中的内容
3.可以用value改变按钮的名称
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提交按钮和重置按钮</title>
</head>
<body>
<form action="" method="post" >
用户名：<input type="text" name="uname"/>
<br />
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="发送"/>
<input type="reset" value="刷新"/>
</form>
</body>
</html>
普通按钮和隐藏域
普通按钮:
1.type=“button”
2.定义的是一个可以点击的按钮，但是没有任何的行为。没有任何的样式
3.可以用value改变按钮的名称
4.常用于点击按钮时来启动js程序
隐藏域:
1.type=“hidden”
2.隐藏域不会显示在页面中。一般是网页设计者设置好的数据
3.表单提交时，隐藏域中的value会提交到服务器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>普通按钮和隐藏域</title>
</head>
<body>
<form action="" method="post">
用户名：<input type="text" name="uname"/>
<br />
密码：<input type="password" name="password"/>
<br />
<input type="hidden" name="xjd" value="隐藏数据"/>
<br />
<input type="submit" />
<input type="reset" />
<input type="button" value="普通按钮"/>
</form>
</body>
</html>
数字输入框和活动条
数字输入框:
1.type=“number”
2.专门用来输入数字，其它类型不能输入
3.min:允许输入的最小值
4.max:允许输入的最大值
5.step:步长
活动条:
1.type=“hidden”
2.专门用来输入数字，其它类型不能输入
3.min:允许输入的最小值
4.max:允许输入的最大值
5.step:步长
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字输入框和活动条</title>
</head>
<body>
<form action="" method="get">
<input type="number" name="" value="10" min="5" max="20" step="5"/>
<br />
<input type="range" name="" value="10" min="10" max="80" step="2"/>
<br />
<input type="submit" />
</form>
</body>
</html>
时间输入框:datetime-local
颜色选择器:color
文件域:
1.type=“file”
2.用于文件上传
3.accept：规定选取文件类型
4.multiple：规定一次允许选择多个文件
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间输入框,颜色选择器和文件域</title>
</head>
<body>
<form action="" method="get">
<input type="datetime-local" name="abc" />
<br />
<input type="color" name="bcd" />
<br />
<input type="file" name="" accept="image/jpeg" multiple="multiple"/>
<br />
<input type="submit" />
</form>
</body>
</html>
单选框:
1.type=“radio”
2.name属性值必须设置成相同属性值(很关键)
3.向服务器发送的是value值
4.可以通过checked设置默认选取状态，再次单击取消选取
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选框</title>
</head>
<body>
<form action="" method="get">
姓别：<input type="text" name="uname" />
<br />
性别：
<input type="radio" name="sex" value="1" />男
<input type="radio" name="sex" value="0" checked/>女
<input type="radio" name="sex" value="10" />其他
<br />
<input type="submit" />
</form>
</body>
</html>
复选框
1.type=“checkbox”
2.name属性值必须设置成相同属性值,在属性值后加上中括号(很关键)
3.向服务器发送的是value值
4.可以通过checked设置默认选取状态，再次单击取消选取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
<form action="" method="post">
姓别：<input type="text" name="uname" />
<br />
请选择自己喜欢的编程语言：
<input type="checkbox" name="sg[]" value="pg" />java
<input type="checkbox" name="sg[]" value="xj" />python
<input type="checkbox" name="sg[]" value="pt" />pho
<br />
<input type="submit" />
</form>
</body>
</html>
网址输入框和电子邮箱输入框
电子邮箱输入框:
1.type=“email”
2.会对输入的内容进行验证，符合可以发送，不符合弹出提示框
网址输入框:
1.type=“url”
2.会对输入的内容进行验证，符合可以发送，不符合弹出提示框
3.输入的网址一定要包含协议（http://或者https://）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网址输入框和电子邮箱输入框</title>
</head>
<body>
<form action="" method="get">
<br />
电子邮箱：<input type="email" name="email"/>
<br />
网 址：<input type="url" name="url"/>
<br />
<input type="submit" />
</form>
</body>
</html>
表单验证属性
pattern属性:
1.规定输入字符的模式
2.模式指的是：正则表达式
required属性:
1.规定必须在提交前填写输入字段，不填写不能提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证属性</title>
</head>
<body>
<form action="" method="get">
按正则表达式要求输入：<input type="text" name="abc" pattern="[a-z]{5}"/>
<br />
单行输入：<input type="text" name="abc" placeholder="必须填写" required/>
<input type="submit" />
</form>
</body>
</html>
1.textarea标签
2.文本输入区域可以容纳无限数量的文本
3.多行文本输入框和单行文本输入框的属性差不多
4.不要使用rows和cols设置多行文本输入框的行数和列数。应使用css设置宽高
5.多行文本输入框可以在表单之外使用
autofocus：当页面加载时，文本区域自动获得焦点（值：autofocus）。
cols：文本区域内可见的列数（值：number）。
disabled：禁用文本区域（值：disabled）。
form：定义文本区域所属的一个或多个表单（值：form_id）。
maxlength：文本区域允许的最大字符数（值：number）。
name：文本区域的名称（值：text）。
placeholder：一个简短的提示，描述文本区域期望的输入值（值：text）。
readonly：文本区域为只读（值：readonly）。
required：文本区域是必需的/必填的（值：required）。
rows number：文本区域内可见的行数（值：number）。
wrap：当提交表单时，文本区域中的文本应该怎样换行（值：hard、soft）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文本输入框</title>
</head>
<body>
<textarea name="" autofocus placeholder="请留言" style="width: 200px;height: 150px; ">请留言：
</textarea>
</body>
</html>
下拉列表
select:
1.表示创建下拉列表
2.size属性设置列表中显示多少个列表项
option：
1.表示每一个下拉列表项
2.往服务器中发送的是value值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<form action="" method="get">
<select name="" size="5" >
<option value="a">php</option>
<option value="b">JavaScript</option>
<option value="c">mysql</option>
<option value="d">java</option>
<option value="e">html</option>
<option value="f">css</option>
</select>
<input type="submit" value="提交"/>
</form>
</body>
</html>
下拉列表分组
optgroup：
1.用来对option进行分组
2.label属性设置分组名称
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表分组</title>
</head>
<body>
<form action="" method="post">
wbe基础：<br />
<select name="abc[]" size="3" multiple>
<optgroup label="前端">
<option value="a">html</option>
<option value="b">css3</option>
<option value="c">JavaScript</option>
</optgroup>
<optgroup label="后端">
<option value="d">mysql</option>
<option value="e">java</option>
<option value="f">linux</option>
</optgroup>
</select>
<input type="submit" value="提交"/>
</form>
</body>
</html>
button按钮：
1.type属性：可以设置三个值，submit/reset/button,含义和input按钮一样
2.name/vlue/disable属性，与input的用法一样
3.button标签是双标签，进行更加复杂的样式设计
4.注意：表单中请使用input按钮，表单外使用button按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>button按钮</title>
</head>
<body>
<form action="https://www.51zxw.net" method="get">
<input type="text" name="abc" />
<br />
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="普通"/>
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
表单实战
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单实战</title>
</head>
<body>
<form action="" method="post">
姓名*：<input type="text" name="user" required/><br /><br />
密码*：<input type="password" name="pwd" required/><br /><br />
性别*：<input type="radio" name="sex" value="1" required/>男
<input type="radio" name="sex" value="0" required/>女
<br /><br />
年龄*：<input type="number" name="age" min="0" max="100" required/>
<br /><br />
课程*：<input type="checkbox" name="kc[]" value="k1"/>课java
<input type="checkbox" name="kc[]" value="k2"/>python
<input type="checkbox" name="kc[]" value="k3"/>c语言
<br /><br />
手机*：<input type="text" name="tel" pattern="[0-9]{11}" required/><br /><br />
城市*：<select name="city1" required>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<select name="city2" >
<option value="xx">XX区</option>
<option value="yy">YY区</option>
</select>
<br /><br />
住址：<input type="text" name="add"/><br /><br />
备注：<textarea name="bz" style="width: 200px;height: 80px;">请输入...</textarea>
<br /><br />
<input type="submit"/><input type="reset" />
</form>
</body>
</html>
内联框架
iframe元素会创建包含另外一个文档的内联框架。
属性：
1.src：指定在框架中显示的文档的URL
2.frameborder:规定是否显示框架周围的边框 1/0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联框架</title>
<style type="text/css">
iframe{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h1>引入百度</h1>
<iframe src="http://www.baidu.com" frameborder="1">
您的浏览器不支持
</iframe>
</body>
</html>
8.标签嵌套关系（重点）
1.块级元素
常见有：div,所有的布局元素，h1-h6,p,ul,li..
2.行级元素
常见有：a,span,strong,b,i,sub,sup.....
3.行内块级元素
常见有：img,input,video,audio...
嵌套关系：
1.块级元素：
块级元素可以嵌套块级元素，行级元素，行内块级元素
<div><div></div><h1></h1><p></p></div>
<div><span></span><a ></a><b></b></div>
<div><img /><input /></div>
2.行级元素:
<a > <span></span> <img src="" alt="" /></a>
行级元素不能嵌套块级元素，如要嵌套，需要把行级元素转成块级元素再嵌套
3.行内块级元素:
<video > <span></span></video>
只能嵌套行级元素
注意：
h1-h6,p不能嵌套块级元素
9.html快捷输入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>代码快捷输入方式</title>
</head>
<body>
<!--1.父子关系：-->
<!--div>p-->
<div>
<p></p>
</div>
<!--2.兄弟关系-->
<!--div+p-->
<div></div>
<p></p>
<!--3.乘法关系-->
<!--ul>li*4-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--4.id及class属性-->
<!--div#one-->
<div id="one"></div>
<!--div.two-->
<div class="two"></div>
<!--5.元素内容-->
<!--div.two{我是div元素}-->
<div class="two">我是div元素</div>
<!--6.自增符号$-->
<!--p.a${我是第$个段落}*3-->
<p class="a1">我是第1个段落</p>
<p class="a2">我是第2个段落</p>
<p class="a3">我是第3个段落</p>
</body>
</html>
10.学习建议
到这里html的基础知识就差不多了，只要掌握了这些，差不多可以了，学编程要学会查资料，因为编程的知识是非常多的，一下子不可能记住那么多东西。而且这个是一个非常注重实操的东西，没事多写写代码，有问题就百度，或者想办法解决，久而久之进入编程这个思维在学习其他的语言也就没有那么难了。万事开头难，只要认真一段时间，总会有回报的，但是首先要问问自己喜不喜欢这东西，不喜欢的话，是很难学好的，兴趣是最好的老师。（当然我也是学了很久回过头来复习一下，如果某个地方有错的，还请多多见谅）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
