HTML学习之表单,iframe框架,颜色,JS,字符实体,URL

蔚落 2022-03-01 08:20 170阅读 0赞

### HTML表单,后续代码只附body部分,整个结构不做赘述 ###

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

<form>
    input 元素
    </form>

### HTML表单标签 ###

标签		描述
    <form>	定义供用户输入的表单
    <input>	定义输入域
    <textarea>	定义文本域 (一个多行的输入控件)
    <label>	定义了 <input> 元素的标签，一般为输入标题
    <fieldset>	定义了一组相关的表单元素，并使用外框包含起来
    <legend>	定义了 <fieldset> 元素的标题
    <select>	定义了下拉选项列表
    <optgroup>	定义选项组
    <option>	定义下拉列表中的选项
    <button>	定义一个点击按钮
    <datalist>	指定一个预先定义的输入控件选项列表
    <keygen>	定义了表单的密钥对生成器字段
    <output>	定义一个计算结果

#### 文本域 ####

文本域通过input type=“text” 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。同时可以设置密码字段

<form action="demo-form.php">
      First name: <input type="text" name="firstname"><br>
      Last name: <input type="text" name="lastname"><br>
      Password: <input type="password" name="pwd"><br>
      <input type="reset" value="重置">
      <input type="submit" value="提交">
    </form>

![在这里插入图片描述][20190322093904931.png]

#### 创建按钮和单选按钮 ####

input type=“radio” 标签定义了表单单选框选项.同一组的单选按钮，name 取值一定要一致.  
value：提交数据到服务器的值（后台程序PHP使用）  
name：为控件命名，以备后台程序 ASP、PHP 使用  
checked：当设置 checked=“checked” 时，该选项被默认选中

<form action="demo-form.php" method="get">
      <input type="button" value="Hello world!"><br><br>
      <input type="radio" name="sex" value="Male"> Male<br>
      <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
      <input type="submit" value="提交">
    </form>

![在这里插入图片描述][20190322094839421.png]

#### 复选框 ####

input type=“checkbox” 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项

![在这里插入图片描述][201903220951115.png]  
提交之后:  
![在这里插入图片描述][20190322095123902.png]

#### Select下拉列表 ####

selected表示预选,运行时显示的就是Fiat

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

![在这里插入图片描述][20190322095544713.png]

#### textarea多行输入文本域 ####

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

![在这里插入图片描述][20190322095738489.png]

#### 利用fieldset和legend定义带边框的表单 ####

<form action="">
    <fieldset>
    <legend>Personal information:</legend>
    Name: <input type="text" size="30"><br>
    E-mail: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
    </fieldset>
    </form>

![在这里插入图片描述][20190322100833570.png]

### HTML内联框架iframe,定义一个内联的iframe ###

HTML内联框架元素iframe 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中

iframe语法:
    <iframe src="URL"></iframe>  该URL指向不同的网页。

#### iframe的基础设置 ####

height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示(如：“80%”)。  
frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70]

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

iframe可以显示一个目标链接的页面,目标链接的属性必须使用iframe的属性.  
因为 a 标签的 target 属性是名为 iframe\_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 1]  
点击链接会将百度界面显示在iframe框架中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 2]

### HTML颜色 ###

HTML 颜色由红色、绿色、蓝色混合而成。HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：\#00）。最大值是255（十六进制：\#FF）。  
可以通过rgba来实现设置颜色透明度的功能，范围 0~1，0 表示全透明.

<body>
    <p style="background-color:rgb(255,255,0)">
    通过 rbg 值设置背景颜色
    </p>
    <p style="background-color:rgba(255,255,0,0.25)">
    通过 rbg 值设置背景颜色
    </p>
    <p style="background-color:rgba(255,255,0,0.5)">
    通过 rbg 值设置背景颜色
    </p>
    <p style="background-color:rgba(255,255,0,0.75)">
    通过 rbg 值设置背景颜色
    </p>
    </body>

![在这里插入图片描述][20190322103225949.png]

