今天我们继续看看html的学习笔记。

文本标签

标题标签<hn>

将文本设置为标题显示的标签对。设定标题字体大小，n=1（大）~6（小），标题大小一共有6种，也就是从<h1>……</h1>到<h6>……</h6>

 <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>

显示效果如下：

 

字体修饰标签

对文字的格式做相应的变化，如粗体、斜体、底线、上标、下标等。常用的字体修饰标签有以下几种。

  • <b>……</b>:指定文字为粗体字

  • <i>……</i>:指定文字为斜体字

  • <u>……</u>:指定文字为带有下划线

  • <tt>……</tt>:指定文字为打字机效果

  • <sup>……</sup>:指定文字为上标

  • <sub>……</sub>:指定文字为小标

  • <em>……</em>:对某段文字进行强调，通常用斜体字显示出来

  • <strong>……</strong>:对文本进行强调，通常用粗体字显示出来

    我们看下加粗前后对比，其它效果类似方式

<html lang="zh-cn">

<head>

<meta content="text/html;charset=utf-8">

<title>菜鸟小白的学习分享</title>

</head>

<body bgcolor="11ffff" text="000000">

<b>我是菜鸟小白呀</b>

我是菜鸟小白呀

</body>

</html>

　　

显示效果如下：

 

字体标签<font>

设置文档的字体，改变其属性，对文本进行不同的设置，包含字体、大小、颜色等

  • 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>

　　

显示效果如下：

 

超链接标签

超链接的定义

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

属性href（hypertext reference）

用于设定链接地址，其链接地址必须是URL地址，必须给出具体的路径。其中URL地址可以为下面内容：

  • 网站：可以设置ip地址或者是网站的网址。
<a href="http://www.baidu.com">百度地址</a>

　　

点击页面的百度地址可直接跳转到百度页面

 
  • 网页：链接到本机的网页。
<a href="cainiao-跳转后页面.html">跳转</a>

跳转前页面

 

点击跳转后直接跳转到新的本机页面

 
  • 可执行文件：当文件扩展名不是html、asp等时，会将链接到的文件下载到本地计算机或直接执行。如果是文本文件（如word格式），则在浏览器中打开文件并进行编辑。
 <a href="index.txt">txt文件，打开进行编辑</a>

 <a href="index.wav">播放声音</a>
  • 网页上的书签：通常使用在网页的长度超过屏幕时，可以使用书签直接跳转到该书签指向的具体内容，节省移动滚动条的时间。

属性target

  • 属性值分别为_blank、_self、_parent、_top。

  • target=_blank：在新的浏览器窗口中打开连接的文档，同时保持当前窗口不变

  • target=_self：将链接的文档载入链接所在的同一框架或窗口，默认设置为_self

  • target=_parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。

  • target=_top：将链接的文档载入整个浏览器窗口，从而删除所有框架

    我们以“_blank”为例，可以按照如下方式编写：

 <!--在新的窗口中打开百度首页-->

 <a href="http://www.baidu.com" target=_blank>百度地址</a>

属性title

浏览器会以浮动提示的方式显示解释信息

<a href="http://www.baidu.com" target=_blank title="百度欢迎你">百度地址</a>

实际效果展示：

 

属性name

利用name属性作为锚定位，可以实现文档内部的定位。这个需要我们在两个<a>标签中，一个写明name，作为一个锚点；另外一个写明herf，用于指向锚点。如下面的示例，点击“百度地址”会跳转到“这是测试跳转处”（当页面超过一页长度时，测试效果更明显）

<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>

图像标签

图片标签<img 属性=“属性值”>

  • 属性src：来定义图片的URL（统一资源定位符）地址，是图片必不可少的属性。用法形如：<img src="url">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
  • 属性height和width：规定图片的大小。属性值都是数字，表示图像宽度和高度所占的像素点数。默认是浏览器窗口将自动调整图像显示尺寸
<img heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
  • 属性align：设置图片对齐方式，垂直对齐（居上、居中和居下）和水平对齐（居左、居中和居右）。
<img align="right" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
  • 属性border：默认图片是没有边框的，可以利用border属性添加边框。
<img border="20px" align="rows" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

表格标签

表<table>

创建一个表格，有属性width（宽度）、height（高度）、border（边框）、bordercolor（边框颜色）、cellspacing、cellpadding

行<tr>

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

列<td>

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

表头<th>

设置表头

我们现在建造一个表

 <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>

显示如下：

框架标签

框架<frame>

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

框架集<frameset>

多个框架组成了一个框架集（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窗口展示出来了

表单标签

表单标签<form>

主要用于采集和提交用户输入的信息，使网页具有交互功能。有属性：

  • action（处理提交数据的页面）

  • method（提交方式（get、post、request））

  • target（）

用户输入区域标签<input type="">

这个标签必须放在<form>……</form>标签之间。有属性type，具体参数值有：

  • text（单行文本输入框）

  • textarea（多行输入框）

  • password（密码输入框）

  • radio（单选框）

  • checkbox（复选框）

  • select（下拉框）

  • submit（提交）

  • reset（重置）

  • image（图片提交）

  • file（上传文件）

 <html lang="zh-cn">

 <head>

 <meta content="text/html;charset=utf-8">

 <title>菜鸟小白的学习分享</title>

 </head>

 ​

 <body>

 <p>用户名<input type="text"></input></p>

 <p>多行输入框<textarea></textarea></p>

 <p>密  码<input type="password"></input></p>

 <p>单选框<input type="radio"></input></p>

 <p>复选框<input type="checkbox"></input></p>

 <p>下拉框<input type="select"></input></p>

 <p>提交<input type="submit"></input></p>

 <p>重置<input type="reset"></input></p>

 <p>图片提交<input type="image"></input></p>

 <p>文件提交<input type="file"></input></p>

 ​

 </body>

 </html>

