WEB安全 HTML基础 2
WEB安全 HTML基础 2
2.5 a标签、img标签、table标签
a标签的作用：就是用于控制界面与页面之间的跳转
默认就是self
self：用于在当前选项卡中跳转，也就是不新建页面跳转
_blank ：用于在新的选项卡中跳转，也就是新建页面跳转
<a href="http://www.baidu.com" target="self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
锚文本
<a href="#2">锚点</a>
<a name="2">锚点</a>
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
<p name ='top'>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxx</p>
<a href="http://www.baidu.com">百度</a><!-- 网页内打开 -->
<a href="http://www.baidu.com" target="_self">百度</a><!-- 网页内打开 -->
<a href="http://www.baidu.com" target="_blank">百度</a><!-- 新建窗口打开 -->
<a href="#top">返回顶部</a><!-- 锚文本 -->
2.6 img标签
img 元素向网页中嵌入一幅图像。
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
alt 规定图像的替代文本。
src 规定显示图像的url
width 规定图片的高度
height 规定图片的宽度
<img src="file:///C:/Users/Administrator/AppData/Local/Temp/1000.webp" width="100" height="100" alt="logo"/><!-- 图片不存在时会显示为logo -->
2.7 table表格
<!-- <caption>我的标题</caption>表格带标题
border 边框
width 宽度
height 高度
colspan 行合并
rowspan 竖合并
<th></th>
<tr>行</tr>
<td>表格</td>
cellpadding 单元边与内容的空白
cellspacing 单元格的空白 -->
<table border="1" cellpadding ='10' cellspacing ='0'>
<caption>姓名图</caption>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr><td>1</td><td>鲁班</td><td>30</td></tr>
<tr><td>2</td><td>马超</td><td>30</td></tr>
</table>
<table border="1" cellpadding ='10' cellspacing ='0'>
<caption>姓名图</caption>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr><td>1</td><td>刘备</td><td rowspan="2">30</td></tr>
<tr><td>2</td><td>鲁班</td>
<tr><td>3</td><td>马超</td><td>15</td></tr>
<tr><td>4</td><td>鲁班大师</td><td rowspan="2">40</td></tr>
<tr><td>5</td><td>典韦</td></tr>
<tr><td>总数</td><td colspan="2">5</td></tr>
</table>
2.8 列表标签
2.8.1 无序列表
<ul type="square"><!-- 项目符号 square circle disc -->
<li>html基础</li>
<li>css基础</li>
<li>js基础</li>
<li>项目实战</li>
<li>php基础</li>
<li>数据库基础</li>
</ul>
2.8.2 有序列表
<!-- 数字列表 默认 数字
小写字母列表
大写字母列表 A
罗马字母列表 I
小写罗马字母列表 i -->
<body>
<ol type="1">
<li>html基础</li>
<li>css基础</li>
<li>js基础</li>
<li>项目实战</li>
<li>php基础</li>
<li>数据库基础</li>
</ol>
2.9 框架的使用
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里
iframe 是在html页面内嵌入框架 框架内可以连接另一个页面
frameset 不能在body内使用
frame 一般都是在frameset中使用
cols 定义框架集中列的数目和尺寸（竖向）
rows 定义框架集中行的数目和尺寸（横向）
scrolling 滚动条
auto 在需要的情况下出现滚动条（默认值）。
yes 始终显示滚动条（即使不需要）。
no 从不显示滚动条（即使需要）
新建框架项目
框架主页
</head>
<frameset rows='20%,*'>
<frame src='top.html'>
<frameset cols='20%,*'>
<frame src='left.html'>
<frame src='main.html' name='add'><!-- name=add 提交到main -->
</frameset>
</frameset>
<body>
框架left
<body>
<!-- left -->
<ul>
<li><a href="add.html" target="add"<!-- (提交到main) -->>添加文章</a></li>
<li><a href="artlist.html" target="add">文章列表</a></li>
<li><a href="#">系统信息</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">备份</a></li>
</ul>
</body>
添加文章
<body>
<form method="post">
标题：<input type="text" /><br />
内容：<textarea cols="40" rows="20"></textarea>
<input type="submit" />
</form>
</body>
文章列表
<ol>
<li><a href="#">HTML基础</a></li>
<li><a href="#">DIV CSS基础</a></li>
<li><a href="#">JAVASCRIPT 基础</a></li>
<li><a href="#">HTML CSS 博客项目</a></li>
<li><a href="#">PHP基础</a></li>
<li><a href="#">数据库基础</a></li>
<li><a href="#">PHP安全开发博客系统</a></li>
<li><a href="#">渗透测试基础知识</a></li>
</ol>
