[前端学习之HTML5]（02）：编写一个简单的HTML网站

lemon懵懵

已于 2024-09-16 19:28:29 修改

阅读量1.4k

点赞数 27

分类专栏：前端学习文章标签：前端 html 学习

于 2024-09-16 19:25:06 首次发布

本文链接：https://blog.csdn.net/m0_75100421/article/details/142290339

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

写在前面：博主前段时间面试前端开发岗位遇到了一点小挫折，在抉择了许久人生道路问题上最后选择了前端开发，我将重新学习前端开发的知识，包括但不限于HTML5、CSS3、JavaScript，以及主流框架React、Vue和Angular等等，我的希望预期是到最后能做出来前后端交互的项目，且这些成果可以被面试官认可，这些学完相信大家都可以找到自己心仪的岗位。内容我尽量做的很详细，小白跟着也能一步一步做，在有一些要点的时候我会根据我的面试经验指出需要特别牢记的知识点，以免被面试官拷打o(╥﹏╥)o，对前端有兴趣的小伙伴可以与我一起学习，我非常希望和大家多多交流，如果有什么错误也欢迎指正！

1，可视化软件：

1，webstorm：

编写HTML语言可以用的软件有：H builder、VScode、webstorm等，这里我用的是webstorm，安装教程在第一个帖子。 WebStorm 是 jetbrains 公司旗下一款JavaScript开发工具。软件支持不同浏览器的提示，还包括条有用户自定义的函数。代码补全包含了所有流行的库，如jQuery、YUI、Dojo、Prototype. Mootools 和 Bindows等。被广大JavaScript开发者誉为Web前端开发神器、最强大的 HTML5编辑是最智能的JavaScript IDE等。

2，创建与运行HTML文件：

运行时可以双击保存好的HTML文件，也可以：

最好选择谷歌浏览器为默认浏览器。

3，webstorm常见指令;

Ctrl+W：扩展选中内容，可连续多次来扩大选中区域
Ctrl+/：行注释
Ctrl+Shift+/：块注释
Ctrl+D，复制并粘贴（增加）当前行
Ctrl+Y，删除当前行

2，标题

1，标题标签

标题标签共有六个，分别是：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、字体大小依次变小。

一般用<h1>标签来表示网页中最上层的标题，但是有些浏览器会默认把<h1>标签显示为非常大的字体，所以开发者有时候会使用<h2>标签来代替<h1>标签来显示最上层标题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 前端学习第一天</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

显示效果：

2，标题的对齐方式

如上图所示，标题文字默认是左对齐的，在网页制作的过程中，我们可以设置文字的对齐方式，可以为标题标签添加align属性进行设置。语法格式如下：

<h1 align=“对齐方式”>文本内容</h1>

对齐方式的属性值如下表所示：

属性值	含义
left	文字左对齐
center	文字居中对齐
right	文字右对齐

使用实例如下：（把上面“对齐方式”换成需要的属性值即可）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 前端学习第一天</title>
</head>
<body>
<h1 align="center">一级标题</h1>
<h2 align="left">二级标题</h2>
<h3 align="left">三级标题</h3>
<h4 align="right">四级标题</h4>

</body>
</html>

显示效果：

这里值得一提的是在编程软件中代码状态可能是这样的：

这里的align显示是被划去的状态，但是不影响运行效果。这是因为在HTML5中align 属性已经不再被推荐使用，就是它过时了，是之前HTML4的东西，因为它不是语义化的标签，也不符合CSS布局的最佳实践。（其实在面试的时候面试官会问到一些HTML5和HTML4 的不同，这需要我们慢慢积累），现代Web开发推荐使用CSS来控制元素的对齐方式（还没学到CSS，我们慢慢操作不要着急，这里简单提一下）：

方式一：通常使用内联样式、内部样式表或外部样式表来设置标题的对齐

<h1 style="text-align: center;">一级标题</h1>
<h2 style="text-align: left;">二级标题</h2>
<h3 style="text-align: left;">三级标题</h3>
<h4 style="text-align: right;">四级标题</h4>

方式二：在<head>标签中使用<style>标签定义样式

<head>
  <style>
    h1 { text-align: center; }
    h2 { text-align: left; }
    h3 { text-align: left; }
    h4 { text-align: right; }
  </style>
</head>

3，文字

文字的装饰效果的语法类似，只是使用的标签不同。

1，文字的斜体、下划线、删除线

文字装饰效果的语法类似，只是标签不同。语法格式如下：

<em>斜体文字</em>
<i>斜体文字</i>
<cite>斜体文字</cite>

<u>带下划线的文字</u>
<strike>带删除线的文字</strike>

（其中strike标签也是被HTML5淘汰的标签）

2，文字的上标与下标

在写数学公式或方程式时，会遇到上标和下标的写法，语法格式如下：

<sup>上标标签内容</sup>
<sub>下标标签内容</sub>

那么我们完成两个实例：

用代码编写：
```
<h1>x<sup>3</sup></h1>
```
运行：
用代码编写 $eq?%5E%7B%7D$ $eq?x%5E%7B3%7D+9x%5E%7B2%7D-3%3D0$

<h1>x<sup>3</sup>+9x<sup>2</sup>-3</h1>

运行：

3，特殊文字符号

在网页制作过程中，特殊符号（如引号、空格等）也是由代码控制的。一般情况下，特殊符号的代码由前缀“&”、字符名称和后缀分号“；”组成，使用方法和空格符号类似，具体如下表所示：

