简介：本文分上下篇，将以概念加代码块加实战的方式速刷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标题是通过
~
等进行定义的
<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会默认忽略多余的空格和换行
可以加入换行<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>输出如下
如果引用部分过长，则需
<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、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)