一篇文章带你快速学习前端之HTML

HTML是Web页面的基础, 它描述了页面的语义结构, 使浏览器能够正确的显示和解释内容. 它使用一些列的标签(也称为元素), 来定义文本、图像、表格等在网页上的排布和呈现方式.其中, src 是指定图片的文件路径的属性, alt 是指定在无法加载图片是显示的替代文本的属性. 这些属性可以让用户了解图像的内容, 同时也有助于调整图片的大小和位置.以上三种属性是所有标签都有的属性, 也有一些标签具有

安然无虞

1455人浏览 · 2025-04-01 17:03:48

安然无虞 · 2025-04-01 17:03:48 发布

在这里插入图片描述

你好，我是安然无虞。

网页与前端

学习前端之前, 我们首先得明白网页与前端之间的关系, 前端是构建网页的一部分, 负责用户在浏览器中看到和与之交互的内容. 以下是它们之间的关系的简要说明:

网页: 网页是浏览器中呈现内容的文档或页面. 通常使用HTML (Hypertext Markup Language) 编写, HTML 定义了页面的结构和内容, 包括文本、图像、链接等. 网页通常还包括 CSS (Cascading Style Sheets) 用于定义页面的样式和布局, 以及 JavaScript 用于添加交互性和动态功能.
前端: 前端开发是创建页面的过程, 它涵盖了 HTML、CSS和 JavaScript 的开发. 前端开发人员负责将 UI 设计的页面转化为可在浏览器中渲染的实际页面.
HTML: HTML是网页的骨架, 定义了页面的结构, 包括标题、段落、图像、链接等.
CSS: CSS用于控制页面的样式, 包括字体、颜色、间距、布局等. 它使网页看起来漂亮且一致.
JavaScript: JavaScript是一种编程语言, 用于添加交互功能. 前端开发人员使用 JavaScript 来创建动态元素、处理用户输入、与服务通信等, 以提供更丰富的用户体验.

总之, 页面是通过前端开发来创建和维护的, 前端技术包括HTML、CSS和 JavaScript, 它们共同构建了用户在浏览器中看到和与之交互的内容. 前端开发的目标是提供具有吸引力、易用性和高性能的网页.

相比于后端而言, 前端更容易入门, 只要掌握了 HTML、CSS、JavaScript, 就可以开发一些简单的页面了.

HTML定义了网页的结构和内容, CSS控件网页的样式和外观, JavaScript增强网页的交互性和动态性.

我们可以这么理解:

HTML 是网页的结构, CSS 是网页的外观, JavaScript 是网页的行为.

随着技术的进步, 前端开发社区开发了很多框架和库, 如Vue、React、Angular等. 这些框架简化了前端开发流程, 提供了组件化开发, 状态管理和路由等功能, 使开发更高效.

HTML

HTML (Hypertext Markup Language) 中文名就是超文本标记语言, 用于创建网页的结构和内容.

HTML是Web页面的基础, 它描述了页面的语义结构, 使浏览器能够正确的显示和解释内容. 它使用一些列的标签(也称为元素), 来定义文本、图像、表格等在网页上的排布和呈现方式.

HTML 标签是由尖括号包围的关键字, 例如:

<p>这是一个段落.</p>

在HTML中, 标签用于定义和包围网页中的各个元素. 标签分为两种主要类型: 单标签和双标签.

单标签:
- 单标签通常用于表示没有内容的元素, 例如图像、换行、横线等.
- 它们以自封闭的方式出现, 不需要闭合标签, 因为它们没有内部内容.
- 单标签的典型形式是<tagname>, 其中 tagname 是标签名称. 示例: <img src='image.jpg' />表示插入一张图片, <br> 表示换行
双标签:
- 双标签用于定义包含内容的元素, 例如段落、标题、列表等.
- 双标签由两部分组成: 开始标签和结束标签
- 开始标签用于定义元素的起始位置, 结束标签用于定义元素的结束位置.
- 在开始标签和结束标签之间可以包含元素的内容. 示例: <p>这是一个段落. </p>表示一个段落元素, 其中<p>是开始标签, </p>是结束标签, 之间的文本是该段落的内容.

了解了 HTML 的标签之后, 我们再来了解 HTML 的文件结构, 一个 HTML 文档通常由以下部分组成:

<!DOCTYPE html>
<html>

<head>
    <!-- 这里放置文档的元信息 -->
    <title>文档标题</title>
    <meta charset="UTF-8">
    <!-- 连接外部样式或者脚本文件等 -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
