【HTML入门学习笔记（四）】

【HTML入门学习笔记（四）】

参考: https://www.runoob.com/html/html-tutorial.html.

---

---

前言

开摆开摆！
今天的任务也是继续学习我们的HTML

---

一、HTML 列表

1.HTML 无序列表

代码如下:

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

效果如下：

<ul style="list-style-type:disc"> 圆点列表
<ul style="list-style-type:circle">圆圈列表
<ul style="list-style-type:square">正方形列表
etc.

2.HTML 有序列表

代码如下:

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

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

效果如下:

<ol type="A">大写字母表
<ol type="a">小写字母表
<ol type="I">罗马数字表
<ol type="i">小罗马数字表
etc.

3.自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd> 开始。

代码实例如下:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

实际效果:

二、HTML 表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkboxe） 等等。

我们可以使用 <form> 标签来创建表单

HTML表单—输入元素

多数情况下被用到的表单标签是输入标签 <input>。
输入类型是由type属性定义。

---

文本域

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

---

密码字段

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

---

单选按钮

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

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

效果如下：

---

复选框

<input type="checkbox"> 定义了复选框。
复选框可以选取一个或多个选项：

<form>
  <input type="checkbox" name="vehicle" value="Bike">我喜欢Java<br>
  <input type="checkbox" name="vehicle" value="Car">我喜欢Python
 </form>

效果如下：

---

按钮

<form action="">
<input type="button" value="Hello world!">
</form>

效果如下：

提交按钮

<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.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

---

普通用例

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

效果如下:

tips:密码字段中的字符是隐藏的(显示为星号或圆圈)。
可以通过将type="password" 改为type="text"即可在输入时显示密码

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

URL 是一个网页地址。

URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住

URL - 统一资源定位器

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

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

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

一个网页地址实例: http://www.runoob.com/html/html-tutorial.html. 语法规则:

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

Tips:

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

常见的 URL Scheme

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

URL编码参考手册.

---

总结

卷不动了，躺会
五一放假就稍微放松点啦，明天也会继续更新的！
以上就是今天的HTML学习内容了，若有错误还望指出。