HTML与CSS学习笔记（一）_html css 二氧化碳的小2怎么打-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51484868/article/details/125380236

本文是初学者向的HTML与CSS学习笔记，讲解了HTML的基础结构，包括标题、段落、标签元素、结构化标签和语义化标签的使用。通过实例演示，帮助读者理解和掌握HTML的基本语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想说的话

大家好，我是Xiao白码，很荣幸和大家一起学习，一起进步φ(ﾟ∀ﾟ )。在这段时间里，我想系统的学习一下HTML与CSS，所以本教程我尽量以初学者的角度去学习，希望大家不仅知其然，也要知其所以然。希望多多收藏，点点赞。o(^-^)o

碎碎念( •̀∀•́ )

Head里的title标签是指浏览器标签页的值（也就是当前页面中优快云-专业开发...）。

代码：

<head>
    <title>写文章-优快云创作中心</title>
</head>

演示：

（应该就是这个样子）

标签（元素）

代码：

<p lang="en-us">HELLO WORLD</p>

是一个标签（或成为元素），要用<>框起来，标签（元素）都是成对出现的，即才算写完一个标签。

lang="en-us"是特性（属性），分为特性名称和特性值。lang是特性名称，一般为小写，HTML5允许使用大写字母。en-us就是特性值，一般用双引号括起来，HTML5允许省略双括号（一般不推荐）。不同的标签（元素）有不同的特性，可以再网络上查询。

（注意：有些标签的格式不一定是这样的，例如 和<hr/>后面会讲到，它们属于空元素，所以写法也有不同。）

代码：

<input/>

演示：

结构化标签和语义化标签

结构化标签：用来描述标题和段落的元素。（我的理解是像h1,h2就是结构化标签）

语义化标签：表达特定的含义的标记。（address就是语义化标签）

结构化标签

（1）标题 h

代码：

<h1>HELLO WORLD</h1>
<h2>HELLO WORLD</h2>
<h3>HELLO WORLD</h3>
<h4>HELLO WORLD</h4>
<h5>HELLO WORLD</h5>
<h6>HELLO WORLD</h6>

演示：

标题有六个级别，通常h后数字越小越大。（因为CSS中可以控制文本大小颜色等状态）

（2）段落 p

<p>HELLO WORLD</p>
<p>My name is BaiMa</p>

如图所示，默认情况下，浏览器在显示段落后另起一行与后续段落保持一定的距离。

（3）粗体 b和斜体 i

为什么要用b和i标记粗体和斜体呢？因为英语中加粗是bold,所以简写是b，倾斜是Italics，简写是i。

代码：

<p>HELLO 
  <b>WORLD</b>
</p>
<p>My name is 
  <i>BaiMa</i>
</p>

演示：

（4）上标sup和下标sub

同样，上标英语表示是Superscript，所以上标用sup。下标用英语说是subscript，所以简写是sub。那么，上代码吧！

<p>来一个质能方程吧 E=MC<sup>2</sup></p>
<p>再来一个二氧化碳的化学式：CO<sub>2</sub></p>

我觉得蛮有意思：

（5）空白

代码：

<p>日 落 尤 其 温 柔,人 间 皆 是 浪 漫</p>
<p>日 落 尤 其 温 柔,人           间 皆 是 浪 漫</p>
<p>日 落 尤 其 温 柔,人 间 皆 是 
  
  
  浪 漫</p>

演示：

居然显示的是一样的╭(⊙o⊙)╮！那是因为当浏览器遇到两个或者两个以上的空格时，就会只显示一个空格。同样，遇到一个换行时也视为一个空格。这个特性叫做白色空间折叠。设计人员可以通过这一特性增加代码可读性。

有人问了：“我要是想用两个或者两个以上的空格咋办？”，请搜索&emsp和&ensp，这里不做介绍 (๑•̀ㅂ•́)و✧

（6）换行符br和水平线hr

这个br和hr的来源我还没搞清楚，有知道的朋友们评论说一下，谢谢。br很简单，就相当于word文档里的回车（Enter）。hr也不难，就是人力资源（bushi），其实是水平线啦，我一般当做分隔符使用。它们都是空元素哦~

先来一个（´v｀）：

代码：

<p>日落尤其温柔,人间皆是浪漫。</p>
<hr/>
<p>日落尤其温柔,<br/>人间皆是浪漫。</p>

演示：

恭喜你，看到这里，结构化标记已经学习完毕啦。

语义化标记

语义化标记指不影响网页结构，为所属页面添加了额外信息的标记。

（1）加粗和强调

strong是强壮的意思，em应该是emphasize（强调）的缩写(๑¯∀¯๑)。默认情况下，它们和标签和标签起一样的作用，加粗和倾斜。

<p>日落尤其温柔,<strong>人间皆是浪漫</strong>。</p>
<p>日落尤其温柔,<em>人间皆是浪漫</em>。</p>

（2）引用 blockquote和q

<q>
  人生苦短,若虚度年华,则短暂的人生就太长了
</q>
<blockquote>
    ——莎士比亚
</blockquote>

q标签IE浏览器不支持，这两个元素都能使用cite特性。blockquote是一整段长的引用，当然我觉得这样好看，就这样写了。（´v｀）

介绍一下cite特性：菜鸟的介绍

（3）缩写词和首字母缩写词 abbr

<p>
  <abbr title="Xiao白码">我</abbr>是谁
</p>

鼠标放在“我”上面，下面就会弹出一个小框框写着“Xiao白码”这个样子。我尽力了但是截图功夫不到家呜呜テ_デ。希望你们能自己试一试：

在线运行abbrhttps://www.w3school.com.cn/tags/tag_abbr.asp 另外一个acronym标签就不介绍了，因为HTML5不支持。

（4）引文 cite

引文就是引用一个作品或者是文章（研究、书籍、报告等。）标明来源。

<p>
  “名字代表什么？我们所称的玫瑰，换个名字还是一样芳香。”<cite>——莎士比亚《罗密欧与朱丽叶》</cite>
</p>

（5）设计者详情信息 address

很简单，关于设计者想留下的信息，以斜体显示。

<address>
作者：Xiao白码<br/>
点点赞吧~
</address>

（6）内容的修改 ins/del/s

非常简单。

<p>
  逃之夭夭，<ins>灼灼</ins>其华。<br/>
</p>
<p>
  你有蔓草，<del>我有桃花</del>。
</p>
<p>
  中心藏之，<s>何日忘之？</s>
</p>

ins表示下划线，del表示删除线，s表示不准确但不应该删除的内容。

好的，至此我们就学完了结构化标签和语义化标签，现在的你，可以写一个简单的网页了 !

不积跬步，无以至千里。加油！