前端三件套--读书笔记（一）HTML
摘要：
书名：《网页设计与编程》-------耿增民
内容：HTML的基本标签
一、HTML标签语法：
-
注释标签：
<!-- 注释标签--> -
标签的属性：
<标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>
<标签名 属性1="属性值1"属性2="属性值2">内容</标签名> eg. <h1 align="center">标题文本</h1> <!--这是居中属性-->
二、文档头部标签
1.title标签：
<title>网页标题名称</title> <!--这是写整体网页的主标题,就是这个网页叫什么-->
eg.
<!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>
<p>这是一句话</p>
</body>
</html>
2.meta标签：
-
-
name/content属性可以为搜索引擎提供信息，其中name提供搜索内容名称，content提供对应的搜索内容值
-
设置网页关键字：
<meta name="keywords" content="网页设计,UI设计,图标设计,移动端"> <!--keywords用于定义搜索内容名称为网页关键字，content里的值用于定义关键字的具体内容。 -
设置网页描述：
<meta name="description" content="网页设计,UI设计,图标设计,移动端"> <!--description用于定义搜索内容名称为网页描述，content里的值用于定义描述的具体内容，文字不必过多 -
设置网页作者：
<meta name="author" content="作者名"> <!--description用于定义搜索内容名称为网页作者，content里的值用于定义具体作者信息
-
-
<meta http-equiv="名称",content="值">
-
http-equiv/content可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数，其中http-equiv属性提供参数类型，content提供对应的参数值。默认会发送<meta http-equiv="Content-Type",content="text/html"，通知浏览器发送的文件类型是HTML。
-
设置字符集：
<meta http-equiv="Content-Type",content="text/html;charset= utf-8"> <!--content中的属性中间用;隔开，用于说明当前文档类型为HTML，字符集为utf-8--> -
设置页面自动刷新与跳转：例如定义某个页面10s后跳转百度
<meta http-equiv="refresh" content="10;url= http://www.baidu.com">
-
3.link标签
一个页面往往需要多个外部文件配合，在中使用标签可引用外部文件。
格式：<link 属性="属性值">
-
常用属性：
属性名 常用属性值 描述 href URL 指定引用外部文档的地址 rel stylesheet 指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，
表示定义一个外部样式表type text/css 引用外部文档的类型为CSS样式表
三、文本控制标签
1.标题标签：
<h1>~<h6>分别表示一级标题到六级标题，格式为<h1>一级标题</h1>
其中可以用align设置对齐方式，值为left，center，right
注：一个页面只能使用一个<h1>，h标签禁止用于设置文字加粗或更改字体大小
2.段落标签
<p>是文档中最常见的标签
格式：<p aling="对齐方式">段落文本</p>
3.换行标签与下划线标签
换行符格式为：<br>
下划线格式为：<hr>，可在内部设置属性，size，color等
用回车换行的段落在浏览器中并没有换行，知识多出了一个字符的空白
4.文本样式标签 font
font用于控制文本的字体，字号和颜色
格式：<font 属性="属性值">文本内容</font>
常用属性：
| 属性名 | 含义 |
|---|---|
| Face | 设置文字字体 |
| Size | 设置文字的大小，可取1-7之间的整数 |
| Color | 设置文字的颜色 |
eg.
<!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>Document</title>
</head>
<body>
<h2 align="center">使用font标签设置文本样式</h2>
<p>文本是默认样式的文本</p>
<p><font size="2" color="blue">文本是2号蓝色文本</font></p>
<p><font size="5" color="red">文本是5号红色文本</font></p>
<p><font face="宋体" size="7" color="green">文本宋体7号绿色文本</font></p>
</body>
</html>
font标签目前HTML5不建议使用，对于文本外观通常使用CSS样式
5.格式化文本标签
常用：
| 标签 | 显示效果 |
|---|---|
| <b></b>和<strong></strong> | 文本以粗体方式显示(b定义文本粗体，strong定义强调文本 |
| <i></i>和<em></em> | 文字以斜体方式显示(i定义斜体字，定义强调文本 |
| <s></s>和<del></del> | 文字以加删除线的方式显示(HTML5不建议使用s) |
| <u></u>和<ins></ins> | 文字以加下划线的方式(HTML5不建议使用u) |
6.特殊字符标签
常用：
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
- 特殊字符前面要加&，结尾要加;
- HTML会自动截去多余空格，不管加多少空格，都会被看做是一个
7.案例
<!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>
<h1 align="center">凉州词</h1>
<p align="right"><em>作者：王翰</em></p>
<p><font color="blue">葡萄美酒月光杯</font></p>
<p><ins>欲饮琵琶马上催</ins></p>
<p><font color="blue">醉卧沙场君莫笑</font></p>
<p><del>古来征战几人回</del></p>
<p align="center">版权所有 ©仿冒必究</p>
</body>
</html>
四、图像标签
1.支持的图像格式：
gif,png,jpg,svg
2.img标签
属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
| vspace | 像素 | 设置图像顶部和底部的空白(垂直边距) |
| hspace | 像素 | 设置图像左侧和右侧的空白(水平边距) |
align属性：
| 属性值 | 描述 |
|---|---|
| left | 将图像对齐到左边 |
| right | 将图像对齐到右边 |
| top | 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方 |
| middle | 将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方 |
| bottom | 将图像的底部和文本的第一行文字对齐，其他文字居图像下方 |
实例：
-
alt:
<!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>图像标签的img的alt属性</title> </head> <body> <img src="logo.jpg" alt="前端开发是。。。" /> </body> </html>
-
width,height,border
<!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>图像标签的img的alt属性</title> </head> <body> <img src="123.jpg" alt="前端开发是。。。" border="2" width="800" height="500" /> </body> </html>
-
vspace,hspace
<!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>Document</title> </head> <body> <img src="123.jpg" alt="前端是、、、、、、" border="3" width="800" height="500" hspace="50" vspace="20" align="left" /> 你说得对，但是你说的也不完全对。从某种角度来说，你说的有一点对， 可是从另一个角度看，你说得不对。也不能说是完全不对，只能说离完全对之间还有一点不对。 如果忽略这点不对，哪你说的当然是对的，可是以一个更严谨的态度去审视你说的对不对， 那么你说的又不是对的了。其实回头一想，你说的对之处在静止的世界中有可能是对的， 你说的不对之处以形而上的观点来看有可能是错的。但是以发展的眼光看， 你说得对之处在运动的时空里有可能是不对的，你说的不对之处以辩证的观点看有可能是对的。 在此时此刻你说的有可能对也有可能不对，在往后未来你说的有可能不对也有可能对。 总而言之，言而总之，一言以蔽之，观其全貌后论之，知其今后历来往事所以评议之，你说得对， 但是你说的不对。 <hr size="2" color="#00FFFF"> </body> </html>
五、列表标签
1.无序列表：
就跟typora里的无序列表一样，没有顺序标记，就一个点标
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
- HTML5不再支持type元素
- ul标签中不允许输入文字
- ul只能用于嵌套li
2.有序列表：
有1,2,3.。。。。。。。。的顺序标志
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
<ol start="2">
<li>q</li>
<li>w</li?>
<li>e</li>
<li>r</li>
</ol>
<ol start="2" reversed>
<li>q</li>
<li>w</li?>
<li>e</li>
<li>r</li>
</ol>
- ol标签中可以加入start属性，用于指定开始标签的数字。如代码中start="2"表示标签从2开始标记，即2,3,4.。。。。
- 加个reversed表示逆序，即2,1,0,-1,-2.............
3.自定义列表
常用于对术语或名词进行解释和描述，和无序有序不同，自定义列表的列表项没有任何项目符号。
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
- 相对于dt，dd会产生一定的缩进效果
六、超链接标签
1.创建超链接
语法格式：<a href="跳转目标" target="目标窗口弹出方式">文本或图像
- href：URL地址
- target：指定窗口打开方式，取值有_self和_blank。_self是在原窗口打开，_blank是在新窗口打开
- 暂时没有确定链接目标时，href属性可以用“#”表示，表示该链接暂时为一个空链接
- 不仅文本，图像，音频，视频都可以加超链接
2.超链接的分类
超链接可以分为：文本链接和非文本链接
<a href="#"><img src="logo.jpg"></a>
3.锚点链接
如果网页过长，页面过长,浏览网页就要不断拖动滚动条来查看。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>Document</title>
</head>
<body>
专业介绍：
<ul>
<li><a href="#one">前端标准规范</a></li>
<li><a href="#two">网页设计</a></li>
<li><a href="#three">前端编程</a></li>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</ul>
<h3 id="one">前端标准规范</h3>
<p>
主要从以下几个方面来概述前端的开发规范 目录构建规范 代码命名规范
开发文档的书写规范
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h3 id="two">网页设计</h3>
<p>
是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h3 id="three">前端编程</h3>
<p>
创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互
[1] 。
前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
[2]
前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升.
</p>
</body>
</html>
点击对应的链接，就可以快速定位到对应id的内容
- 使用“<a href="#id名">链接文本</a>创建链接文本”
- 使用相应id名标注跳转目标的位置
- 返回顶部：<a name="top">定义链接文本，在末尾使用,<a href="#top">返回顶部</a>
七、音频和视频标签
1.视频格式：
Ogg、MPEG、WebM
2.音频格式：
Vorbis、MP3、Wav
3.插入视频
语法格式：<video src="视频文件路径" controls="controls"></video>
- src:用于设置视频文件的路径
- controls用于为视频提供播放控件
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 当页面载入完成后自动播放视频 |
| loop | loop | 视频结束时重新开始播放 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性 |
| poster | url | 当时视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来 |
<video src="video.mp4" poster=“video.jpg”></video>
4.插入音频
语法格式：<audio src="音频文件路径" controls="controls"></audio>
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 当页面载入完成后自动播放音频 |
| loop | loop | 音频结束时重新开始播放 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性 |
<audio src="MP3.mp3" controls="controls" autoplay="autoplay"></audio>
<video src="video.mp4" preload=“auto”></video> <!--还有none表示不进行预加载；metadata表示只预加载媒体的元数据auto（默认 值）表示预加载全部的视频或者音频-->
<video src="video.mp4" preload=“auto” loop="loop"></video>
5.source元素
可以为video和audio元素提供多个备用文件
<audio controls="controls">
<source src="音频文件地址" type="媒体文件类型/格式">
<source src="音频文件地址" type="媒体文件类型/格式">
......
</audio>
- src:用于指定媒体文件的URL地址
- type:指定媒体文件类型
八、HTML5新增 结构性标签
1.标签
代表文档、页面或者应用程序中与上下文不相关的独立部分。常用于定义一篇日志、一条新闻或用户评论等。通常使用多个section标签进行划分。一个页面可以出现多次aritcel
2.<header>标签
是一种具有引导和导航作用的标签，用来放置页面内的一个内容区块标题，可以包含网站Logo图片、搜索表单或者其他相关内容。
<header>
<h1>
网页主题
</h1>
</header>
3.<nav>标签
用于定义导航链接，可以将导航链接归纳在这个区域中。导航标签可以链接到站点的其他页面，或者当前页面的其他部分。
<nav>
<ul>
<li href="#">首页</li>
<li href="#">公司概况</li>
<li href="#">产品展示</li>
<li href="#">联系我们</li>
</ul>
</nav>
使用场合：
- 传统导航条
- 侧边栏导航
- 页内导航
- 翻页操作
4.<section>标签
- 用于网页的页面分块，一个section属性通常由内容和标题组成。
- 和div不同，section强调内容分块，div强调空间分块。当一个分块容器需要定义样式或通过脚本定义行为时，建议用div
- 如果一个内容区块没有标题，就不用<section>
- section标签强调分段和分块，而article标签强调独立性，如果一块内容相对来说比较独立、完整时，应该使用article标签；如果想要将一块内容分成多段时，应该使用section
5.<aside>标签
用来定义当前页面或者文章的附属信息部分，可以包含与当前页面或主要内容给相关的引用、侧边栏、广告、导航条等。
适用方法：
- 一种是包含在article标签内部，作为主要内容的附属信息
- 另一种是在article标签之外使用作为页面或站点全局的附属信息，最常使用的形式是侧边栏，其中内容可以是友情链接、广告单元等
6.<footer>标签
用于定义一个页面或者区域的底部，包含在页面内部的各种信息。
7.<main>标签
呈现文档或应用的主体部分。主体部分与文档直接相关，或者扩展文档中心主题、应用主要内容的部分内容。这部分在文档中是独一无二的。
8.<figure>和<figcaption>标签
figure用于独立的流内容（图像，图表，照片，代码等），是一个独立单元。内容应与主内容相关，但如果被删除，也不会对文档流产生影响
figcaption用于为figure标签组添加标题，一个figure标签内最多允许使用一个figcaption。
九、表格标签
1.<table>标签
用于定于HTML表格，HTML表格由一个或对个tr、th和td组成。tr定义表格行，th定义表头，td定义单元格
常用属性：
- align：
- 用于定义表格相对周围元素的对齐方式
- 值有：left 左对齐，right 右对齐，center 居中对齐
- bgcolor:
- 规定表格的背景颜色
- 值：rgb(x,x,x)；#xxxxxx；colorname
- border:
- 规定围绕表格的边框宽度
- 值为像素 px
- 如果border值放生改变，那么只有表格周围边框的尺寸发生变化，表格内部的边框则是1px
- 设置border为0可以显示没有边框的表格
- cellpadding:
- 规定单元边沿与其内容之间的空白
- 值：px
- cellspacing:
- 规定单元格之间的空白
- 值：px
- width：
- 规定表格的宽度。如果没有这个属性，表格会占用需要的空间来显示数据
- 值：px
- height：
- 规定表格的高度。如果没有这个属性，表格会占用需要的空间来显示数据
- 值：px
- background：
- 规定表格的背景图像
2.<tr>标签
tr用于定义表格中行
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | left right center justify |
依次为左对齐、右对齐、居中和两端对齐 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
规定表格行的背景颜色 |
| valign | top middle bottom |
规定表格行中内容的垂直对齐方式 |
| height | 像素 | 规定行高 |
3.<td>标签
用于定义标准单元格，包含数据
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | left right center justify |
依次为左对齐、右对齐、居中和两端对齐 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
规定表格行的背景颜色 |
| colspan | 正整数 | 规定单元格可横跨的列数 |
| rowspan | 正整数 | 规定单元格可横跨的行数 |
| valign | top middle bottom |
规定表格行中内容的垂直对齐方式 |
| width | 像素 | 规定单元格宽度 |
| height | 像素 | 规定单元格高度 |
4.<th>标签
定义表头单元，包含头部信息
通常会加粗显示
属性和上述一样
5.例子
<!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>
<table border="1" width="400" height="240" align="center">
<tr height="80" align="center" valign="center" bgcolor="#00FFFF">
<th>姓名</th>
<th>性别</th>
<th>系别</th>
<th>籍贯</th>
</tr>
<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>
</body>
</html>
十、表单
表单是在网页中主要负责数据采集功能和向服务器传送数据。例如，注册页面的用户名和密码输入、网上订单页面等，都是以表单的形式来收集用户信息，并将这些信息传递给后台服务器，实现网页与用户间的数据传输和交互。
1.表单的构成
- 表单控件：包含了具体的表单功能，如文本框，密码框，复选框，单选按钮等。
- 提示信息：表单中的一些说明性文字，提示用户进行操作
- 表单域：相当于一个容器，用来容纳所有表单控件和提示信息，可以通过表单域定义和处理表单数据所用程序的URL地址以及数据提交到服务器的方法
2.表单的创建
<form></form>用于创建表单，定义采集数据的范围，也就是form之间的包含的数据将被提交到服务器或者电子邮箱里
语法格式：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
3.表单的属性
- action属性：定义在提交表单时接收并处理表单数据的服务器程序的url地址
- method属性：规定在提交表单时所用的HTTP方法(get或post)
- post通过表单方式提交，数据采用加密方式传输，更安全；post传输数据理论上没有限制，post以流媒体形式传输，用于传输文件
- get通过网页url传输数据，不安全，传输数据会显示在地址栏；get传输数据有限制，不能传输大量数据
- name属性：定义表单的名称
- autocomplete属性：规定浏览器是否应该自动完成表单。自动完成表单是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在下一个下拉列表中，以实现完成自动输入（值：on off）
- novalidate属性：规定浏览器不验证表单（<form novalidate="novalidate">
十一、表单控件
1.input控件
单标签，type为最基本属性。type属性用于指定不同的控件类型type数，input还可以有其他属性
2.input的type属性
- 单行文本框<input type="text"/>
- 用于定义单行的输入字段，默认宽度为20个字符
- 密码框<input type="password"/>
- 用于定义密码字段，密码字段的字符会被掩码
- 单选按钮<input type="radio"/>
- 允许用户选取给定数目的选择中的一个选项
- 复选框<input type="checkbox"/>
- 允许用户在一定数目的选择中选取一个或多个选项
- 普通按钮<input type="botton"/>
- 定义点击按钮，但没有任何行为，button按钮通常用于用户点击按钮时启动JavaScript程序
- 提交按钮<input type="submit"/>
- 用于向服务器发送表单数据。数据会发送到表单的anction属性指定的页面
- 重置按钮<input type="reset"/>
- 用于清除表单中的所有数据
- 图像按钮<input type="image"/>
- 定义图像形式的按钮，必须把src和alt属性与<input type="image"/>结合使用
- <input type="image" src="图片地址" alt="文本"/>
- 隐藏域<input type="hidden"/>
- 定义隐藏字段。隐藏字段对于用户是不可见的，通常会存储一个默认值，它的值也可以通过JS进行修改
- 文件域<input type="file"/>
- 用于文件上传
- email类型<input type="email"/>
- 输入email的文本输入框，用来验证email输入框的内容是否符合邮件地址格式
- url类型<input type="url"/>
- 输入URL的文本框，用来验证输入内容是否符合URL地址格式
- tel类型<input type="tel"/>
- 输入电话号码的文本框，通常会和pattern属性配合使用
- number类型<input type="number"/>
- 输入数值的文本框，在提交表单时，会自动检查该输入框中的内容是否为数字。
- number类型的输入框，可以对输入的数字进行限制
- value：指定输入框的初始值
- max：指定输入框可以接收的最大输入值
- min：指定输入框可以接收的最小输入值
3.input的其他属性
-
autofocus属性
- 规定输入字段在页面加载时是否获取焦点(不适于hidden)（能够使控件获得输入焦点,不需要用户手动点击）
-
form属性
- 规定输入字段所属的一个或多个表单（它包含单个值form_id，指定元素所属的一个或多个表单的 id 列表，以空格分隔。此属性的值应为
-
list属性
-
引用包含输入字段的预定义选项的datalist
-
<input list="value">
-
<form action="demo_form.asp"> Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form>
-
-
multiple属性
-
接收多个值的文件上传字段
-
<input multiple="multiple">
-
<form action="demo_form.asp" method="get"> Select images: <input type="file" name="img" multiple="multiple" /> <input type="submit" /> </form>
-
-
max属性
- 规定输入字段的最大值
-
min属性
- 规定输入字段的最小值
-
step属性
-
规定输入字的合法数字间隔
-
<input step="number">
-
<form action="demo_form.asp" method="get"> <input type="number" name="points" step="3" /> <input type="submit" /> </form>
-
-
pattern属性
- 规定输入字段的值的模式和格式，例如pattern="[0-9]"表示输入值必须是0-9之间得数字
-
placeholder属性
- 提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示，并在字段获得焦点时消失
-
required属性
- 规定必须在提交之前填写输入字段。如果使用该属性，则字段是必填或者必选的
-
checked属性
- 规定在页面加载时应该被预先选定的input元素。checked属性与<input type="checkbox"/>或者<input type="radio"/>配合使用，checked也可以在页面加载后，通过JS代码进行设置
-
size属性
-
对于<input type="text"/>和<input type="password"/>，size属性定义的是可见的字符数,即一个可下拉列表框内可见的元素个数，如size=3，就是框的大小能显示3个元素，下拉滚动条一直都是显示三个三个这样的。而对于其他类型，size属性定义的是以像素为单位的输入字段宽度
-
不定义size则显示的select列表需要点击下三角列出所有选项进行选择
-
<input size="value">
-
characters/pixels----------input 元素的宽度。
-
<form action="form_action.asp" method="get"> <p>Email: <input type="text" name="email" size="35" /></p> <p>PIN: <input type="text" name="pin" maxlength="18" size="18" /></p> <input type="submit" value="Submit" /> </form>
-
4.textarea控件
定义多行的文本输入控件。文本区可容纳无限数量的文本，可以通过cols和rows属性来规定textarea的尺寸。
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| cols | 正整数 | 规定文本区可见宽度，即列数 |
| rows | 正整数 | 规定文本区内的可见行数 |
| name | 用户自定义 | 规定文本区的名称 |
| readonly | readonly | 规定文本区为只读 |
| disabled | disabled | 规定禁用该文本区 |
5.select控件
select控件可创建单选或者多选下拉菜单，用option定义列表的可用选项
<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| multiple | multiple | 规定可选择多个选项 |
| required | required | 规定文本区域是必填的 |
| size | 正整数 | 规定下拉列表中可见选项的数目 |
| name | 用户自定义 | 规定下拉列表的名称 |
| disabled | disabled | 规定禁用该下拉列表 |
6.option属性
| 属性 | 值 | 描述 |
|---|---|---|
| selected | selected | 规定选项（在首次显示在列表中时）表现为选中状态 |
| disabled | disabled | 规定此选项应在首次加载时被禁用 |
| value | 用户自定义 | 定义送往服务器的选项值 |
7.lable标签
-
<label> 标签为 input 元素定义标注（标记）。
-
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
-
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
-
"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
-
属性 值 描述 for element_id 规定 label 与哪个表单元素绑定。 form form_id 规定 label 字段所属的一个或多个表单。
<form action="demo_form.php">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
</form>
8.案例
<!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>
<h2>用户注册</h2>
<form>
<p>
<!--text单行文本输入框-->
账户：<input
type="text"
required
name="user"
id="user"
placeholder="您的账号"
/>
</p>
<p>
<!--密码输入框-->
密码：<input
type="password"
required
name="pass"
id="pass"
placeholder="您的密码"
/>
</p>
<p>
<!--radio单选框-->
性别：<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="女" />女
</p>
<p>
<!--checkbox复选框-->
爱好：<input type="checkbox" name="like" value="音乐" />唱歌
<input type="checkbox" name="like" value="看电影" checked />看电影
<input type="checkbox" name="like" value="上网" />游泳
<input type="checkbox" name="like" id="下棋" />下棋
<input type="checkbox" name="like" id="爬山" />爬山
<input type="checkbox" name="like" id="看书" />看书
</p>
<p>
<!--select控件-->
职业：<select name="work" size="3">
<option value="公务员">公务员</option>
<option value="律师">律师</option>
<option value="会计">会计</option>
<option value="教师">教师</option>
<option value="医生">医生</option>
<option value="学生">学生</option>
</select>
</p>
<p>
<!--select控件-->
收入：<select name="salary">
<option value="10000元以下">10000元以下</option>
<option value="10000-20000元">10000-20000元</option>
<option value="20000-30000元">20000-30000元</option>
<option value="30000-40000元">30000-40000元</option>
<option value="40000元以上">40000元以上</option>
</select>
</p>
<p>
<!--email控件-->
邮箱：<input
type="email"
required
name="email"
id="email"
placeholder="您的电子邮箱"
/>
</p>
<p>
<!--number控件-->
年龄：<input
type="number"
name="age"
value="25"
autocomplete="off"
placeholder="您的年龄"
/>
</p>
<p>
<!--textarea控件-->
简介：<textarea name="think" cols="40" rows="4"></textarea>
</p>
<p>
<!--submit提交按钮 reset重置按钮-->
<input type="submit" name="submit" value="提交" />
<input type="reset" name="reset" value="重置" />
</p>
</form>
</body>
</html>
