超文本标记语言（英语简称：HTML ）标记标签通常被称为 HTML 标签
HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML 标签的大小写无关的，例如 body 和 BODY 表示的意思是一样的，都代表“主体”，推荐使用小写。
双标签（双标记）
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名></标记名>
常见的双标签有：
<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>
举例 a标签：
<a href="https://www.shiyanlou.com">实验楼</a>
单标签（单标记）
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：
<标记名/>
常见的单标签有：
<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />
标签的关系
- 嵌套关系
<head>
<title> </title>
</head>
- 并列关系
<head></head>
<body></body>
HTML 元素
指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
例如：
<p>I Love You</p>
这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 p，以及一个结束标签 /p。元素内容是：I Love You。
标题标签
h 系类标签代表着我们的标题，h 标签有六种 h1，h2，h3，h4，h5，h6
<!DOCTYPE html>
<html>
<head>
<title>HTML 简介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>
文本标签
p 标签是我们的文本标签。删掉上段代码 body 标签里的内容，把下面的内容放到 body 标签里面去。
<p>我是第一段文字，边做实验，边学编程，效果更好</p>
<p>我是第二段文字，边做实验，边学编程，效果更好</p>
图片标签
HTML 的图像是通过标签 img来定义的。 语法: img src=“图片地址”/ 。
<p>html5logo图片：</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595016046473&di=213108bc52afc35995f3a5f7cfbd2b3b&imgtype=0&src=http%3A%2F%2Fstatic.36kr.com%2Fwp-content%2Fuploads%2F2011%2F01%2F20110119125247.png" />
a 标签
a 标签是超链接标签，意思就是我们点击它可以跳转到一个网页。
<a href="https://mp.csdn.net/">CSDN博客</a>
容器标签（div 和 span）
div 标签
是一个块级元素，块级元素占据其父元素（容器）的整个空间，你可以把它想成一个盒子， div 能够设置其宽高。
<div style="width:200px;height:200px;background:pink">
块级元素
</div>
在这里的效果是生成一个宽高 200 像素的粉色 div
div 标签可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在 div 和 /div 所标记的区域前后自动放置一个换行符。
span标签
通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，他与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
#box {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box">这是div标签，自动换行</div>
<input type="text" /><span>这是span标签，不自动换行</span>
</body>
</html>
换行标签和空格字符
在浏览器显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被认为是一个空格。如果希望在不产生一个新段落的情况下换行，可以使用 br标签。如果想使用空格的话可以使用  字符。
<body>
<p>这是一段文字 前面有很多空格但是只显示一个</p>
<p>这是一段文字 用了空格字符</p>
<br />
<p>上面是换行符</p>
</body>
水平分割线
hr 标签用于在 HTML 页面中创建一条水平线
<body>
<hr />
<hr />
<hr />
</body>
HTML 列表
列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。
无序列表与有序列表
无序列表是一个项目的列表，此列项目使用实心圆、空心圆、方块进行标记，无序列表使用 ul 标签。同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 ol 标签。每个列表项始于 li 标签。
<p>无序列表</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<p>有序列表</p>
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
可以看到有多少个列表项就有多少个 li 标签。
无序列表和有序列表的 type 属性：
type 属性定义了列表项前项目符号的类型
ul标签的 type 属性：
值 备注
disc（默认） 实心圆
circle 空心圆
square 小方块
ol标签的 type 属性：
值 备注
1 （默认） 数字表示（1，2，3…)
A 大写字母表示（A,B,C…)
a 小写字母表示（a,b,c…)
I 大写罗马数字表示(I,II,III…)
i 小写罗马数字表示(i,ii,iii…)
例如：
<p>无序列表</p>
<ul type="circle">
<li>空心圆列表项1</li>
<li>空心圆列表项2</li>
</ul>
<p>有序列表</p>
<ol type="A">
<li>列表项1</li>
<li>列表项2</li>
</ol>
是不是很简单呢？只需要修改 type 属性，就可以看到不同的项目符号了，自己动手试试其他的吧！
自定义列表（dl）
定义：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。自定义列表的列表项前没有任何项目符号。
语法格式：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
...
</dl>
例子：
<h2>一个自定义列表：</h2>
<dl>
<dt>春天</dt>
<dd>是万物复苏，百花争艳的季节</dd>
<dt>夏天</dt>
<dd>是夏日绵绵，烈日炎炎的季节</dd>
</dl>
扫一扫
2651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
