[JavaScript知识库]HTML学习打卡_Day4

学习 HTML ——打卡！！！Day4

1、HTML 表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域 (textarea) 、下拉列表、单选框(radio-buttons) 、复选框(checkboxes)等等。

表单使用表单标签 < form > 。

<form>
    ……
    input  元素
    ……
</form>

1.1、输入元素

多数情况下被用到的表单标签是输入标签 (< input >) 。

输入类型是由类型属性 (type) 定义的。大多数经常被用到的输入类型如下：

1.1.1、文本域 (Text Fields)

文本域是通过 < input type=“text” > 标签来设定的，当用户要在表单中输入字母、数字等内容时，就会用到文本域。

<form>
    <!--文本域-->
    First name:<input type="text" name="firstname"><br>
    Last name:<input type="text" name="lastname">
</form>

注意： 表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

1.1.2、密码字段

密码字段通过标签 < input type=“password” > 来定义。

<form>
    <!--密码字段-->
    Password:<input type="password" name="password">
</form>

注意： 密码字段字符不会明文现实，而是以星号或圆点代替。

1.1.3、单击按钮 (Radio Buttons)

< input type=“radio” > 标签定义了表单单选框选项

<form>
    <!--单选按钮-->
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="male">Female
</form>

1.1.4、复选框 (Checkboxes)

< input type=“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>

1.1.5、提交按钮 (Submit Button)

< input type=“submit” > 定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名，由动作属性定义的这个文件通常会对接收到的输入数据进行相关处理。

<!--提交按钮-->
<form name="input" action="https://blog.csdn.net/weixin_50197544?spm=1000.2115.3001.5343" method="get">
    Username:<input type="text" name="user">
    <input type="submit" value="Submit">
</form>

假如在上面的文本框内输入几个字母，然后点击确认按钮，那么输入数据就会传送到 ”https://blog.csdn.net/weixin_50197544?spm=1000.2115.3001.5343“ 的页面。该页面将显示输入的结果。

2、HTML 框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

iframe语法：

<iframe src="URL">
    
</iframe>

该 URL 指向不同的网页。

2.1、设置高度和宽度

height 和 width 属性用来定义 iframe 标签的高度和宽度。属性默认单位为像素，但是可以指定其按比例显示（如：“80%”）。

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200">
    
</iframe>

2.2、移除边框

frameborder 属性用于定义 iframe 表示是是否显示边框。设置属性值为 “0” 移除 iframe 边框：

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

2.3、使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面，目标链接的属性必须使用 iframe 的属性：

<iframe src="demo_iframe.htm" name="iframe_a">
    
</iframe>
<p>
    <a href="https://blog.csdn.net/weixin_50197544?spm=1000.2115.3001.5343" target="iframe_a" rel="noopener">
    1_Lina.com
    </a>
</p>

2.4、iframe 标签

3、HTML 颜色、颜色名、颜色值

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色、蓝色混合而成 (RGB) 。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。三种颜色 红、绿、蓝的组合从 0 到 255 ，一共有 1600 万不同颜色（255×255×255）。

3.1、颜色 - Web 安全色

数年前，大多是计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标砖被建议使用。其中，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

最初，216 跨平台 Web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

3.2、颜色名

141 个颜色名称是在 HTML 和 CSS 颜色规范定义地（1 标准颜色，再加 124 ）。

提示：17标准颜色：黑色、蓝色、水、紫红色、灰色、绿色、石灰、栗色、海军、橄榄、橙、紫、红、白、银、蓝绿色、黄色。

3.3、颜色值

颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色地最低值为 0（十六进制为 00），最高值为 255（十六进制为 FF ）。

十六进制值得写法为 # 号后面跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

4、HTML 脚本

JavaScript 使 HTML 页面具有更强得动态和交互性。

4.1、< script > 标签

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

下面的脚本会向浏览器输出”Hello World！“

<script>
	document.write("Hello World!");
</script>

4.2、< noscript > 标签

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

<script>
    document.write("Hello World!")
</script>
<noscript>
    抱歉，你的浏览器不支持 JavaScript!
</noscript>

4.3、HTML 脚本标签

5、HTML 字符实体

HTML 中预留字符必须被替换为字符实体。一些在键盘找不到的字符也可以使用字符实体来替换。

