今天我们继续看看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++函数模板的编译

    一.例子 template <typename T> inline void callWithMax(const T& a, const T& b){ f(a > b ...

  2. 响应式布局rem、rem方法封装、移动端响应式布局

    相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...

  3. Java8——Stream流

    Stream是数据渠道,用于操作集合.数组等生成的元素序列. Stream操作的三个步骤: 创建Stream 中间操作 终止操作 一.获取stream的四种方式 通过collection系列集合的st ...

  4. Ethical Hacking - NETWORK PENETRATION TESTING(10)

    WPA Craking WPA was designed to address the issues in WEP and provide better encryption. The main is ...

  5. 12C oracle 12.1.0.2版本打补丁

    从support  1454618.1文档 中可以下载到各版本的补丁和PSU. 此次采用的是28349311 版本号的psu 和28440711 版本号的jvm.opatch版本号6880880_12 ...

  6. Java 线程与同步的性能优化

    本文探讨的主题是,如何挖掘出Java线程和同步设施的最大性能. 1.线程池与ThreadPoolExecutor 1)线程池与ThreadPoolExecutor 线程池的实现可能有所不同,但基本概念 ...

  7. C++语法小记---函数对象

    函数对象 用于替代函数指针 优势:函数对象内部可以保存状态,而不必使用全局变量或静态局部变量 关键:重载"()"操作符 #include<iostream> #incl ...

  8. Selenium自动化：有代码测试与无代码测试。这些你都懂了吗？

    大多数测试人员认为 Selenium是满足其测试自动化需求的自动化框架.作为全球测试人员使用的开放源框架, Selenium 无疑是测试人员适应日趋敏捷的公司的一种好方法.实际上, Selenium仍 ...

  9. python 99乘法表

    先把代码贴上 for i in range(1,10): for j in range(1,i+1): s="%d X %d = %d"%(j,i,i*j) print(s,end ...

  10. 为什么学习vue?

    公司要求学习uni-app,了解了一下这个uni-app uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微 ...