js入门三部曲「第二部」ep04 html代码的基本

js入门三部曲「第二部」ep04 html代码的基本结构#js

你太美。

虽然第一个html代码写的非常随意，就四个字：鸡你太美。但是用浏览器打开之后确实是能看到是以网页的形式所展现的。这个现象就有点奇怪了，为什么？讲道理，只要是一种语言，必定有自己的语法格式，得按它的套路去写才能认为代码写的是对的，然后才能去正常的运行。

但是这里就四个字：鸡你太美，它就能把这个东西给显示出来，这是为什么？其实很简单。

·可以看一下，按一下F12，把浏览器的开发者工具给打开。

·然后选中elements标签页，如果是中文版，这里就应该是元素。

·这里有4行文本，这4行文本里面有没有一个比较熟悉的东西？鸡你太美这四个字是不是HTML代码里面写的东西？如果把这个东西改了，鸡你太美baby。

·然后就不再打开HTML文件了，直接按刷新。这里变成了鸡你太美baby，这里是不是也变成了鸡你太美baby。

·再比如加点东西，保存刷新，有没有发现什么规律？这里写什么，这一段就是什么，但其他地方是没变的。

所以有理由相信这份代码的完全体应该是什么？应该就是这个。所以先来把它复刻一下，尖括号。要注意，尖括号得是英文输入法下的尖括号。html，有个had，后面又有一个head，只不过head前面加了一个斜杠。至于这些东西到底是什么意思，等一下再说。

先把代码搞完，鸡左边有个body，后面有个body，下面又有一个斜杠。html好保存，然后刷新，效果和之前的阉割版是一样的。

然后来看一下这些尖括号到底是什么意思，其实还是挺简单的。首先在html里面，像这种用尖括号括起来的东西称之为元素。在国内有的人喜欢把它称为标签，其实都是一个意思，就是元素的意思。所以在这里有几种元素，很明显是三种，一种是html，一种是head，还有一种是body。

这个时候有的小白可能会问了，为什么有的前面是加了个斜杠的？其实是这样子的，在html里面有些元素是有包裹区间的，就比如body元素，body元素里面的数据或者叫内容是从哪到哪？很明显这个是开头，这个是结尾，然后掐头去尾，内容就在这，懂了吧？开头结尾。

所以head元素的数据在哪？就在这，什么都没有。head元素的数据在哪？很明显就是这个。知道元素的概念之后，接下来再看一下这几种元素都是什么意思。

·首先html元素是告诉浏览器，接下来是html代码。

·然后head还有body是什么意思？其实可以把HTML代码想象成是一个人，一个人有自己的头，还有身体，而且人家的脑袋里面此时此刻在想什么是看不出来的。所以head元素里面的内容一般都是去写一些对于页面的一些设置，或者在这个区域里面所看不到的一些东西。

就比如里面可以再加个元素，比如说叫title，title我相信大家应该都知道，就是标题的意思，这个也是一样的，起止。然后中间这里写什么？选项卡的这里名字就是什么？就比如坤坤牛逼，保存，然后刷新，是不是变成了坤坤牛逼？当然，想把这个东西放到别的地方也行，比如说放到body里面，然后保存，一刷新，你看也是坤坤牛逼，对吧？但是一般来说按照规范，一般是放到这种head元素里面去，这是head元素。

·然后接下来是body，body就是人的身体，人家长得什么样子，身材好不好，到底前凸不凸，后翘不翘，一眼就能看得出来，多看一眼都会爆炸的那种。所以在body元素里面，一般都是写一些在这个区域里面能看到的东西，就比如说一些文字或者说一些图片等等，所以这个才是html代码最基本的结构。

·然后回过头来再看一下最初的问题，什么？就是一开始代码不是这个样子的吗？没有，那些head、html、body却依然能在浏览器上正确的显示出来。其实很简单，就是因为虽然就写了这个东西，但是浏览器会读取代码文件里面所写的内容，写了什么就能读到什么。

如果代码不够规范，浏览器就会自动的帮你把这些元素给补齐，补齐完之后才是真正的HTML代码。有了正确的代码之后，浏览器才会根据这份代码来进行渲染，也就是现在所看到的样子。

所以代码千万条，规范第一条，因为永远都不会想知道浏览器到底会对不规范的代码进行什么样的修改，把它改成什么样子。所以html代码的最基本的格式就是html、head、body。修改后的结果:鸡你太美。

SS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认是行级的。

备注： 由 ::before 和 ::after 伪元素生成的盒子，就好像它们是应用它们的元素或“原始元素（originating element）”的直接子元素一样，因此不能应用在替换元素上，比如 <img> 元素，其内容不在 CSS 格式化模型的范围内。

