我们一起学一学渗透测试——黑客应该掌握的HTML基础知识(一)
HTML概述
HTML语言是一种标签语言,它不需要编译,可以直接由浏览器执行。在标准网页设计中HTML负责填充网页的内容,HTML编写的超文本文档(文件)称之为HTML文档(网页),它包含了一些html元素,使用html或者htm为文件名后缀,能独立于各种操作系统平台,如Unix、Windows等
HTML文档结构
标准的html文档是由标签和要显示在网页上的内容组成。HTML用于描述功能的符号成为“标签”,如<html>、<body>、<table>等。HTML标签规定HTML文档的逻辑结构,并且控制文档的显示格式,然后由浏览器来负责解释并显示页面。通过使用标签可以区分文本文件的各个组成部分,对页面上的文字、表格、图片等多媒体数据所出现的未知、形式、顺序及网页间的超链接关系进行设定。
HTML标签
标签都是封装在一对尖括号“<……>”之中。标签只改变网页的显示方式,本身不会显示在窗口中。HTML文档中最先出现的标签是<html>标签。<html>标签是文档标识符,它是成对出现的,首标签<html>和尾标签</html>分别位于文档的最前面和最后面,明确地表示文档是以超文本标识语言(HTML)编写的。该标签不带任何属性
<html>……</html>之间有如下标签:
头部标签<head>……</head>
head是英文“头”的意思。习惯上用户把HTML文档分为文档头和文档主体两部分。文档主体部分就是在web浏览器窗口的用户区内看到的内容,而文档头部分用来规定该文档的标题(出现在web浏览器窗口的标题栏中)和文档的一些属性。<head>标签对的作用就是控制文档的头部信息。中间可以使用<title>……</title>、<script>……</script>标签对,在此标签中间可以HTML文档的标签是可以嵌套的,即在一对标签中可以嵌入另外一对子标签,用来规定母标签所含范围的属性或其中某一部分内容,嵌套在<head>……</head>标签对中使用的主要有<title>标签
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
菜鸟小白的学习分享
</head>
</html>
保存为HTML文件后显示如下:
标题标签<title>……</title>
<title>标签是成对出现的,用以规定HTML文档的标题。在<title>……</title>之间的内容将显示在web浏览器窗口的标题栏中。另外,<title>……</title>标签对只能放在<head>……</head>标签对之间,而且其内部不能包含其它标签。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
</html>
修改后显示如下:
主体标签<body>……</body>
<body>标签也是成对出现的。在<body>……</body>之间的内容将显示在web浏览器窗口的用户区内,它是HTML文档的主体部分。可以把HTML文档的主体区域简单地理解成标题以外的所有部分,该部分可以包含<table>、<font>、<img>、<div>等标签。结束标签</body>指明主体区域的结尾,在<body>中可以规定整个文档的一些基本属性:
- “bgcolor”:指定html文档的背景色
- “text”:指定html文档中文字的颜色
- “link”:指定html文档中待连接超链接对象的颜色
- “alink”:指定html文档中连接中超链接对象的颜色
- “vlink”:指定html文档中已连接超链接对象的颜色
- “background”:指定html文档的背景文件
我们验证了前两个属性
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
测试内容
</body>
</html>
显示效果如下:
特殊字符
在html中有许多特殊字符需要处理,例如:“<”、">"这两个符号本身是用来表示标签的开始和结束的,是没有办法通过直接打出来的,必须输入编码表示法:“<”和“>”。
通常情况下html会自动截取多余的空格。不管你加多少个空格,都被看做一个空格。如果要显示多个空格,可以使用&nsp;表示空格
我们看看实现代码
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<测试内容> 空格在中间 看到了吧
</body>
</html>
显示效果:
格式标签
在浏览器中控制文本对象的显示,包括段落、换行、水平线等标签,下面介绍几个常用的html格式标签。所有的格式标签全部都是在嵌套在<body>……</body>标签对之间的
段落标签<p>
全称paragraph。<p>……</p>标签对用于创建一个段落,支持align属性来设置对齐方式,语法如下:
- <p align=“属性”>段落内容</p>
- align:设定水平对齐方式,常见设置:
- 置左:align=“left”
- 置中:align=“center”
- 置右:align=“right”
我们验证一个居中的对齐方式吧
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><测试内容> 空格在中间 看到了吧</p>
</body>
</html>
显示效果:
换行标签<br>
在不另起一段的情况下将当前文本强制换行,<br>标签属于单独出现的标签,禁止出现结束标签。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><测试内容></br> 空格在中间 看到了吧</p>
</body>
</html>
显示效果:
预格式化标签<pre>
可以完整保留设计者在源文件中所定义的格式,包含各种空格,缩进,以及其他特殊字符,全部都原封不动的展示在浏览器页面上。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><测试内容></br> 空格在中间 看到了吧</p>
<pre>
我是菜鸟小白
你们的好朋友
让我们一起学习吧!!!
</pre>
</body>
</html>
显示效果:
列表标签
主要分为无序列表、排序列表、目录列表、菜单列表和描述性列表五中类型
- 无序列表<ul><li>……</li></ul>
- 排序列表<ol><li>……</li></ol>
- 目录列表
- 菜单列表
- 描述性列表<dl><dt>列表头<dd>列表内容
我们就验证一个无序列表和一个描述性列表吧
无序列表:
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<ul>
<li>我是菜鸟小白</li>
<li>你们的好朋友</li>
<li> 让我们一起学习吧!!!</li>
</ul>
</body>
</html>
效果如下:
描述性列表:
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<dl>
<dt>菜鸟小白测试表头</dt>
<dd>我是菜鸟小白</dd>
<dd>你们的好朋友</dd>
<dd> 让我们一起学习吧!!!</dd>
<dt>菜鸟小白测试表头2</dt>
<dd>我是菜鸟小白</dd>
<dd>你们的好朋友</dd>
<dd> 让我们一起学习吧!!!</dd>
</dl>
</body>
</html>
显示效果如下:
好了,今天的内容就到这了,我们明天继续学习HTML基础内容,不见不散~
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 现场打脸:如何使用Selenium批量上传文件?
- 一日一技:FastAPI如何关闭接口文档?
- 什么叫做类比,为什么有些 Python 入门教程结构不合理?
- 贼好用的 Java 工具类库,墙裂推荐!
- 万字长文,Thread 类源码解析!
- lintCode 31 题解
- JDK1.8HashMap源码学习-put操作以及扩容(二)
- Python 中的数字到底是什么?
- 详解 Python 的二元算术运算,为什么说减法只是语法糖?
- 详解增强算术赋值:“-=”操作是怎么实现的?
- Hyperledger Explorer 环境搭建详解
- [译]在Solidity中创建无限制列表
- java安全编码指南之:声明和初始化
- java安全编码指南之:表达式规则
- java安全编码指南之:Number操作