HTML

文章目录

HTML
- 快速入门
- HTML标签说明
- HTML标签使用细节
- [font 字体标签](#font 字体标签)
- 字符实体
- 标题标签
- 超链接标签
- [无序列表 ul/li](#无序列表 ul/li)
- [有序列表 ol/li](#有序列表 ol/li)
- 图像标签(img)
- 表格(table)标签
- 表单(form)标签
- [input 标签](#input 标签)
- [select/option 标签](#select/option 标签)
- [textarea 标签](#textarea 标签)
- [div 标签](#div 标签)
- [p 标签](#p 标签)
- [span 标签](#span 标签)
- [br 与 hr 标签](#br 与 hr 标签)

HTML（HyperText Mark-up Language）即超文本标签语言(可以展示的内容类型很多)。

HTML 文本是由 HTML 标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等。

HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

文档地址：https://www.w3school.com.cn/html/index.asp

快速入门

创建hello.html文件，编写代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        hello world
    </body>
</html>

HTML标签说明

1）HTML 标签用两个尖括号"<>"括起来

2）HTML 标签一般是双标签，如<b>和</b> 前一个标签是起始标签, 后一个标签为结束标签

3）两个标签之间的文本是 html 元素的内容

4）某些标签称为"单标签",因为它只需单独使用就能完整地表达意思,如<br/><hr/>

5）HTML 元素指的是从开始标签到结束标签的所有代码

HTML标签使用细节

1）标签不能交叉嵌套

2）标签必须正确关闭

3）注释不能嵌套

4）html语法不严谨。有时候标签不闭合，属性不带也不报错

font 字体标签

标签用于定义文本的字体、大小、颜色等样式。

标签已经过时，不再推荐使用。

font的三个属性：

1）color：定义文本的颜色。可以使用颜色的名称（如"red"）或十六进制值（如"#FF0000"）来指定颜色。

2）size：定义文本的大小。可以使用1-7之间的数字来指定大小，其中1是最小的，7是最大的。

3）face：定义文本的字体。可以使用字体的名称（如"Arial"）来指定字体。

代码示例：

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <title>font字符标签</title>
    </head>
    <body>
        <font color="red" size="4" face="Arial">hello world</font>
    </body>
</html>

字符实体

字符实体是一种在HTML中表示特殊字符的方法。有些字符在HTML中具有特殊含义，比如小于号（<）、大于号（>）、引号（"）等，如果直接在HTML文档中使用这些字符，可能会导致解析错误。为了避免这种问题，可以使用字符实体来代替这些特殊字符。

标题标签

标题使用<h1> - <h6> 标签进行定义。<h1> 定义最大的标题。<h6> 定义最小的标题

标题标签align属性（已过时）的三个值：

left：左对齐(默认)
center ：居中
right ：右对齐

示例代码：

html 复制代码

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <head>
        <title>font字符标签</title>
    </head>
    <body>
        <h1>标签 1</h1>
        <h2>标签 2</h2>
        <h3 align="center">标签 3</h3>
        <h4>标签 4</h4>
        <h5>标签 5</h5>
        <h6 align="right">标签 6</h6>
    </body>
</html>

效果：

超链接标签

超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

可以用href 属性设置连接的地址

target 属性设置哪个目标进行跳转：

_self : 表示当前页面(默认值), 即使用当前替换目标页

_blank : 表示打开新页面来进行跳转

代码示例：

html 复制代码

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <head>
        <title>Title</title>
    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">点我去百度</a>
    </body>
</html>

无序列表 ul/li

无序列表（Unordered List）是用来显示项目列表的一种标记方式，通常用<ul>和<li>标签来表示。无序列表中的每个项目通常以一个项目符号（如圆点、方块或其他自定义符号）作为标记，而不是按照数字顺序排列。

代码示例：

html 复制代码

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

效果：

有序列表 ol/li

有序列表（Ordered List）是用来显示按照特定顺序排列的项目列表的一种标记方式，通常用<ol>和<li>标签来表示。有序列表中的每个项目会按照数字或字母顺序进行编号。

代码示例：

html 复制代码

<ol>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ol>

效果：

图像标签(img)

img标签可以在html页面上显示图片。

img的属性：

src: 属性可以设置图片的路径
width: 属性设置图片的宽度
height: 属性设置图片的高度
border: 属性设置图片边框大小
alt: 属性设置当指定路径找不到图片时,用来代替显示的文本内容

相对路径:从工程名开始算（. 表示当前文件所在的目录 .. 表示当前文件所在的上一级目录）

绝对路径:盘符:/目录/文件名

代码示例：

html 复制代码

<img src="x.png" width="300" border="1" alt="美女找不到"/><hr />
<img src="../1.png" width="300" border="1" alt="美女找不到"/><hr />
<img src="../aaa/1.png" width="100" border="1" alt="美女找不到"/><hr />
<!-- 如果同时指定 width height 自己要计算，否则图像会变形 -->
<img src="../aaa/1.png" width="200" height="80" alt="美女找不到"/><hr />

表格(table)标签

table标签的属性：

width：设置表格宽度
height：设置表格高度
align：设置表格相对于页面的对齐方式
cellspacing：设置单元格间距
tr ：是行标签
th ：是表头标签
td ：是单元格标签
align：设置单元格文本对齐方式
b ：是加粗标签

代码示例：

html 复制代码

<table width="500" border="6" align="center">
    <h1 align="center">表格标签的使用</h1>
    <tr>
        <th>名字</th>
        <th>住址</th>
        <th>邮件</th>
    </tr>
    <tr>
        <td>第 1 行第 1 列</td>
        <td>第 1 行第 2 列</td>
        <td>第 1 行第 3 列</td>
    </tr>
    <tr>
        <td>第 2 行第 1 列</td>
        <td>第 2 行第 2 列</td>
        <td>第 2 行第 3 列</td>
    </tr>
    <tr>
        <td>第 3 行第 1 列</td>
        <td>第 3 行第 2 列</td>
        <td>第 3 行第 3 列</td>
    </tr>
</table>

效果：

表单(form)标签

表单（Form）标签是HTML中用来创建用户交互界面的重要元素，用于收集用户输入的数据并将其提交到服务器进行处理。表单通常包含各种输入字段（如文本框、复选框、下拉框等）和提交按钮，用户可以在表单中输入信息并点击提交按钮进行数据提交。

表单标签中常用的属性包括：

action：指定表单提交的目标URL。
method：指定提交方式，可以是GET或POST。
name：指定表单元素的名称，用于在后台处理表单数据时识别字段。
id：指定表单元素的唯一标识符，通常用于JavaScript操作。
type：指定输入字段的类型，如文本框、密码框、复选框等。

代码示例：

html 复制代码

<form action="/submit.php" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password">

    <input type="submit" value="提交">
</form>

input 标签

<input>标签用于创建各种类型的输入字段的元素。<input>标签是一个空元素，通常用于表单中，允许用户输入文本、选择选项或上传文件。

input标签的常用属性：

type：指定输入字段的类型，如文本框、密码框、单选按钮等。
name：指定输入字段的名称，用于在提交表单时标识该字段。
value：指定输入字段的值。
placeholder：在输入字段为空时显示的提示文本。
required：指定输入字段是否为必填字段。
disabled：禁用输入字段，使其不可编辑。
maxlength：指定输入字段的最大字符数。
min：指定输入字段的最小值（适用于数值类型）。
max：指定输入字段的最大值（适用于数值类型）。
pattern：指定输入字段的验证规则（使用正则表达式）。
autocomplete：指定输入字段的自动完成设置，如on（启用自动完成）或off（禁用自动完成）。

代码示例：

文本输入框：

html 复制代码

<input type="text" name="username" placeholder="Enter your username">
html复制代码

密码输入框：

html 复制代码

<input type="password" name="password" placeholder="Enter your password">
html复制代码

单选按钮：

html 复制代码

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
html复制代码

复选框：

html 复制代码

<input type="checkbox" name="interest" value="sports"> Sports
<input type="checkbox" name="interest" value="music"> Music

文件上传：

html 复制代码

<input type="file" name="file">

select/option 标签

select标签用于创建下拉列表框，用户可以从列表中选择一个选项。

select标签的常用属性：

name：指定下拉列表的名称，用于在提交表单时识别该字段。
multiple：设置为multiple可以允许用户同时选择多个选项。
size：指定下拉列表框的可见行数，让用户可以看到更多的选项。
disabled：设置为disabled可以禁用下拉列表框，用户无法进行选择操作。
required：设置为required可以要求用户必须选择一个选项。

option标签常用的属性：

value：指定选项的值，在表单提交时会发送到服务器。
selected：设置为selected的选项在页面加载时默认选中。
disabled：设置为disabled的选项在下拉列表中不可选。
label：定义选项的标签，可以用于显示不同于选项值的文本。
hidden：设置为hidden的选项在下拉列表中不可见，但仍然可以被选中。

示例代码：

html 复制代码

<select name="city" multiple size="3" required>
    <option value="beijing">Beijing</option>
    <option value="shanghai">Shanghai</option>
    <option value="guangzhou">Guangzhou</option>
</select>

textarea 标签

textarea标签用于创建一个多行文本输入框，用户可以在其中输入文本。

textarea标签的常用属性：

cols：指定文本框的列数，即文本框的宽度。
rows：指定文本框的行数，即文本框的高度。
name：指定文本框的名称，用于在提交表单时标识文本框的值。
id：指定文本框的唯一标识符。
placeholder：指定文本框中的占位符文本，当文本框为空时显示。
readonly：指定文本框为只读，用户无法编辑文本框中的内容。
disabled：指定文本框为禁用状态，用户无法编辑文本框中的内容。

在form表单中使用textarea标签：

html 复制代码

<form action="/submit" method="post">
  <label for="message">留言：</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>
  <input type="submit" value="提交">
</form>

div 标签

div标签是一个通用的块级容器元素，用于将内容组织在一个独立的容器中。div标签本身没有特定的语义含义，它通常被用作容器来包裹其他HTML元素，用于布局和样式控制。

div标签没有特定的属性，它只是一个空的容器元素，可以用CSS样式来定义其外观和行为。

通过为div元素添加类名或ID，可以为其应用样式规则，从而实现页面布局和设计的灵活性。

代码示例：

html 复制代码

<div class="container">
    <h1>这是一个标题</h1>
    <p>这是一段文本内容。</p>
    <img src="image.jpg" alt="图片">
</div>

p 标签

<p>标签用于定义段落。使用

标签时，所有位于<p>和</p>标签之间的文本都会被视为一个段落，并在页面上显示为一个段落。浏览器会自动在段落之间添加一些默认的间距，以使文本更易于阅读。

p标签通常用于包含一段文字，但也可以包含其他HTML元素，如图片、链接、列表等。段落之间会自动添加空行，以区分不同的段落。

代码示例：

html 复制代码

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

span 标签

<span>标签用于对文本的一部分进行样式化或分组，并没有特定的语义含义。<span>标签通常用于对文本进行样式调整，如改变字体颜色、加粗、斜体等。

<span>标签是一个内联元素，可以在文本中的任何位置使用，而不会破坏文档的结构。与<div>标签不同，<span>标签通常用于对文本的一部分进行样式化，而不是对整个块级元素进行样式化。

代码示例：

html 复制代码

<p>这是一段普通的文本，<span style="color: red;">这里是红色的文本</span>，这里又是普通的文本。</p>

br 与 hr 标签

<br>标签： <br>标签用于插入换行符，即在文本中创建一个换行。它是一个内联元素，通常用于在不需要新的段落的情况下在文本中创建换行。<br>标签没有任何属性，只需将其插入到需要换行的位置即可。

示例：

html 复制代码

<p>This is the first line.<br>This is the second line.</p>

<hr>标签： <hr>标签用于插入水平分隔线，即在页面中创建一条水平线。它可以用于分隔内容，使页面更具可读性。<hr>标签也是一个内联元素，通常用于在内容之间插入水平分隔线。<hr>标签可以使用width和color属性来指定水平线的宽度和颜色。

示例：

html 复制代码

<p>Content above<hr>Content below</p>