LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

零基础网页开发第一步之HTML&CSS2️⃣(常用HTML标签详解)

admin
2025年7月17日 0:5 本文热度 10

欢迎回来,翻开第二篇,这又再一次加强了你的执行力,恭喜恭喜。上篇我们讲到开发环境的搭建以及基本概念的厘清,这篇我们将接续着一起学习几个HTML的常用标签。

首先我们来回顾下标签的作用是什么?HTML 标签的核心作用是定义网页内容的语义和结构,就像建筑蓝图中的框架标记,告诉浏览器“某块内容是什么”。

🏷️一. 标题标签 (Heading Tags)

Heading标签,一共分为6个层级;其中<h1>等级是最高的,用于网页的主题。<h2>到<h6>则为网页的子标题。

<h1>一级标题</h1>   <!-- 每个页面只用1个,如网站名称 --><h2>二级标题</h2>   <!-- 大章节标题 --><h3>三级标题</h3>   <!-- 小节标题 --><h4>四级标题</h4>   <!-- 更小分区 -->

🔑 关键提示:

1. 数字越小字体越大 (h1最大)

2. 默认加粗+增加上下间距

3. 屏幕阅读器靠它们理解页面结构

同样,为了更直观地了解<h1>与<h2>之间不同的效果,在vscode中ctrl+s将文件储存后,在浏览器点击刷新网页就可看到你所写代码的最新效果。

📝二.<p>标签  段落标签 (Paragraph Tag)

一个网页有了标题,要有内容填充才能算作一个合格的网页。这时,你可以用<p>标签来包裹文本内容,形成逻辑完整的段落块。

<p>这是一整段连续文本,浏览器会自动在段落间添加间距</p><p>这是另一个独立段落</p>

每一对<p></p>,都代表一个独立的段落。

到这里,不知道你有没有发现:不管是<heading>标签或是<p>标签,不管它们的字数有多少,都会占据一整行。

类似于这类的标签,有个专有名词,读作:“区块元素”。定义:独占父容器的一整行,就像集装箱一样垂直堆叠。

区块元素 (Block-level Elements)常见标签有

<div>, <p>, <h1>-<h6>, <section>, <article><header>, <footer>, <ul>, <ol>, <li>, <table>  

三.行内元素

除了区块元素,有没有一种元素,有多少内容就占多少空间,而不会独占一整行的元素呢?有的,这就是“行内元素 (Inline Elements)”,

定义:像文本一样流动,水平排列直到放不下才换行,类似句子中的单词。

“行内元素”常见的标签有<strong>和<em>标签,这两者分别对应我们word文档中经常用到的“粗体”和“斜体”

掌握了这些标签以后,我们可以使用不同标签,层层叠加在同一个网页,利用这些技巧,你就可以在HTML中设计出复杂的页面布局和结构。

🔗四.<a>标签  超链接标签 (Anchor Tag)

网页网页,顾名思义是需要联网的。<a>标签是网页互联的基石,用于创建超链接(Hyperlink),实现资源跳转和文档连接。使用<a>标签时,要加上href的属性指定目前网址。

<!-- 基本用法 --><a href="https://example.com">点击访问</a>
<!-- 页面内跳转 --><a href="#contact">跳到联系方式</a><section id="contact">...</section>
<!-- 邮箱链接 --><a href="mailto:contact@example.com">发送邮件</a>

或是当前目录中的某个网页,由于当前这是你手写的第一个网页,还没有建立其它的页面,所以这里暂时 href="#" 就ok了

<p><a href="#">了解更多</a></p> //示例代码

功能

示例

跨页面跳转

跳转到其他网页

<a href="https://example.com">访问网站</a>

锚点定位

定位到当前文档的特定位置

<a href="#section2">跳至第二节</a>

资源下载

触发文件下载(支持PDF/ZIP等)

<a href="file.zip" download>下载文件</a>

邮件/电话

调用本地应用

<a href="mailto:contact@example.com">发邮件</a>

脚本触发

执行JavaScript

<a href="javascript:alert('Hello')">点我</a>

注:以上示例栏的文字注释,实际写网页的过程,不必带上。

📋 五、清单标签 (List Tags)

在网页开发中,清单是实现结构化内容展示的核心组件,其作用远超简单的视觉排列。

1. 有序列表(带数字编号)<ol>(ordered list)标签

<ol>                           // 清单开头使用<ol>标签  <li>第一步:准备材料</li>      //清单内容使用<li>标签  <li>第二步:搅拌混合</li>  <li>第三步:烤箱烘焙</li></ol>

2. 无序列表(带项目符号)<ul>(unordered )标签

<ul>  <li>面粉 200g</li>  <li>鸡蛋 3个</li>  <li>白糖 50g</li></ul>

清单最常见的用途,是拿来作网站的导航栏。

由于导航栏的前方不需要任何数字编号,这时选择用<ul>标签更为妥当。<ul>标签的用法和<ol>相同,唯一差异就是前方没有数字编号,而是一个小黑点。

导航栏的每个项目都会链接不同的网页/内容,所以这里需要加上<a>标签

<ul>      <li><a href="#">最新消息</a></li>      <li><a href="#">关于我们</a></li>      <li><a href="#">门市据点</a></li>      <li><a href="#">会员专区</a></li>  </ul>       

效果参考:

📖 六、引用标签 (Blockquote Tag)

做网页我们不免会引用新闻媒体或者用户评论展示,这时<blockquote>标签就派上用场了。<blockquote>本身有个site属性,可以用来标识引用内容的来源(网址)。

<blockquote cite="https://example.com/source">  这是被引用的文字内容...</blockquote>
<blockquote cite="https://example.com/source">  "真正的面包匠人,用双手感受面团的呼吸"</blockquote>

使用场景如下图:有时为了排版的美观,你可能会想要一个长句,分行展示。

这时你就可以插入一个<br>标签,精确控制内部换行:

<blackquote>严选天然食材,精湛匠心烘焙,<br>让幸福在每口面包中的香气中蔓延</blackquote>

七.总结(零基础必存)

今天的HTML常用标签讲解到这里就结束啦!下篇文章我们将走进插入图片的语法、如何用CSS修改样式。


阅读原文:原文链接


该文章在 2025/7/18 10:18:54 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2025 ClickSun All Rights Reserved