HTML标签01
<!DOCTYPE html>
<html>
<!-- edit by zhengjin 20211009 -->
<!-- head标签的学习 成对标签和不成对标签-->
<!-- head常用标签有：meta title link -->
<head>
<meta charset="utf-8"> <!-- 这里是定义页面的字符集 -->
<title>这里是页面的标题</title> <!-- 标题 -->
<meta name="keywords" content="关键词1,关键词2"/>
<meta name="description" content="这里是描述的内容"/>
<link rel="icon" type="" href="" /> <!-- 这里是设置页面的图标，与faction意思一样 -->
</head>
<body>
<!-- 下面是关于body的常用标签 -->
<p>这里是一段文字,结束之后另起一段显示其他的内容</p> <!--段落标签-->
<b>这里使用的是加粗标签</b> <!--加粗效果-->
<strong>在效果上与b标签一样</strong> <!--强调文本-->
<em>这里是对某段文本的加强显示</em> <!--强调某段文本-->
<i>斜体显示的效果</i> <!--斜体-->
<br/>这里是与上面斜体效果通过换行标签实现的,下面是用水平线标签的效果 <!--换行-->
<hr /> <!--水平线-->
<u>这行文字使用了下划线标签</u> <!--下划线标签-->
<del>这里的删除标签通常使用的商品的价格比较上</del> <!--删除线标签-->
<br/>
<del>商品售价：￥158.00</del> 会员价：￥98.00
<h2>h族标签数字从1到6 是从大到小的变化</h2> <!--h族标题标签-->
H<sub>2</sub>O <!--下标文本-->
35<sup>.</sup> C <!--上标文本-->
<details>
<summary>新上架商品</summary>
<p>商品名称:龙山小米</p>
商品售价：<del>￥100.00</del>
<p>会员价：￥49.00</p>
<p>商品描述：龙山小米，贡品品质</p>
</details> <!--交互式控件、可见的或者隐藏的补充细节-->
<summary></summary> <!--与details一起使用，定义标题使用-->
<dialog>定义对话框是什么样的效果</dialog> <!--定义对话框或窗口-->
<hr/>
<h2>人生四大喜-使用无序列表ul</h2>
<ul>
<li>洞房花烛夜</li>
<li>金榜题名时</li>
<li>他乡遇故知</li>
<li>久旱逢甘霖</li>
</ul>
<h2>人生四大喜-使用有序列表ol</h2>
<ol>
<li>洞房花烛夜</li>
<li>金榜题名时</li>
<li>他乡遇故知</li>
<li>久旱逢甘霖</li>
</ol>
<h3>定义列表</h3>
<style>
dl{
float: left;
}
</style>
<dl>
<dt>
<img src="https://hxy.zghexinyue.com/storage/ic1ev5ebnczra1s06ch3.jpg" alt="">
</dt>
<dd>商品名称:龙山小米</dd>
<dd>商品价格:￥99.99</dd>
<dd>商品来源:龙山</dd>
</dl>
<dl>
<dt>
<img src="https://hxy.zghexinyue.com/storage/fhhrdxg05jc7z6noaoto.jpg" alt="">
</dt>
<dd>商品名称:百脉龙珠小米</dd>
<dd>商品价格:￥99.99</dd>
<dd>商品来源:龙山</dd>
</dl>
<dl>
<dt>
<img src="https://hxy.zghexinyue.com/storage/a26bynl4oo2kcjcgfeex.jpg" alt="">
</dt>
<dd>商品名称:龙山小米</dd>
<dd>商品价格:￥99.99</dd>
<dd>商品来源:龙山</dd>
</dl>
<dl>
<dt>
<img src="https://hxy.zghexinyue.com/storage/gaz1s3snc1s6kfk73zl1.jpg" alt="">
</dt>
<dd>商品名称:旭耕小米</dd>
<dd>商品价格:￥99.99</dd>
<dd>商品来源:龙山</dd>
</dl>
<!--超链接标签 绝对 从根下开始查找-->
<a href="http://www.baidu.com">点击这里打开百度</a>
<!--绝对路径 从根下开始查找 -->
<!-- <a href="file:///C:\Users\Administrator\Desktop\h5\lesson01\code\girl.html">绝对路径找本地girl</a> -->
<!--相对路径 从自己当前位置开始查找 ./当前目录 ../代表上一级目录-->
<a href="./new_file.html">相对路径查找new_file</a>
<!--图像标签-->
<a href="http://www.163.com">
<img src="./img/xm01.jpg1" alt="啊呀不好了，图片去火星了！">
</a>
<progress value="50" min="1" max="100">这里使用的是进度条标签</progress>
<meter value="50" min="1" max="100" >定义范围内的度量 一般用于密码复杂程度</meter>
</body>
</html>
上一篇： JavaScript循环有哪三种方法