基本标签分类 : 块属性标签 行属性标签
一、块属性标签:
1️⃣ div 标签,本身无实意。
2️⃣ h1 ~ h6 标题标签。
注：h1 标签 对 SEO优化权重 较高。（h1 在页面中最多出现 1 次）
h2 标签次之。（h2 在页面中出现次数不超过 20次）
h3~h6 出现次数不限 开发过程中我们常用的是h1~h4。
3️⃣ p 标签，代表段落，通常情况下 p标签中存储的是一段内容。
转义字符：让网页显示看到符号或代码。
如： （空格）
例：<p>自三峡七百里中，两岸连山， </p>
4️⃣ hr 水平线标签。(单标签)
br 换行标签。
5️⃣ sup（行标签） ：显示右上角角标 例l: x<sup>2</sup>+y<sup>2</sup>=1；
sub （行标签）：显示右下角角标 例: x<sub>1</sub>=1； (注
：图)
6️⃣ 列表分类 :
1 无序列表 ：
ul : 块属性标签,代表无序标签。
li ：列表项，块属性标签 开发过程中， ul 通过 li 配合使用。
例：<ul>
<li>唧唧复唧唧</li>
<li>木兰当户织</li> （注： 
图）
</ul>
2 有序列表 :
ol : 块属性标签，代表有序列表。
li ：列表项，块属性标签，开发过程中，ol 通过 li 配合使用。
例： <ol>
<li>唧唧复唧唧</li>
<li>木兰当户织</li> （注 ：
图）
</ol>
3 定义列表 ：
dl：块属性标签，定义释项。
dt：块属性标签，被解释项。
dd：块属性标签，解释项。
例：<dl>
<dt>盖浇饭</dt>
<dd>把菜盖在米上，，，，，</dd> （注：
图）
</dl>
7️⃣ 地址标签： address
例： <address>河南省信阳市新县</address>
8️⃣ 引用标签： blockquote
例： <blockquote>蒹霞苍苍，白露为霜，蒹霞苍苍，白露为霜，蒹霞苍苍，白露为霜</blockquote>
二、行属性标签：
1️⃣ a ：超链接标签。
例： <a href="http：//www.baidu.com">百度一下，你就知道</a>
href属性 ：设置要跳转的网址。（如果是一个网址需要加 http：//）
例：<a href="index.html">跳转到index</a>
# ：一个#是返回顶部。
例： <a href="#">你点我试试</a>
#selffH1：跳转指定标签置顶。
例 ：<a href="#selffH1">指定标签置顶</a>
###：设置空链接。
例：<a href="###">会怎么样了</a>
空链接第二种写法：
<a href="javascript:void(0)">空链接第二种写法</a>
<a href="http://www.baidu.com" target="_blank">
arget: 设置页面是否在当前标签页打开。
_balnk：重新生成新的标签页 再 打开页面。
_self: 直接在当前标签页 打开页面。
2️⃣ 通过 a 标签实现下载功能：
例：<a href="2.pages">下载1</a>
<a href="2.zip">下载2</a>
<a href="img/1.jpg.zip">下载3</a>
注：
1，如果是 音频，视频，图片，需要先经过压缩，然后再在 href 属性中写该文件的路径。
2，如果是 非音频，视频，图片格式的文件，可以直接在 href 属性中 填写该文件的路径。
3️⃣ span 行属性标签，无实在意义。（网页中某一个位置需要特殊标记，就可以使用 span 标签）
例：采<span style="color: yellow;">菊</span>东篱下，悠然见南山。
4️⃣ i em strong 字体样式，分别为 斜体 斜体 正常加粗。
例： <hr>
<i>崔永元</i>
<em>范冰冰</em>
<strong>冯晓刚</strong>
<hr>
5️⃣ q: 引用标签，用来应用一句话。
例： <hr>
古人云：<q>人终有一死</q>
<hr>
6️⃣ pre code(行属性标签) ：用于包裹一段代码。
例：<pre> <code><h1>一级标题<h1></code> </pre>
7️⃣ img ：显示图片。
src 属性：设置图片路径
路径有三种：
a，网络路径
b，绝对路径
c，相对路径（开发中常用）
alt 属性：图片的替换文本。
作用一; 当找不到图片时，作为替换文本出现在页面中。
作用二；通过 alt 可以让浏览器知道当前图片的内容。
width/height 属性：设置图片的宽/高。
实际开发过程中，我们只设置宽和高两者中的其中一个，另外一个系统会自动根据图片宽高比进行拉伸。
title 属性：设置图片的标题。
当用户的光标在图片上长时间停留时会显示title中的内容。
例：<img src="img/1.jpg" alt="傻狗" width="500" hejght="100" title="疯狗">
a：网络路径
例:
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2486956696,687545127&fm=27&gp=0.jpg" alt="" width="" hejght="">
b: 绝对路径
例: <img src="/Users/lanouhn/Desktop/3.jpg" alt="" width="" hejght="">
c: 相对路径。 (../ 往前找) (/ 往后找)
/ : 往下一级目录(文件夹)查找。
../ : 往上一级目录查找。
例：<img src="../img/3.jpg" alt="">
<img src="img/1.jpg" alt="">
三、标签的分类总结:
1️⃣ 块级标签(块属性标签)
特征：
a 支持宽高设置,并且设置宽高之后,仍支持独占一行
b 支持 上下 padding 和 上下 margin2️⃣ 行级标签(行属性标签)
特征:
a 行级标签,在同一行展示。
b 不支持宽高设置,宽高由自身内容撑开。
c 不支持 上下 padding。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!-- 标签分为：块属性标签 和 行属性标签 -->
<!-- 一， 块属性标签 -->
<!-- 1， div 标签，本身无实意 -->
<div>你</div>
<div>你</div>
<!-- 2， h1~h2 标题标签
h1 标签 对 SEO 优化权重较高
h2 标签次之
h1 在页面中最多出现 1 次，
h2 在页面中出现次数不超过 20次，
h3~h6 出现次数不限 开发过程中我们常用的是h1~h4 -->
<h1 id="selffH1">一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 3， p标签：代表段落，通常情况下 p标签中存储的是一段内容 -->
<p>自三峡七百里中，两岸连山， </p>
<!-- 转义字符（让网页显示看到能看见代码）： :等 -->
<!-- 4，分隔线 -->
<hr>
<!-- br：换行标签 -->
床前明月光，<br>疑是地上霜
<!-- sup（行标签） ：右上角角标 -->
x<sup>2</sup>+y<sup>2</sup>=1；
<!-- sub（行标签）: 右下角角标 -->
x<sub>1</sub>=1；
<!--
5，无序列表
ul ：块属性标签，代表无序列表
li：列表项，块属性标签 开发过程中，
ul通过与li配合使用 -->
<ul>
<li>唧唧复唧唧</li>
<li>木兰当户织</li>
</ul>
<!-- 6，有序列表
ol：块属性标签，代表有序列表
li：列表项，块属性标签
开发过程中，ol通过与li配合使用 -->
<ol>
<li>唧唧复唧唧</li>
<li>木兰当户织</li>
</ol>
<!-- 7，定义列表
dl：块属性标签，定义释项
dt：块属性标签，被解释项
dd：块属性标签，解释项
-->
<dl>
<dt>盖浇饭</dt>
<dd>把菜盖在米上，，，，，</dd>
</dl>
<!-- 8，address：地址标签 -->
<address>河南省郑州市高新区莲花街55号威科姆园区B座（蓝鸥科技）</address>
<!-- 9，blockquote：引用标签 -->
<blockquote>
蒹霞苍苍，白露为霜，蒹霞苍苍，白露为霜，蒹霞苍苍，白露为霜
</blockquote>
<hr>
<!-- 二，行属性标签 -->
<!-- 1，a：超链接标签
href 属性：设置要跳转的网址
如果是一个网络地址需要添加 http：//
-->
<a href="http：//www.baidu.com">百度一下，你就知道</a>
<a href="index.html">跳转到index</a>
<!-- 一个 # 是返回顶部 -->
<a href="#">你点我试试</a>
<!-- 指定标签置顶 -->
<a href="#selffH1">指定标签置顶</a>
<!-- 将a标签设置空链接 -->
<a href="###">会怎么样了</a>
<a href="javascript:void(0)">空链接第二种写法</a>
<!-- target: 设置页面是否在当前标签页打开
_balnk：重新生成新的标签页 再 打开页面
_self: 直接在当前标签页 打开页面 -->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="http://www.baidu.com" target="_self">百度一下</a>
<!-- 通过 a 标签实现下载功能：
1，如果是 音频，视频，图片，
需要先经过压缩，然后再在 href 属性中写该文件的路径
2，如果是 非音频， 视频， 图片格式的文件，可以直接在 href 属性中 填写该文件的路径 -->
<a href="2.pages">下载1</a>
<a href="2.zip">下载2</a>
<a href="img/1.jpg.zip">下载3</a>
<!-- span 行属性标签，无实意
网页中某一个位置需要特殊标记，就可以使用 span 标签 -->
采<span style="color: yellow;">菊</span>东篱下，悠然见南山。
<hr>
<!-- i em strong -->
<i>崔永元</i>
<em>范冰冰</em>
<strong>冯晓刚</strong>
<hr>
<!-- 4，q: 引用标签，用来应用一句话 -->
古人云：<q>人终有一死</q>
<hr>
<!-- 5， pre ,code(行属性标签) ：用于包裹一段代码 -->
<pre>
<code><h1>一级标题<h1></code>
<!-- 6,img:显示图片 -
src 属性：设置图片路径
路径有三种：
a，网络路径
b，绝对路径
c，相对路径（开发中常用）
alt 属性：图片的替换文本
作用一; 当找不到图片时，作为替换文本出现在页面中
作用二；通过 alt 可以让浏览器知道当前图片的内容，
width/height 属性；设置图片的宽/高
实际开发过程中，
我们只设置宽和高两者中的其中一个，
另外一个系统会自动根据图片宽高比进行拉伸
title 属性：设置图片的标题
当用户的光标在图片上长时间停留时会显示title中的内容-->
<img src="img/1.jpg" alt="傻狗" width="500" hejght="100" title="疯狗">
</pre>
<!-- a ，网络路径 -->
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2486956696,687545127&fm=27&gp=0.jpg" alt="" width="" hejght="">
<!-- b，绝对路径-->
<img src="/Users/lanouhn/Desktop/3.jpg" alt="" width="" hejght="">
<!-- c,相对路径 (../ 往前找) (/ 往后找)
/ ;往下一级目录(文件夹)查找
../ ;往上一级目录查找
-->
<img src="../img/3.jpg" alt="">
<img src="img/1.jpg" alt="">
<!-- 标签的分类总结:
1,块级标签(块属性标签)
特征;a 支持宽高设置,并且设置宽高之后,仍支持独占一行
b 支持 上下 padding 和 上下 margin
2,行级标签(行属性标签)
特征;
a 行级标签,在同一行展示
b 不支持宽高设置,宽高由自身内容撑开
c 不支持 上下 padding
-->
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