### 可以通过相应的颜色值和颜色名来使用我们想使用的颜色 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 4]

### HTML脚本 ###

#### HTML script标签 ####

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

![在这里插入图片描述][20190322105734247.png]

#### HTML noscript标签 ####

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

![在这里插入图片描述][20190322105948502.png]

#### JS可以在HTML中输出 ####

![在这里插入图片描述][20190322110148129.png]

#### JS可以触发事件，就像按钮点击 ####

<h1>我的第一个 JavaScript </h1>
    <p id="demo">JavaScript 可以触发事件，就像按钮点击。</p>
    <script>
    /*getElementById方法可返回对拥有指定ID的第一个对象的引用.
    innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。*/
    function myFunction()
    {
    	document.getElementById("demo").innerHTML="Hello JavaScript!";
    }
    </script>
    <button type="button" onclick="myFunction()">点我</button>

![在这里插入图片描述][20190322111105294.png]  
点击触发事件:  
![在这里插入图片描述][20190322111058447.png]

#### 可以更改上述函数来更改样式 ####

### HTML字符实体 ###

HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。字符实体对大小写敏感.

#### HTML 实体 ####

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

如需显示小于号，我们必须这样写：< 或 < 或 <

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 5]

#### 不间断空格 ####

TML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面的空格。如果您在文本中写 10 个空格，在显示该页面
    之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。

#### 音标符 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 6]

### HTML URL ###

Web浏览器通过URL从Web服务器请求页面。当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。一个统一资源定位器(URL) 用于定位万维网上的文档。  
一个网页地址实例: [http://www.runoob.com/html/html-tutorial.html][http_www.runoob.com_html_html-tutorial.html]  
语法规则:  
scheme://host.domain:port/path/filename

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

#### 常见的 URL Scheme ####

![在这里插入图片描述][20190322113037945.png]

[20190322093904931.png]: /images/20220301/6fe8190f77a5491a9b98dbb9157e0989.png
[20190322094839421.png]: /images/20220301/92cd45d3d79f481286cde13934d2b22f.png
[201903220951115.png]: /images/20220301/4c2219d42466491fa161b72e695e504e.png
[20190322095123902.png]: /images/20220301/1b38a0488eb34a369767c686e3b99807.png
[20190322095544713.png]: /images/20220301/d07e8edd2dc6468ba4dcc107d76e108b.png
[20190322095738489.png]: /images/20220301/77bf457398f448c581550471ffc9b170.png
[20190322100833570.png]: /images/20220301/427d2e89860445cf93303cc5d478ff25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70]: /images/20220301/65d7eb36e8de4d15ac9f114c81d128e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 1]: /images/20220301/e1511ace4c4a4372a4fbd62e850dde80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 2]: /images/20220301/5a20685a98994ba0b82ec85dd697c88c.png
[20190322103225949.png]: /images/20220301/9992d30dfe0c42feb40cf5b421a91080.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 3]: /images/20220301/90ccea21654844d7ac213c5bba999608.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 4]: /images/20220301/eaaac8ea18fa49128629efce93434e5d.png
[20190322105734247.png]: /images/20220301/6b446fc100d04a7dbc1ce4b22e8a227e.png
[20190322105948502.png]: /images/20220301/bcaecf20951941d6b0a477b8e3ad4ebc.png
[20190322110148129.png]: /images/20220301/8e4e97e4495e40af9f92871a5cc8fdce.png
[20190322111105294.png]: /images/20220301/b2c321489f934b06ad47c320bd193cf1.png
[20190322111058447.png]: /images/20220301/47b4b246787a40aba0bfa5d169aae936.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 5]: /images/20220301/43332fa6cf784c04b227e5a4516ff53e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 6]: /images/20220301/bd6ae73faf8644e4a7661d6b8e34e4a8.png
[http_www.runoob.com_html_html-tutorial.html]: http://www.runoob.com/html/html-tutorial.html
[20190322113037945.png]: /images/20220301/9b94f6f39a7d44de8809e5118bbf553f.png