您的当前位置：首页 HTML基础和常用标签

HTML基础和常用标签

来源：华拓科技网

前言

写在开始：

HTML是用来搭建网页的基础语言，就像是你在盖房子时用的砖块，每个砖块（标签）都有特定的功能，负责不同的结构。接下来，我用更通俗的方式介绍HTML基础和常见标签。

正文部分有很多我手写的笔记,希望大家理解,不要嫌弃我的字丑奥.

文章有误敬请斧正不胜感恩！

以下是本篇文章正文内容，

1. HTML的基本结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
  </head>
  <body>
    <h1>这是一个大标题</h1>
    <p>这是一个段落。</p>
  </body>
</html>

解释：

<!DOCTYPE html>：告诉浏览器，这是一个HTML5文件，不用管它的细节，就当成“说明书”。
<html>：整个网页的最外层，就像你家房子的外墙。
<head>：网页的“脑袋”，里面放一些网页的信息，比如标题、字符编码等。
<body>：网页的“身体”，所有显示在屏幕上的内容，比如文字、图片，都放在这里。

2. 常见标签的介绍

2.1 标题和文本

<h1> - <h6>：标题标签，<h1>是最大的标题，<h6>是最小的标题。
```
<h1>这是最大标题</h1>
<h2>这是次一级标题</h2>
```
用法很简单，按你需要的大小选择标签，<h1>是主标题，<h2>-<h6>依次往下。
<p>：段落标签。所有文字内容都可以放在这个标签里。
```
<p>这是一个段落。</p>
```
<b> 和 <strong>：加粗文字。虽然看上去效果一样，但<strong>更多强调的是“重要性”。
```
<b>这是加粗的文字</b>
<strong>这也是加粗的文字，但强调了它的重要性。</strong>
```

<i> 和 <em>：斜体文字。<em>也是强调的意思。

<i>这是斜体文字</i>
<em>这是强调的斜体文字</em>

2.2 链接和图片

<a>：超链接，用于添加链接。

<a href="https://www.example.com">点击我去百度</a>

<img>：图片标签，用于展示图片。
```
<img src="image.jpg" alt="图片描述" width="200" height="100">
```
- src：图片的地址（相当于图片的“源”）。
- alt：当图片加载不出来时显示的文字。
- width 和 height：图片的宽度和高度。
- 图像路径的解析:

2.3 列表

<ul>：无序列表，展示项目符号的列表。
```
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>
```
- ul是外面的包裹，li是里面每一项。

<ol>：有序列表，按顺序编号。

<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

2.4 表格

<table>：用于创建表格。

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

tr：表示表格的一行。
th：表头，表示标题单元格。
td：数据单元格，放每个表格内容的地方。

table效果:
-

2.5 表单

<form>：用户提交信息的表单，比如登录页面。

<form action="/submit" method="POST">
  <label for="name">名字：</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="提交">
</form>

action：表单提交到的地址。
method：数据提交的方式，通常用POST。

2.6 其他常用标签

<div>：块级元素，用于包裹内容，可以用来布局页面。
```
<div>
  <p>这是一个包含段落的div块。</p>
</div>
```
<span>：内联元素，和div类似，但不换行，适合包裹少量内容。
```
<span>这是内联元素。</span>
```
<br>：换行标签，强制换行。(break)
```
这是第一行。<br>这是第二行。
```
<hr>：水平线，表示一个分割。
```
<hr>
```

3. HTML5新标签（语义化标签）

HTML5新增了一些更容易理解的标签，让网页更“语义化”，便于搜索引擎和开发者阅读。

<header>：定义页面的头部，比如导航条、LOGO等。
<nav>：导航栏，放菜单或链接。
<section>：页面的部分，通常用于分块内容。
<article>：的文章或博客内容。
<footer>：页面的底部内容。

4. HTML注释

注释是用来给代码加说明的，不会在页面上显示出来。

<!-- 这是一段注释 -->
快捷键:Ctrl+/

5.查阅文档

只推荐这仨
标签是记不完的,只有多用多查才能理解记忆.

总结

HTML是我们前端部分最基础也最为根本的部分,我们绝对不能轻视这一块的学习,

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。

正是这个道理.

HTML就是通过这些标签组合在一起，搭建出一个完整的网页。

学会这些基础标签后，我们基本就能用它们搭建出简单的网页。

后续再深入了解CSS（样式）和JavaScript（交互）

让我们的网页更加富有特色才能更加富有竞争力,更美观,更能吸引别人的眼球,更能得到青睐.

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文