1、有序标签 <ol> <li></li> </ol>
<!DOCTYPE html>
<html>
<head>
<title>day2 高级标签</title>
<meta charset="utf-8">
</head>
<body>
<!-- 有序列表，默认展示有序数字，type 可选阿拉伯数字、罗马数字大小写、英文字母大小写 5种； start表示从哪个开始-->
<ol type="" ="1" start="3">
<li>速度与激情</li>
<li>非常人贩</li>
<li>了不起的盖茨比</li>
<li>日出东方</li>
</ol>
<ol type="a" start="3">
<li>速度与激情</li>
<li>非常人贩</li>
<li>了不起的盖茨比</li>
<li>日出东方</li>
</ol>
<ol type="A" start="3">
<li>速度与激情</li>
<li>非常人贩</li>
<li>了不起的盖茨比</li>
<li>日出东方</li>
</ol>
<ol type="i" start="3">
<li>速度与激情</li>
<li>非常人贩</li>
<li>了不起的盖茨比</li>
<li>日出东方</li>
</ol>
<ol type="I" start="3">
<li>速度与激情</li>
<li>非常人贩</li>
<li>了不起的盖茨比</li>
<li>日出东方</li>
</ol>
</body>
</html>
效果展示如下:
屏幕快照 2018-03-19 下午3.45.47.png
2、无序标签 <ul> <li></li> </ul>,实际开发中一般使用无序标签
<!DOCTYPE html>
<html>
<head>
<title>Day2 高级标签</title>
<meta charset="utf-8">
</head>
<body>
<!-- 无序标签，默认有黑色实心圆，可设置 -->
<ul>
<li>范冰冰</li>
<li>刘诗诗</li>
<li>高圆圆</li>
</ul>
</body>
</html>
屏幕快照 2018-03-19 下午3.50.09.png
3、<a></a> 主要有以下几个用途
3.1>超链接
3.2>锚
3.3>打电话
3.4>协议限定符
<!-- 超链接功能 -->
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
4、<img</img>
5、<form></form>标签,用于信息交互，一般结合input标签等使用
<!DOCTYPE html>
<html>
<head>
<title> 高级标签的熟悉 </title>
<meta charset="utf-8">
<style type="text/css">
input {
font-size: 30;
color: black;
}
</style>
</head>
<body>
<form method="get" action="">
姓名: <input type="username" name="username">
<p>
密码: <input type="password" name="password">
</p>
<p>
<input type="submit" name="submit">
</p>
</form>
<hr>
<form>
<h1>选择器</h1>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</form>
<hr>
<form>
<h1>Choose your sex</h1>
male <input type="radio" name="sex" value="male" checked="checked">
female <input type="radio" name="sex" value="female">
<input type="submit">
</form>
</body>
</html>
效果如下:
屏幕快照 2018-03-20 下午5.39.10.png
网友评论