Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

My Blog

从此烟雨落金城，一人撑伞两人行。

学习路线

项目

文档

列表

mylife

源码

HTML标签

笔记

发布于：Aug 27, 2022

HTML标签

标题标签

HTML 中提供了从<h1>到<h6>六个级别的标题标签，<h1>标签的级别最高，<h6>标签的级别最低，通过这些标签可以定义网页中的标题（与 word 中的标题类似），合理使用标题可以使网页的层次结构更加清晰。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">

<head>
    <mate charset="utf-8">
</head>
<body>
    <h1>h1 标题</h1>
    <h2>h2 标题</h2>
    <h3>h3 标题</h3>
    <h4>h4 标题</h4>
    <h5>h5 标题</h5>
    <h6>h6 标题</h6>
</body>
</html>

段落标签

HTML 中可以使用段落标签 <p>来将文档中的内容分割为若干个段落。

1
<p>段落中的内容。</p>
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">

<head>
    <mate charset="utf-8">
</head>
<body>
    <p>这是一个段落。<a href="http://43.138.70.17:4000/" target="_blank">这是一个链接</a></p>
    <p>这是第二个标签</p>
</body>
</html>

超链接标签

标签的语法格式如下：

1
<a href="" target="_blank">这是一个链接</a>

href 属性指定链接的目标，也就是要跳转到什么位置。

target 是可选属性，用来指明新页面的打开方式。

属性值 说明
_self 默认，在现有窗口中打开新页面，原窗口将被覆盖。
_blank 在新窗口中打开新页面，原窗口将被保留。
_parent 在当前框架的上一层打开新页面。
_top 在顶层框架中打开新页面。

<img标签>

标签的语法格式如下：

1
<img src="url" alt="text">

src 是必选属性，它是 source 的简称，用来指明图片的地址或者路径。

alt 是可选属性，用来定义图片的文字描述信息。

使用 width 和 height 属性来指定图片的宽度和高度。

1
2
<img src="./html5.png" alt="HTML5 Logo" width="100" height="100">
<img src="./html5.png" alt="HTML5 Logo" style="width: 150px; height: 150px;">

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">

<head>
    <mate charset="utf-8">
</head>

<body>
    <table>
        <caption>这是表格的标题</caption>
        <tr>
            <th>name
            </th>
        </tr>
        <tr>
            <td>taweizhong
            </td>
        </tr>
    </table>
</body>

</html>

列表标签

有序列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML有序列表</title>
</head>
<body>
    <p>煮米饭的步骤：</p>
    <ol>
        <li>将水煮沸</li>
        <li>加入一勺米</li>
        <li>搅拌均匀</li>
        <li>继续煮10分钟</li>
    </ol>
</body>
</html>

无序列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表</title>
</head>
<body>
    <p>早餐的种类：</p>
    <ul>
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
</body>
</html>

定义列表

1
2
3
4
5
6
7
8
<dl>
    <dt>标题1<dt>
    <dd>描述文本2<dd>
    <dt>标题2<dt>
    <dd>描述文本2<dd>
    <dt>标题3<dt>
    <dd>描述文本3<dd>
</dl>

表单标签

表单可以接收用户输入的信息，然后将其发送到后端应用程序。

语法如下所示：

1
2
3
<form action="URL" method="GET|POST">
    表单中的其它标签
</form>

action 属性用来指明将表单提交到哪个页面。

method 属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式。

表单属性

属性 可选值 描述
accept MIME_type HTML5 中不再支持，设置服务器要接收的文件类型
accept-charset character_set 设置表单数据的字符集（默认为 HTML 文档字符集）
action URL 设置要将表单提交到何处（默认为当前页面）
autocomplete on、off 设置是否启用表单的自动完成功能（默认开启）
enctype application/x-www-form-urlencoded、 multipart/form-data、 text/plain 设置在提交表单数据之前如何对数据进行编码（适用于 method=”post” 的情况）
method get、post 设置使用哪种 HTTP 方法来提交表单数据（默认为 get）
name text 设置表单的名称
novalidate novalidate 如果使用该属性，则提交表单时不进行验证
target _blank、_self、_parent、_top 设置在何处打开 action 属性设定的链接（默认为 _self）

