基本标签分类 : 块属性标签 行属性标签
一、块属性标签:
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>