17.表单

允许用户在表单中输入内容：文本域（textarea），下拉列表，单选框（radio-buttons），复选框（checkboxes）
使用表单标签<form>来设置

输入元素

<input>输入类型是由类型属性（type）定义，常用类型如下：

文本域

<input type="text">当用户要在表单中输入字母、数字等内容时，就会用到文本域

<form>
name: <input type="text" 
</form>

密码字段

<input type="password">
密码字段不会明文显示，而是以星号或圆点替代

单选按钮（radio buttons）

<input type="radio">

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框（checkboxes）

<input type="checkbox">

提交按钮（submit button）

<input type="submit">
当用户单击确认按钮时，表单的内容会被传送到另一个文件，表单的动作属性定义了目的文件的文件名

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

在文本框输入几个字母，然后点击确认按钮，那么输入数据会传送到“html_form_action.php”的页面，该页面将显示输入结果
value=“submit”是给提交键命名

表单标签

<textarea>文本框，一个多行的输入控件
placeholder 设置描述文本区域预期值的简短提示
rows 行数
cols 宽度

<textarea rows="10" cols="30">
我是一个文本框。 
</textarea>

<label>与input合用，当单击文本的时可以直接选择文本所在选项

<form action="demo_form.phpp">
  <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>

<fieldset>绘制表单元素边框

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

<legend>为fieldset元素定义标题
<select>下拉列表
<optgroup>选项组

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

<option>下拉列表中的选项
<button>点击按钮

<button type="button" onclick="alert('你好，世界!')">点我!</button>

点击后会跳出一个框显示：你好，世界
<datalist>下拉列表预先设置选项

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>
<input type="submit">
</form>

<input type="reset">重置
<maxlength>最长输入字符

18.框架<iframe>

<iframe src="URL"></iframe>
url指向不同网页

高度与宽度

<height><width>
默认为像素，也可以按%显示

移除边框

<frameborder>定义是否显示边框
设置为0时移除边框

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe来显示目标连接页面

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

19.颜色

由红色、绿色、蓝色混合而成
颜色由一个16进制符号定义，符号由红色、绿色、蓝色的值组成（RGB）
每种颜色最小的值时0（十六进制：#00），最大值是255（十六进制：#FF）

20.脚本

<script>

• 定义客户端脚本，如javascript
• 既可包含脚本语句，也可通过src属性指向外部脚本文档文件
• JavaScript最常用于图片操作、表单验证以及内容动态更新

<noscript>

• 提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时
• 可以包含普通html页面的body元素中能够找到的所有元素
• 只有在浏览器不支持脚本或者禁用脚本时，才会显示<noscript>元素中的内容

JavaScript体验

• 可以直接在html输出

document.write("<p>这是一个段落。</p>");

• 事件响应

<script>
function myFunction()
{document.getElementById("demo").innerHTML="Hello JavaScript!";}
</script>
<button type="button" onclick="myFunction()">点我</button>

处理html样式

<p id="demo">
JavaScript 能改变 HTML 元素的样式。</p><script>
function myFunction()
{   x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式}</script>
<button type="button" onclick="myFunction()">点击这里</button>

21.字符实体

• html种预留字符必须被替换为字符实体
• 一些键盘上找不到的字符也可以使用字符实体来替换
  比如：不能使用小于＜符号和大于＞符号，浏览器会误认为他们是标签
• 好处时易于记忆，坏处时浏览器不支持所有实体名称（对实体数字的支持却很好）
• 实体名称对大小写敏感
  
  空格
  （&nbsp）
  结合音标符
  

22.URL统一资源定位器

• 是一个网页地址
• 可以由字母组成，如“runoob.com”,或互联网协议（IP）地址：192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住

1.通过url从web服务器请求页面
2.当点击html页面中的某个连接时，对应的<a>标签指向万维网上的一个地址
3.一个统一资源定位器url用于定位万维网尚的文档
scheme：//host。domain：port/path/filename
scheme：定义因特网服务的类型，最常见的是http
host：定义域主机，默认是www
domain：定义因特网域名runoob.com
：port：定义主机上的端口号，默认是80
path：服务器上的路径（如果省略，则文档必须位于网页的根目录中）
** filename：**定义文档资源的名称