HTML（超文本标记语言）是一种用于创建网页的标准标记语言。 HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。 它不是一种编程语言，而是一种标记语言。
一个网页的基本结构：
<!DOCTYPE html>
<html>
<head>
<title>HTML 简介</title>
</head>
<body></body>
</html>
HTML 中满足以下格式的内容即为注释，被注释的内容将不会被渲染示。
<!-- 在此处写注释 -->
html元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
例子：
<p>hello world</p>
注：这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。元素内容是：hello world。
html标签
超文本标记语言（英语简称：HTML ）标记标签通常被称为 HTML 标签，HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML 标签的大小写无关的，例如 和 表示的意思是一样的，都代表“主体”，推荐使用小写。
- h 系类标签
<!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 标签
<p>我是第一段文字</p>
<p>我是第二段文字</p>
- 图片标签
HTML 的图像是通过标签 <img> 来定义的。 语法: <img src="图片地址"/> 。
<p>图片：</p>
<img src="https://static.shu.com/frontend/dist/img/9f43b00.svg" />
- a 标签
<a> 标签是超链接标签，意思就是我们点击文字就可以跳转到一个网页。
<a href="https://www.baidu.cn/">百度一下</a>
-
div 标签
能够设置其宽高，后面我们会讲到。
<div> 标签是一个块级元素，块级元素占据其父元素（容器）的整个空间，你可以把它想成一个盒子。
这里设置的 style，后面我们会进行学习，现在只是为了便于产生效果，使大家更好理解。在这里的效果是生成一个宽高 200 像素的粉色 div。 -
换行标签和空格字符
在浏览器显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被认为是一个空格。如果希望在不产生一个新段落的情况下换行，可以使用 <br/> 标签。如果想使用空格的话可以使用 字符。
<body>
<p>这是一段文字 前面有很多空格但是只显示一个</p>
<p>这是一段文字 用了空格字符</p>
<br />
<p>上面是换行符</p>
</body>
- 水平分割线
<hr/> 标签用于在 HTML 页面中创建一条水平线。
<body>
<hr />
<hr />
<hr />
</body>
容器标签（div 和 span）
-
标签
标签 <div> 可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在 <div> 和 </div> 所标记的区域前后自动放置一个换行符。 -
span标签
标签 <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>
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…) |
我们来看其中一两个 type 属性：
<p>无序列表</p>
<ul type="circle">
<li>空心圆列表项1</li>
<li>空心圆列表项2</li>
</ul>
<p>有序列表</p>
<ol type="A">
<li>列表项1</li>
<li>列表项2</li>
</ol>
自定义列表（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>
html样式
上面所介绍的标签以后，我们将学习为所有的 HTML 标签定义 style 属性，通过 style 属性来改变 HTML
- 背景颜色
<html>
<body>
<p style="background-color:red">hello world</p>
</body>
</html>
注：通过 "background-color" 属性值的设置来给背景设置颜色。
- 字体、颜色和尺寸
通过对 font-family 属性值的设置来设置字体，通过对 color 属性值的设置来设置颜色，通过对 font-size 属性值的设计来设计字体大小。
<html>
<body>
<p style="font-family:arial;color:green;font-size:50px;">hello world</p>
</body>
</html>
- 文本对齐
<html>
<body>
<h1 style="text-align:center">hello world</h1>
</body>
</html>
上面的标题"hello world"相对于页面居中对齐。
标签：HTML,自定义,标签,前端,元素,列表,学习,html,序列表 From： https://www.cnblogs.com/lazarus235/p/17053141.html