符号	属性值	含义
"	&quot；	引号
<	&It；	左尖括号
>	&gt；	右尖括号
×	&times；	乘号
©	&copy；	小节符号
	&nbsp；	空格占位符

实例：

<p>&quot;引用这段话&quot;</p>
<p>&lt;括起来这段话&gt;</p>
<p>3&times;4=12</p>
<p>人民出版社&copy;</p>

效果：

4，段落

1，段落标签

在HTML5中，段落效果是通过<p>标签实现的，<p>标签会自动在其后创建一些空白，浏览器会自动添加这些空间。语法格式如下;

01  <p>段落文字</p>

其中，可以使用成对的<p>标签来包含段落，也可以使用单独的<p>标签来划分段落。

实例：选择李白的《早发白帝城》来展示<p>标签位置不同所表现的不同段落效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 前端学习第一天</title>
</head>
<body>

<p>《早发白帝城》
  朝辞白帝彩云间，千里江陵一日还。
  两岸猿声啼不住，轻舟已过万重山。</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《早发白帝城》</p>
 <p> 朝辞白帝彩云间，千里江陵一日还。
  两岸猿声啼不住，轻舟已过万重山。</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《早发白帝城》</p>
<p> 朝辞白帝彩云间，千里江陵一日还。</p>
<p>  两岸猿声啼不住，轻舟已过万重山。</p>


</body>
</html>

让我们看看随着<p>标签位置不同所展现的三种不同的效果：（上面提到的空格属性值  效果也得到了体现）

2，段落的换行标签

从上图的效果我们可以看到：第一种当我们用<p>标签把所有文字包含起来时，段落是一整段没有换行效果的，第三种当我们用三对<p>标签实现三行展示效果时，文字的行间距又有点太大了，这时我们可以使用换行标签<br/>来文字的紧凑换行显示。语法格式如下：

<p>
一段文字<br/>一段文字
</p>

<br/>换行标签语法比较特殊，他并不是由开始标签和结束标签组成，大家注意不要写错。

如果需要多次换行，可以连续使用多个换行标签。对比一下使用多个<p>标签和<br/>标签的换行效果：

<p>《早发白帝城》</p>
<p> 朝辞白帝彩云间，千里江陵一日还。</p>
<p>  两岸猿声啼不住，轻舟已过万重山。</p>



<p>
  《早发白帝城》<br/>朝辞白帝彩云间，千里江陵一日还。<br/>两岸猿声啼不住，轻舟已过万重山。
</p>

效果如图：

3，段落的原格式标签

一般我们制作网页是用各种标签对文字进行排版的，但实际做项目的时候会需要一些特殊的排版效果，这时使用标签控制非常麻烦，解决办法就是使用原格式标签进行排版，如空格、制表符等。

原格式标签<pre>就可以解决这个问题。

让我们做一个实例，运用特殊的文字符号，绘制出《恶搞之家》的布莱恩字符画，用来表示网页错误页面内容（404页面）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 绘制布莱恩的字符画</title>
</head>
<body>

<h1 align="center">汪！你找的页面被我吃了！</h1>
<pre align="center">
  ૮   ⚆⚆  ა
  |        ●）
  |      - |

</pre>

</body>
</html>

运行：

布莱恩小贴士提醒您：<pre>标签用于显示预格式化的文本。它会保留文本中的空格和换行符，并且文本通常会被显示为等宽字体，而且会自动换行，在展示源代码或需要精确对齐的文本时非常有用。

5，水平线

水平线用于段落与段落之间的分隔，使文档结构清晰明白，文字的排版更整齐。水平线自身具有很多属性，如宽度、高度、颜色、排列、对齐等，在HTML5中经常会用到水平线，合理使用水平线可以获取非常好的页面装饰效果，一篇内容繁杂的文档，如果合理放置几条水平线就会变得层次分明，变于阅读（本文也用了许多水平线^.^）。

1，水平线标签

在HTML5中使用<hr>标签来创建一条水平线，直接在网页中输入一个<hr>标签，就能添加一条默认样式的水平线。语法格式如下：

01  <hr>

实例：<hr>标签经常在段落之间进行提醒分组的作用来使用，这里我们使用<hr>标签来制作一个观影顺序清单

<h1 align="center">《鬼灭之刃》观看顺序</h1>
<hr>
<p align="center">《鬼灭之刃 立志篇》</p>
<hr>
<p align="center">《鬼灭之刃 无限列车篇》</p>
<hr>
<p align="center">《鬼灭之刃 游郭篇》</p>
<hr>
<p align="center">《鬼灭之刃 锻刀村篇》</p>
<hr>
<p align="center">《鬼灭之刃 柱训练篇》</p>
<hr>
<p align="center">《鬼灭之刃 无限城篇》</p>
<hr>

运行：

2，水平线标签的宽度

如上图所示，默认情况下水平线在网页中显示是100%的宽度，在我们实际创建网页时，可以对水平线的宽度进行设置，语法格式如下：

01  <hr width="水平线宽度">

在这个语法中，“水平线的宽度” 可以是确定的像素值，也可以是窗口宽度值的百分比。

实例：

<!--设置水平线的宽度为120，位置居左-->
<hr  width="120" align="left">
<p>我们的故事开始</p>

<p align="center">故事的开头总是这样,</p>
<p align="center">适逢其会，猝不及防。</p>
<p align="center">故事的结局总是这样，</p>
<p align="center">花开两朵，天各一方。</p>

<!--设置水平线的宽度为120，位置居右-->
<hr  width="120" align="right">
<p align="right">我们的故事结束</p>

运行：