HTML5 笔记之 HTML5 的常见用法介绍
阅读目录
- 介绍 网页标题、文章标题、文章段落
- 介绍 字体大小、字体颜色、字体类型、字体位置、背景颜色
- 介绍 插入图片
- 介绍 网页内的超链接、网页间的超链接
- 介绍 有序列表、无序列表
- 介绍 表格制作
- 介绍 其他一些常用元素
一、网页标题、文章标题、文章段落
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<h1>这是文章标题</h1>
<h3>这是文章的标题</h3>
<p>这是一个段落</p>
</body>
</html>运行结果为：
这是文章标题
这是文章的标题
这是一个段落
注意：
返回顶部
二、字体大小、字体颜色、字体类型、字体位置、背景颜色
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<p style="font-size:50px">改变字体的大小</p>
<p style="color:green">改变字体的颜色</p>
<p style="font-family:楷体">改变字体的类型</p>
<p style="text-align:right">改变字体的位置</p>
<p style="background-color:yellow">改变这段文字的背景颜色</p>
<p style="font-size:30px; color:#008000">改变字体的大小和字体的颜色</p>
</body>
</html>运行结果为：
改变字体的大小
改变字体的颜色
改变字体的类型
改变字体的位置
改变这段文字的背景颜色
改变字体的大小和字体的颜色
注意：
返回顶部
三、插入图片
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<img src="http://p1.s.hjfile.cn/thread/201201/2012011451648781_800_o.jpg" width="245px" height="185px"/>
</body>
</html>运行结果为：
注意：
返回顶部
四、网页内的超链接、网页间的超链接
代码1：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<a href="#head1">点击跳转到大标题</a>
<a href="#head3">点解跳转到小标题</a>
<h1 id="head1">这是网页内的超链接</h1>
<h3 id="head3">这是网页内的超链接</h3>
</body>
</html>运行结果为：
点击跳转到大标题
点解跳转到小标题
这是网页内的超链接
这是网页内的超链接
注意：
代码2：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<h3>这是文字链接-点击文字跳转到百度</h3>
<a href="http://www.baidu.com">百度</a>
<h3>这是图片链接-点击图片跳转到百度</h3>
<a href="http://www.baidu.com"><img src="http://p1.s.hjfile.cn/thread/201201/2012011451648781_800_o.jpg" width="245" height="185"/></a>
</body>
</html>运行结果为：
这是文字链接-点击文字跳转到百度
百度
这是图片链接-点击图片跳转到百度
返回顶部
五、有序列表、无序列表
代码1：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<p>这是有序列表：</p>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>梨</li>
</ol>
<p>这是无序列表：</p>
<ul>
<li>狗</li>
<li>猫</li>
<li>老鼠</li>
</ul>
</body>
</html>运行结果为：
这是有序列表：
- 苹果
- 香蕉
- 梨
这是无序列表：
- 狗
- 猫
- 老鼠
代码2：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<p>这是嵌套列表：</p>
<ol>
<li>
<p>花</P>
<ul>
<li>玫瑰</li>
<li>百合</li>
</ul>
</li>
<li>
<p>树木</p>
<ul>
<li>柳树</li>
<li>榕树</li>
</ul>
</li>
</ol>
</body>
</html>运行结果为：
这是嵌套列表：
花
- 玫瑰
- 百合
树木
- 柳树
- 榕树
注意：
返回顶部
六、表格制作
代码1：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead style="color:red">
<tr>
<td>头部</td>
<td>头部</td>
<td>头部</td>
</tr>
</thead>
<tbody style="color:blue">
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
<tfoot style="color:green">
<tr>
<td>脚注</td>
<td>脚注</td>
<td>脚注</td>
</tr>
</tfoot>
</table>
</body>
</html>运行结果为：
| 头部 | 头部 | 头部 |
| 脚注 | 脚注 | 脚注 |
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
注意：
代码2：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<tr>
<td>学号</td>
<td>性别</td>
<td>姓名</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>男</td>
<td>张三</td>
</tr>
<tr>
<td>102</td>
<td>男</td>
<td>李四</td>
</tr>
<tr>
<td>103</td>
<td>男</td>
<td>王五</td>
</tr>
</tbody>
</table>
</body>
</html>运行结果为：
| 学号 | 性别 | 姓名 |
| 101 | 男 | 张三 |
| 102 | 男 | 李四 |
| 103 | 男 | 王五 |
注意：
代码3：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<!--这里是新添加的代码-->
<tr>
<td colspan="3" style="text-align:center">学生档案</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>运行结果为：
| 学生档案 | ||
| 学号 | 性别 | 姓名 |
| 101 | 男 | 张三 |
| 102 | 男 | 李四 |
| 103 | 男 | 王五 |
注意：
代码4：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>张三</td>
<td rowspan="3">男</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
</tr>
</tbody>
</table>
</body>
</html>运行结果为：
| 学号 | 姓名 | 性别 |
| 101 | 张三 | 男 |
| 102 | 李四 | |
| 103 | 王五 |
注意：
返回顶部
七、其他一些常用元素
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<!--这里是注释，不会显示在文章中-->
<p><b>这里显示粗体</b></p>
<p><i>这里显示斜体</i></p>
<p><u>这里显示下划线</u></p>
</body>
</html>运行结果为：
这里显示粗体
这里显示斜体
这里显示下划线
返回顶部