零基础网页开发第一步之HTML&CSS2️⃣(常用HTML标签详解)
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
首先我们来回顾下标签的作用是什么?HTML 标签的核心作用是定义网页内容的语义和结构,就像建筑蓝图中的框架标记,告诉浏览器“某块内容是什么”。 🏷️一. 标题标签 (Heading Tags) Heading标签,一共分为6个层级;其中<h1>等级是最高的,用于网页的主题。<h2>到<h6>则为网页的子标题。
🔑 关键提示: 1. 数字越小字体越大 (h1最大) 2. 默认加粗+增加上下间距 3. 屏幕阅读器靠它们理解页面结构 同样,为了更直观地了解<h1>与<h2>之间不同的效果,在vscode中ctrl+s将文件储存后,在浏览器点击刷新网页就可看到你所写代码的最新效果。 📝二.<p>标签 段落标签 (Paragraph Tag) 一个网页有了标题,要有内容填充才能算作一个合格的网页。这时,你可以用<p>标签来包裹文本内容,形成逻辑完整的段落块。
每一对<p></p>,都代表一个独立的段落。 到这里,不知道你有没有发现:不管是<heading>标签或是<p>标签,不管它们的字数有多少,都会占据一整行。 类似于这类的标签,有个专有名词,读作:“区块元素”。定义:独占父容器的一整行,就像集装箱一样垂直堆叠。 区块元素 (Block-level Elements)常见标签有
三.行内元素 除了区块元素,有没有一种元素,有多少内容就占多少空间,而不会独占一整行的元素呢?有的,这就是“行内元素 (Inline Elements)”, 定义:像文本一样流动,水平排列直到放不下才换行,类似句子中的单词。 “行内元素”常见的标签有<strong>和<em>标签,这两者分别对应我们word文档中经常用到的“粗体”和“斜体” 掌握了这些标签以后,我们可以使用不同标签,层层叠加在同一个网页,利用这些技巧,你就可以在HTML中设计出复杂的页面布局和结构。 🔗四.<a>标签 超链接标签 (Anchor Tag) 网页网页,顾名思义是需要联网的。<a>标签是网页互联的基石,用于创建超链接(Hyperlink),实现资源跳转和文档连接。使用<a>标签时,要加上href的属性指定目前网址。
或是当前目录中的某个网页,由于当前这是你手写的第一个网页,还没有建立其它的页面,所以这里暂时 href="#" 就ok了
注:以上示例栏的文字为注释,实际写网页的过程,不必带上。 📋 五、清单标签 (List Tags) 在网页开发中,清单是实现结构化内容展示的核心组件,其作用远超简单的视觉排列。 1. 有序列表(带数字编号)<ol>(ordered list)标签
2. 无序列表(带项目符号)<ul>(unordered )标签
清单最常见的用途,是拿来作网站的导航栏。 由于导航栏的前方不需要任何数字编号,这时选择用<ul>标签更为妥当。<ul>标签的用法和<ol>相同,唯一差异就是前方没有数字编号,而是一个小黑点。 导航栏的每个项目都会链接不同的网页/内容,所以这里需要加上<a>标签
效果参考: 📖 六、引用标签 (Blockquote Tag) 做网页我们不免会引用新闻媒体或者用户评论展示,这时<blockquote>标签就派上用场了。<blockquote>本身有个site属性,可以用来标识引用内容的来源(网址)。
使用场景如下图:有时为了排版的美观,你可能会想要一个长句,分行展示。 这时你就可以插入一个<br>标签,精确控制内部换行:
七.总结(零基础必存) 今天的HTML常用标签讲解到这里就结束啦!下篇文章我们将走进插入图片的语法、如何用CSS修改样式。 阅读原文:原文链接 该文章在 2025/7/18 10:18:54 编辑过 |
关键字查询
相关文章
正在查询... |