速刷 html 一周目（上）

作者：吉师职业混子

2022 年 9 月 23 日
吉林
本文字数：1622 字
阅读完需：约 5 分钟

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

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

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

<p>、<a>、<style>等。

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

<p></p>、<html></html>等。

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

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

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

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

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

复制代码

解释：

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

HTML 标题

HTML 标题是通过<h1>~<h6>等进行定义的

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

复制代码

HTML 段落

段落的定义由<p>标签实现

例如

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

复制代码

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

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

复制代码

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

HTML 折行

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

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

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

现在尝试编排一首诗

《北风刀》

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

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

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

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

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

复制代码

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

可以加入换行<br/>进行格式化

使用 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>

复制代码

输出如下

如果引用部分过长，则需<blockquote>

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

复制代码

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

缩略词：

用到<abbr>标签进行缩写

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

复制代码

下马上更新

发布于: 10 分钟前阅读数: 4

原文链接:【http://xie.infoq.cn/article/e3f38393c37ee7fac141b07c6】。未经作者许可，禁止转载。

吉师职业混子

关注

还未添加个人签名 2022.08.25 加入

还未添加个人简介

发布

暂无评论

创作场景

速刷 html 一周目（上）

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

HTML 引用

吉师职业混子

评论