HTML5 笔记之 HTML5 的常见用法介绍

阅读目录

介绍网页标题、文章标题、文章段落
介绍字体大小、字体颜色、字体类型、字体位置、背景颜色
介绍插入图片
介绍网页内的超链接、网页间的超链接
介绍有序列表、无序列表
介绍表格制作
介绍其他一些常用元素

一、网页标题、文章标题、文章段落

代码：

<!DOCTYPE HTML>
<html>
	<head>
		<title>这是网页标题</title>
	</head>
	<body>
		<h1>这是文章标题</h1>
		<h3>这是文章的标题</h3>
		<p>这是一个段落</p>
	</body>
</html>

运行结果为：

这是文章标题

这是文章的标题

这是一个段落

注意：

这里看不到网页标题，网页标题会显示在浏览器的网页标签上

文章的标题有 h1-h6 一共6种不同的表示，上面只演示了其中的两种

返回顶部

二、字体大小、字体颜色、字体类型、字体位置、背景颜色

代码：


<!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>

运行结果为：

改变字体的大小

改变字体的颜色改变字体的类型

改变字体的位置

改变这段文字的背景颜色

改变字体的大小和字体的颜色

注意：

颜色可以用英文字母表示，也可以用十六进制码表示

style 属性也可以用于标题，例如：< h1 style="color:blue" > 改变文章标题的颜色 < /h1 >

返回顶部

三、插入图片

代码：


<!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>

运行结果为：

注意：

< img > 是一个空元素，没有关闭标签

title 属性：当你把鼠标放在图片上方时，会出现提示信息

如何获得图片：在网络上找到一张图片，鼠标右键图片，选择复制图片地址，然后粘贴到 src 属性中即可

返回顶部

四、网页内的超链接、网页间的超链接

代码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>

运行结果为：

点击跳转到大标题

点解跳转到小标题

这是网页内的超链接

注意：

注意 href 属性的值和 id 属性的值，除了 # 这个符号外，其他要相匹配

代码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>

运行结果为：

这是嵌套列表：

花
- 玫瑰
- 百合
树木
- 柳树
- 榕树

注意：

ol 的全称为 order list(有序列表)

ul 的全称为 unorder list(无序列表)

li 的全称为 list(列表)

返回顶部

六、表格制作

代码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>

运行结果为：

头部	头部	头部
内容	内容	内容
内容	内容	内容
内容	内容	内容
脚注	脚注	脚注

注意：

thead 的全称为 table head(表格头部)

tbody 的全称为 table body(表格内容)

tfoot 的全称为 table foot(表格脚注)

tr 的全称为 table row(表格行)

td 的全称为 table data(表格数据)

table 标签里面有三个部分，头部(thead)、身体(tbody)、脚部(tfoot)，而这三个部分里面都可以有表格行(tr)，表格行里面有表格数据(td)

我们可以注意到，table 标签里面只有规定行的元素，没有规定列的元素，列只能由表格数据(td) 规定

代码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	男	王五

注意：

width 属性表示表格占比屏幕宽度的 50%

代码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	男	王五

注意：

colspan 的全称为 column span(跨列)

colspan 的属性表示让表格中 “学生档案” 这一行的内容横跨3列

代码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	王五

注意：

rowspan 属性表示让表格中的内容跨3行

返回顶部

七、其他一些常用元素

代码：


<!DOCTYPE HTML>
<html>
    <head>
        <title>这是网页标题</title>
    </head>
    <body>
		<!--这里是注释，不会显示在文章中-->
		<p><b>这里显示粗体</b></p>
		<p><i>这里显示斜体</i></p>
		<p><u>这里显示下划线</u></p>
		<p>这里可以<br/>换行</p>
		<p>这里是水平线</p>
		<hr/>
    </body>
</html>

运行结果为：

这里显示粗体

这里显示斜体

这里显示下划线

这里可以
换行

这里是水平线

返回顶部

End~

相关阅读:
火狐浏览器推荐插件原创
 vue转义字符转换成普通字符
 vue中关于插槽的使用
 vue调取摄像头的方法（可以直接使用）
vue调用andriod方法
 vue中格式化时间戳（可直接使用）
vue关于$router的使用
 轻松了解Spring中的控制反转和依赖注入（二）
更加优雅地配置Spring Securiy（使用Java配置和注解）
更加优雅地搭建SSH框架（使用java配置）
原文地址：https://www.cnblogs.com/huangzenglie/p/8516644.html