</head>    

<body>
    <!-- 这里放置页面内容 -->
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
    <a href="https://www.example.com">这是一个链接</a>
    <!-- 其他内容 -->
</body>

</html>

<!DOCTYPE html>: 生命文档类型为HTML5.
<html>: HTML文档的根元素, 包含了整个文档的内容.
<head>: 包含了一些文档的元信息, 如标题、字符编码等.
<title>: 定义网页标题, 会显示在浏览器的标签页上.
<body>: 包含实际的页面内容.

语法

了解了 HTML 的基本结构之后, 我们来学习一下 HTML 的基本语法.

文本内容: 使用<p>标签定义段落, <h1>到<h6>标签定义标题, <strong>、<del>和<em>标签可以用于强调文本.

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p>这是一个段落</p>
<p><strong>重要信息: </strong>这是一个重要的内容</p>
<p>
    更改段落文本样式<b>字体加粗</b>、<i>斜体字</i>、<u>下划线</u>、<s>删除线</s>
</p>

列表: 使用<ul>和<li>标签创建无序列表, 使用<ol>和<li>标签创建有序列表.

<ul>
    <li>无序列表元素1</li>
    <li>无序列表元素2</li>
    <li>无序列表元素3</li>
</ul>

<ol>
    <li>有序列表元素1</li>
    <li>有序列表元素2</li>
    <li>有序列表元素3</li>
</ol>

表格: 使用<table>、<tr>、<td>、<th>等标签创建表格, <table>是表格标签的根元素, 然后是<tr>表格的行标签, 在<tr>(table row)内部是<td>(table data)与<th>(table header)

<table>
    <tr>
        <th>列标题 1</th>
        <th>列标题 2</th>
        <th>列标题 3</th>
    </tr>
    <tr>
        <td>元素 11</td>
        <td>元素 12</td>
        <td>元素 13</td>
    </tr>
    <tr>
        <td>元素 21</td>
        <td>元素 22</td>
        <td>元素 23</td>
    </tr>
    <tr>
        <td>元素 31</td>
        <td>元素 32</td>
        <td>元素 33</td>
    </tr>
</table>

在这里插入图片描述

我们发现上面的表格并没有显示边框, 如果我们想让其显示边框只需要加上 border属性即可.

<table border="1">
    <tr>
        <th>列标题 1</th>
        <th>列标题 2</th>
        <th>列标题 3</th>
    </tr>
    <tr>
        <td>元素 11</td>
        <td>元素 12</td>
        <td>元素 13</td>
    </tr>
    <tr>
        <td>元素 21</td>
        <td>元素 22</td>
        <td>元素 23</td>
    </tr>
    <tr>
        <td>元素 31</td>
        <td>元素 32</td>
        <td>元素 33</td>
    </tr>
</table>

在这里插入图片描述

图像: 使用 <img>标签插入图像.

<img src="图片路径" alt="当前图片无法显示">

链接: 使用<a>标签创建链接.

<a href="https://github.com/">访问 GitHub </a>

注释: 使用添加注释, 不会在浏览器中显示.

<!-- 这是一个注释 -->

属性

属性在HTML中起到非常重要的作用, 它们用于定义元素的行为和外观, 以及与其他元素的关系.

在HTML中, 每个元素都可以有一个或多个属性, 用于描述元素的特征和行为.

属性的基本语法是: <开始标签属性名="属性值">, 其中属性名用于标识该属性, 属性值则定义该属性的值, 属性名和属性值之间用等号=隔开, 属性值一般要用引号括起来:

<img src="image.png" alt="当前图片无法显示">

其中, src 是指定图片的文件路径的属性, alt 是指定在无法加载图片是显示的替代文本的属性. 这些属性可以让用户了解图像的内容, 同时也有助于调整图片的大小和位置.

属性是用来定义元素的性质和功能的, 它们可以指定元素的尺寸、颜色、文字方向、链接目标等, 有助于页面的定位和布局. 下面是一些常见的属性用法:

class 属性: class属性用于向元素添加一个或多个类名, 以便通过CSS样式表定义样式. 此外, 类名还可以用来实现JavaScript的交互效果. 例如:

<p class="note">这是一个带有 note 类属性的 p 标签</p>

id 属性: id属性是用于将元素标识为唯一的标识符. 它使得我们可以通过 JavaScript 或 CSS 来定位和操作该元素. 例如:

<div id="header">这是一个带有 header id 的 div 标签</div>

