HTML5——网页的基本标签
基本标签：
-
标题标签
-
段落标签
-
换行标签
-
水平线标签
-
字体样式标签
粗体：<strong></strong> 斜体：<em></em> -
注释和特殊符号
空 格 > >大于 < <小于基本标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>1、只有飞速的bai旋转，才可以止住我的泪水，du忘记你的模样。 -----不祥之刃</p>
<p>2、他们都说我是穿着东方dao盔甲的奇怪人，但我只想顶在最前面，用我的长枪保护我的朋友。-----德邦总管</p>
<p>3、一曲终了、繁花散尽、伊人已逝，只余一声空叹。----- 死亡歌颂者 </p>
<p>4、妩媚倾城的面容 我蛊惑万千众生 孰不知 心里 早有了一个人 ..却只能无尽的思念 你送我的宝珠 我一直带着 只因为我能看见你的身影。-----九尾妖狐 </p>
<p>5、我醒来了，但是我什么都不记得，我很害怕，我包裹住我的身体，然后独自在黑暗中哭泣。----殇之木乃伊</p>
<!--水平线标签-->
<hr/>
<!--换行标签,还是属于一段-->
6、我只是部落遗子，你却是高贵公主，我愿把我生命的力量化为三刀为你而战，只为证明我，配的上你… -----蛮族之王<br/>
7、我很想陪伴在你身边，只是你不允许，没关系，在你需要帮助时，我还是会出现在你身边。 -----暮光之眼<br/>
8、我一路种下了蘑菇、只为让你知道回家的路。 ----迅捷斥候<br/>
9、我一直急速前行 穿梭于人人之间 试图叫应接不暇的风景让我褪去对你的思念----无极剑圣<br/>
10、我蒙上自己的双眼，只想记住最后看你的那一眼。 我刺瞎自己的双眼 只为记住那逝去的红颜。-----盲僧<br/>
<!--粗体，斜体-->
<h1>字体样式标签 </h1>
粗体：<strong>hello world</strong><br/>
斜体：<em>hello world</em>
<br/>
<!--特殊符号-->
空 格：<br/>
空 格
<br/>
> >
<br/>
< <
<!--查找特殊符号的方式：&+字母-->
</body>
</html>
图像标签
格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--img标签学习
src（必填）：图片地址:相对地址../resources/image/1.jpg推荐使用（../上一级目录）
绝对地址D:\project\resources\image\1.jpg
alt（必填）:替代图片的名字
title：鼠标悬停文字
-->
<img src="../resources/image/1.jpg" alt="风景" title="家乡的风景" width="800" height="400">
</body>
</html>
链接标签
文本超链接
<!--a标签
href(必填)：表示要跳到哪个页面
target="_blank":打开一个新网页
"_self"：在自己的网页打开
-->
图像超链接
<!--在图片里面嵌套一个链接-->
<a href="1.我的第一个网页.html"><br/>
<img src="../resources/image/1.jpg" alt="风景图" title="点击查看源网页" width="800" height="400">
</a>
锚链接
<!--锚链接 可以实现页面间的跳转
1.需要一个锚标记
2.可以跳转到锚标记
可以在一个网页打开另一个网页的锚链接
-->
链接测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--锚链接标记：使用name作为标记-->
<a name="top">网页顶部</a><br/>
<!--a标签
href(必填)：表示要跳到哪个页面
target="_blank":打开一个新网页
"_self"：在自己的网页打开
-->
<a href="https://www.csdn.net/" target="_blank" >点击跳转到CSDN</a><br/>
<a href="https://www.baidu.com/" target="_self">点击跳转到百度</a><br/>
<!--在图片里面嵌套一个链接-->
<a href="1.我的第一个网页.html"><br/>
<img src="../resources/image/1.jpg" alt="风景图" title="点击查看源网页" width="800" height="400">
</a>
<!--锚链接 可以实现页面间的跳转
1.需要一个锚标记
2.可以跳转到锚标记
可以在一个网页打开另一个网页的锚链接
-->
<a href="#top" >回到顶部</a>
<br/>
<a name="down">网页底部</a>
<!--功能性连接
邮件链接 mailto:
qq链接
-->
<br/>
<a href="mailto:[email protected]">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="../resources\image\2.jpg" alt="加我，免费领取小电影" title="加我，免费领取小电影"/></a>
</body>
</html>
行内元素和块元素
块元素：
- 无论内容多少，该元素独占一行
- 如：p段落标签，h标题标签…
行内元素：
- 内容可以在宽度上撑开，左右都是行内元素的可以排在一行
- 如：a链接，strong粗体。em斜体…
列表标签
列表：列表就是信息资源的一种展示形式，他可以使信息结构化和条理化，并以列表的形式显示出来，一边浏览者能更快捷的获取相应信息
列表的分类;
-
无序列表ul
-
有序列表ol
-
定义列表dl
列表测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表ol
应用范围:试卷，问答...
-->
<ol>科目分类
<li>数学</li>
<li>语文</li>
<li>英语</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ol>
<hr/>
<!--无序列表ul
应用范围:导航，侧边栏...
-->
<ul>科目分类
<li>数学</li>
<li>语文</li>
<li>英语</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<!--定义列表dl
应用范围：公司官网底部
-->
<dl>
<dt>科目分类</dt> <!--列表名称-->
<dd>语文</dd> <!--列表内容，可以有多个-->
<dd>英语</dd>
<dd>物理</dd>
<dd>化学</dd>
<dt>信息</dt>
<dd>男</dd>
<dd>20</dd>
<dd>优秀</dd>
<dd>科班</dd>
</dl>
</body>
</html>
表格标签
表格table
行 tr
列 td
border边框
合并列colspan
合并行rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
border边框
-->
<table border="1px">
<tr>
<!-- 跨列（合并列）colspan="5"要合并的列数-->
<td colspan="5">1-1</td>
</tr>
<tr>
<!-- 跨行（合并行）rowspan="4"要合并的行数-->
<td rowspan="4">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
<tr>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
</tr>
</table>
</body>
</html>
测试：用HTML5做一个课表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课表</title>
</head>
<body>
<table border="1px">
<tr>
<td></td>
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>一</td>
<td></td>
<td>面向对象程序设计</td>
<td></td>
<td>面向对象程序设计</td>
<td>HTML5网页制作</td>
</tr>
<tr>
<td>二</td>
<td>操作系统</td>
<td>数据库原理</td>
<td>HTML5网页制作</td>
<td>计算机组成原理</td>
<td>计算机组成原理</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>三</td>
<td>计算机组成原理</td>
<td></td>
<td>操作系统</td>
<td>数据库原理</td>
<td></td>
</tr>
<tr>
<td>四</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
