网页：是图片、链接、文字、语音、视频等元素组成，就是一个html文件（后缀名为.html或.htm）。
网页的生成制作：由前端人员书写HTML文件，然后用浏览器打开就能看到网页。
浏览器是网页运行的平台，常用的浏览器有IE（和Edge一样的都是微软公司）、火狐（Firefox）、谷歌（Chrome）、苹果（Safari）等。
HTML是由浏览器进行解析执行的，浏览器内核（渲染引擎）：负责读取网页内容，把html代码显示到页面上。
WEB标准由W3C（万维网联盟）组织和其他标准化组织制定的一系列标准的集合。
web标准规范的分类：
结构标准（相当于人的身体）：html HTML语言就是用来做网页的。
表现标准（相当于人的衣服）：css CSS语言对网页进行美化的（网页的美化师）。
行为标准（相当于人的动作）：javascript JS语言（javascript）就是让网页动起来。
（HTML依然是静态网页，动态网页并不是说网页有动的效果，而是说会因时因地不同而显示的效果和内容不同）。
1：HTML(Hyper Text Markup Language)中文译为“超文本标记语言”，
主要是通过html标记对网页中的文本，图片，声音等内容进行描述。
2：HTML之所以称为超文本标记语言，不仅是因为它通过标记描述网页内容，
同时也由于文本中包含了所谓的“超级链接”，通过超链接可以实现网页的跳转。
3.HTML页面也称HTML文档。
双标记标签，是指由开始和结束两个标记符组成的标记。基本语法： <标记名></标记名>
该语法中“<标记名>”表示该标记的作用开始，“</标记名>” 表示该标记的作用结束。
单标记标签，是指用一个标记符号即可完整地描述某个功能的标记。基本语法：<标记名/>
<标记名/>一般单标记标签中后面的反斜杠/可以省略不写，但建议写上反斜杠/。
双标记标签：<标签 属性1=“值1” 属性2=“值2”>内容</标签>
单标记标签：<标签 属性1=“值1” 属性2=“值2”/>
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来，建议使用双引号。
多个属性之间用空格隔开。 html的标签不区分大小写，但是建议使用小写。
HTML标签关系有2种：嵌套关系和并列关系
1.嵌套关系：类似父亲和儿子之间的关系 2. 并列关系：类似兄弟之间的关系
<html> <head></head>
<head></head> <body></body>
<body></body>
</html>
设置显示文件后缀名：（html文件后缀名为.html或.htm）
在我的电脑（计算机），查看（查看选项），显示或隐藏（隐藏已知类型文件扩展名），勾上显示文件扩展名。
HTML主流开发工具：Hbuilder 。也可以用记事本敲html文件。先建个文本文档.txt，再把后缀名改成.html。
Hbuilder快捷键使用：（大部分快捷键类似Eclipse中操作）
s+回车：快速打开script脚本标签，<script type="text/javascript">（JS）。
sty+回车：快速打开style样式标签，<style type="text/css">(CSS)。
快速注释（Ctrl+?），html注释符为<!-- -->，css注释符为/* */，js注释符为//
每个网页都会有一个基本的结构标签（也称骨架标签），页面内容是在这些基本标签基础上书写的。
新建个html项目自动生成的基本的结构标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
按！+Tab快速生成html网页骨架（英文状态下!）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
</html>
文档类型声明标签：<!DOCTYPE>文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>这句代码意思是：当前页面采取的是最新HTML5版本来显示网页。
注意：<!DOCTYPE>声明位于文档中的最前位置，处于<html>标签之前。即写在第一行。
<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。
<html lang="en">向搜索引擎表示该页面是英文网站，本页面采取英文来表示，
其"lang"的意思就是“language”语言的意思，而“en”即表示english，如果为“zh”即表示中文网站。
这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，
所以这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响。
字符集（Character set）是多个字符的集合，便于计算机识别和存储各种文字。
在<head>标签内可以通过<meat>标签的charset属性来规定HTML文档应该使用哪种字符编码格式。
<meta charset=”UTF-8”>其中UTF-8被称为万国码，基本包含全世界所用到的字符。
<meta charset=”UTF-8”>这行代码不写会出现乱码，所以记住这句话一定得要写。
<html>称为根标记，用于告知浏览器其自身是一个HTML 文档。
<html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，包含文档的头部<head>和主体内容<body>。
<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后，
主要用来封装其他位于文档头部的标记，列如表明编码格式<meta charset="UTF-8">。
meta描述性标签，它用来描述网站的一些信息（meta一般用来做SEO搜索引擎优化，关键字）
网页搜索优化:网页关键字
<meta name="keywords" content="java" />
<meta name="description" content="网页描述">
<meta name="author" content="网页作者"/>
网页指定跳转标签:(网页自动跳转)
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。
一个HTML文档只能含有一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。
其基本语法格式如下：<title>网页名称</title>
<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。
浏览器中显示的所有文本、图像、音频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。
一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后。
网页结构分析：（标签语义，header，footer，nav这三个经常用到）
标签语义：指标签的含义，即这个标签是用来干嘛的。列如标题标签h1-h6、段落标签p。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
| 元素名 | 描述 |
|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域）页眉 |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域）页脚 |
| section | web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
标题标签<h>标题文本</h>：是双标记标签，为了使网页更具有语义化，会在页面中用到标题标记，
HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，
从<h1>到<h6>字体大小递减，h1号字体最大。
其基本语法格式如下：<h>标题文本</h>
标签语义：作为标题使用，并且依据重要性递减。
特点：1.加了标题的文字会变粗变大。 2.一个标题独占一行。
段落标签<p>段落文本</p>：是双标记标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
标签语义：把HTML文档分为若干段落。
特点：段落和段落之间保有空隙。
换行标记<br />：<br />是单标记标签在HTML中，换行标记<br />可以被嵌套在其它标签内使用。
一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。
如果希望某段文本强制换行显示，就需要使用换行标记<br />，
标签语义：强制换行这时如果还像在word中直接敲回车键换行就不起作用了。
特点：<br/>是个单标签，<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
行与行之间的距离很小，段落之间距离很大。
水平线标记<hr />：是单标记标签，在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />是单标记标签，
<hr />就是创建横跨网页水平线的标记。基本语法格式如下：在网页中输入一个<hr />，就添加了一条默认样式的水平线。
字体样式标签(文本格式化标记)：是双标记标签，在网页中，有时需要为文字设置粗体、斜体或下划线效果，
就要用到HTML中的文本格式化标记，使文字以特殊的方式显示。文本格式化常用标记：
<b></b>和<strong></strong>：文字以粗体方式显示（XHTML推荐使用strong语义更强烈）
<i></i>和<em></em>：文字以斜体方式显示（XHTML推荐使用em语义更强烈）
<s></s>和<del></del>：文字以加删除线方式显示（XHTML推荐使用del语义更强烈）
<u></u>和<ins></ins>：文字以加下划线方式显示（XHTML推荐使用ins语义更强烈）
标签语义：突出重要性，比普通文字更重要。XHTML是一种标准语法格式。
文本样式标记<font>文本内容</font>：是双标记标签，用来控制网页中文本的字体、字号和颜色。
其基本语法格式如下：<font color="red" size="10px">文本内容</font>
HTML的注释标记：<!-- --> 注释标记快捷方式：Ctrl+?
HTML特殊符号标记：（&开头;结尾）
一个空格：一个
大于号：一个>
小于号：一个<
版权符号：©
如©小马版权所有盗版必究
<div>和<span>都是双标签，是没有语义的，它们就是一个盒子，用来装内容的，盒子是用来布局网页的。
<div>是个大盒子。独占一行。一行只能放一个<div>。
<span>是个小盒子。一行可以放多个<span>。每个<span>在行之间有一定间隙。
* div:每一个div占满一整行,块级标签
* span：文本信息在一行展示，行内标签
块元素和行内元素：
块级元素：无论内容多少，该元素独占一行（p,h1-h6）
行内元素：内容撑开宽度，左右都是行内元素的可以排在同一行（a,strong,em）
HTML标签分类：块状元素 / 行内元素 / 行内块元素
块状元素特性：单独占据一行 / 铺满整个屏幕 / 定义宽和高 div / ul /li / h2 / p
行内元素特性：允许其他元素和其在同一行 不能定义宽和高，对边距和填充部分敏感 span/i/em/s
行内块元素特性：允许其他元素和其在同一行，但是不会铺满整个空间 定义宽和高
常见的图像格式：
JPG
PNG
GIF（动态图）
BMP（位图）
图像标记<img />：是单标记标签，其基本语法格式如下：<img src="图像的URL" />
<img src="path" alt="text" title="" width="x" height="y" />
src图像地址，alt图像加载失败的替代文字，title鼠标悬停提示文字，width图宽，height图高
绝对路径：把路径写死改不了，如具体在D盘某个位置
相对路径：../表示上一级目录
| 属性 | 属性值 | 描述 |
|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持%页面百分比） | 设置图像的宽度 |
| height | 像素（XHTML不支持%页面百分比） | 设置图像的高度 |
| border | 像素（XHTML不支持%页面百分比） | 设置图像的边框粗细（系统默认黑色边框） |
图像标签属性注意点：
1.图像标签可有多个属性，且必须写在标签名img后面。
2.属性之间不分先后顺序，标签名与属性，属性与属性之间要以空格分开。
3.属性采取键值对的格式，即key="value"的格式，属性="属性值"。
目录文件夹：就是普通文件夹，里面放了做网页的素材，如html文件、图片等。
根目录：打开目录文件夹的第一层就是根目录。
img标记路径：相对路径：以.开头，相对路径不带有盘符，绝对路径：以\开头， 绝对路径一般是指带有盘符的路径。
相对路径：以引用文件所在位置为参考而建立的目录路径。以.开头，相对路径不带有盘符，
通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
列如： <img src=“img/logo.gif” alt=“图片无法正确显示时的文字提示" />
相对路径设置分为以下三种：
图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="1.jpg" />。
图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，
如<img src="img/1.jpg" />。(就是把图片文件放在img目录中了)
图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../../”，
以此类推，如<img src="../1.jpg" />。
绝对路径：文件在电脑中的哪个位置。以\开头， 绝对路径一般是指带有盘符的路径。
如具体在硬盘中的某个位置，例如：“D:\HTML+CSS网页制作\chapter02\img\1.jpg”，
或完整的网络地址，例如“https://img1.360buyimg.com/pop/jfs/t1/19195/31/11959/81532/5c948152E769174ca/c700aa468550172a.jpg”。
HTML超链接a标签：
<a href="跳转目标地址" target="目标窗口的弹出方式">文本或图像</a>
<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性。
href：用于指定跳转链接目标的url地址(跳转到哪个页面)。
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，
其中_self为默认值在当前页面窗口打开，_blank为在新窗口中打开方式。
例如在新窗口打开：<a href="1.html" target="_blank"><img src="img/1.jpg" /></a>
外部链接：如<a href="http://www.baidu.com" >百度</a>
内部链接：网站内部页面链接跳转，如<a href="2.html" >下一题</a>
空链接：如果当时没有确定跳转链接目标时，如<a href="#" >下一题</a>
通常将<a>标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
HTML锚点链接：当点击锚点链接，用户能够快速定位到目标内容所在的页面某个位置。
在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#答案在这" >下一题</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="#答案在这">答案详解</h3>
锚链接（页面间的跳转，单个页面或多个页面间跳转）：
1.需要一个锚标记2.跳转到锚标记的页面位置
使用name属性作为一个锚标记，<a name="top">顶部</a>
通过#name属性值跳转到锚标记的页面位置，<a href="#top">回到顶部</a>
下载链接：如果href里面地址是一个文件或压缩包，会下载这个文件。
但是比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，
此时需要给a标签加个属性“download”。<a href="img/1.txt" download="1.txt">下载此文件</a>
如把1.docx放到img目录下，<a href="img/1.docx" >下载此文件</a>，
点击“下载此文件”它会把1.docx文件下载到电脑本地(C:\Users\teacher\Downloads)
功能性链接：
邮件链接：mailto:
<a href="mailto:mapengpeng1999@163.com">给我发邮件</a>
QQ链接：
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="加我领取小电影" title="加我领取小电影"/></a>
百度QQ推广，进入官网，登录QQ后，点击推广工具，随便选择哪个组件样式，写上想写的提示语，
下面就会自动生成a标签的网页代码，将其复制粘贴就好了。
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="加我领取小电影" title="加我领取小电影"/></a>
表格：用于显示、展示数据，可让数据显示的非常的规整，可读性很好。
<table> </table>用来定义表格的标签。
<tr></tr>标签用来定义表格中的行，必须嵌套在<table> </table>标签中。
<td></td>标签用来定义表格中的单元格（可理解为列），必须嵌套在<tr></tr>标签中。
表头单元格标签：一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th></th>标签表示HTML表格的表头部分。
表格属性：表格标签这部分属性实际开发不常用，后面通过CSS来设置。
表格<table>
行：<tr>
列：<td>
表格加边框，在table标签加上这个属性border="1px"
<table border="1px">
<tr>
<td colspan="3">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
跨列合并列单元格，在td标签加上这个属性colspan="3"
跨行合并行单元格，在td标签加上这个属性rowspan="2"
| 属性名 | 属性值 | 描述 |
|---|
| align | Left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或”” | 规定表格单元是否有边框，默认为””，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| Width | 像素值或百分比 | 规定表格的宽度 |
这些属性要写到表格标签table里面去。一般cellpadding和cellspacing属性值都设为0，边框之间就没有间隙了。
表格结构标签：为了更好的表示表格的语义，可将表格分割为表格头部和表格主体两大部分。
在表格标签中，分别用:<thead>标签 表格的头部区域，即表格第一行，<tbody>标签 表格的主体区域，用于存放数据的。<thead>标签和<tbody>标签要放在<table> </table>标签中。
合并单元格：特殊情况下，可以把多个单元格合并为一个单元格。
合并单元格方式：跨行合并：rowspan=”合并单元格的个数” 跨列合并：colspan=”合并单元格的个数”
目标单元格：（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。
合并单元格三部曲：
1.先确定是跨行还是跨列合并。
2.找到目标单元格，写上合并方式=合并单元格数量，如<td colspan=”2”></td>。
3.删除多余的单元格的代码。
表格展示数据，列表用来布局。列表最大特点就是整齐、整洁、有序，它作为布局更加方便。
列表介绍（list）：无序列表(ul) 有序列表(ol) 自定义列表(dl)
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
在上面的语法中，<ul></ul>标记用于定义无序列表，<li></li>标记嵌套在<ul></ul>标记中，
用于描述具体的列表项，<ul></ul>标签中只能嵌套<li></li>，<li></li>标签之间相当于一个容器。
无序列表中type属性的常用值有三个。默认值:disc方块:square空心圆:circle。
但在实际使用时，我们会用CSS来设置样式属性。
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol >
<li >项一</li>
<li >项二</li>
</ol>
<li></li>为具体的列表项，和无序列表类似，每对<ol></ol>中也至少应包含一对<li></li>。
有序列表其他属性 type start
-语法格式：
<ol type=value1 start=value2>
<li></li>
</ol>
value1表示有序列表项目符号的类型, value2表示项目开始的数值。
start是编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略，
type=用于编号的数字,字母等的类型，如type=a，则编号用小写英文字母。
但在实际使用时，我们会用CSS来设置样式属性。
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl> <dt>和<dd>是并列使用的不是嵌套的。(dt:列表名称，dd：列表内容)
列表的分类：
有序列表：<ol>
<ol>
<li>java</li>
<li>python</li>
<li>c</li>
</ol>
无序列表：<ul>
(应用范围：导航，侧边栏)
<ul>
<li>java</li>
<li>python</li>
<li>c</li>
</ul>
自定义列表：<dl>
(dt:列表名称，dd：列表内容)
(应用范围：公司网站底部)
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>c</dd>
<dt>位置</dt>
<dd>九江</dd>
<dd>南昌</dd>
<dd>杭州</dd>
</dl>
视频和音频：
视频元素：video
<video src="../resources/video/视频.mp4" controls></video>
在<video>标签中加上controls属性，打开网页会有视频播放的进度条，加上autoplay属性打开网页视频会自动播放。
src资源路径，controls控制播放的控制条（没有controls打开网页什么都看不到），autoplay自动播放。
音频元素：audio
<audio src="../resources/video/音频.mp3" controls></video>
iframe内联框架：（在一个网页中嵌套另一个网页）
<iframe src="" name="hello" frameborder="0" width="100px" height="100px"></iframe>
src引入页面地址，name框架标识名
<a href="www.baidu.com" target="hello">点我跳转</a> target="hello"跳转到name="hello"内联框架
如在B站，分享视频，可选择嵌入代码，
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
表单form（重点）
action:表单提交位置，可以是网站，也可以是一个请求处理地址
method提交方式:get(能在url中看到提交的信息，不安全，但高效)，post（安全，但低效，可传输大文件）
表单form的默认提交方式是get提交。
<form action="2.html" method="get">
<p>
用户名：<input type="text" name="username" />
</p>
<p>
密码：<input type="password" name="password" />
</p>
<p>
<input type="submit" />
<input type="reset" />
</p>
</form>
右击页面审查元素，选择NetWork，提交后在NetWork页面看到产生一个请求，点击这个请求Headers看到一些请求信息，
<form action="2.html" method="get">
<p>
用户名：<input type="text" name="username" />
</p>
<p>
密码：<input type="password" name="password" />
</p>
<p>
<input type="submit" name="submit" value="提交表单"/>
<input type="reset" name="reset" value="清空表单"/>
</p>
</form>
type指定元素的类型，默认为text文本输入框，password,checkbox,radio,submit,reset,file,hidden,image,button
name指定表单元素的名称，给开发人员看的，后端java程序读取的就是name属性。
value指定元素的初始值，type为radio时必须指定一个值
size指定表单元素的初始长度，当type为text或password时，表单元素的大小以字符为单位。
对于其他类型，长度以像素为单位。
maxlength,type为text或password时，输入的最大字符数
checked,type为radio或checkbox时，指定按钮是否默认被选中
<p>
用户名：<input type="text" name="username" value="小马好帅" size="20" maxlength="10"/>
</p>
input type="text"文本输入框，value="小马好帅"默认初始值，
size="20"文本框的长度，maxlength="10"最长能写几个字符。
用get提交在url可看到效果，键都是name的属性值，值是value的属性值。
<p>
性别：
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex" />女
</p>
这两个name属性值要一样，表示在同一个组。
input type="radio"单选框标签，value单选框的值（比如选中男，值就是boy，外面值男只是修饰下不可能选中）
在input标签中加上checked表示默认选中。
用get提交在url可看到效果，键都是sex，值是选中的value，如选择“男”值就是boy
只要是input标签都要name属性值，name可以为中文，但会乱码，建议写英文,
加了name属性后，用get提交在url可看到提交信息。
<p>
爱好：
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby" checked/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
name属性值是一样的，爱好都属于同一个hobby，会提交成一个多选框（在服务器会响应成一个数组形式），
用get提交在url可看到效果，键都是hobby，值是选中的value，如选择“聊天”值就是chat
在input标签中加上checked表示默认选中
图片也可形成按钮：
input type="submit"提交按钮
input type="reset"重置按钮
input type="button"普通按钮
type="image"图片按钮
<p>
按钮：
<input type="button" name="btn1" value="按钮上有字"/>
<input type="image" src="1.jpg" />
</p>
input输入表单元素，select下拉表单元素，textarea文本域元素。
下拉列表框：select
<p>
下拉框国家：
<select name="select">
<option value="chian">中国</option>
<option value="mei">美国</option>
<option value="de" selected>德国</option>
<option value="fa">法国</option>
</select>
</p>
默认会选中第一个值中国，在option标签加上selected属性表示默认选中的值如德国，
表单提交过去的这些数据（用get提交在url可看到信息），通过后台读取分析判断
文本域（多行文本）：
<p>
反馈：
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
cols列，rows行，加了name属性后，用get提交在url可看到提交信息
文件域：
<p>
<input type="file" name="files"/>
<input type="button" value="上传" name="upload" />
</p>
加了name属性后，用get提交在url可看到提交信息
邮箱验证：
<p>
邮箱：
<input type="email" name="email"/>
</p>
URL网址验证：
<p>
URL：
<input type="url" name="url"/>
</p>
数字验证：
<p>
数字：
<input type="number" name="number" max="100" min="0"/>
</p>
也可设置步长step属性，<input type="number" name="number" max="100" min="0" step="10"/>
滑块：
<p>
音量：
<input type="range" name="voice" max="100" min="0"/>
</p>
也可设置步长step属性，<input type="range" name="voice" max="100" min="0" step="5"/>
搜索框：
<p>
搜索：
<input type="search" name="search" />
</p>
表单的应用：
只读：加readonly属性，只读只能放在文本框中
<p>
用户名：<input type="text" name="username" value="admin" readonly/>
</p>
禁用：加disabled属性，禁用可以放在任何地方
<p>
性别：
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio" value="girl" name="sex" />女
</p>
隐藏域：
<p>
密码：<input type="password" name="password" hidden value="123456"/>
</p>
虽然隐藏了，但有默认值value，加了name属性后，用get提交在url可看到提交信息
表单初级验证：
为什么要进行表单验证：提示用户输入信息，减少错误信息验证，减轻服务器压力，保证数据安全。
placeholder="请输入用户名"，提示用户信息，只能用在输入框中
<p>
用户名：<input type="text" name="username" placeholder="请输入用户名" />
</p>
required，非空判断，不能为空有值才能提交，只能用在输入框中
用户名：<input type="text" name="username" placeholder="请输入用户名" required/>
pattern，正则表达式，自己写很麻烦可百度搜索，常用正则表达式(www.jb51.net/tools/regexsc.htm)
<p>
自定义邮箱：
<input type="text" name="diymail"
pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
</p>
| 属性值 | 描述 |
|---|
| button | 定义可点击按钮（多数情况下，用于通过javaScript启动脚本） |
| checkbox | 定义复选框，多选，如兴趣爱好，要取一个相同的name属性 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮，多选一，如性别，要取一个相同的name属性 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据，还原表单元素默认初始状态 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
除了type属性外,标签还有很多其他属性
| 属性 | 属性值 | 描述 |
|---|
| name | 由用户自定义 | 定义input元素名称（属性名） |
| value | 由用户自定义 | 规定input元素的值（属性值） |
| checked | checked | 规定input元素首次加载时应被选中（默认选中） |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
name和value是每个表单元素都有的属性值，主要给后台人员使用。
用get提交在url可看到效果，键都是name的属性值，值是value的属性值。
name表单元素的名字，要求单选框和复选框按钮要有相同name值表示是同一个组。
在单选和复选框可设置checked属性，当页面打开时就会默认选中这个按钮，checked=”checked”，也可直接写checked
maxlength,规定输入字段中的字符的最大长度,一般用的比较少
1.有些表单元素想刚打开页面就默认显示几个文字怎么做？
可以给这些表单元素设置value属性=”值”
用户名： <input type=”text” value=”请输入用户名” />
2.页面中的表单元素很多，如何区别不同的表单元素？
name属性：当前input表单名字，后台可以通过这个name属性找到这个表单，
页面中表单很多，name主要作用是区别不同的表单。
用户名： <input type=”text” value=”请输入用户名” name=”username” />
name属性后面的值，是自定义的，最好有语义，主要给后台开发人员使用。
radio(或者checkbox)如果是一组，name属性值必须一样，表示是同一个组。
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
3.如果页面一打开就让某个单选按钮或者复选按钮是选中状态？
checked属性：表示默认选中状态，用于单选按钮和复选按钮。checked=”checked”，也可直接写checked
性别：
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女"/>女
4.如何让input表单元素展示不同的形态？比如单选按钮或者文本框
type属性，可以让input表单元素设置不同的形态
submit提交数据发送到服务器 reset重置数据还原表单元素默认初始状态
value属性可以设置按钮上面的文字
<input type="submit" value="免费注册"> <input type="reset" value="重新填写">
Button普通按钮，不提交数据，可以完成某个小功能，如获取短信验证码,后期结合JS搭配使用
<input type=”button” value=”获取短信验证码” />
file文件域，使用场景，上传文件使用的
上传头像： <input type=”file” />
增强鼠标可用性：点击文字也可进入文本框
<p>
<label for="mark">点击文字也可进入文本框</label>
<input type="text" id="mark" value="文本框中的默认值" />
</p>
<label>标签为input元素定义标注标签
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择相应的表单元素上，用来增加用户体验的。
<label>使用语法：
<label for=”sex”>男</label>
<input type=”radio” name=”sex” id=”sex” />
核心：<label>标签的for属性值应当与相关元素的id属性值相同
<label for=”text”>用户名：</ label>
<input type=”text” id=”text”>
<label for=”nan”>男</ label>
<input type=”radio” id=”nan”>
select下拉表单元素：使用场景，在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，
我们可以使用<select>标签控件定义下拉列表。使用语法：
<select> <form>
籍贯：
<option>选项1</option> <select>
<option>选项2</option> <option>江西</option>
<option>选项3</option> <option>江苏</option>
..... <option>浙江</option>
</select> </select>
</form>
<select>至少包含一对<option>
在<option>中定义selected=”selected”或直接写selected，当前项即为默认选中项
<option selected=”selected”>江西</option>,籍贯默认选中选项是江西
textarea文本域元素：使用场景，当用户输入内容较多的情况下，
我们就不能使用文本框表单了，此时可用<textarea>标签。
textarea文本域可多行输入多个内容，text文本框只能单行输入字段。
使用多行文本输入控件，可输入更多的文字，常用于留言板，评论，网站介绍，意见反馈。
语法：
<textarea rows=”3” cols=”20”>
文本内容（该页面默认显示出来的内容）
</textarea>
通过<textarea>标签可以轻松地创建多行文本输入框
cols列，rows行，实际开发中是用CSS来改变大小的。
<form>
今日反馈：
<textarea >
文本内容（该页面默认显示出来的内容）
</textarea>
</form>
服务器与浏览器的工作原理：
在客户端用户通过浏览器输入网页地址访问服务器，服务器根据用户请求将用户需要的内容传送到客户端浏览器。
HTTP协议是一个客户端请求和响应的标准协议，用户输入地址和端口号之后就可以从服务器上获取所需要的网页信息。
HTML：Hyper Text Markup Language超文本标记语言（标签）
XML：extensible markup language 存储数据
XHTML:XHTML是一种标准语法格式
浏览器页面鼠标右击点击审查元素或查看源可以查看网页设计的源代码(Fn+F12)
网页按F12+Fn，可查看网页元素，点Elements查看网页代码，左边为html代码，右边为css样式代码。
左上角那个箭头可点击网页某个位置，具体的查看网页某处的代码。
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