style 属性: style属性是用于将CSS样式规则直接应用于元素. 它可以用于控制元素的颜色、字体、大小和布局等. 例如:

<div style="color: red; font-size: 20px;">这是一段红色的文字</div>

以上三种属性是所有标签都有的属性, 也有一些标签具有独特的属性, 比如 a 标签的 href 属性, img 标签的 src 属性等.

<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a>

会这样显示:

在这里插入图片描述

点击这个链接就会去访问对应的网页.

如果将代码改成这样:

<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a>
<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343", target="_blank">这是第二个超链接</a>

在这里插入图片描述

我们看<a>标签的target属性里面的值表示什么含义:

大概意思就是:

_self: 表示在当前页面打开这个链接.
_blank: 表示在新的页面打开这个链接.

我们发现上面的两个链接在同一行, 并没有换行, 如果我们想换行, 可以在末尾加上<br>标签:

<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a><br>
<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343", target="_blank">这是第二个超链接</a>

<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a><br>
<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343", target="_blank">这是第二个超链接</a><br>
<img src="./nanjing.jpg", alt="在南京相见!", width="300", height="150"><br>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.jObaSN3cLBxsl2AKGpY14gHaD4?rs=1&pid=ImgDetMain", alt="图片"><br>

<img>标签的 alt 属性用于在没有找到图片的情况下显示一些类似于提示信息的语句(可设置自己想设置的). width和height属性用于设置图片的宽度和高度.

区块

当涉及到 HTML元素时, 可以将它们分为两个主要类别: 行内元素和块级元素.

这些不同类型的元素在 HTML 文档中的呈现和布局方面有很大的不同. 下面是关于这两种类型的元素的详细说明:

块级元素 (block): 块级元素通常用于组织和布局页面的主要结构和内容, 例如段落、标题、列表、表格等. 它们用于创建页面的主要部分, 将内容分割成逻辑块.
- 块级元素通常会从新行开始, 并占据整行的宽度, 因此它们会在页面上呈现为一块独立的内容块.
- 可以包含其他块级元素和行内元素.
- 常见的块级元素包括: <div>, <p>, <h1>到<h6>, <ul>, <ol>, <li>, <table>, <form>等.
行内元素 (inline): 行内元素通常用于添加文本样式或为文本中的一部分应用样式. 它们可以在文本中插入小的元素, 例如超链接、强调文本等.
- 行内元素通常在同一行内呈现, 不会独占一行.
- 它们只占据其内容所需的宽度, 而不是整行的宽度.
- 行内元素不能包含块级元素, 但可以包含其他行内元素.
- 常见的行内元素包括 <span>, <a>, <strong>, <em>, <img>, <br>, <imput>等.

示例:

<div>标签没有语义, 经常用于创建页面的布局结构.
<span>用于内联样式化文本, 给文本的一部分应用样式或者标记
上面这两个标签经常与CSS、JS一起搭配使用, 可以实现更加复杂的页面布局和样式化

<body>
    <div class="nav">
        <a href="#">链接 1</a>
        <a href="#">链接 2</a>
        <a href="#">链接 3</a>
        <a href="#">链接 4</a>
        <a href="#">链接 5</a>
    </div>

    <div class="content">
        <h1>文章标题</h1>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
    </div>

    <span>这是第 1 个span标签</span>
    <span>这是第 2 个span标签</span>
    <span>这是第 3 个span标签</span>
    <hr>
    <span>链接点击这里 <a href="#">链接</a></span>
    
</body>

在这里插入图片描述

表单form标签

HTML 表单 form 是一个重要的元素, 用于收集和提交用户输入的数据. 表单允许用户输入文本、选择选项、上传文件等, 然后将这些数据提交到服务器进行处理.

表单在网页中是不可或缺的, 上面网页中就应用到了表单.

一个基本的 HTML 表单由以下几个主要部分组成:

<form>元素: 表单元素是表单的容器, 它定义了数据提交到哪里以及使用那种 HTTP 方法来提交数据. 它可以包含输入字段、按钮等元素

<form action="/submit" method="post">
  <!-- 表单元素 -->
</form>

输入字段: <input>标签是 HTML 中用于创建表单元素的最常见标签之一. 它允许用户输入文本、选择选项、上传文件等. <input>元素有多个属性, 用于指定不同类型的输入和控制输入的方式. 以下是一些常见的<input>标签的属性和它们的详细说明:

type属性: 指定输入字段的类型, 它可以有以下不同的值:

