常用的HTML知识

本文最后更新于：2 个月前

HTML是什么？

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的的呈现,使之成为一种标记语言而非编程语言。

常用的HTML语法概述

  1. HTML标签是由尖括号包围的关键词，例如 <html>

  2. HTML标签通常是成对出现的，例如 <html>和/，称为双标签。

  3. 有些特殊的标签必须是单个标签，例如<br />，称为单标签。

  4. 双标签关系可以分为两类：包含关系（父子关系）和并列关系（兄弟关系）

HTML骨架代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<!-- 不算是一个html标签，是文档规范，让浏览器能够正确地渲染页面 -->
<html lang="en">
<!-- 根元素，lang表示文档语言类型为英文 -->

<head>
 <!-- 向浏览器传递网页的基本信息和配置 -->
    <meta charset="UTF-8">
    <!-- 告诉浏览器使用utf-8编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 确保在移动设备上正确显示和缩放网页内容 -->
    <title>Document</title>
    <!-- 页面选项卡中的标题 -->
</head>

<body>
  <!-- 页面呈现区域 -->
</body>

</html>

  1. head:包含一些与文档相关的元数据和其他重要的信息，内容不会在浏览器中显示。

    1. title：定义文档的标题，不同的页面类型有不同的格式。比如：主页，一般是网页名称+主要关键词。详情页，一般是详情名称+网站名字+简介等等。
    2. link：指定当前文档和外部资源的关系
    3. meta：设置网页的元数据，例如字符集、描述、关键词等
    4. script引入Javascript代码或链接外部Javascript文件

  2. body：定义网页的主题内容，是HTML文档的一个必要组成部分，包含了所有对用户可见的内容，如文本、图像、链接、段落、标题、表格、表单等。

常用HTML元素

1. 标题标签，作为标题使用，根据重要性递减

1
2
3
<h1></h1>
......
<h6></h6>

2. 段落标签，用于定义段落，可以将整个网页分为若干个段落

`<p></p>`

3. 换行标签和水平分割线标签，单标签

  • 换行<br />文本强制换行显示

  • 水平分割线：<hr/>插入水平分割线

4. 文本格式化标签

标签名 效果 标签名 效果
<strong></strong> 加粗 <b></b> 加粗
<em></em> 倾斜 <i></i> 倾斜
<ins></ins> 下划线 <u></u> 下划线
<del></del> 删除线 <s></s> 删除线

5. 盒子标签

<div></div>一行只能放一个<span></span>一行能放多个

6. 图像标签，单标签

<img />

属性 作用 说明
alt 替换文本 图片无法显示时候显示的文字
title 提示文本 鼠标悬停在图片上面时候显示的文字
width 图片的宽度 值为数字
height 图片的高度 值为数字

7. 超链接标签

<a href="" target = "">链接文本</a>

属性 作用
href 用于指定链接目标的ur地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能；
target 用于指定链接页面的打开方式，其中_self为默认值(在本窗口中打开)，_ blank为在新窗口中打开方式

8. 表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table border="1">
  <thead> <!-- 用于定义表格的标题部分 -->
    <tr>  <!-- 表示表格的一行 -->
      <th>列标题1</th> <!-- 表示表格的表头单元格 -->
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody> <!-- 用于定义表格的主体部分 -->
    <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>
  </tbody>
</table>

效果如下：

列标题1 列标题2 列标题3
行1，列1 行1，列2 行1，列3
行2，列1 行2，列2 行2，列3

常用属性：常用属性：

  • border：表示表格的边框宽度，单位是像素，即px；

  • rowspan：表示多行合并，可以指定具体要合并的行数；(不要忘记删除多余的单元格)

  • colspan：表示多列合并，可以指定具体要合并的列数；(不要忘记删除多余的单元格)

  • cellpadding：表示单元格边缘与其单元格内容之间的空白间距；

  • cellspacing：表示单元格之间的空白间距；

  • width：表示表格的宽度；

  • align：表示表格相对周围元素的对齐方式。

9. 列表标签

分为：有序列表、无序列表、自定义列表

  • 无序列表：使用<ul>标签，里面放着<li>标签，此列项目使用粗体圆点进行标记

    <ul></ul>里只能嵌套<li>标签

    <li></li>中可以放任何标签

    type属性可以指定列表项的符号类型，如disc：小圆点，circle：空心圆圈，square：方块

  • 有序列表：使用<ol>标签，里面放着<li>标签，项目列表使用数字进行标记

    <ol></ol>中只能嵌套<li>标签

    type属性可以指定列表项的符号类型，如i：罗马数字开始

    start属性：指定起始编号

  • 自定义列表：使用<dl>标签，<dt>标签用来定义项目/名字，<dd>描述每一个项目/名字

<dl></dl>里面只能包含<dt>和<dd>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h4>无序列表:</h4>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
<h4>有序列表:</h4>
<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>
<h4>自定义列表:</h4>
<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

10.表单标签

  • <form> </form>:表单域标签，表单域就是一个包含表单元素的区域

  • <input/>:输入表单元素

  • <lable><lable>:绑定一个表单元素，当点击lable标签内的文本时，会自动将焦点转到对应的表单元素上，lable的for属性必须得与相关元素的id属性相同

  • <select></select>:下拉表单元素，用于定义一个下拉列表

  • <option></option>:下拉列表中元素，定义selected = “selected”属性时，当前项为默认选中项

  • <textarea></textarea>文本域元素，用于定义一个多行文本输入框，cols属性规定每行的字符数，rows属性规定显示的行数

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
<form action="#" method="get">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name">

<br>

<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password">

<br>

<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

<br>

<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">订阅推送信息</label>

<br>

<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
    <option value="cn">CN</option>
    <option value="usa">USA</option>
    <option value="uk">UK</option>
</select>

<br>

<!-- 提交按钮 -->
<input type="submit" value="提交">

标签的常用属性：

属性 属性值 描述
type 见下表 用于设置标签的不同形式
value 用户自定义 设置input元素的默认值

标签type属性值

属性值 描述
button 定义可点击按钮
checkbox 定义复选框，一组复选框name属性必须相同
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮，一组单选按钮的name属性必须相同
reset 定义重制按钮，清除表单中的所有数据
submit 定义提交按钮，提交到action属性指定的地址
text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20字符

11.注释和特殊字符

1
<!-- 我是注释 -->
特殊字符 描述 字符代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和 &amp;
± 正负号 \plusmn;
× 乘号 &times;
÷ 除号 &divide;

12.常用的HTML纯语义话标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--标题头部区域内容(用于页面或页面中的一块区域)-->
<header></header>

<!--标题脚部区域内容(用于页面或页面中的一块区域) -->
<footer></footer>

<!--表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示-->
<section></section>

<!--顾名思义，用来定义文章的部分。-->
<article></article>

<!--用来表示跟当前页面的内容没有很相关的部分，通常用于显示侧边栏或者补充的内容。 -->
<aside></aside>

<!--一般表示此部分是导航栏-->
<nav></nav>

分类（针对元素显示模式）

元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一行只能放一个 可以设置宽度高度 容器的100% 标题标签，段落标签，换行标签，水平分割线，div
行内元素 一行可以放多个 不可以直接设置宽度高度 它本身内容的宽度 span 图像标签 文本格式化标签 输入标签
行内块元素 一行可以放多个 可以设置宽度高度 它本身内容的宽度
前端学习
#HTML
常用的HTML知识
https://blog.seasalt-haiyan.top/2024/03/01/常用的HTML知识/
作者
Xu Haoyang
发布于
2024年3月1日
更新于
2024年3月1日
许可协议