语法

CSSCopy to Clipboard

::before {
  content: /* 值 */;
  /* 属性 */
}

如果 content 属性没有明确指定，或者有一个无效值，或者其值为 normal 或 none，则 ::before 伪元素不会被渲染。它的行为就好像设置了 display: none 一样。

备注： Selectors 第 3 版引入了双冒号标记法 ::before，以将伪类和伪元素区别开。浏览器也接受由 CSS2 引入的 :before 写法。

示例

加入引号标记

使用 ::before 伪元素的一个简单示例就是用于加入引号。此处同时使用了 ::before 和 ::after来插入引用性文本。

HTML

HTMLPlayCopy to Clipboard

<q>有引号，</q>他说，<q>总比没有好。</q>

CSS

CSSPlayCopy to Clipboard

q::before {
  content: "“";
  color: blue;
}
q::after {
  content: "”";
  color: red;
}

结果

修饰示例

我们可以用几乎任何方法定义 content 中的文字和图片样式。

HTML

HTMLPlayCopy to Clipboard

<span class="ribbon">注意橙色方框的位置。</span>

CSS

CSSPlayCopy to Clipboard

.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "看橙色的盒子。";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

结果

待办列表

在本例中我们将使用伪元素来创建一个简单的待办列表。这个方法也可用于 UI 的小幅度更改和用户体验的提升。

HTML

HTMLPlayCopy to Clipboard

<ul>
  <li>买牛奶</li>
  <li>带着狗散步</li>
  <li>锻炼</li>
  <li>写代码</li>
  <li>播放音乐</li>
  <li>放松</li>
</ul>

CSS

CSSPlayCopy to Clipboard

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript

JSPlayCopy to Clipboard

