持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

简介：本文分上下篇，将以概念加代码块加实战的方式速刷html，部分资料来源于网络。

概念：HTML是用来描述网页的一种语言。（超文本标记语言）

HTML中标签的应用非常重要。例如

、、等。

在HTML中，标签总是成对出现的，例如

、等。

前者是开始标签，后者则是结束标签。

二者又被称为开放标签、闭合标签。

HTML文档描述网页
HTML文档包含HTML标签和纯文本
HTML文档也被称为网页

下面是一个最简单的html文档

<html>
<body>
 
<h1>劳资要冲榜！</h1>
 
<p>冲榜！</p>
 
</body>
</html>

解释：

和之间的文本描述网页
<body和之间的文本是可见的页面内容
和
之间的文本被显为标题
和
之间的文本被显示为段落

HTML标题

HTML标题是通过

~

等进行定义的

<h1>我想要衣服</h1>
<h2>我想要衣服</h2>
<h3>我想要衣服</h3>

HTML段落

段落的定义由

标签实现

例如

<p>这是第一个段落</p>
<p>这是第二个段落</p>

虽然结束标签在大部分浏览器中可以省略。例如

<p>这是第一个段落
<p>这是第二个段落

但是在未来的HTML中是不允许这种做法的。

HTML折行

如果不想在产生一个新段落的情况下进行换行，可以使用
/

并不是
的闭合标签，因为
里是空元素，关闭标签没有任何意义。

但
在所有的浏览器中都可以显示，所以个人推荐使用

现在尝试编排一首诗

《北风刀》

北风平地起苍黄，欲望西北射天狼。

手中飞刀落又起，暂且收刀来日长。

何须苏子正襟坐，我辈自得气清扬。

若问秋风何时落，须臾百天展锋芒。

<html>
 
<body>
 
<h1>北风刀</h1>
 
<p>
    北风平地起苍黄，欲往西北射天狼。<br/>
        手中飞刀落又起，暂且收刀来日长。<br/>
            何须苏子正襟坐，我辈自得气清扬。<br/>
                若问秋风何时落，须臾百天展锋芒。<br/>
</p>
 
</body>
 
</html>

输出如图所示，HTML会默认忽略多余的空格和换行

可以加入换行
进行格式化

使用style属性改变HTML的样式。

<html>
<body style="backgroung-color:green">
 
<h1>在<body>里定义背景颜色</h1>
 
<p style="font-family:verdana;color:red">
"font-family"是对字体进行设定，color，则是对字体颜色进行更改
</p>
 
<p style="font-size:30px">
“font-size”是对字体尺寸进行设定
</p>
 
</body>
</html>

输出如图所示：

单独针对背景颜色的代码：

<html>
 
<body style= "background-color:yellow">
 
<h2 style="background-color:green">
更改整体背景颜色
</h2>
 
<p style="background-color:white">
更改本段背景颜色
</p>
 
</body>
 
</html>

输出效果如图：

2.单独针对字体的代码：

<html>
 
<body>
 
<h1 style="font-family:verdana">
标题
</h1>
 
<p style="font-family:arial;color:green;font-size:20px">
各种不同元素之间用分号隔开。
</p>
 
</body>
 
</html>

输出结果如下

3.单独针对文本格式化的代码：

<html>
 
<body>
 
<h1 style="text-align:center">
居中的标题
</h1>
 
</body>
 
</html>

输出结果如下

HTML引用

<html>
 
<body>
 
<p>我的目标是：<q>搞件衣服!</q></p>
 
</body>
 
</html>

输出如下

如果引用部分过长，则需

<html>
<body>
<p>以下内容引自百度经验：</p>
<blockquote cite=https://jingyan.baidu.com/article/dca1fa6f17ea59f1a5405210.html>
百度是一个平台，主要做搜索，有事搜一搜，没事看一看；
 
其他平台有做门户，有做邮箱为主的；
 
百度搜索下面有许多方面，网页，新闻，贴吧，知道，音乐，图片，视频，地图，文库及其他；
 
根据自己的需要，是浏览，还是查找资料，上传文件，下载多媒体，或者赚钱也可以。
 
以查找为例，地图，先点击 地图，输入地点名称就可查到，关键词越准确，资料越有用；
</blockquote>
</body>
</html>

浏览器通常会对 blockquote 元素进行缩进处理。

缩略词：

用到标签进行缩写

<html>
<body>
<p><abbr title="阴阳怪气">yygq</abbr>是一个不咋地的词</p>
</body>
</html>

天，点击查看活动详情

速刷html一周目（上）

和

~

使用style属性改变HTML的样式。

HTML引用