<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>常见的标签</title>
</head>
<body>
<div align="center">
<!--1、标题标签 h1--h6 字号逐级减小-->
<h1>这是字号最大的标题</h1>
<h2>少年啊</h2>
<h3>哈哈哈啊啊 开心</h3>
<h4>滚去学习</h4>
<h5>噢噢噢噢噢噢噢噢</h5>
<h6>睡什么睡起来学习</h6>
<!--2、段落标签 p标签-->
<p style="background-color: orange; width:200px;height: 300px;">这是段落标签</p>
<!--3、超链接标签 a标签
href :a标签的属性 也就是特点特征
href属性的值存储的值也就是要跳转的网址
href=“” 为空 点击a标签会刷新本网页 并且回到网页顶部
href="网址" 点击a，进指定网址
href="#" 点击a，回到顶部 ,但是不刷网页
href="###" 点击 a,没有任何动作， 不会刷新网页也不会回到顶部
-->
<a href="http://www.baidu.com">点我一下，你就知道</a><br />
<!--4、强调标签 em、i（倾斜标签），b,strong(强调标签) -->
<strong style="background-color: orange; height: 300px;">哈哈哈哈哈哈哈哈</strong>
<em >嘻嘻嘻嘻嘻嘻嘻嘻</em><br />
<!--5、图片标签
src :资源路径/网络图片路径
alt:如果资源路径不正确 ，加载不出图片，此属性才会展示，是用来做提示提醒的！
-->
<img src="img/凤九.jpg" /><br />
<img src="img/111.jpg" alt="图片不存在"/><br />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594703886501&di=f2d329120161034d95ccf598b5f17a28&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201908%2F25%2F20190825143104_jdmiw.thumb.400_0.jpg"/>
</div>
<!--6、hr标签 单标签 分割线标签-->
<!--7、无意义标签
span 无意义的行元素
div 无意义的快元素 但是常用于模块的划分！！
-->
<span>哈哈</span>
<span>嘻嘻</span>
<div>我哦我我哦</div>
<hr /><br />
<!--8、列表标签 块元素
有序列表 ol
无序列表 ul
自定义列表 dl
-->
<ol>
<li>苹果</li>
<li>西瓜</li>
<li>香蕉</li>
</ol>
<ul>
<li>外套</li>
<li>鞋子</li>
<li>裤子</li>
</ul>
<dl>
<dt>菜单</dt>
<dd>鱼香肉丝</dd>
<dd>黄焖鸡</dd>
<dd>鸡肉饭</dd>
<dt>家电</dt>
<dd>冰箱</dd>
<dd>洗衣机</dd>
<dd>豆浆机</dd>
<dd>电饭煲</dd>
<dt>食品</dt>
<dd>面包</dd>
<dd>牛奶</dd>
<dd>零食</dd>
<dd>大米</dd>
</dl>
<!-------------------------------------------------------------->
<!-- element（元素，标签）语法
1、标签名*n n个标签 h1*3+tab
2、标签1+标签2 相邻关系
例如 div+h1*3+tab
<div></div>
<h1></h1>
<h1></h1>
<h1></h1>
3、标签1>标签2 标签1是父标签 标签2是子标签
例如1、 ul>li{列表$}*3+tab
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
例如2、(div{div$}+h1{标题1}*2)*2
<div>div1</div>
<h1>标题1</h1>
<h1>标题1</h1>
<div>div2</div>
<h1>标题1</h1>
<h1>标题1</h1>
例如3、dl>(dt+dd*3)*3
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
4、$ 从1自增
5、标签名{} 给标签写值
6、() 提升优先级
-->
</html>
网友评论