一.HTML超链接
a标记表示网页中的一个超链接【锚点】
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像 ，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
1.HTML 链接 - href 属性【描述了链接的目标】
链接的目标路径有3中
(1)绝对路径
(2)相对路径
(3)网络地址
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML超链接</title>
</head>
<body>
<h1>HTML超链接</h1>
<h4>a标记表示网页中的一个超链接【锚点】</h4>
<h4>
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像
，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
</h4>
<h3>HTML 链接 - href 属性【描述了链接的目标】</h3>
<h4>链接的目标路径有3中【绝对路径/相对路径/网络地址】</h4>
<a href="C:\Users\14397\Desktop\new_file.html">绝对路径</a><br>
<a href="../20210811/6-3.html">相对路经</a><br>
<a href="https://mp.youkuaiyun.com/mp_blog/creation/editor/119618598">网络路经</a>
</body>
</html>
点开下面三个任意下个，都可跳转到其他页面。
点击绝对路径跳转的页面：
点击相对路径跳转的页面：
点击网络路径跳转的页面：
2.HTML 链接 - target 属性【定义被链接的文档在何处显示】
_blank----在新窗口中显示资源
_self-------在当前窗口中显示资源,会覆盖之前的内容【默认的】
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML超链接</title>
</head>
<body>
<h1>HTML超链接</h1>
<h3>HTML 链接 - target 属性【定义被链接的文档在何处显示】</h3>
<h4>_blank----在新窗口中显示资源</h4>
<h4>_self-------在当前窗口中显示资源,会覆盖之前的内容【默认的】</h4>
<a href="../20210811/10-3.html" target="_blank">测试target属性---blank</a>
<br>
<a href="../20210811/10-1.html" target="_self">测试target属性---self</a>
</body>
</html>
点击测试target属性---blank会在新窗口中显示超链接资源
如图所示：
点击测试target属性---self会在当前窗口中显示超链接资源
如图所示：
3.HTML 链接- id 属性【创建在一个HTML文档书签标记】
帮助我们实现跳转到当前文档中的某个部分
例如用下面这段小说来表示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML超链接</title>
</head>
<body>
<h1 id="app">HTML超链接</h1>
<h3>HTML 链接- id 属性【创建在一个HTML文档书签标记】</h3>
<h3>帮助我们实现跳转到当前文档中的某个部分</h3>
<h1>修真聊天群</h1>
<h2>第一章 黄山真君和九洲一号群</h2>
2019年5月20日，星期一。
<br>
春尽夏至。
<br>
这个季节，江南区的昼夜温差变的很大。白天还穿裤衩热成狗；晚上却得缩在被窝里冻成寒号鸟。
<br>
江南大学城。
<br>
下午两点十三分，这个点正是学生们上课的时间。宋书航却独自呆在宿舍，电脑桌被拉到床边，
方便他用各种姿势观看电影。
<br>
宋书航并没有逃课的爱好――昨晚上半夜天气闷热，睡梦中的他使出一招‘双龙出海’蹬飞了被子。
下半夜，气温剧降。浑身上下只有一条小裤衩的宋书航顿时苦逼了，睡梦中的他双手在床上苦苦
摸索，寻寻觅觅，却摸不到被子。最后只有缩成皮皮虾状，在午夜寒风的淫威下瑟瑟发抖。
<br>
朝阳升起时，宋书航已成为季节性感冒大军的一员。
<h2>第二章 且待本尊算上一卦</h2>
都说人不中二枉少年。
<br>
每个人或多或少都经历过那个时期，只是有些人表现出来，有些人则藏在心底。
也就是明骚和暗骚的区别。
<br>
宋书航有些少年老成，那个时期来的快，去的更快。
<br>
所以到了初中二年级时，周围男孩还陷在武侠梦、超人梦、仙人梦
，整天挥舞着降龙十八掌、超人变身时。书航却早已经对这些不抱任何希望。
<h2>第三章 一张丹方</h2>
太阳高升，时值正午。
<br>
室友知道宋书航感冒没好，让他好好休息，已经又为他补请了一天病假。
<br>
“病情怎么感觉越来越严重了？是不是因为最近缺少锻炼，身体素质变差了？”宋书航道。
<br>
在他身边有一份皮蛋粥，这是室友中午替他带来的。
<br>
“好人呐！”宋书航毫不犹豫的给室友们发了张好人卡。
<br>
睡了不知多久，他早饿的前胸贴后背，几下扒完了皮蛋粥，又打开电脑。
<br>
习惯性打开聊天软件后，便看到了‘九洲一号群’后代聊天数目的红点。
<br>
宋书航好奇的伸手打开九洲一号群，想看看里面的仙侠资深中二群友们一夜都聊了什么。
<h2>第四章 Ｈ市三品后天雷劫</h2>
想了想，宋书航按住←键将自己聊天框中的话先删掉。
<br>
他明白，以群里群友的性格，就算他冒头劝导，估计也没几个人能听过去。而且既然有人服用下去了，而且还活蹦乱跳的样子，那药短时间内应该毒不死人？
<br>
话虽如此，宋书航感觉自己也不能放着他们不管。是药三分毒，说不定这淬体液啥的是慢性毒，短时间内不死人，时间长了要人命咋办？
<br>
所以必须要确认一下这药方！
<br>
他还在为群里的仙侠中二病们操心。
<br>
宋书航这人，总的来说也是很适合发一张好人卡的。
<br>
他拿过身边的记事本，将药师‘淬体液’上三十个网上能搜到的普通药材名抄了下来。
<br>
<a href="#app" >回到顶端</a>
</body>
</html>
然后打开网页往下划，划到底部
我们会在最下角看见一个【回到顶端】的超链接，点击
最后我们就回到当前页面的顶端了
二.HTML head 元素中的子元素
(1)title元素【设置网页标题】
(2)link元素【设置导入外部css样式文件到当前网页中】
首先要创建一个text.css文件
text.css文件中写如下代码:
p{
color: crimson;
background-color: aqua;
font-size: 2.5rem;
}HTML中代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML head 元素中的子元素</title>
<link rel="stylesheet" type="text/css" href="text1.css"/>
</head>
<body>
<h3>HTML head 元素中的子元素--title元素【设置网页标题】</h3>
<h3>HTML head 元素中的子元素--link元素【设置导入外部css样式文件到当前网页中】</h3>
<p>link元素的测试结果</p>
</body>
</html>
结果：
(3)style元素【设置当前网页中css样式】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML head 元素中的子元素</title>
<style type="text/css">
p{
color: blue;
background-color: darkgreen;
font-size: 5.625rem;
}
</style>
</head>
<body>
<h4>HTML head 元素中的子元素--style元素【设置当前网页中css样式】</h4>
<p>style元素的测试结果</p>
</body>
</html>
(4)script元素【为当前网页中添加javascript脚本程序】
首先要创建一个new1.js文件
new1.js文件中写如下代码:
function fangda() {
var imgdomobj = document.getElementById("new1");
imgdomobj.width = "200";
imgdomobj.height = "200";
}
function suoxiao() {
var imgdomobj = document.getElementById("new1");
imgdomobj.width = "100";
imgdomobj.height = "100";
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML head 元素中的子元素</title>
<script src="new1.js"></script>
</head>
<body>
<h4>HTML head 元素中的子元素--script元素【为当前网页中添加javascript脚本程序】</h4>
<img src="img/微信图片_20210812182844.jpg" id="new1"
width="100px" height="100px"
onmouseover="fangda();" onmouseout="suoxiao();"/>
</body>
</html>
运行：
当鼠标放在图片上，图片会放大，移开鼠标会缩小。
三.HTML表格
table标记表示一个表格
tr标记表示表格中的行
td标记表示表格中的行中的列
thead标记表示表格中的表头
tbody标记表示表格中的身体
(1)border属性表格的边框属性
(2)cellpadding属性表格中单元格中的内容与单元格边框之间的距离
(3)cellspacing属性表格中单元格之间的间距
(4)colspan属性设置表格跨列【单元格的左右合并】
(5)rowspan属性设置表格跨行【单元格的上下合并】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5px">
<tr>
<td colspan="3">王者荣耀英雄属性</td>
</tr>
<tr>
<td>名字</td>
<td>职位</td>
<td>类型</td>
</tr>
<tr>
<td>元哥</td>
<td>对抗</td>
<td rowspan="2">刺客</td>
</tr>
<tr>
<td>李白</td>
<td rowspan="2">打野</td>
</tr>
<tr>
<td>孙悟空</td>
<td>战士</td>
</tr>
</table>
</body>
</html>
四.HTML列表
(1)有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<h3>有序列表</h3>
<h4>ol标记表示一个有序列表</h4>
<h4>li标记表示列表中的每一项</h4>
<h4>ol中的type属性设置有序列表的标号【a,A,i,I,1】</h4>
<h4>ol中的start属性设置有序列表的标号起始值</h4>
<ol>
<li>春眠不觉晓</li>
<li>处处闻啼鸟</li>
<li>夜来风雨声</li>
<li>花落知多少</li>
</ol>
<ol type="I">
<li>春眠不觉晓</li>
<li>处处闻啼鸟</li>
<li>夜来风雨声</li>
<li>花落知多少</li>
</ol>
<ol type="a" reversed="reversed">
<li>春眠不觉晓</li>
<li>处处闻啼鸟</li>
<li>夜来风雨声</li>
<li>花落知多少</li>
</body>
</html>
(2)无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body>
<h3>无序列表</h3>
<h4>ul标记表示一个无序列表</h4>
<h4>li标记表示列表中的每一项</h4>
<h4>ul中的type属性设置有序列表的标号circle / square /disc【默认】</h4>
<ul type="circle">
<li>春眠不觉晓</li>
<li>处处闻啼鸟</li>
<li>夜来风雨声</li>
<li>花落知多少</li>
</ul>
<ul type="disc">
<li>春眠不觉晓</li>
<li>处处闻啼鸟</li>
<li>夜来风雨声</li>
<li>花落知多少</li>
</ul>
<ul type="square">
<li>春眠不觉晓</li>
<li>处处闻啼鸟</li>
<li>夜来风雨声</li>
<li>花落知多少</li>
</ul>
</body>
</html>
(3)自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表</title>
</head>
<body>
<h3>自定义列表</h3>
<h4>dl标记表示一个自定义序列表</h4>
<h4>dt标记表示自定义序列表的主标题</h4>
<h4>dd标记表示自定义序列表的主标题下的次级内容</h4>
<h4>dd标记不会嵌套在dt标记中</h4>
<dl>
<dt>手机类型</dt>
<dd>华为</dd>
<dd>苹果</dd>
<dd>小米</dd>
<dt>直播平台</dt>
<dd>虎牙</dd>
<dd>企鹅</dd>
<dd>斗鱼</dd>
</dl>
</body>
</html>
五.HTML框架
iframe标记表示一个框架元素
在当前的html页面中开辟出一块空间单独显示一个html文件
(1)width---设置框架的宽度
(2)height--设置框架的高度
(3)src--设置需要显示的html文件
(4)frameborder--设置是否显示框架的边框【属性值为 "0" 移除iframe的边框】
(5)name--设置当前框架的名称，提供给超链接的target属性，达到联动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<body>
<a href="4-4.html" target="mywo">表格</a>
<a href="3-3.html" target="mywo">列表</a>
<br>
<iframe width="50%" height="400px" name="mywo" frameborder="0" src="3-3.html"></iframe>
</body>
</html>
因为src定义的是3-3.html所以显示的是列表的
点击表格会跳转到表格画面
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
