HTML笔记整理--下节

欢迎来到HTML基础笔记下节部分!

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用标签在 HTML 中创建链接。

有两种使用标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接

通过使用 name 属性 - 创建文档内的书签

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

<a href="url">Link text</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

实例

<a href="https://www.cnblogs.com/gaoziman">爱笑的Gao'博客</a>

上面这行代码显示为：Gao's Blog

点击这个超链接会把用户带到我的博客的首页。

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

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

下面的这行会在新窗口打开文档：

<a href="https://www.cnblogs.com/gaoziman" target="_blank">爱笑的Gao'博客!</a>h

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="https://www.cnblogs.com/gaoziman/html/html_links.asp#tips">有用的提示</a>

锚点定位：通过创建锚点链接，用户能够快速定位到目标内容。*

1. 使用相应的id名标注跳转目标的位置。 (找目标)
  <h3 id="two">第2集</h3> 
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）
  <a href="#two">

HTML 链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target="_self"  默认窗口弹出方式
target="_blank" 新窗口弹出

HTML 图像

通过使用 HTML，可以在文档中显示图像。

图像标签（）和源属性（Src）

在 HTML 中，图像由标签定义。

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。如果名为 "beat.gif" 的图像位于 www.baidu.com 的 images 目录中，那么其 URL 为 http://www.baidu.com/images/beat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

图像标签（img）

注意：

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
采取键值对的格式 key="value" 的格式

HTML 表格

你可以使用 HTML 创建表格。

表格

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签中。

字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。

每个表格由 table 标签开始。

每个表格行由 tr 标签开始。

每个表格数据由 td 标签开始。

表头单元格标签th:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签

替代相应的单元格标签即可。

表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在表格里面才有意义。你是风儿我是沙

<table>
   <caption>我是表格标题</caption>
</table>

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

表格属性

三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0

表格的表头

表格的表头使用

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1 ,cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

注意：

table、tr、td，他们是创建表格的基本标签，缺一不可

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在

标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

浏览器可能会这样显示：

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中显示如下：

row 1, cell 1	row 1, cell 2
	row 2, cell 2

表格标签

HTML 列表

HTML 支持有序、无序和定义列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于

。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</ul>

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于

标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以

开始。每个自定义列表项的定义以

开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

浏览器显示如下：

Coffee

Black hot drink
Milk

White cold drink

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

列表标签

HTML块

HTML
div 和 span

可以通过

和将 HTML 元素组合起来。

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：,

, ,

HTML 元素

HTML 元素是内联元素，可用作文本的容器。

元素也没有特定的含义。

当与 CSS 一同使用时，元素可用于为部分文本设置样式属性。

HTML 分组标签

HTML表单

HTML表单详解

HTML 表单用于搜集不同类型的用户输入。

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。

表单控件：

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

「1. input 控件」

<input type="属性值" value="你好">

input 输入的意思
标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性

常用属性：

用户名: <input type="text" />
密  码：<input type="password" />

value属性

value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

用户名:<input type="text"  name="username" value="请输入用户名">

name属性

name表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。
- name属性后面的值，是我们自己定义的。
- radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
- name属性，我们现在用的较少，但是，当我们学ajax 和后台的时候，是必须的。

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

checked属性

表示默认选中状态。较常见于单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

提交按钮

定义用于向表单处理程序（form-handler）提交表单的按钮。

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

表单处理程序在表单的 action 属性中指定：

实例

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

input 属性小结

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

「2. label标签」

label 标签为 input 元素定义标注（标签）。
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

如何绑定元素呢

第一种用法就是用label标签直接包含input表单，适合单个表单选择
第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。

  第一种
  <label> 用户名：
    <input type="radio" name="usename" value="请输入用户名">
  </label>
  第二种
  <label for="sex">男</label>
  <input type="radio" name="sex"  id="sex">

「3. textarea控件(文本域)」

通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用

  <textarea >
    文本内容
  </textarea>

文本框和文本域区别

表单	名称	区别	默认值显示	用于场景
input type="text"	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

「4. select下拉列表」

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
在option 中定义selected =" selected "时，当前项即为默认选中项。
我们实际开发会用的比较少

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

HTML 表单属性详解

Action 属性

action 属性定义提交表单时要执行的操作。

通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。

