HTML的标签1
- 标题标签:
- 段落标签:
- 文本标签:
- 图片标签:
- 列表标签:
- 有序列表:
- 无序列表:
- 定义列表:
- 列表案例:
标题标签:
标签:h1~h6
注意:如果使用无效标签(比如:h7)会按照文本内容在页面展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--文本内容-->
<h7>七级标签</h7>
</body>
</html>
段落标签:
标签:p
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>今天天气真好</p>
<p>我们去逛街吧</p>
</body>
</html>
文本标签:
标签:
span – 文本标签
br – 换行标签
hr – 分割线标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>今天天气真好</span>
<span>我们去逛街吧</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>今天天气真好</span>
<br/>
<span>我们去逛街吧</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>今天天气真好</span>
<br/>
<span>我们去逛街吧</span>
<hr />
</body>
</html>
图片标签:
图片标签:img
属性: src:图片资源路径
width:宽度
height:高度
alt:图片加载失败后显示的文本内容
tips:
100px – 100像素
30% ---- 占页面宽度的百分比
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img/花儿.jpg" width="100px" height="100px"/>
<br />
<img src="../img/花儿.jpg" width="30%" height="30%" />
<br />
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.NCZVberruGGjOtESnFnMDQHaEK?" width="200px" height="200px" />
<br />
<img src="https://tse2-mm.cn.bing.xxxxx" width="100px" height="100px" alt="图片加载失败" />
</body>
</html>
列表标签:
有序列表:
有序列表:ol
属性: type —>展示类型: 1-阿拉伯数字
a-小写英文字母
A-大写英文字母
i-小写罗马数字
I-大写罗马数字)
列表项: li
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>注册流程:</h3>
<ol type="1">
<li>填写基本信息</li>
<li>绑定银行账号</li>
<li>绑定手机号</li>
<li>注册成功</li>
</ol>
</body>
</html>
无序列表:
无序列表: ul
属性:type ----> 展示类型 circle-空心圆
discs-实心圆
square-实心方块
列表项:li
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul type="square" >
<li>xxx</li>
<li>yyy</li>
<li>zzz</li>
</ul>
</body>
</html>
定义列表:
定义列表:dl
列表头:dt
列表体:dd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<dl>
<dt>
<h2>花儿</h2>
<img src="../img/花儿.jpg" width="100px" />
</dt>
<dd>
<p>接天莲叶无穷碧,映日荷花别样红</p>
<p>小荷才露尖尖角, 早有蜻蜓立上头</p>
<p>小楼一夜听春雨,深巷明朝卖杏花</p>
<p>人间四月芳菲尽,山寺桃花始盛开</p>
<p>花开堪折直须折, 莫待无花空折枝</p>
<p>春宵一刻值千金, 花有清香月有阴</p>
<p>浔阳江头夜送客,枫叶荻花秋瑟瑟</p>
</dd>
</dl>
</body>
</html>
列表案例:
HTML标签可以无限层嵌套!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--无序列表-->
<ul>
<li>
<h3>荤菜</h3>
<!--有序列表-->
<ol>
<li>回锅肉</li>
<li>仔姜鸭丝</li>
<li>爆炒腰花</li>
<li>宫保鸡丁</li>
<li>小鸡炖蘑菇</li>
</ol>
</li>
<li>
<h3>素菜</h3>
<ol>
<li>清炒空心菜</li>
<li>鱼香茄子</li>
<li>土豆炒洋芋</li>
<li>西红柿炒番茄</li>
</ol>
</li>
<li>
<h3>汤类</h3>
<ol>
<li>翡翠蛋花汤</li>
<li>皮蛋黄瓜汤</li>
<li>胡豆瓣酸菜粉丝汤</li>
<li>开水白菜</li>
</ol>
</li>
</ul>
</body>
</html>