text: 创建文本输入框, 用于用户输入文本.
password: 创建密码输入框, 输入内容会被隐藏.
radio: 创建单选按钮, 用户只能选择一个选项.
checkbox: 创建复选框, 用户可以选择多个选型.
number: 创建数字选择框, 允许用户输入数字.
email: 创建用于输入电子邮件地址的输入框.
file: 创建文件上传字段, 用户可以上传文件.
submit: 创建提交按钮, 用于提交表单数据.
reset: 创建重置按钮, 用于重置表单数据.
button: 创建自定义按钮, 通常与 JavaScript 一起使用.

输入框

<body>
    <form>
        <input type="text" placeholder="请输入内容: "><br>
        <input type="text" value="请输入内容: "><br>
    </form>
    
</body>

在这里插入图片描述

placeholder属性: 表示的是提示信息, 并不是实际的值
value属性: 文本框中的默认值, 是真实存在于其中的值.

如果我们想在输入框中前面显示一些提示信息, 比如账号名和密码这些:

<body>
    <form>
      	<label>用户名: </label>
        <input type="text" placeholder="请输入内容: "><br>
      	<label>密码: </label>
        <input type="text" value="请输入内容: "><br>
    </form>
    
</body>

在这里插入图片描述

当然也可以用我们前面提到的 <span>标签代替上面的<label>, 能实现一样的效果.

<body>
    <form>
        <label for="username">用户名: </label>
        <input type="text" id="username" placeholder="请输入用户名: "><br><br>
        <label for="pwd">密码: </label>
        <input type="password" id="pwd" placeholder="请输入密码: "><br>

    </form>
    
</body>

在这里插入图片描述

上面的代码中:

label标签中的 for属性用于将label标签与这里input表单元素关联起来, 当用户点击这个label标签时, 与之关联的表单元素(这里是<input>)会自动获得焦点. 例如点击用户名这个label标签, id为username的<input>框会自动被选中
上面的密码类型有原来的text改为password, 好处是密码不可见

单选按钮

<body>
    <form>
        <label>性别: </label>
        <input type="radio"> 男
        <input type="radio"> 女
    </form>
    
</body>

在这里插入图片描述

我们发现上面的单选按钮没有实现单选的功能, 需要这样改动:

<body>
    <form>
        <label>性别: </label>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女
    </form>
    
</body>

多选按钮

<body>
    <form>
        <label>性别: </label>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女<br><br>

        <label>爱好: </label>
        <input type="checkbox" name="hobby"> 唱歌
        <input type="checkbox" name="hobby"> 跳舞
        <input type="checkbox" name="hobby"> 跑步<br><br>
    </form>
    
</body>

提交按钮

<body>
    <form action="#">
        <label for="username">用户名: </label>
        <input type="text" id="username" placeholder="请输入用户名: "><br><br>
        <label for="pwd">密码: </label>
        <input type="password" id="pwd" placeholder="请输入密码: "><br><br>

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

这里需要说的是:

<form>标签的action属性用于指定表单数据提交的目标URL, 即用户点击提交按钮后, 表单中的数据将被发送到这个指定的地址.

<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" palceholder="密码">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<input type="checkbox" name="subscribe" value="yes"> 订阅
<select name="country">
  <option value="zh">中国</option>
  <option value="us">美国</option>
  <!-- 其他选项 -->
</select>

表单元素可以包含一些属性, 以指定表单的行为和样式. 常见的表单属性包括:

属性	描述
action	指定表单数据提交到服务器的URL
method	指定用于提交数据的 HTTP 方法, 通常为 get 或 post
name	为表单命名, 以便在 JavaScript 中引用
target	指定表单提交后的目标窗口或框架

<h2>用户注册</h2>
<form action="/submit" method="post">
  <label for="username">用户名: </label>
  <input type="text"><br><br>
  
  <label for="password">密码: </label>
  <input type="password"><br><br>
  
  <label for="email">电子邮件地址: </label>
  <input type="text"><br><br>
  
  <label for="age">年龄: </label>
  <input type="number" width="5"><br><br>
  
  <label>性别: </label>
  <input type="radio" name="gender" value="male"> 男
  <input type="radio" name="gender" value="female"> 女<br><br>
  
  <label>最喜欢的编程语言: </label>
  <input type="checkbox" name="languages" value="python"> Python
  <input type="checkbox" name="languages" value="javascript"> JavaScript
  <input type="checkbox" name="languages" value="java"> Java
  <input type="checkbox" name="languages" value="cpp"> C++<br><br>
  
  <input type="submit" value="提交">
</form>