在下面的例子中，表单数据被发送到名为 "page.php" 的文件。该文件包含处理表单数据的服务器端脚本：

实例

提交后，将表单数据发送到 "page.php"：

<form action="page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

Target 属性

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

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

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

实例

此处，提交的结果将在新的浏览器标签中打开：

<form action="page.php" target="_blank">

Method 属性

method 属性指定提交表单数据时要使用的 HTTP 方法。

表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。

提交表单数据时，默认的 HTTP 方法是 GET。

实例

此例在提交表单数据时使用 GET 方法：

<form action="/action_page.php" method="get">

实例

此例在提交表单数据时使用 POST 方法：

<form action="/action_page.php" method="post">

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签

提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！

Autocomplete 属性

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

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

实例

启用自动填写的表单：

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

Novalidate 属性

novalidate 属性是一个布尔属性。

如果已设置，它规定提交时不应验证表单数据。

实例

未设置 novalidate 属性的表单：

<form action="/action_page.php" novalidate>

所有 form属性的列表

HTML 表单元素详解

input元素

最重要的表单元素是元素。

元素根据不同的 type 属性，可以变化为多种形态。

select元素（下拉列表）
元素定义下拉列表：

实例

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

实例

<option value="fiat" selected>Fiat</option>

textarea元素</h4>
<p><em><textarea></em> 元素定义多行输入字段（<em>文本域</em>）：</p>
<h5 id="实例-11">实例</h5>
<pre><code class="language-html"><textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</code></pre>
<p>以上 HTML 代码在浏览器中显示为：</p>
<h2 id=""><img src="21.png" alt="" loading="lazy"></h2>
<h4 id="-button-元素"><button> button 元素</h4>
<p><em><button></em> 元素定义可点击的<em>按钮</em>：</p>
<h5 id="实例-12">实例</h5>
<pre><code class="language-html"><button type="button" onclick="alert('Hello World!')">Click Me!</button>
</code></pre>
<h2 id="以上-html-代码在浏览器中显示为">以上 HTML 代码在浏览器中显示为：<br>
<img src="22.png" alt="" loading="lazy"></h2>
<h4 id="html5-表单元素">HTML5 表单元素</h4>
<p>HTML5 增加了如下表单元素：</p>
<ul>
<li>
<datalist>
</li>
<li>
<keygen>
</li>
<li>
<output>
</li>
</ul>
<p><strong>注释：</strong>默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。</p>
<hr>
<h4 id="html5---detalist元素">HTML5 <datalist> detalist元素</h4>
<p><em><datalist></em> 元素为 <input> 元素规定预定义选项列表。</p>
<p>用户会在他们输入数据时看到预定义选项的下拉列表。</p>
<p><input> 元素的 <em>list</em> 属性必须引用 <datalist> 元素的 <em>id</em> 属性。</p>
<h5 id="实例-13">实例</h5>
<p>通过 <datalist> 设置预定义值的 <input> 元素：</p>
<pre><code class="language-html"><form action="page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</code></pre>
<hr>
<h3 id="html-输入类型">HTML 输入类型</h3>
<h4 id="输入类型text">输入类型：text</h4>
<p><em><input type="text"></em> 定义供<em>文本输入</em>的单行输入字段：</p>
<h5 id="实例-14">实例</h5>
<pre><code class="language-html"><form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</code></pre>
<h2 id="以上-html-代码在浏览器中看上去是这样的">以上 HTML 代码在浏览器中看上去是这样的：<br>
<img src="23.png" alt="" loading="lazy"></h2>
<h4 id="输入类型password">输入类型：password</h4>
<p><em><input type="password"></em> 定义<em>密码字段</em>：</p>
<h5 id="实例-15">实例</h5>
<pre><code class="language-html"><form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
</code></pre>
<p>以上 HTML 代码在浏览器中看上去是这样的：</p>
<p><img src="24.png" alt="" loading="lazy"></p>
<p><strong>注释：</strong>password 字段中的字符会被做掩码处理（显示为星号或实心圆）。</p>
<hr>
<h4 id="输入类型submit">输入类型：submit</h4>
<p><em><input type="submit"></em> 定义<em>提交</em>表单数据至<em>表单处理程序</em>的按钮。</p>
<p>表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。</p>
<p>在表单的 action 属性中规定表单处理程序（form-handler）：</p>
<h5 id="实例-16">实例</h5>
<pre><code class="language-html"><form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</code></pre>
<p>以上 HTML 代码在浏览器中看上去是这样的：</p>
<h2 id="-1"><img src="25.png" alt="" loading="lazy"></h2>
<h4 id="input-type-radio">Input Type: radio</h4>
<p><input type="radio"> 定义单选按钮。</p>
<p>Radio buttons let a user select ONLY ONE of a limited number of choices:</p>
<h5 id="实例-17">实例</h5>
<pre><code class="language-html"><form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</code></pre>
<p>以上 HTML 代码在浏览器中看上去是这样的：</p>
<p><img src="26.png" alt="" loading="lazy"></p>
<hr>
<h4 id="input-type-checkbox">Input Type: checkbox</h4>
<p><input type="checkbox"> 定义复选框。</p>
<p>复选框允许用户在有限数量的选项中选择零个或多个选项。</p>
<h5 id="实例-18">实例</h5>
<pre><code class="language-html"><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>
</code></pre>
<p>以上 HTML 代码在浏览器中看上去是这样的：<br>
<img src="27.png" alt="" loading="lazy"></p>
<hr>
<h4 id="html5-输入类型">HTML5 输入类型</h4>
<p>HTML5 增加了多个新的输入类型：</p>
<ul>
<li>color</li>
<li>date</li>
<li>datetime</li>
<li>datetime-local</li>
<li>email</li>
<li>month</li>
<li>number</li>
<li>range</li>
<li>search</li>
<li>tel</li>
<li>time</li>
<li>url</li>
<li>week</li>
</ul>
<p><strong>注释：</strong>老式 web 浏览器不支持的输入类型，会被视为输入类型 text。</p>
<hr>
<h5 id="输入类型number">输入类型：number</h5>
<p><em><input type="number"></em> 用于应该包含数字值的输入字段。</p>
<p>您能够对数字做出限制。</p>
<p>根据浏览器支持，限制可应用到输入字段。</p>
<h5 id="实例-19">实例</h5>
<pre><code class="language-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>表单控件之HTML5新属性</title>
</head>
<body>
<p>
根据浏览器支持：<br>
数值约束会应用到输入字段中。
</p>

