Html基础知识

2023-10-15 约 2285 字预计阅读 5 分钟

HTML基础

学习目标

HTML介绍
常见标签
资源路径
列表表格标签
表单标签和表单提交

HTML介绍

HTML全称为HyperText Mark-UP language，指的是超文本标记语言，标记标签语言，都是成对出现的，超文本指的是网页中可以标记图片视频等超越文本的内容，还可以进行网页之间的跳转。html的基本结构如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
<h2>标题</h2>    
</body>
</html>

<!DOCTYPE html>指的是文本声明，这是一个html5最新版的文本，若没有则为其他版本。
<html lang="en">html开始标签指的是网页文本支持的显示语言，如果是en则可以翻译为en以外其他的文本，如果是zh，可以翻译为zh以外的显示语言。
<head>可以进入标题设置标题、编码格式、CSS、JS等。
<meta charset="UTF-8">指的是指定网页编码格式是UTF-8，<meta name="viewport" content="width=device-width, initial-scale=1.0">指的是移动设备浏览网页时，网页不缩放。
<meta http-equiv="X-UA-Compatible" content="ie=edge">指的是在ie浏览器浏览网页时，使用ie的最高版本。
<body>指的是网页地址栏以下可以显示网页主页面内容的区域，其中嵌套一个<h2>标签指的是2级大的标题，此外还有一级、三级等。

常见标签

常见出现的标签可以分为双标签和单标签，以及带属性的标签和嵌套的标签。

常见的双标签有：

<p>paragraph段落标签，以行为段落。
<h1>到h6都是header标题标签。
<body>网页内容标签。
<head>网页标题栏tab栏显示的标题。
等等

常见的单标签有：

<img>图片标签，表示引入单个图片。
<br>换行标签，表示这里会进行一个换行显示。
<a> 标签用于创建超链接，即在 HTML 中创建一个可以点击的链接。它可以指向其他网页、文件、位置或者一个特定的 URL。当用户点击链接时，浏览器会跳转到链接指定的目标。
<hr>标签用于创建水平分隔线，即在 HTML 中创建一条水平的线条进行内容的分割。

带属性的标签例如：

1

<img src="/user/desktop/xxxx/logo.img"

等等

嵌套标签经常用到的是<div>标签，例如：

1
2
3
4


<div>
    <p></p>
    <a></a>
</div>

等等

资源路径

资源路径指的是图片或超链接中指向的一个资源，比如img里面的图片路径，路径分为两种，绝对路径和相对路径。

绝对路径时从根目录算起的路径叫做绝对路径。

1

<img src="/user/desktop/xxxx/logo.img"

相对路径时当前目录算起的路径叫做相对路径。

1

<img src="./logo.img"

资源一般会使用相对路径，更加通用和方便，绝对路径不适合移植。

列表标签和表格标签

列表标签可以分为有序列表标签和无序列表标签，无序列表标签指的是无标号显示，不强调顺序，有序列表标签会有标号顺序显示。

有序列表标签

1
2
3
4


<ol>
    <li>1</li>
    <li>2</li>
</ol> 

无序列表标签

1
2
3
4


<ul>
    <li>1</li>
    <li>2</li>
</ul>   

表格标签是将内容以表格形式编排，内容分为行和列，常见表格标签有以下：

<table> 双标签，表示一个表格。
<tr>双标签，表示表格中的一行。
<td>双标签，表示表格中的一列。
<th>双标签，表示表格中的表头。

代码案例如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<table>
    <tr>
        <th>第一列</th>
        <th>第二列</th>
    </tr>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

表单标签和表单提交

使用浏览器想要吧数据发送给服务器就会经常用到表单标签和表单提交，以http协议提交。

表单相关标签的使用
1. <form>标签表示表单标签，定义一个整体的表单区域。
2. <label>标签表示表单元素的文字标注标签，定义文字标注。
3. <input>标签表示表单元素的用户输入标签，定义不同的输入类型可以有不同的用户输入方式。
  - type = ‘text’ 表示定义单行文本输入框。
  - type = ‘password’ 表示定义密码输入框，默认密文。
  - type = ‘radio’ 定义单选框，默认原点单选框。
  - type = ‘checkbox’ 定义复选框。
  - type = ‘file’ 定义文件上传。
  - type = ‘submit’ 定义提交按钮。
  - type = ‘reset’ 定义重置按钮。
  - type = ‘button’ 定义一个普通按钮。
  label中的for属性，可以给input标签设置与id属性匹配的光标，点击标签就可以插入input标签光标。
4. <textarea>标签表示单表元素的多行文本输入框标签，定义多行文本输入框。
5. <select>标签与<option>标签配合使用定义下拉列表选项。
form有一个属性action这里定义了提交给服务器的路径地址，method定义了请求该地址的http方法。

总结

HTML是超文本标记语言，可以描述网页，且可以插入音频视频等超越文本的内容，以及进行跳转。
常见出现的标签可以分为双标签和单标签，以及带属性的标签和嵌套的标签。
资源路径分为两种，绝对路径和相对路径，前者以根目录为起点，后者以当前目录为起点。
列表标签会把内容以列表形式上下展现，分为有序和无序列表，有序指的是有标号顺序，表格标签会把内容以表格形式展现。
表单标签常用的有<form>,<input>, <select>,form标签会把区域内的表单标签提交的数据集合起来发送给目标服务器，目标用action定义，method定义其方法。

目录