HTML世界之第三重天

目录

[一、HTML 列表](#一、HTML 列表)

1.无序列表

2.有序列表

3.自定义列表

4.列表标签

[二、HTML div 和span](#二、HTML div 和span)

1.区块元素

2.内联元素

[3.div 元素](#3.div 元素)

[4.span 元素](#4.span 元素)

[5.HTML 分组标签](#5.HTML 分组标签)

[6.div 和 span 的区别](#6.div 和 span 的区别)

[三、HTML 表单和输入](#三、HTML 表单和输入)

[1.HTML 表单](#1.HTML 表单)

[2.HTML 表单 - 输入元素](#2.HTML 表单 - 输入元素)

[3.输入类型 - 文本域(Text Fields)](#3.输入类型 - 文本域(Text Fields))

[4.输入类型 - 密码字段](#4.输入类型 - 密码字段)

[5.输入类型 - 单选按钮(Radio Buttons)](#5.输入类型 - 单选按钮(Radio Buttons))

[6.输入类型 - 复选框(Checkboxes)](#6.输入类型 - 复选框(Checkboxes))

[7.输入类型 - 提交按钮(Submit)](#7.输入类型 - 提交按钮(Submit))

[四、HTML 框架](#四、HTML 框架)

1.iframe语法

[2.iframe - 设置高度与宽度](#2.iframe - 设置高度与宽度)

[3.iframe - 移除边框](#3.iframe - 移除边框)

[4.使用 iframe 来显示目标链接页面](#4.使用 iframe 来显示目标链接页面)

[五、HTML 颜色](#五、HTML 颜色)

[六、HTML 脚本](#六、HTML 脚本)

[1.script 标签](#1.script 标签)

[2.noscript 标签](#2.noscript 标签)

3.脚本标签

[七、HTML 字符实体](#七、HTML 字符实体)

[1.HTML 实体](#1.HTML 实体)

[2.不间断空格(Non-breaking Space)](#2.不间断空格(Non-breaking Space))

3.结合音标符

[八、HTML 统一资源定位器(Uniform Resource Locators)](#八、HTML 统一资源定位器(Uniform Resource Locators))

[1.URL - 统一资源定位器](#1.URL - 统一资源定位器)

[2.常见的 URL Scheme](#2.常见的 URL Scheme)


一、HTML 列表

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

1.无序列表

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

无序列表使用 <ul> 标签

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

2.有序列表

有序列表是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

3.自定义列表

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

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

4.列表标签

|--------|------------|
| 标签 | 描述 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 定义列表 |
| <dt> | 自定义列表项目 |
| <dd> | 定义自定列表项的描述 |

二、HTML div 和span

HTML 可以通过 <div> 和 <span>将元素组合起来。

1.区块元素

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

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

实例: <h1>, <p>, <ul>, <table>

2.内联元素

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

实例: <b>, <td>, <a>, <img>

3.div 元素

HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

4.span 元素

HTML <span> 元素是内联元素,可用作文本的容器

<span> 元素也没有特定的含义。

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

5.HTML 分组标签

|----------|----------------------------|
| 标签 | 描述 |
| <div> | 定义了文档的区域,块级 (block-level) |
| <span> | 用来组合文档中的行内元素, 内联元素(inline) |

6.div 和 span 的区别

<div> 是块级元素,它独占一行,可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构,例如页面的主体区域、容器、布局等;默认样式为块级显示,会以块的形式占据可用空间;可以容纳其他块级元素和行内元素,包括其他的 <div> 和 <span> 元素。

<span> 是行内元素,它不会独占一行,宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹;默认样式为行内显示,它不会独占一行,只占据其内容的宽度;通常被用来包裹文本或其他行内元素,比如用来设置特定文本的样式。

注:<div> 用于创建页面结构和布局,<span> 用于对文本或行内元素进行样式化或包裹,在页面设计和样式设置中有不同的用途和作用。

三、HTML 表单和输入

HTML 表单用于收集用户的输入信息。表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

<form> 元素用于创建表单,action 属性定义了表单数据提交的目标 URL,method 属性定义了提交数据的 HTTP 方法(这里使用的是 "post")。

<label> 元素用于为表单元素添加标签,提高可访问性。

<input> 元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型,id 属性用于关联 <label> 元素,name 属性用于标识表单字段。

<select> 元素用于创建下拉列表,而 <option> 元素用于定义下拉列表中的选项。

1.HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox) 等等。

使用 <form> 标签来创建表单

实例

<form>

.

input 元素

.

</form>

2.HTML 表单 - 输入元素

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

输入类型是由 type 属性定义。

3.输入类型 - 文本域(Text Fields)

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

以下实例创建了一个表单,包含两个输入框:

<form action="">

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

Last name: <input type="text" name="lastname">

</form>

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

4.输入类型 - 密码字段

密码字段通过标签 <input type="password"> 来定义:

实例

<form>

Password: <input type="password" name="pwd">

</form>

Password注意:密码字段字符不会明文显示,而是以星号 * 或圆点 . 替代。

5.输入类型 - 单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单的单选框选项:

实例

<form action="">

<input type="radio" name="sex" value="male">男<br>

<input type="radio" name="sex" value="female">女

</form>

6.输入类型 - 复选框(Checkboxes)

<input type="checkbox"> 定义了复选框。

复选框可以选取一个或多个选项:

实例

<form>

<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>

<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车

</form>

7.输入类型 - 提交按钮(Submit)

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

当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理:

实例

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

以上实例中有一个 method 属性,它用于定义表单数据的提交方式,可以是以下值:

post:指的是 HTTP POST 方法,表单数据会包含在表单体内然后发送给服务器,用于提交敏感数据,如用户名与密码等。

get:默认值,指的是 HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 ?作为分隔符,一般用于不敏感信息,如分页等。例如:https://www.baidu.com/?page=1,这里的 page=1 就是 get 方法提交的数据。

四、HTML 框架

1.iframe语法

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

该URL指向不同的网页。

2.iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是可以指定其按比例显示 (如:"80%")。

实例

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

3.iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:

实例

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

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

iframe 可以显示一个目标链接的页面

目标链接的属性必须使用 iframe 的属性,如下实例:

实例

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

<p><a href="https://www.baidu.com" target="iframe_a" rel="noopener">BAIDU.COM</a></p>

五、HTML 颜色

HTML 颜色由红色、绿色、蓝色混合而成。

HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

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

三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。

六、HTML 脚本

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

1.script 标签

<script> 标签用于定义客户端脚本,比如 JavaScript。

<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!":

实例

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

2.noscript 标签

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容:

实例

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

3.脚本标签

|--------------|------------------|
| 标签 | 描述 |
| <script> | 定义了客户端脚本 |
| <noscript> | 定义了不支持脚本浏览器输出的文本 |

七、HTML 字符实体

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

1.HTML 实体

在 HTML 中,某些字符是预留的。不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。要想正确地显示预留字符,必须在 HTML 源代码中使用字符实体(character entities)。

字符实体类似这样:

&entity_name;或&#entity_number;

如需显示小于号,必须这样写:&lt; 或 &#60; 或 &#060;

注: 使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

2.不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格(&nbsp;)。

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

3.结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如 尖音符和 抑音符。

变音符号可以出现字母的上面和下面,或者字母里面,或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

八、HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址。可以由字母组成,如"baidu.com",或互联网协议(IP)地址: 192.68.20.50。

1.URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。

当点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

一个网页地址实例: http://www.baidu.com/html/html-tutorial.html

语法规则:

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

scheme - 定义因特网服务的类型。最常见的类型是 http

host - 定义域主机(http 的默认主机是 www)

domain - 定义因特网域名,比如 runoob.com

:port - 定义主机上的端口号(http 的默认端口号是 80)

path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。

filename - 定义文档/资源的名称

2.常见的 URL Scheme

|--------|-----------|------------------------|
| Scheme | 访问 | 用于... |
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页,加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | | 您计算机上的文件。 |

相关推荐
叠叠乐2 分钟前
rust Send Sync 以及对象安全和对象不安全
开发语言·安全·rust
careybobo33 分钟前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)1 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
Tttian6222 小时前
Python办公自动化(3)对Excel的操作
开发语言·python·excel
杉之2 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端2 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡2 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
独好紫罗兰3 小时前
洛谷题单2-P5713 【深基3.例5】洛谷团队系统-python-流程图重构
开发语言·python·算法
木木黄木木3 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
zhuyixiangyyds3 小时前
day21和day22学习Pandas库
笔记·学习·pandas