<form action="/demo/demo_form.asp">
数量（1 到 5 之间）：
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>

<p><b>注释：</b>IE9 及早期版本不支持 type="number"。</p>
</body>
</html>
</code></pre>
<hr>
<p>以上 HTML 代码在浏览器中看上去是这样的：</p>
<p><img src="28.png" alt="" loading="lazy"></p>
<hr>
<h5 id="输入限制">输入限制</h5>
<p>这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：</p>
<p><img src="29.png" alt="" loading="lazy"></p>
<hr>
<h5 id="输入类型date">输入类型：date</h5>
<p><em><input type="date"></em> 用于应该包含日期的输入字段。</p>
<p>根据浏览器支持，日期选择器会出现输入字段中。</p>
<h5 id="实例-20">实例</h5>
<pre><code class="language-html"><form>
Birthday:
<input type="date" name="bday">
</form>
</code></pre>
<p>以上 HTML 代码在浏览器中看上去是这样的：</p>
<h2 id="-2"><img src="30.png" alt="" loading="lazy"></h2>
<h5 id="输入类型color">输入类型：color</h5>
<p><em><input type="color"></em> 用于应该包含颜色的输入字段。</p>
<p>根据浏览器支持，颜色选择器会出现输入字段中。</p>
<h5 id="实例-21">实例</h5>
<pre><code class="language-html"><form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
</code></pre>
<hr>
<h5 id="输入类型range">输入类型：range</h5>
<p><em><input type="range"></em> 用于应该包含一定范围内的值的输入字段。</p>
<p>根据浏览器支持，输入字段能够显示为滑块控件。</p>
<h5 id="实例-22">实例</h5>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<body>

<p>
根据浏览器支持：<br>
输入类型 "range" 可显示为滑动控件。
</p>

<form action="/demo/demo_form.asp" method="get">
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>

<p><b>注释：</b>IE9 及早期版本不支持 type="range"。</p>

</body>
</html>

