IT评测·应用市场-qidao123.com技术社区

标题: 一篇文章带你快速学习前端之HTML [打印本页]

作者: tsx81428 时间: 2025-4-3 09:08
标题: 一篇文章带你快速学习前端之HTML

你好，我是安然无虞。

网页与前端

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

网页: 网页是浏览器中呈现内容的文档或页面. 通常使用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指定表单数据提交到服务器的URLmethod指定用于提交数据的 HTTP 方法, 通常为 get 或 postname为表单命名, 以便在 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>

复制代码

遇见安然遇见你，不负代码不负卿。

谢谢老铁的时间，咱们下篇再见～

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)