**笔记及代码来源：**https://www.bilibili.com/video/BV1Mx411m7fd
**HTML表单**
1、表单用于获取不同类型的用户输入
2、常用表单标签：
<form> 表单
<input> 输入域
<textarea> 文本域
<label> 控制标签
<fieldset> 定义域
<legend> 域的标题
<select> 选择列表
<optgroup> 选项组
<option> 下拉列表中的选项
<button> 按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
</head>
<body>
<form>
用户名:
<input type="text">
<br/>
你喜欢的水果有？
<br/>
苹果<input type="checkbox" />
香蕉<input type="checkbox" />
芒果<input type="checkbox" />
橘子<input type="checkbox" />
<br/>
请选择你的性别：
男<input type="radio" name="sex"/>
女<input type="radio" name="sex"/>
<br/>
请选择你喜好：
<select>
<option>睡觉</option>
<option>逛街</option>
<option>吃货</option>
<option>想你</option>
</select>
<input type="button" value="按钮" />
<input type="submit" value="确定"/>
</form>
<textarea cols="30" rows="30">请在此填写你的个人信息</textarea>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单与PHP交互</title>
</head>
<body>
<form action="http://localhost/ch01/recommend.php" method="post">
用户名：<input type="text"name="name" />
密码：<input type="password"name="password" />
<br/>
<input type="submit"value="确定" />
</form>
<textarea cols="30" rows="30">请在此填写你的个人信息</textarea>
</body>
</html>
**HTML框架**
1、框架标签(frame):
框架对于页面的设计有着很大的作用
2、框架集标签(<frameset>)：
框架集标签定义如何将窗口分割为框架
每一个frameset定义一系列行或列
rows/cols的值规定了每行或每列占据屏幕的面积
3、常用标签：
noresize：固定框架大小
cols:列
rows:行
4、内联框架
iframe
**HTML背景**
1、背景标签：
Background
2、背景颜色：
Bgcolor
3、颜色：
颜色是由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成(RGB)
颜色值最小值：0(#00)
颜色值最大值：255(#FF)
红色：#FF0000
绿色：#0OFF0O，
蓝色：#0000FF
1. 文件标签：构成html最基本的标签
* html:html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
* body：体标签
* <!DOCTYPE html>：html5中定义该文档是html文档
2. 文本标签：和文本有关的标签
* 注释：<!-- 注释内容 -->
* <h1> to <h6>：标题标签
* h1~h6:字体大小逐渐递减
* <p>：段落标签
* <br>：换行标签
* <hr>：展示一条水平线
* 属性：
* color：颜色
* width：宽度
* size：高度
* align：对其方式
* center：居中
* left：左对齐
* right：右对齐
* <b>：字体加粗
* <i>：字体斜体
* <font>:字体标签
* <center>:文本居中
* 属性：
* color：颜色
* size：大小
* face：字体
* 属性定义：
* color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
* width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例
3. 图片标签：
* img：展示图片
* 属性：
* src：指定图片的位置
4. 列表标签：
* 有序列表：
* ol:
* li:
* 无序列表：
* ul:
* li:
5. 链接标签：
* a:定义一个超链接
* 属性：
* href：指定访问资源的URL(统一资源定位符)
* target：指定打开资源的方式
* _self:默认值，在当前页面打开
* _blank：在空白页面打开
6. 表格标签：
* table：定义表格
* width：宽度
* border：边框
* cellpadding：定义内容和单元格的距离
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
* bgcolor：背景色
* align：对齐方式
* tr：定义行
* bgcolor：背景色
* align：对齐方式
* td：定义单元格
* colspan：合并列
* rowspan：合并行
* th：定义表头单元格
`contentEditable属性
designMode属性
hidden属性
spellcheck属性
tabindex属性
**article元素**
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的
内容。它可以是一篇博客或者报刊中的文章，一篇论坛帖子、一段用户评论或独立
的插件，或其他任何独立的内容。
article元素是可以嵌套使用的。
article元素可以用来表示插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>artical元素</title>
</head>
<body>
<article>
<header>
<h1>极客学院</h1>
<p>hello ,欢迎来到极客学院</p>
</header>
<p>hello</p>
<footer>
<p>这是底部</p>
</footer>
</article>
</body>
</html>
**section元素**
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通
常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需
要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>artical元素</title>
</head>
<body>
<section>
<h1>p苹果</h1>
<p>这是一种水果</p>
</section>
<article>
<section>
<h2>香蕉</h2>
<p>这也是一种水果</p>
</section>
<section>
<h2>芒果</h2>
<p>这也是一种水果</p>
</section>
</article>
</body>
</html>、
**nav元素**
nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当
前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、
基本的连接组放进nav元素即可。
nav元素应用场景：
·传统导航条
•侧边栏导航
·页内导航
翻页操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>nav元素</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>html和css3的历史</h1>
<nav>
<ul>
<li><a href="#">html历史</a></li>
<li><a href="#">css3历史</a></li>
</ul>
</nav>
</header>
<section>
<h1>
html5的历史
</h1>
<p>....</p>
</section>
<section>
<h1>
css3的历史
</h1>
<p>....</p>
</section>
</article>
</body>
</html>
**aside元素**
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主
要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的
部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>aside元素</title>
</head>
<body>
<header>
<h1>js入门</h1>
</header>
<article>
<h1>语法</h1>
<p>文章的正文。。。</p>
<aside>
<h1>名词解释</h1>
<p>语法：这是语法的解释</p>
</aside>
</article>
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href="#">2015-3-4</a></li>
<li><a href="#">2015-3-5</a></li>
<li><a href="#">2015-3-6</a></li>
</ul>
</nav>
</aside>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>time元素</title>
</head>
<body>
<time datetime="2015-2-3">2015-2-3</time>
<time datetime="2015-2-3T20:00">2015-2-3</time>
<time datetime="2015-2-3T20:00Z">2015-2-3</time>
<time datetime="2015-2-3T20:00+09:00">2015-2-3</time>
</body>
</html>
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页
面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单
或相关的logo图片。
footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer
通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hgroup元素</title>
</head>
<body>
<article>
<header>
<hgroup>
<h1>这是文章标题</h1>
<h2>这是一个子标题</h2>
</hgroup>
<p>
<time datetime="2015-10-10">2015-10-10</time>
</p>
</header>
<div>
这是内容
</div>
<footer>
这是底部
</footer>
</article>
</body>
</html>
address元素
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他
们的网站链接、电子邮箱、真实地址、电话号码等。address应该不只用来呈现电
子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页编程实例</title>
</head>
<body>
<header>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">帮助</a></li>
</ul>
</header>
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章副标题</h2>
</hgroup>
<p>文章正文</p>
<section>
<div>
<article>
<h1>评论标题</h1>
</article>
</div>
</section>
</article>
</body>
</html>
表单内元素的formmethod属性
在HTML4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提
交页面，所以每个表单内页只有一个method属性来统一指定提交方法。在HTML5
中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。
表单内元素的formenctype属性
在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务
器之前应该如何对表单内的数据进行编码。
在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页编程实例</title>
</head>
<body>
<form>
<input type="text" formenctype="text/plain" />
<input type="text" formenctype="multipart/form-data" />
<input type="text" formenctype="application/x-www-form-urlencoded" />
</form>
</body>
</html>
表单内元素的formtarget属性
在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交
后所需要加载的页面。
在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打
开所需加载的页面。
表单内元素的autofocus属性
为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获
得光标焦点。
表单内元素的required属性
HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素
中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页编程实例</title>
</head>
<body>
<form action="http://localhost/phpmyadmin/">
<input type="text" required="required"/>
<button type="submit">提交</button>
</form>
</body>
</html>
表单内元素的labels属性
在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个
labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的
集合。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页编程实例</title>
</head>
<body>
<script>
function validata()
{
var textName=document.getElementById("txt_name");
var button=document.getElementById("btnValidata");
var form=document.getElementById("textfrom");
if(textName.value.trim()=="")
{
var label=document.createElement("label");
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
textName.label[1].innerHTML="请输入姓名"；
textName.label[1].setAttribute("style","font-size: 9px;color: red;");
}
}
</script>
<form id="textform">
<label id="label" for="txt_name">姓名：</label>
<input id="txt_name" />
<input type="button" id="btnValidata" value="验证" onclick="validata()"/>
</form>
</body>
</html>
标签的control属性 js动态创建
在HTML5中，可以再标签内部放置一个表单元素，并且通过该标签的control属性
来访问该表单元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页编程实例</title>
</head>
<body>
<script>
function setValue()
{
var label=document.getElementById("label");
var taxtbox=label.control;
textbox.value="010010";
}
</script>
<form>
<label id="label">
邮编：
<input id="txt_zip" maxlength="6" />
<small>请输入六位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页编程实例</title>
</head>
<body>
<input type="text" placeholder="请输入用户名" />
</body>
</html>
文本框的list属性
在HTML5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的
id。datalist元素也是HTML5中新增的元素，该元素类似于选择框，但是当用户想
要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而
是当文本框获得焦点时以提示输入的方式显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页编程实例</title>
</head>
<body>
<form>
<input type="text" name="greeting" list="greeting" />
<datalist id="greeting" style="display: none;">
<option value="htnl5">html5</option>
<option value="html4">html4</option>
<option value="html3">html3</option>
<option value="html2">html2</option>
<option value="html1">html1</option>
</datalist>
</form>
</body>
</html>
文本框的autocomplete属性
帮助输入所用的自动完成功能，是一个既节省输入时间又十分方便的功能。在
HTML5之前，因为谁都可以看见输入的值，所有在安全方面存在缺陷，只要使用
AutoComplete属性，安全性方面也可以得到很好的控制。
文本框的pattern属性
在HTML5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表
达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当输入的内
容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输
入的内容必须符合给定格式。
文本框的SelectionDirection属性
这对input元素与textarea元素，HTML5增加了SelectionDirection属性。当用户在
这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正
向选取文字时，改属性值为“forward”，当用户反向选取文字时，该属性值为
“backward”。当用户没有选取任何文字时，该属性值为“forward”。
复选框的indeterminate属性
对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。在HTML5
中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，以说明复选
框处于“尚未明确是否选取”状态。
image提交按钮的height属性与width属性
针对类型为image的input元素，HTML5新增了两个属性，height、width分别用
来指定图片按钮的高度和宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页编程实例</title>
</head>
<body>
<form action="test.jsp" method="post">
姓名：<input type="text"name="name" />
<input type="image" src="../img/img02.jpg" alt="编辑" width="200" height="500" />
</form>
</body>
</html>
06-16
5514
5514
09-14
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
