前端-HTML

学习框架

href和src有何区别

href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。
若对一个块级元素引入背景图片为<table border="1" background="/i/eg_bg_07.gif">

空的HTML元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
其他自闭合标签：<hr />水平线
提示：虽然标签大小写不敏感，但推荐小写，未来或将强制；
其他链接：网页中如何插入多个空格？

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。

HTML 链接

使用 Target 属性，你可以定义被链接的文档在何处显示。

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
此外target还有_top（从当前窗口到新页面的顶部）等

你可以为标签定义name属性，然后在a标签上用#指向它

<a href="#tips">有用的提示(同一个文档时)</a>
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示（其他页面中）</a>

<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

HTML图像

<img>是行级元素，<p>是块级元素
背景图片
本例演示如何向 HTML 页面添加背景图片。

排列图片
本例演示如何在文字中排列图像。

浮动图像
本例演示如何使图片浮动至段落的左边或右边。align:排整齐，校准，使得一致；alias：别名。

调整图像尺寸
本例演示如何将图片调整到不同的尺寸。

为图片显示替换文本
本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。

制作图像链接
本例演示如何将图像作为一个链接使用。

创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

把图像转换为图像映射
本例显示如何把一幅普通的图像设置为图像映射。
参考链接：W3School

HTML 表格

表格由<table>标签来定义。每个表格均有若干行（由 <tr> (table row)标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<h4>表头：（行名或者列名，取决于如何写）</h4>
<table border="1">
<caption>我的标题</caption>
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>


<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>


<h4>带有 cellspacing：(单元格间距、单元格边距为cellpadding)</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

参考：HTML 表格

HTML列表

定义列表：可以理解为一个名词以及对于这个名词的定义
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 </dt><dd> 开始。
</dd></dl>

<h2>一个定义列表：</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

列表样式

<h4>无序：</h4>
<ul type="disc">
 <li>黑色原点 桔子</li>
</ul> 
<ul type="circle">
 <li>空心原点 苹果</li>
</ul>  
<ul type="square">
 <li>方点 苹果</li>
</ul>  
<h4>有序：</h4>
<ol type="A">
 <li>大写字母"A"</li>
 <li>小写字母"a"</li>
 <li>罗马字母"I"</li>
 <li>小写罗马字母"i"</li>
</ol>  

HTML表单

表单

注释：表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
</form> 

单选
<input type="radio">定义单选按钮。

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

提交按钮
<input type="submit">定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定.如果省略 action 属性，则 action 会被设置为当前页面。action 属性定义在提交表单时执行的动作。通常，表单会被提交到 web 服务器上的网页。

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
<input type="submit" value="Submit">
</form> 
注释：如果要正确地被提交，每个输入字段必须设置一个 name 属性。
<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">

Method属性
何时使用 GET？
您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？
您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。

Target属性
target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一：

默认值为 _self，这意味着响应将在当前窗口中打开。

Autocomplete 属性
autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

<form action="/action_page.php" autocomplete="on">

表单元素

<select>元素（下拉列表）

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab" selected="true">Saab</option>
</select>

<textarea> 元素
<textarea> 元素定义多行输入字段（文本域）：

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button> 元素
<button> 元素定义可点击的按钮：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML 输入类型

本章描述<input> 元素的输入类型。https://www.w3school.com.cn/html/html_form_input_types.asp
单选框radio

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

复选框checkbox

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form> 

button

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

number

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

输入限制说明

输入日期

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

输入类型：range

<form>
  <input type="range" name="points" min="0" max="10">
</form>

能够使用如下属性来规定限制：min、max、step、value。

输入类型：month
<input type="month">允许用户选择月份和年份。

输入类型：week
<input type="week">允许用户选择周和年。

输入类型：time
允许用户选择时间（无时区）。

输入类型：datetime
允许用户选择日期和时间（有时区）
注释：Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。

输入类型：email
用于应该包含电子邮件地址的输入字段。
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。

输入类型：search
<input type="search">用于搜索字段（搜索字段的表现类似常规文本字段）。

输入类型：tel
<input type="tel"> 用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型。

输入类型：url
<input type="url"> 用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。

HTML输入属性

https://www.w3school.com.cn/html/html_form_attributes.asp

readonly 属性
readonly 属性规定输入字段为只读（不能修改）：

<form action="">
 First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

disabled 属性
disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。

size 属性 maxlength 属性
size 属性规定输入字段的尺寸（以字符计）。
maxlength 属性规定输入字段允许的最大长度。

<input type="text" name="firstname" value="John" size="40">
<input type="text" name="firstname" maxlength="10">

如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。
注释：输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。

autocomplete 属性
autocomplete 属性规定表单或输入字段是否应该自动完成。

当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。

autocomplete 属性适用于 <form>以及如下 <input>类型：text、search、url、tel、email、password、datepickers、range 以及 color。

实例
自动完成开启的 HTML 表单（某个输入字段为 off）：

<form action="action_page.php" autocomplete="on">
   First name:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form> 

novalidate 属性
novalidate 属性属于 <form>属性。

如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form> 

autofocus 属性
autofocus 属性是布尔属性。

如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。

First name:<input type="text" name="fname" autofocus>

form 属性
form 属性规定 <input> 元素所属的一个或多个表单。

提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

<form action="/example/html5/demo_form.asp" method="get" id="form1">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="提交" />
</form>

<p>下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。</p>

Last name: <input type="text" name="lname" form="form1" />

formaction 属性
formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖

formaction 属性适用于 type="submit" 以及 type="image"。

实例
拥有两个两个提交按钮并对于不同动作的 HTML 表单：

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form> 

===待续==