本文详细介绍了HTML中的图片标签(img)的使用，包括绝对路径、相对路径和网络路径的设置，以及img标签的其他属性。接着讨论了超链接(a标签)的使用，包括href属性和target属性。此外，还讲解了锚链接如何实现页面内跳转，以及在实际应用中如何创建和使用表单。最后，展示了如何利用锚链接实现类似小说章节的定位，便于用户快速浏览长篇内容。
目录
1.图片标签的使用
img标签
属性：src--图片的路径
src（1）绝对路径（2）相对路径（3）网络路径
（1）绝对路径：
路径上指定了盘符
D:\\images\\1.jpg
E:\\1.jpg
(2)相对路径
a.当网页文件与本地图片同于同个目录下
图片名字.jpg
b.网页文件与装有图片的文件夹处于同目录下（需要打开进入图片所在目录）
D:\\html_02\\1.html
D:\\html_02\\img\\1.jpg
c.图片文件与装有网页文件夹处于同目录下
用../ 退回上一级目录
（3）网络路径
-->
<img src="D:\\1.jpg" />
<!-- a.网页文件与图片文件处于同目录下。 -->
<img src="2.jpg" />
<!-- b.网页文件与装有图片的文件夹处于同目录下-->
<img src="img\\3.jpg" />
<img
src="https://tse1-mm.cn.bing.net/th/id/R-C.c77feee8572a809f826b1c07de7e9b92?rik=aGGJo0MAyZtRqA&riu=http%3a%2f%2fwww.yymeitu.com%2fupload%2f49210%2f2019%2f06-19%2f20190619140710_9177xpipoqny_small.jpg&ehk=3NST%2bzfLo7hvpiHbQKhQJRsqlppphNNDUBGWpjR7dVc%3d&risl=&pid=ImgRaw&r=0" /><!-- img标签的属性大全
宽度 width
高度 height
标题 title
提示 alt
border 边框
-->
<img border="10" alt="呵呵，图片加载失败" title="这是一个帅哥" src="4.jpg" width="200" height="200" />
2.超链接的使用
a标记
语法：
<a>提示文本</a>
借助一个属性才能实现跳转
href属性----》链接地址
地址：
本地地址
网络地址
目标属性 target
_self 默认 本窗口打开
_blank 新窗口打开
-->
<!-- 本地地址 -->
<a href="1.html">跳转到小电影网站</a>
<br />
<!-- 网络地址 -->
<a href="http://www.baidu.com">百度一下</a>
<br />
<a href="http://www.4399.com">百度一下</a>
<br />
<!-- 新开一个窗口 -->
<a target="_blank" href="http://www.80s.cn">小电影网站</a><a target="_blank" href="work_02.html">登录 </a> <a href="work_01.html">返回</a>
3.锚链接的使用
通过a标签实现。
必须要设置锚点才能实现跳转到指定的位置
点击一个文本或者按钮可以跳转到指定网页的位置
步骤：
1.在指定的位置设置锚点标记
<a id = "sb"></a>
2.在指定的a标签上设置跳转的锚点即可。
<a href = "#sb">跳转到指定的锚点</a>
-->
<br>
<!-- 设置锚点 -->
<a id="dengyankang">这里</a>
<script>
for (var i = 0; i <= 100; i++) {
document.write(i + "<br/>");
}
</script><a href="#dengyankang">返回顶部</a>
4.特殊符号和表单
特殊符号(版权（©），大于(>)，小于(lt)，双引(")，空格( ))
表单(***)
<input type = "">
type="Text" 可选值为 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button
5.表单应用
form标签上的2个属性
action: 提交的地址
专门将表单中的标签上输入的值传输到另外一个页面中去判断和获取。
method 提交的请求方式
get请求方式 数据暴露 不安全 数据大小有限制
post请求方式 数据不暴露 安全
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单元素</title> </head> <body> <form action="" method="post"> <p>用户名： <input name="username" id="username" type="text" size="20" maxlength="10" /> </p> <p>密 码： <input name="pwd" id="pwd" type="password" size="20" /> </p> <p> <input type="submit" name="btn" id="btn" value="提交" /> <input name="reset" type="reset" value="重填" /></p> </form> </body> </html>
6.锚链接实现类似小说章节的定位
<html> <head> <title></title> <meta charset = "utf-8"/> </head> <body> <a id = "1"></a> <h2>第1章节 监狱风云</h2> <script> for(var i = 0;i<=100;i++){ document.write(i+"<br/>"); } </script> <a id = "2"></a> <h2>第2章节 章游逃狱</h2> <script> for(var i = 0;i<=100;i++){ document.write(i+"<br/>"); } </script> <a id = "3"></a> <h2>第3章节 赶往机场</h2> <script> for(var i = 0;i<=100;i++){ document.write(i+"<br/>"); } </script> <a id = "4"></a> <h2>第4章节 偶遇小红</h2> <script> for(var i = 0;i<=100;i++){ document.write(i+"<br/>"); } </script> <a id = "5"></a> <h2>第5章节 一起出国</h2> <script> for(var i = 0;i<=100;i++){ document.write(i+"<br/>"); } </script> </body> </html><html> <head> <title></title> <meta charset = "utf-8"/> </head> <body> <h1>章游爱上霸道女总裁</h1> <ul> <li><a href = "7.html#1">第1章节 监狱风云</a></li> <li><a href = "7.html#2">第2章节 章游逃狱</a></li> <li><a href = "7.html#3">第3章节 赶往机场</a></li> <li><a href = "7.html#4">第4章节 偶遇小红</a></li> <li><a href = "7.html#5">第5章节 一起出国</a></li> </ul> </body> </html>
扫一扫
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