const list=document.querySelector("ul");
list.addEventListener(
  "click",
  (ev)=> {
    if (ev.target.tagName==="LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);

下面展示的是最终得到的结果。请注意我们没有使用任何图标，对勾标识实际上是使用 CSS 定义了样式的 ::before 伪元素。接下来建立几个待办事项来完成它们吧。

结果

特殊字符

由于这是 CSS；不是 HTML，你不可以在内容值中使用标记实体。如果你需要使用特殊字符，并且无法将其直接输入到 CSS 内容字符串中，那么请使用 unicode 转义序列，该序列由一个反斜杠和十六进制 unicode 值组成。

HTML

HTMLPlayCopy to Clipboard

<ol>
  <li>把鸡蛋打入碗中</li>
  <li>加牛奶</li>
  <li>加面粉</li>
  <li aria-current="step">混合成光滑的面糊</li>
  <li>将一勺面糊倒在热的、抹了油的平底锅上</li>
  <li>煎至煎饼顶部失去光泽</li>
  <li>把它翻过来再煎几分钟</li>
  <li>配上你喜欢的佐料</li>
</ol>

CSS

CSSPlayCopy to Clipboard

li {
  padding: 0.5em;
}

li[aria-current="step"] {
  font-weight: bold;
}

li[aria-current="step"]::after {
  content: " \21E6"; /* 向左白色箭头的十六进制 */
  display: inline;
}

结果

无障碍考虑

不鼓励使用 ::before 伪元素添加内容，因为屏幕阅读器无法可靠地访问它。

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

天不言而四时行，

地不语而百物生。

- 2024.03.11 -

在数字世界的构建中，字体不仅仅是文字的外衣，更是情感和风格的传递者。作为网页设计师和前端开发者，掌握HTML中的字体标签，能够让我们创造出更加丰富和吸引人的用户体验。

今天，就让我们一起走进HTML字体标签的世界，探索它们如何让网页变得生动有趣。

一、认识基本字体标签

语法结构：<标签属性=“值”> 内容 </标签>

标签通常是成对出现的，分为开始标签（p）和结束标签(/p)，结束标签只是在开始标签前加一个斜杠“/”。
标签可以有属性，属性必须有值(align=“center” )。
开始标签与结束标签中包含的内容称之为区域。
标签不区分大小写，p和P是相同的。

1、标题标签< h1> - < h6>

标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行。

标题标签是块元素

示例：

<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>

2、字体标签<font>

在HTML中，最常用的字体标签非<font>莫属，虽然现代开发中更推荐使用CSS来控制字体样式，但了解它的历史仍然有其必要性。<font>标签允许我们通过color、size和face属性来改变字体的颜色、大小和类型。

例如，如果我们想要显示红色Arial字体的文字，我们可以这样写：

<font color="red" size="5" face="Arial">这是红色Arial字体的文字</font>

这行代码的意思是：

<font> 开始一个字体样式的定义。
color="red" 设置字体颜色为红色。
size="5" 设置字体大小为5。
face="Arial" 设置字体类型为Arial。
这是红色Arial字体的文字是我们要显示的文字。
</font> 结束字体样式的定义。

注意：虽然标签在HTML4.01中是有效的，但在HTML5中已经被废弃，建议使用CSS来进行样式定义。

3、字号大小：<font size="n">

字号大小在网页设计中同样重要，它直接影响着阅读体验。HTML允许我们通过<font size="n">来调整字体的大小，其中“n”可以是1到7的数字。

例如：

<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<p><font size="5">This is a paragraph with font size 5.</font></p>
<p><font size="10">This is a paragraph with font size 10.</font></p>
<p><font size="15">This is a paragraph with font size 15.</font></p>
</body>
</html>

运行结果：

不过，现代网页设计更倾向于使用CSS来控制字号，以便更精细地调整字体大小。

4、粗体标签

<b>：这个标签用于将文本加粗显示，相当于英文中的bold。它不会改变字体，只是使文本看起来更粗体。

<p><b>这是加粗的文本</b></p>

<strong>：与<b>标签类似，<strong>标签也用于表示加粗的文本。

<p><strong>这是重要的文本</strong></p>

但在HTML5中，<strong>标签被赋予了语义，用来表示重要的文本内容。

5、斜体字标签

<i>：这个标签用于将文本设置为斜体，相当于英文中的italic。

<p><i>这是斜体的文本</i></p>

<em>：与<i>标签类似，<em>标签也用于表示斜体文本。

<p><em>这是强调的文本</em></p>

但在HTML5中，<em>标签被赋予了语义，用来表示强调的文本内容。

6、删除字标签

<del>：这个标签用于表示删除的文本，常用于表示不再准确或已过时的内容。比如原价与现价。

<p>原价：<del>100元</del></p>
<p>现价：80元</p>

运行之后是这样子的：

在上述示例中，原价为100元，但已被删除，因此使用标签将其包围起来。这样，浏览器会显示删除线来表示该文本已被删除。

7、文本格式化标签 < div> < span>

< div> 标签用来布局，但是一行只能放一个< div> //大盒子，块元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>
<p>这是一个div</p>
</div>
<p>
<div>云端源想</div>
</p>
</body>
</html>

<div>标签可以看出是一个盒子容器，这里面可以放别的标签。
<div>标签是一个块元素。

如上图控制台所示（打开控制台的方式：F12）：<div>标签里面可以包含<p>标签，<p>标签，里面不可以放<div>标签。

< span> 标签用来布局，一行上可以多个 < span>//小盒子，行元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>

<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
<span>标签不同于<p>标签是一个行内元素（不独占一行）。

8、其它字体标签

<mark>：这个标签用于突出显示文本，通常用于表示高亮的部分。

<ins>：这个标签用于表示插入的文本，常用于表示新增的内容。

<sub> 和 <sup>：这两个标签分别用于表示下标和上标文本，常用于数学公式或化学方程式中。

二、总结与建议

尽管上述标签可以直接在HTML中使用，但现代网页设计越来越倾向于使用CSS来控制文本的样式，因为CSS提供了更多灵活性和控制能力。

使用CSS类和样式规则可以更有效地管理网站的整体样式，并且可以更容易地适应不同设备和屏幕尺寸。

因此，如果您正在学习或更新您的网页设计知识，建议学习和使用CSS来控制字体和其他文本样式，关于HTML的这些标签了解一下就可以了。

总之，字体是网页设计中不可或缺的元素，它们就像是网页的语言，传递着信息和情感。通过HTML字体标签的学习和应用，我们可以让我们的网页“字”得其乐，让每一位访问者都能享受到更加美妙的网络体验。不断探索和实践，让我们的网页在字体的世界里绽放光彩吧！

今天就先讲到这里了，

更多前端开发基础知识点击文末阅读原文查看哦！

记得关注【云端源想IT】一起学编程！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

在线咨询

上一篇：咖啡经营商城小程序如何设计搭建？
下一篇：2018年html5与java最新工资就业趋势对比分

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

js入门三部曲「第二部」ep04 html代码的基本

语法

加入引号标记

HTML

CSS

结果

修饰示例

HTML

CSS

结果

待办列表

HTML

CSS

JavaScript

结果

特殊字符

HTML

CSS

结果

无障碍考虑

一、认识基本字体标签

二、总结与建议

您的项目需求