谁来教我渗透测试——黑客必须掌握的HTML基础(二)

·  阅读 206
今天我们继续看看html的学习笔记。

文本标签

标题标签

将文本设置为标题显示的标签对。设定标题字体大小,n=1(大)~6(小),标题大小一共有6种,也就是从

……

……
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1>我是菜鸟小白</h1>
<h2>你们的好朋友</h2>
<h3>  让我们一起学习吧!!!</h3>
</body>
</html>
复制代码
显示效果如下:
![](https://pic1.zhimg.com/80/v2-b64143e0a3d3c37e922c681a2947917d_720w.png)

字体修饰标签

对文字的格式做相应的变化,如粗体、斜体、底线、上标、下标等。常用的字体修饰标签有以下几种。
  • ……:指定文字为粗体字
  • ……:指定文字为斜体字
  • ……:指定文字为带有下划线
  • ……:指定文字为打字机效果
  • ……:指定文字为上标
  • ……:指定文字为小标
  • ……:对某段文字进行强调,通常用斜体字显示出来
  • ……:对文本进行强调,通常用粗体字显示出来 我们看下加粗前后对比,其它效果类似方式
    菜鸟小白的学习分享 我是菜鸟小白呀 我是菜鸟小白呀
显示效果如下:
![](https://pic4.zhimg.com/80/v2-26d7e13fa325085ef8c2bc072eb94e73_720w.png)

字体标签

设置文档的字体,改变其属性,对文本进行不同的设置,包含字体、大小、颜色等
  • size
  • face
  • color
我们看看大小的对比区别
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
我是菜鸟小白
<font size="20px">我是菜鸟小白呀</font>
</body>
</html>
复制代码
显示效果如下:
![](https://pic4.zhimg.com/80/v2-cc2f8ccbabbf2d059112c0ce78aed9c5_720w.png)

超链接标签

超链接的定义

在不同文档、同一个文档的不同段落之前相互跳转。html链接包含两部分:锚标和目标点。锚标就是链接的源点,当鼠标被移动到锚标处时会变成小手状。此时,用户通过点击鼠标就可以到达链接的目标点。目标点可以是一张图片、一个网络文件、一个多媒体文件等。

属性href(hypertext reference)

用于设定链接地址,其链接地址必须是URL地址,必须给出具体的路径。其中URL地址可以为下面内容:
  • 网站:可以设置ip地址或者是网站的网址。

    百度地址

点击页面的百度地址可直接跳转到百度页面
![](https://pic2.zhimg.com/80/v2-69faa7ab76f30e7eeddc7416e87a5cd2_720w.png)
  • 网页:链接到本机的网页。

    跳转

跳转前页面
![](https://pic4.zhimg.com/80/v2-a53f6d0ba6281841c8b59ce9bb0d3547_720w.png)
点击跳转后直接跳转到新的本机页面
![](https://pic3.zhimg.com/80/v2-6fbe72ee5cb330a6d05e6cdc7db15d23_720w.png)
  • 可执行文件:当文件扩展名不是html、asp等时,会将链接到的文件下载到本地计算机或直接执行。如果是文本文件(如word格式),则在浏览器中打开文件并进行编辑。

    txt文件,打开进行编辑 播放声音

  • 网页上的书签:通常使用在网页的长度超过屏幕时,可以使用书签直接跳转到该书签指向的具体内容,节省移动滚动条的时间。

属性target

  • 属性值分别为_blank、_self、_parent、_top。
  • target=_blank:在新的浏览器窗口中打开连接的文档,同时保持当前窗口不变
  • target=_self:将链接的文档载入链接所在的同一框架或窗口,默认设置为_self
  • target=_parent:将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架,则所链接的文档载入整个浏览器窗口。
  • target=_top:将链接的文档载入整个浏览器窗口,从而删除所有框架 我们以“_blank”为例,可以按照如下方式编写:

    百度地址

属性title

浏览器会以浮动提示的方式显示解释信息
<a href="http://www.baidu.com" target=_blank title="百度欢迎你">百度地址</a>
复制代码
实际效果展示:
![](https://pic2.zhimg.com/80/v2-a579bec98c10c73d4b87dcacf1fa7aae_720w.png)

属性name

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
​
<body bgcolor="11ffff" text="000000">
<a name=ceshi>这是测试跳转</a>
<a href="#ceshi" title="百度欢迎你">百度地址</a>
​
</body>
</html>
复制代码

图像标签

图片标签

  • 属性src:来定义图片的URL(统一资源定位符)地址,是图片必不可少的属性。用法形如:
  • 属性height和width:规定图片的大小。属性值都是数字,表示图像宽度和高度所占的像素点数。默认是浏览器窗口将自动调整图像显示尺寸
  • 属性align:设置图片对齐方式,垂直对齐(居上、居中和居下)和水平对齐(居左、居中和居右)。
  • 属性border:默认图片是没有边框的,可以利用border属性添加边框。

表格标签

创建一个表格,有属性width(宽度)、height(高度)、border(边框)、bordercolor(边框颜色)、cellspacing、cellpadding

创建表格中的每一行,有属性align、valign、bgcolor

创建表格的中每一列,有属性

表头

设置表头
我们现在建造一个表
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
​
<body bgcolor="11ffff" text="000000">
​
<table border>
<th>测试表头</th>
​
<tr>
<td>这是第一行第一列</td>
<td>这是第一行第二列</td>
<td>这是第一行第三列</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td>这是第二行第二列</td>
<td>这是第二行第三列</td>
</tr>
</table>

</body>
</html>
复制代码
显示如下:
![](https://pic4.zhimg.com/80/v2-2dd04c3d9bf6d8adfb0eddd11d1d0f72_720w.png)

框架标签

框架

一个浏览器文档窗口一般只能显示一个网页文件,但是使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口,每个子窗口中都可以显示一个独立的网页文件。

框架集

多个框架组成了一个框架集(Frameset),定义了各个框架如何排列的。有属性rows和cols,两个属性至少选择一个,否则浏览器只显示第一个定义的框架。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
​
<frameset cols="25%,50%,25%">
<frame src="https://www.baidu.com"></frame>
<frame src="https://www.qq.com"></frame>
<frame src="https://www.sina.com"></frame>
</frameset>
​
</html>
复制代码
最终我们将三个页面在同一个web窗口展示出来了
![](https://pic2.zhimg.com/80/v2-87ccd3ee723cd3b86698570f56c56b77_720w.png)

表单标签

表单标签

主要用于采集和提交用户输入的信息,使网页具有交互功能。有属性:
  • action(处理提交数据的页面)
  • method(提交方式(get、post、request))
  • target()

用户输入区域标签

这个标签必须放在……标签之间。有属性type,具体参数值有:
  • text(单行文本输入框)
  • textarea(多行输入框)
  • password(密码输入框)
  • radio(单选框)
  • checkbox(复选框)
  • select(下拉框)
  • submit(提交)
  • reset(重置)
  • image(图片提交)
  • file(上传文件)
    菜鸟小白的学习分享 ​

    用户名

    多行输入框

    密 码

    单选框

    复选框

    下拉框

    提交

    重置

    图片提交

    文件提交

实现效果:
![](https://pic3.zhimg.com/80/v2-0526e69a931ffd72eaed83acf72864ba_720w.png)
![](https://pic1.zhimg.com/80/v2-f5108a98998a54e0f6b5b174083d8470_720w.gif)
好了,今天的内容就分享完了,如有什么意见和建议可以私信菜鸟小白哦,我们下期再会~
![image](https://upload-images.jianshu.io/upload_images/23741241-afbf02cec3fe277c?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

一个人的学习——孤单

一群人的学习——幸福

分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改