5.1、实体

在 HTML 中，某写字符是预留的。比如：不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，必须在 HTML 源代码中使用实体字符（character entities）。字符实体类似这样：

&entity_name;
或
&#entity_number;

如需要显示小于号，我们必须这样写：**&lt ** 或 &#60 或 &#060 ；

5.2、不间断空格

HTML 中常用字符实体是不间断空格（&nbsp ;）。

浏览器总是会阶段 HTML 页面中地空格。如果你在文本中写 10 个空格，在显示该页面前，浏览器会删除它们中的 9 个。如果需要在页面中增加空格数量，需要使用 &nbsp 实体字符。

5.3、结合音字符

发音符号是加到字母上的一个”glyph(字形)“。一些变音符号，如 尖音符（a?）和 抑音符（O?）。变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母之间。变音符号可以与数字字符、字母的组合来使用。

以下是一些实例：

5.4、字符实体

6、HTML URL

URL 是一个网页地址。URL 可以由字母组成，如“https://blog.csdn.net/weixin_50197544/article/details/121622643?spm=1001.2014.3001.5501”，或互联网协议（IP）地址：192.68.23.66。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

6.1、统一资源定位器

Web 浏览器通过 URL 从 Web 服务器请求页面。当你点击 HTML 页面中的某个链接时，对应的 <a>?标签指向玩万维网上的一个地址。一个统一资源定位器用于定位万维网上的文档。

语法规则：

scheme:/host.domain:port/path/filename

说明：

• scheme 定义因特网服务的类型。最常见的类型是 http
• host 定义域主机。http 的默认主机是 www
• domain 定义因特网域名。比如 baidu.com
• port 定义主机上的端口号。http 的默认端口号是 80
• path 定义服务器上的路径。如果省略，则文档必须位于网站的根目录
• filename 定义文档/资源的名称

6.2、常见的 URL Scheme

7、HTML 通查列表

7.1、基本文档

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
<head>


</head>

<body>

</body>

</html>

7.2、基本标签（Basic Tags）

<body>
    <h1>
        最大的标题
    </h1>
    <h2>

    </h2>
    <h3>

    </h3>
    <h4>

    </h4>
    <h4>
        
    </h4>
    <h5>

    </h5>
    <h6>
        最小的标题
    </h6>

    <p>
        这是一个段落。
    </p>

    <br>(换行)

    <hr>(水平线)
    <!--这是注释-->
</body>

7.3、文本格式化（Formatting）

<body>
    <b>粗体文本</b>
    <code>计算机代码</code>
    <em>强调文本</em>
    <i>斜体文本</i>
    <kbd>键盘输入</kbd>
    <pre>预格式化文本</pre>
    <small>更小的文本</small>
    <strong>重要的文本</strong>

    <abbr>缩写</abbr>
    <address>联系信息</address>
    <bdo>文字方向</bdo>
    <blockquote>从另一个源引用的部分</blockquote>
    <cite>工作的名称</cite>
    <del>删除的文本</del>
    <ins>插入的文本</ins>
    <sub>下表文本</sub>
    <sup>上标文本</sup>
</body>

7.4、链接（Links）

普通的链接：
<a href="http://www.example.com/">链接文本</a>
图像链接： 
<a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>

书签：
<a id="tips">
    提示部分
</a>
<a href="#tips">
    跳到提示部分
</a>

7.5、图片（Images）

<img loading="lazy" src="URL" alt="替换文本" height="42" width="42">

7.6、样式/区块（Styles/Sections）

<style type="text/css">
    h1 {color:red;}
	p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

7.7、列表

7.7.1、无序列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

7.7.2、有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

7.7.3、定义列表

<dl>
    <dt>项目 1</dt>
    	<dd>描述项目 1</dd>
    <dt>项目 2</dt>
    	<dd>描述项目 2</dd>
</dl>

7.8、表格（Tables）

<table border="1">
	<tr>
    	<th>表格标题</th>
    	<th>表格标题</th>
    </tr>
    <tr>
    	<td>表格数据</td>
    	<td>表格数据</td>
    </tr>
</table>

7.8、框架（Iframe）

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

7.9、表单（Forms）

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

7.10、实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ?

“40” maxlength=“50”>

7.10、实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ?