HTML基本类型
1.结构类型标签 UL ol li
UL:是无序列表 type="none" 可以消除前面的黑点
OL:是有序列表
LI:可以包含流内容，如文本、图片或其他元素。
2.文本类型标签 b i s u p
p:段落标签 只能放文本
b:加粗标签 加粗文本
i:斜体标签 文本斜体
s:删除线标签 文本删除线
u:下划线标签 文本下划线
3.特殊标签 img a
1 img 图片
src:是文档的地址
width【宽度】:设置宽度 等比例缩放
height【高度】:
alt:图片发生意外（百分之90以上 是 地址错误）
title:标题
id[名字 唯一 ]:不会在浏览器上显示
class[名字 不唯一 ]:
2 a 超链接
href:地址
target:访问方式 _blank：打开一个新的网页访问
锚点（使用少）
使用： # + id名
4.容器标签 div span
5.CSS3的表达方式
6.开发者工具：打开方式【1：右键 2：f12】
英文=中文
7页面的布局：
从左至右 从上到下
8命名:
不要用中文
不要用数字开头命名
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示-->
<head>
<!-- 编码格式-->
<meta charset="UTF-8">
<!-- 标题-->
<title>Title</title>
<style>
div
{
display: inline-block;
}
</style>
<style>
li
{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<style>
ul
{
display: flex;
background-color: green;
}
</style>
<style>
#段落标签01
{
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<!--在浏览器显示-->
<body>
<!-- 图像显示
src:地址
ale:图片发生意外（百分之90以上 是 地址错误）
Width:宽度
height:高度
title:图片标题
id[名字 唯一 ]:不会在浏览器上显示
class[名字 不唯一 ]:不会在浏览器显示
-->
<img src="./图片1.png"
alt="图片未显示"
title="python"
id="图片文件01"
class="图片文件01"
width="100"
>
<!-- 超（视频 音频 文本 文档 ） 链接 如果要访问另外一端的话（点击）
href:地址
target:访问方式 _blank：打开一个新的网页访问
锚点（使用少）
使用： # + id名
-->
<!--<div style="height: 10000px"></div>-->
<a href="./图片1.png"
id="超链接文件01"
class="超链接文件01"
title="点击此处进行跳转"
target="_blank"
>图片链接</a>
<a href="#图片文件01"
title="点击此处，回到顶部"
>回到顶部</a>
<!--容器标签
div:是往下走的 主要作用就是划分地盘
span : 是往前走的 文本容器
-->
<div>我是DIV1</div>
<div>我是DIV2</div>
<span>我是span1</span>
<span>我是span2</span>
<!--结构类型标签
UL:是无序列表 type="none" 可以消除前面的黑点
OL:是有序列表
LI:
-->
<ol>
<li>我是ol 1</li>
<li>我是ol 2</li>
<li>我是ol 3</li>
<li>我是ol 4</li>
<li>我是ol 5</li>
</ol>
<ul>
<li>我是ul 1</li>
<li>我是ul 2</li>
<li>我是ul 3</li>
<li>我是ul 4</li>
</ul>
<!--文本标签
p:段落标签 只能放文本
b:加粗标签 加粗文本
i:斜体标签 文本斜体
s:删除线标签 文本删除线
u:下划线标签 文本下划线
-->
<p id="段落标签01">你好，我是HTML</p>
<b id="文本加粗01">你好，加粗标签</b>
<i id="文本斜体01">你好，文本斜体</i>
<s id="文本删除线01">你好，文本删除线</s>
<u id="文字下划线01">你好，文本下划线</u>
</body>
</html>
