HTML
1. 标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>七级标题</h7>
普通文本
</body>
</html>
2. 段落标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是段落1
我是段落2
<p>我是段落1</p>
<p>我是段落2</p>
</body>
</html>
3. 超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="www.baidu.com">百度(错误)</a>
<a href="http://www.baidu.com/">百度(正确)</a>
<a href="http://www.baidu.com/" target="_blank" >百度(新页面)</a>
</body>
</html>
4. 图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="aa.png" alt="">
<img src="aa.png" title="黑马程序员">
<img src="ab.png" alt="哎呀,图片丢了!">
<img src="aa.png" width="100px" height="100px">
<img src="aa.png" width="200px">
</body>
</html>
5. 换行和空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
示例文本1 <br>
示例文本2 </br>
示例文本3 <br/>
小明 小红 小刚 <br>
小明 小红 小刚 <br>
小明 小红
</body>
</html>
6. 布局标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>大盒子1</div>
<div>大盒子2</div>
<span>小盒子1</span>
<span>小盒子2</span>
<div>
<span>大盒子里的小盒子</span>
</div>
<span>
<div>小盒子里的大盒子</div>
</span>
</body>
</html>
7. 列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>宝马</li>
<li>奔驰</li>
<li>皇冠</li>
</ol>
<br>
<ul>
<li>小人</li>
<li>老虎</li>
<li>枪</li>
</ul>
</body>
</html>
8. 表单标签
8.1 文本框和密码框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
文本: <input type="text">
<br>
密码: <input type="password">
</body>
</html>
8.2 单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="radio" name="sex" id="">男
<input type="radio" name="sex" id="">女
</body>
</html>
8.3 复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="" id="">吃饭
<input type="checkbox" name="" id="">睡觉
<input type="checkbox" name="" id="">打豆豆
</body>
</html>
8.4 各种按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
</body>
</html>
8.5 表单域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="">
</form>
</body>
</html>