实现效果：

好了，今天的内容就分享完了，如有什么意见和建议可以私信菜鸟小白哦，我们下期再会~

谁来教我渗透测试——黑客必须掌握的HTML基础（二）的更多相关文章

  1. 谁来教我渗透测试——黑客应该掌握的Windows基础

    今天我们看看作为一个黑客对于Windows应该掌握哪些基础知识,主要内容包含以下四个方面: 系统目录.服务.端口和注册表: 黑客常用的DOS命令及批处理文件的编写: 黑客常用的快捷键,以及如何优化系统 ...

  2. 谁来教我渗透测试——黑客必须掌握的Linux基础

    上一篇我们学习了Windows基础,今天我们来看一看作为一名渗透测试工程师都需要掌握哪些Linux知识.今天的笔记一共分为如下三个部分: Linux系统的介绍 Linux系统目录结构.常用命令 Lin ...

  3. 谁来教我渗透测试——黑客必须掌握的HTML基础（一）

    小伙伴们,好几天不见了,这一周菜鸟小白工作很忙,所以没有每天更新学习内容,但是菜鸟小白的学习是没有停下来的,只是没有时间来整理学习笔记了.现在就将菜鸟小白这两天学习的HTML基础和大家分享,其中还会拿 ...

  4. Firefox渗透测试黑客插件集

    前天看S哥用Firefox的hackbar进行手动注入进行渗透,觉得直接运用浏览器的插件进行渗透测试有很多优点,既可以直接在前端进行注入等操作,也可以省却了寻找各种工具的麻烦.前端还是最直接的!于是这 ...

  5. 谁来教我渗透测试——VMware工具安装和使用

    今天我们继续渗透测试学习系列了,昨天我们看了基础概念,今天我们来学习一下渗透测试必备的功能VMware安装. 首先我们下载好VMware workstation Pro的安装包.可以在百度上直接百度下 ...

  6. 《Web安全攻防 渗透测试实战指南》 学习笔记 （二）

    Web安全攻防 渗透测试实战指南   学习笔记 (二)   第二章  漏洞环境及实践  

  7. 《Python黑帽子：黑客与渗透测试编程之道》 网络基础

    TCP客户端: 示例中socket对象有两个参数,AF_INET参数表明使用IPv4地址或主机名 SOCK_STREAM参数表示是一个TCP客户端.访问的URL是百度. #coding=utf-8 i ...

  8. 谁来教我渗透测试——Windows server 2003上部署动态ASP网站

    安装网站 我们点击开始/管理工具/管理您的服务器 在服务器配置页面点击添加或删除角色 选择应用程序服务器,点击下一步 将两个工具都勾选上,点击下一步 点击下一步进行安装 等待安装 安装完成后点击完成按 ...

  9. 2019-9-24：渗透测试，css样式，js基础学习笔记

    css分组和嵌套:分组:比如有<h1><h4><p>,3个标签,设置css时候可以 h1,h4,p{样式:属性} 这样的语法嵌套:比如.lei{样式:属性},.le ...

随机推荐

  1. C#根据反射动态创建ShowDoc接口文本信息

    我目前每天主要工作以开发api为主,这都离不开接口文档.如果远程对接的话前端总说Swagger不清晰,只能重新找一下新的接口文档.ShowDoc就是一个不错的选择,简洁.大方.灵活部署. 但是话说回来 ...

  2. 《你还在写sql语句吗？》人生苦短，进入MybatisPlus的丝滑体验

    一.发展历程 依稀记得大学期间,类中写sql语句的日子,一个sql语句占据了大部分时间,到后来hibernate的出现算是解决了这一痛点.工作 后,我们又接触到了mybatis这样的框架,瞬间感觉这个 ...

  3. C++代码规约--命名约定

    目录 通用命名规则 文件命名 类型命名 变量命名 常量命名 函数命名 宏命名 枚举命名 命名空间命名 命名规则的特例 学习自Google C++编程规约 通用命名规则 函数命名, 变量命名, 文件命名 ...

  4. 集训 T4-分配时间

    题目: 思路: 这个题目正解为dp,但是我并不会dp,所以写了个类似于T3的搜索.(然后就70分了 先看一张图: 我的思路是把写名字的时间和写卷子的时间算在了一起(下标表示时间点,比如下标2那一行代表 ...

  5. OA系统从选型到实施完整攻略

    本文结合一线IT人士分享OA实施经验,单纯地讲述OA的选型与实施,为相关经验较少的IT人士提供真正的帮助. 一.如何选择OA系统 说起OA选型,稳定性.易用性.灵活性.成本和服务少不了.但是,只了解这 ...

  6. 第一讲 Windows10系统下IDE-CLion的安装与配置

    01 为什么使用CLion?02 CLion安装方法03 CLion的基本使用04 课程形式及答疑说明 toc 参考链接: Window10上CLion极简配置教程 学生免费注册Pycharm专业版 ...

  7. css : 使用浮动实现左右各放一个元素时很容易犯的错误

    比如说,有一个div,我想在左侧和右侧各方一个元素. 如果不想用flex,那就只能用浮动了. ... <div class="up clearfix"> <h6& ...

  8. 印象笔记如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器？

    一般点账户名——设置——安全设置中开通虚拟MFA两步验证 具体步骤见链接  印象笔记如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器? 二次验证码小程序于谷歌身份验证器APP的优势 1.无需下载a ...

  9. 阿里云如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器？

    阿里云如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器? 见如上链接中视频

  10. Python 编程语言的核心是什么？

    01 Python 编程语言的核心是什么? ​   为什么要问这个问题? 我想要用Python实现WebAssembly,这并不是什么秘密.这不仅可以让Python进入浏览器,而且由于iOS和Andr ...