本期是一个大篇章——“渗透测试”的第一个部分：“编程基础”。
一、什么是HTML
称为超文本标记语言，是一种标识性语言。通过一系列标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML文本是由HTML命令组成的描述性文本，可以说明文字、图形、动画、声音、表格、连接等。
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
（一）基本结构
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
只有<body> 区域 才会在浏览器中显示
<!DOCTYPE> 声明：
声明有助于浏览器中正确显示网页。</!doctype>
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
中文编码：
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
（二）web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。
（三）HTML编辑器
推荐
VS Code：https://code.visualstudio.com/
Sublime Text：http://www.sublimetext.com/
每一种操作系统都带有简单的文本编辑器：
Windows 用户可以使用记事本；
Linux 用户可以选择几种不同的文本编辑器，如 vi、vim 或者 emacs ；
Mac 用户可以使用 OS X 预装的 TextEdit。
（四）HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
1.基础标签
标签 | 描述 |
<!DOCTYPE> | 定义文档类型。 |
<html> | 定义一个 HTML 文档 |
<title> | 为文档定义一个标题 |
<body> | 定义文档的主体 |
<h1>to<h6> | 定义 HTML 标题 |
<p> | 定义一个段落 |
<br> | 定义简单的折行。 |
<hr> | 定义水平线。 |
<!--...--> | 定义一个注释 |
2.格式标签
标签 | 描述 |
<acronym> | HTML5不再支持。 定义只取首字母的缩写。 |
<abbr> | 定义一个缩写。 |
<address> | 定义文档作者或拥有者的联系信息。 |
<b> | 定义粗体文本。 |
<bdi>New | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<bdo> | 定义文本的方向。 |
<bjg> | HTML5不再支持。 定义大号文本。 |
<blockquote> | 定义块引用。 |
<center> | HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。 |
<cite> | 定义引用(citation)。 |
<code> | 定义计算机代码文本。 |
<del> | 定义被删除文本。 |
<dfn> | 定义定义项目。 |
<em> | 定义强调文本。 |
<font> | HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色 |
<i> | 定义斜体文本。 |
<ins> | 定义被插入文本。 |
<kbd> | 定义键盘文本。 |
<mark>New | 定义带有记号的文本。 |
<meter>New | 定义度量衡。仅用于已知最大和最小值的度量。 |
<pre> | 定义预格式文本 |
<progress>New | 定义运行中的任务进度（进程）。 |
<q> | 定义短的引用。 |
<rp>New | 定义不支持 ruby 元素的浏览器所显示的内容。 |
<rt>New | 定义字符（中文注音或字符）的解释或发音。 |
<ruby>New | 定义 ruby 注释（中文注音或字符）。 |
<s> | 定义加删除线的文本。 |
<samp> | 定义计算机代码样本。 |
<small> | 定义小号文本。 |
<strike> | HTML5不再支持。 HTML 4.01 已废弃。 定义加删除线的文本。 |
<strong> | 定义语气更为强烈的强调文本。 |
<sub> | 定义下标文本。 |
<sup> | 定义上标文本。 |
<time>New | 定义一个日期/时间 |
<tt> | HTML5不再支持。 定义打字机文本。 |
<u> | 定义下划线文本。 |
<var> | 定义文本的变量部分。 |
<wbr>New | 规定在文本中的何处适合添加换行符。 |
3.表单标签
标签 | 描述 |
<form> | 定义一个 HTML 表单，用于用户输入。 |
<input> | 定义一个输入控件 |
<textarea> | 定义多行的文本输入控件。 |
<button> | 定义按钮。 |
<select> | 定义选择列表（下拉列表）。 |
<optgroup> | 定义选择列表中相关选项的组合。 |
<option> | 定义选择列表中的选项。 |
<label> | 定义 input 元素的标注。 |
<fieldset> | 定义围绕表单中元素的边框。 |
<legend> | 定义 fieldset 元素的标题。 |
<datalist>New | 规定了 input 元素可能的选项列表。 |
<keygen>New | 规定用于表单的密钥对生成器字段。 |
<output>New | 定义一个计算的结果 |
4.框架<iframe>
定义内联框架
5.图像
标签 | 描述 |
<img> | 定义图像。 |
<map> | 定义图像映射。 |
<area> | 定义图像地图内部的区域。 |
<canvas>New | 通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。 |
<figcaption>New | 定义一个 caption for a <figure> element |
<figure>New | figure 标签用于对元素进行组合。 |
6.audio/video
标签 | 描述 |
<audio>New | 定义声音，比如音乐或其他音频流。 |
<source>New | 定义media元素 (<video> 和 <audio>)的媒体资源。media |
<track>New | 为媒体(<video> 和 <audio>)元素定义外部文本轨道。 |
<video>New | 定义一个音频或者视频 |
7.链接
标签 | 描述 |
<a> | 定义一个链接 |
<link> | 定义文档与外部资源的关系。 |
<main> | 定义文档的主体部分。 |
<nav>New | 定义导航链接 |
8.列表
标签 | 描述 |
<ul> | 定义一个无序列表 |
<ol> | 定义一个有序列表 |
<li> | 定义一个列表项 |
<dir> | HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。 |
<dl> | 定义一个定义列表 |
<dt> | 定义一个定义定义列表中的项目。 |
<dd> | 定义定义列表中项目的描述。 |
<menu> | 定义菜单列表。 |
<command>New | 定义用户可能调用的命令（比如单选按钮、复选框或按钮）。 |
9.表格
标签 | 描述 |
<table> | 定义一个表格 |
<caption> | 定义表格标题。 |
<th> | 定义表格中的表头单元格。 |
<tr> | 定义表格中的行。 |
<td> | 定义表格中的单元。 |
<thead> | 定义表格中的表头内容。 |
<tbody> | 定义表格中的主体内容。 |
<tfoot> | 定义表格中的表注内容（脚注）。 |
<col> | 定义表格中一个或多个列的属性值。 |
<colgroup> | 定义表格中供格式化的列组。 |
10.样式/节
标签 | 描述 |
<style> | 定义文档的样式信息。 |
<div> | 定义文档中的节。 |
<span> | 定义文档中的节。 |
<header>New | 定义一个文档头部部分 |
<footer>New | 定义一个文档底部 |
<section>New | 定义了文档的某个区域 |
<articel>New | 定义一个文章内容 |
<aside>New | 定义其所处内容之外的内容。 |
<details>New | 定义了用户可见的或者隐藏的需求的补充细节。 |
<dialog>New | 定义一个对话框或者窗口 |
<summary>New | 定义一个可见的标题。 当用户点击标题时会显示出详细信息。 |
11.元信息
标签 | 描述 |
<head> | 定义关于文档的信息 |
<meta> | 定义关于 HTML 文档的元信息。 |
<base> | 定义页面中所有链接的默认地址或默认目标。 |
<basefont> | HTML5不再支持。 HTML 4.01 已废弃。 定义页面中文本的默认字体、颜色或尺寸。 |
12.程序
标签 | 描述 |
<script> | 定义客户端脚本。 |
<noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
<applet> | HTML5不再支持。 HTML 4.01 已废弃。 定义嵌入的 applet。 |
<embed>New | 定义了一个容器，用来嵌入外部应用或者互动程序（插件）。 |
<object> | 定义嵌入的对象。 |
<param> | 定义对象的参数。 |
（五）HTML元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签：
开始标签 | 元素内容 | 结束标签 |
<p> | 这是一个段落 | </p> |
<a href="default.htm"> | 这是一个链接 | </a> |
<br /> | 换行 |
开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
1.元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
2.嵌套HTML元素
大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
HTML 文档由相互嵌套的 HTML 元素构成。
3.不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
<p>这是一个段落 <p>这是一个段落
以上实例在浏览器中也能正常显示，因为关闭标签是可选的。
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
4.HTML空元素
没有内容的 HTML 元素被称为空元素。
空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法.
HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
5.使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
（六）HTML属性
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
1.属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
实例
<a href="http://www.runoob.com">这是一个链接</a>
2.引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
提示
属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'
使用小写属性
3.全局属性
new：表示H5的新属性
属性 | 描述 |
accesskey | 设置访问元素的键盘快捷键。 |
class | 规定元素的类名（classname） |
contenteditableNew | 规定是否可编辑元素的内容。 |
contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
data-*New | 用于存储页面的自定义数据 |
dir | 设置元素中内容的文本方向。 |
draggableNew | 指定某个元素是否可以拖动 |
dropzoneNew | 指定是否将数据复制，移动，或链接，或删除 |
hiddenNew | hidden 属性规定对元素进行隐藏。 |
id | 规定元素的唯一 id |
lang | 设置元素中内容的语言代码。 |
spellcheckNew | 检测元素是否拼写错误 |
style | 规定元素的行内样式（inline style） |
tabindex | 设置元素的 Tab 键控制次序。 |
title | 规定元素的额外信息（可在工具提示中显示） |
translateNew | 指定是否一个元素的值在页面载入时是否需要翻译 |
id
定义和用法
id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
属性值
规定元素的唯一 id。
命名规则：
字母(A-Za-z)
数字(0-9)
连字符("-")
下划线("_")
冒号(":")
点号(".")
必须以字母 A-Z 或 a-z 开头
其后的字符：
值对大小写敏感
二、CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML 样式标签
标签 | 描述 |
定义文本样式 | |
定义资源引用地址 |
三、脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
HTML<script> 标签
<script> 标签用于定义客户端脚本，比如 JavaScript。<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出"Hello World!"：
实例
<script> document.write("Hello World!"); </script>
HTML<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
发表评论 取消回复