章节大纲
简介
HTML（HyperText Markup Language），超文本标记语言，用于创建网页的标准标记语言。运行在浏览器上，由浏览器来解析。
完整的HTML骨架
<!DOCTYPE html>
<html>
<head>
HTML页面的头部信息
</head>
<body>
HTML页面的主题内容
</body>
</html>
基础标签
1. 换行标签 <br />
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
helloworld
helloworld <br />
helloworld
</body>
</html>
结果如下：
只换行，且间距小
2. 段落标签 <p> </p>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
helloworld
helloworld
<p>helloworld</P>
</body>
</html>
结果如下：
独占一行，并且间距较大
3. 图片标签 <img />
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<img src="img.jpeg" width="200px" alt="一博" title="好帅"/>
</body>
</html>
结果如下：
src指定图片的位置，可以是相对路径也可以是绝对路径width指定图片的宽度alt指图片找不到时显示的文字
title指鼠标放在图片上时显示的文字
4. 标题标签 <h1> </h1>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
</body>
</html>
结果如下：
分别代表 1 - 6 级标题，需要注意的是 1 级标题字体最大，6 级最小
5. 无序列表 <ul> </ul>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<ul type="square">
<li>刘德华</li>
<li>张学友</li>
<li>黎明</li>
<li>郭富城</li>
</ul>
</body>
</html>
结果如下：
<br
type="square"指前面的小点使用方块形状
6. 有序列表 <ol> </ol>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<ol type="A">
<li>刘德华</li>
<li>张学友</li>
<li>黎明</li>
<li>郭富城</li>
</ol>
</body>
</html>
结果如下：
type="A"指前面默认的1234排序改为ABCD排序
7. 加粗 <b> </b>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<b>hello world</b>
</body>
</html>
结果如下：
8. 斜体 <i> </i>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<i>hello world</i>
</body>
</html>
结果如下：
9. 下划线 <u> </u>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<u>hello world</u>
</body>
</html>
结果如下：
10. 上标 <sup> </sup>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
H<sup>2</sup>O
</body>
</html>
结果如下：
11. 下标 <sub> </sub>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
Log<sub>2</sub>X
</body>
</html>
结果如下：
12. 块标签 <span> </span>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<span>hello world</span>
<span>hello world</span>
</body>
</html>
结果如下：
span标签不会发生换行，多个span之间有空格隔开
13. 块标签 </div> <div>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<div>hello world</div>
<div>hello world</div>
</body>
</html>
结果如下：
一个div标签独占一行
14. 超链接 <a href = " 路径 "> </a>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
结果如下：
点击即可跳转
表格标签
表格 table 的基本用法
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<table border="1px" width="200px" cellspacing="0" cellpadding="3px">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
</tr>
<table>
</body>
</html>
结果如下：
其中，<table>表示表格，包含<tr>行和<td>列
表单标签
1. 表单 <form> </form>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<form action="#" method="post" >
具体的表单内容
</form>
</body>
</html>
此时不会有任何效果，因为表单内没有任何内容
2. 文本框 input : text
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<form action="#" method="post" >
姓名：<input type="text" name="name" />
</form>
</body>
</html>
结果如下：
3. 单选框 input : radio
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<form action="#" method="post" >
性别：<input type="radio" name="gender" value="female" />女
<input type="radio" name="gender" value="male" />男
</form>
</body>
</html>
结果如下：
4. 复选框 input : checkbox
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<form action="#" method="post" >
爱好：<input type="checkbox" name="hobby" value="eat" />吃饭
<input type="checkbox" name="hobby" value="sleep" />睡觉
<input type="checkbox" name="hobby" value="bit" />打豆豆
</form>
</body>
</html>
结果如下：
5. 下拉框 <select> </select>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<form action="#" method="post" >
年龄：<select>
<option>19</option>
<option>20</option>
<option>21</option>
</select>
</form>
</body>
</html>
结果如下：
6. 密码框 input : password
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<form action="#" method="post" >
密码：<input type="password" name="pwd" />
</form>
</body>
</html>
结果如下：
7. 文本域 <textarea> </textarea>
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<form action="#" method="post" >
评论：<textarea name="common" rows="3" cols="20"></textarea>
</form>
</body>
</html>
结果如下：
8. 按钮 input : submit
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<form action="#" method="post" >
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
京公网安备 11010502036488号