</code></pre>
<p><img src="31.png" alt="" loading="lazy"></p>
<hr>
<h5 id="输入类型month">输入类型：month</h5>
<p><em><input type="month"></em> 允许用户选择月份和年份。</p>
<p>根据浏览器支持，日期选择器会出现输入字段中。</p>
<h5 id="实例-23">实例</h5>
<pre><code class="language-html"><form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
</code></pre>
<hr>
<h5 id="输入类型week">输入类型：week</h5>
<p><em><input type="week"></em> 允许用户选择周和年。</p>
<p>根据浏览器支持，日期选择器会出现输入字段中。</p>
<h5 id="实例-24">实例</h5>
<pre><code class="language-html"><form>
Select a week:
<input type="week" name="week_year">
</form>
</code></pre>
<hr>
<h5 id="输入类型time">输入类型：time</h5>
<p><em><input type="time"></em> 允许用户选择时间（无时区）。</p>
<p>根据浏览器支持，时间选择器会出现输入字段中。</p>
<h5 id="实例-25">实例</h5>
<pre><code class="language-html"><form>
Select a time:
<input type="time" name="usr_time">
</form>
</code></pre>
<hr>
<h5 id="输入类型datetime">输入类型：datetime</h5>
<p><em><input type="datetime"></em> 允许用户选择日期和时间（有时区）。</p>
<p>根据浏览器支持，日期选择器会出现输入字段中。</p>
<h5 id="实例-26">实例</h5>
<pre><code class="language-html"><form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>
</code></pre>
<hr>
<h5 id="输入类型datetime-local">输入类型：datetime-local</h5>
<p><em><input type="datetime-local"></em> 允许用户选择日期和时间（无时区）。</p>
<p>根据浏览器支持，日期选择器会出现输入字段中。</p>
<h5 id="实例-27">实例</h5>
<pre><code class="language-html"><form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
</code></pre>
<hr>
<h5 id="输入类型email">输入类型：email</h5>
<p><em><input type="email"></em> 用于应该包含电子邮件地址的输入字段。</p>
<p>根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。</p>
<p>某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。</p>
<h5 id="实例-28">实例</h5>
<pre><code class="language-html"><form>
E-mail:
<input type="email" name="email">
</form>
</code></pre>
<hr>
<h5 id="输入类型search">输入类型：search</h5>
<p><em><input type="search"></em> 用于搜索字段（搜索字段的表现类似常规文本字段）。</p>
<h5 id="实例-29">实例</h5>
<pre><code class="language-html"><form>
Search Google:
<input type="search" name="googlesearch">
</form>
</code></pre>
<hr>
<h5 id="输入类型tel">输入类型：tel</h5>
<p><em><input type="tel"></em> 用于应该包含电话号码的输入字段。</p>
<p>目前只有 Safari 8 支持 tel 类型。</p>
<h5 id="实例-30">实例</h5>
<pre><code class="language-html"><form>
Telephone:
<input type="tel" name="usrtel">
</form>
</code></pre>
<hr>
<h5 id="输入类型url">输入类型：url</h5>
<p><em><input type="url"></em> 用于应该包含 URL 地址的输入字段。</p>
<p>根据浏览器支持，在提交时能够自动验证 url 字段。</p>
<p>某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。</p>
<h5 id="实例-31">实例</h5>
<pre><code class="language-html"><form>
Add your homepage:
<input type="url" name="homepage">
</form>
</code></pre>
<hr>
<h3 id="form表单域">form表单域</h3>
<ul>
<li>
<p>收集的用户信息怎么传递给服务器？</p>
</li>
<li>
<ul>
<li>通过form表单域</li>
</ul>
<p>目的：</p>
</li>
<li>
<ul>
<li>在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。</li>
</ul>
</li>
</ul>
<pre><code class="language-html"><form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
</code></pre>
<h4 id="常用属性"><strong>常用属性：</strong></h4>
<p><img src="20.png" alt="" loading="lazy"></p>
<ul>
<li>每个表单都应该有自己表单域。</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align:left">属性</th>
<th style="text-align:left">属性值</th>
<th style="text-align:left">作用</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">action</td>
<td style="text-align:left">url地址</td>
<td style="text-align:left">用于指定接收并处理表单数据的服务器程序的url地址。</td>
</tr>
<tr>
<td style="text-align:left">method</td>
<td style="text-align:left">get/post</td>
<td style="text-align:left">用于设置表单数据的提交方式，其取值为get或post。</td>
</tr>
<tr>
<td style="text-align:left">name</td>
<td style="text-align:left">名称</td>
<td style="text-align:left">用于指定表单的名称，以区分同一个页面中的多个表单。</td>
</tr>
</tbody>
</table>
<h3 id="get-和-post-的区别"><strong>GET 和 POST 的区别</strong></h3>
<ul>
<li>GET在浏览器回退时是无害的，而POST会再次提交请求。</li>
<li>GET请求会被浏览器主动cache，而POST不会，除非手动设置。</li>
<li>GET请求只能进行url编码，而POST支持多种编码方式。</li>
<li>GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。</li>
<li>GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。</li>
<li>对参数的数据类型，GET只接受ASCII字符，而POST没有限制。</li>
<li>GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。</li>
</ul>
<h4 id="团队约定"><strong>团队约定：</strong></h4>
<ul>
<li>元素属性值使用双引号语法</li>
<li>元素属性值可以写上的都写上</li>
</ul>
<pre><code class="language-html">推荐
<input type="text" />
<input type="radio" name="name" checked="checked" />
</code></pre>
<hr>
<h3 id="从输入url到页面展示发生了什么面试">从输入url到页面展示发生了什么(面试)</h3>
<blockquote>
<p>作者：Twinkle_<br>
链接：<a href="https://juejin.im/post/6869279683230629896" target="_blank">https://juejin.im/post/6869279683230629896</a><br>
来源：掘金</p>
</blockquote>
<h5 id="浏览器的多进程架构"><strong>浏览器的多进程架构</strong></h5>
<p>从浏览器输入 URL 到页面渲染的整个过程都是由浏览器架构中的各个进程之间的配合完成。</p>
<ol>
<li>浏览器主进程: 管理子进程、提供服务功能</li>
<li>渲染进程：将HTML、CSS、JS渲染成界面，js引擎v8和排版引擎Blink就在上面，他会为每一个tab页面创建一个渲染进程</li>
<li>GPU进程：本来是负责处理3Dcss的，后来慢慢的UI界面也交给GPU来绘制</li>
<li>网络进程：就是负责网络请求，网络资源加载的进程</li>
<li>插件进程：负责插件的运行的，因为插件很容易崩溃，把它放到独立的进程里不要让它影响别人</li>
</ol>
<p><strong>浏览器的多进程架构</strong></p>
<p>从用户输入信息到页面展示的不同阶段，是不同的进程在发挥作用，示意图如下：<img src="https://img2022.cnblogs.com/blog/2743240/202202/2743240-20220213155305807-1099031814.gif" alt="图片" loading="lazy">从图中可以看出，整个过程是需要各个进程之间相互配合完成的，过程大致可以描述为：</p>
<ol>
<li>用户输入url,处理输入信息，主进程开始导航，交给网络进程干活</li>
<li>网络进程发起网络请求，其中有可能会发生重定向</li>
<li>服务器响应URL之后，主进程就要通知渲染进程，你要开始干活了</li>
<li>渲染进程准备好了，要想渲染进程提交数据，这个时间叫做提交文档</li>
<li>渲染进程接受到数据，完成页面渲染。</li>
</ol>
<p><strong>具体过程</strong></p>
<ol>
<li>输入url</li>
</ol>
<p>用户输入url，处理输入信息：如果为非url结构的字符串，交给浏览器默认引擎去搜索改字符串；若为url结构的字符串，浏览器主进程会交给网络进程 ,开始干活。<br>
2.1 查找浏览器缓存网络进程会先看看是否存在本地缓存，如果有就直接返回资源给浏览器进程，无则下一步 DNS-> IP -> TCP2.2 DNS解析网络进程拿到url后，先会进行DNS域名解析得到IP地址。如果请求协议是HTTPS，那么还需要建立TLS连接。<br>
2.2 建立TCP连接，三次握手接下来就是利用IP地址和服务器建立TCP连接。连接建立之后，向服务器发送请求。<br>
服务器响应服务器收到请求信息后，会根据请求信息生成响应行、响应头、响应体，并发给网络进程。网络进程接受了响应信息之后，就开始解析响应头的内容。网络进程解析响应行和响应头信息的过程：<br>
3.1 重定向如果响应行状态码为301（永久重定向）和302（临时），那么说明需要重定向到其他url。这时候网络进程会从响应头中的Location字段里读取重定向的地址，并重新发起网络请求。<br>
3.2 响应数据处理导航会通过请求头的Content-type字段判断响应体数据的类型。浏览器通过这个来决定如何显示响应体的内容。比如：若为application/octet-stream，则会按照下载类型来处理这个请求，导航结束。若为text/html，这就告诉浏览器服务器返回的是html格式，浏览器会通知渲染进程，你要干活了。准备渲染进程默认情况，每个页面一个渲染进程。但若处于同一站点（同根域名+协议），那么渲染进程就会复用。提交文档渲染进程准备好后，浏览器进程发出“提交文档的消息”，渲染进程接受了消息之后，会跟网络进程简历传输数据的管道。等数据传输完成了，渲染进程会告诉浏览器进程，确认文档提交，这时候浏览器会更新页面，安全状态，url，前进后退的历史。到这里导航结束，进入渲染阶段。<br>
注：当浏览器刚开始加载一个地址之后，标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容，并没立即替换为百度首页的页面。因为需要等待提交文档阶段，页面内容才会被替换。前端HTML基础面试题iframe有哪些缺点？iframe是一种框架，也是一种很常见的网页嵌入方式。<strong>「iframe的优点」</strong>iframe能够原封不动的把嵌入的网页展现出来。如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。<strong>「iframe的缺点」</strong>会产生很多页面，不容易管理。iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。label的作用是什么？是怎么用的？<br>
<code>例子1: 点击" 用户名:" 就可以定位光标到输入框</code><form><label for="myid "> 用户名:</label><input type="text" id="myid" /></form><code> </code>例子2: 点击" 用户名:" 或按键alt+1, 都可以定位光标到输入框<code><form> <label for="myid" accesskey="1"> 用户名:</label> <input type="text" id="myid" tabindex="1" /></form> </code><strong>for 属性</strong>功能：表示Label 标签要绑定的HTML 元素，你点击这个标签的时候，所绑定的元素将获取焦点。<strong>acesskey 属性</strong><br>
功能：表示访问Label 标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。<br>
局限性：accessKey 属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。HTML5的form如何关闭自动完成功能？ HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。<br>
但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。<strong>关闭输入框的自动完成功能有3种方法：</strong>在IE的Internet选项菜单里的内容--自动完成里面设置设置form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能设置输入框的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能将 HTML5 看作成开放的网络平台<strong>「什么是 HTML5 的基本构件（building block）？」</strong>语义 - 提供更准确地描述内容。连接 - 提供新的方式与服务器通信。离线和存储 - 允许网页在本地存储数据并有效地离线运行。多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。2D/3D 图形和特效 - 提供更多种演示选项。性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。设备访问 - 允许使用各种输入、输出设备。外观 - 可以开发丰富的主题。浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？在浏览器的html头部加上manifest属性，如果是第一次访问浏览器会根据manifest的内容进行下载存储离线内容，如果已经访问过则从离线存储中进行加载，然后在比对服务器如果有新内容在更新离线存储<br>
离线的情况下，浏览器就直接使用离线存储的资源。浏览器的渲染过程？<br>
<code>1、将获取的html解析成dom树 </code><br>
<code>2、处理css，构成层叠样式表模型CSSOM</code><br>
<code>3、将dom树和CSSOM合并为渲染树</code><br>
<code>4、根据CSSOM将渲染树的节点布局计算</code><br>
<code>5、将渲染树节点样式绘制到页面上</code><br>
// 注意在渲染的过程中是自上而下渲染，js会阻塞页面的渲染，优先等js执行完成如果在渲染的过程中改变了样式，会造成回流需要重新渲染<br>
<code>link和@import的区别？</code><br>
<code>1、从属关系区别：link属于html标签，而@import是css提供的。</code><br>
<code>2、加载顺序区别：页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。</code><br>
<code>3、兼容性区别：import只在IE5以上才能识别，而link是html标签，无兼容问题。</code><br>
<code>4、dom可操作性区别：可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式</code><br>
<code>5、权重区别：如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高于@import的权重这样的直观效果。（简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）</code><br>
<code>src与href的区别？</code><br>
<code>1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。``2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将</code></p>