表单控件

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

&emsp HTML空格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML form表单演示</title>
</head>
<body>
    <form action="./userinfo.php" method="POST">
        <!-- 文本输入框控件 -->
        <label>用户名： </label><input name="username" type="text"><br>
        <!-- 密码框控件 -->
        <label>密&emsp;码： </label><input name="password" type="password"><br>
        <!-- 下拉菜单控件 -->
        <label>性&emsp;别：</label>
        <select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
            <option value="3">未知</option>
        </select>
        <br>
        <!-- 复选框控件 -->
        <label>爱&emsp;好：</label>
        <input type="checkbox" name="hobby" value="1">听音乐
        <input type="checkbox" name="hobby" value="2">看电影
        <input type="checkbox" name="hobby" value="3">打游戏
        <br>
        <!-- 单选按钮控件 -->
        <label>学&emsp;历：</label>
        <input type="radio" name="education" value="1">小学
        <input type="radio" name="education" value="2">中学
        <input type="radio" name="education" value="3">本科
        <input type="radio" name="education" value="4">硕士
        <input type="radio" name="education" value="5">博士
        <br>
        <!-- 按钮 -->
        <input type="submit" value="提 交">&emsp;&emsp;
        <input type="reset" value="重 置">
    </form>
</body>
</html>

块级元素和内联元素

块级元素

块级元素最主要的特点是它们自己独占一行，块级元素中最具代表性的就是<div>，此外还有<p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<h1>~`

`等。

主要特征如下所示：

  • 块级元素总是在新行上开始；
  • 宽度、高度以及外边距和内边距等都可以控制；
  • 省略块级元素的宽度，那么它的宽度默认为当前浏览器窗口的宽度；
  • 包含其它的内联元素和块级元素。

内联元素

内联元素也可以称为行内元素，行内元素中最常用的是<span>，此外还有<b>、<i>、<u>。

主要特征如下所示：

  • 和其他元素会在同一行上显示；

  • 宽、高以及外边距和内边距都不可以改变；

  • 宽度就是其中内容的宽度，且不可以改变；

  • 只能容纳文本或者其他内联元素。

  • 可以通过 line-height 来设置行高；

  • 可以设置 margin 外边距，但只对左右外边距有效，上下无效；

  • 设置 padding 内边距时，只有左右 padding 有效，上下则无效

标签<div>

<div>是非常重要的块级标记，在网页布局（Layout）方面发挥着重要的作用，使用<div>我们可以定义页面的各个部分，通过与 CSS 相结合可以实现各种各样的效果。

<div> 标签及其包围的内容可以看做网页的一个板块，

标签本身并没有什么特殊的显示效果，需要借助 CSS 样式对外边距、内边距、背景、边框等进行设置，从而达到对板块布局的目的。

<span>标签

HTML 中的<span>标签是一个内联元素，可以对 HTML 文档中的内容进行修饰，此标签不会为文档内容提供任何视觉效果，但可以与 CSS 结合使用来美化网页。

布局

HTML5 提出了多个专门用于布局的标签，它们用来定义网页的不同部分，语义更加明确。

标签 说明
<header> 用于定义网页的头部，头部中一般包含一些介绍性的内容，例如网站名称、logo 或者作者的信息。
<nav> 用于定义网页中的导航栏。
<section> 用于在网页中定义一个单独的部分，其中可以包含文本、图像、表格等等。 <section> 代表 HTML 文档中的“节”或“段”，“段”可以理解为一篇文章里按照主题的分段，“节”则可以理解为一个页面里的分组。其主要作用就是对页面的内容进行分块或者对文章的内容进行分段。
<article> 用于定义文章或者其它独立的信息，代表一个页面中自成一体的内容，例如论坛的帖子、博客上的文章、一篇用户的评论等。
<aside> 用于定义网页内容以外的部分，例如网页的侧边栏。
<footer> 用于定义网页的底部，例如作者、版权等信息。
<details> 用于定义一些详细信息，并且可以根据需要隐藏或显示这些详细信息。
<summary> 用于为<details>标签定义标题。

更新于：Sep 8, 2022

HTML

评论