0x001 HTML简介
什么是HTML?
HTML
是用来描述网页的一种语言。HTML
指的是超文本标记语言:HyperText Markup Language
HTML
不是一种编程语言,而是一种标记语言- 标记语言是一套标记标签 (
markup tag
) HTML
使用标记标签来描述网页HTML
文档包含了HTML
标签及文本内容HTML
文档也叫做web
页面
0x002 HTML页面架构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
charset
常用编码:gbk
、gbk2312
、utf-8
0x003 HTML常见标签
1.meta标签
<meta>
元素可提供有关页面的元信息(meta-information
),比如针对搜索引擎和更新频度的描述和关键词。
设置网站关键字
<meta name="keywords" content="网络安全,WEB 渗透"/>
<link>
标签定义文档与外部资源的关系。
<script>
引入 js
文件
注释
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
2.标题标签
由大到小
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</br> 换行标签
<hr> 换行线标签
3.文本属性
<strong>加粗</strong>
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标
<del></del> 删除线
<pre></pre> 代码样式原样输出
<font></font> 规定字体属性
size 字体的大小
color 字体颜色
4.form表单
form
表单:规定当提交表单时向何处发送表单数据
method
提交的方法有:get
、post
规定在发送表单数据之前对其进行编码。
enctype
属性可能的值:
application/x-www-form-urlencoded
multipart/form-data
text/plain
input
标签
- name:同样是表示的该文本输入框名称。
- size:输入框的长度大小。
- maxlength:输入框中允许输入字符的最大数。
- value:输入框中的默认值
- readonly:表示该框中只能显示,不能添加修改。
input
类型
- type=password 密码输入框
- type=file 文件上传
- type=hidden 隐藏域
- button 按钮
- checkbox 复选框
- radio 单选框
- type=submit 提交按钮
- type=reset 重置按钮
5.a 标签、img 标签、table 标签
a 标签的作用:就是用于控制界面与页面之间的跳转,默认就是 self
- self:用于在当前选项卡中跳转,也就是不新建页面跳转
- _blank :用于在新的选项卡中跳转,也就是新建页面跳转
<a href="http://www.baidu.com" target="self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
- _blank 在新窗口中打开被链接文档。
- _self 默认。在相同的框架中打开被链接文档。
- _parent 在父框架集中打开被链接文档。
- _top 在整个窗口中打开被链接文档。
6.锚文本
<a href="#2">锚点</a>
<a name="2">锚点</a>
7.img 标签
- img 元素向网页中嵌入一幅图像。
<img src="/image/cat.jpg" alt="俺是猫" />
- alt 规定图像的替代文本。
- src 规定显示图像的 url
- width 规定图片的高度
- height 规定图片的宽度
8.table 表单
<caption>我的标题</caption>表格带标题
- border 边框
- width 宽度
- height 高度
- colspan 行
- rowspan 竖
<th></th>
<tr>行</tr>
<td>表格</td>
- cellpadding 单元边与内容的空白
- cellspacing 单元格的空白
9.列表标签
无序列表
项目符号 square
circle
disc
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
有序列表
- 数字列表 默认 数字
- 小写字母列表
- 大写字母列表 A
- 罗马字母列表 I
- 小写罗马字母列表 i
<ol type="1"> <!--有序列表-->
<li></li>
<li></li>
<li></li>
</ol>
10.框架的使用
iframe
语法:
<iframe src="URL"></iframe>
该URL
指向不同的网页。
ifram
e - 设置高度与宽度
height
和 width
属性用来定义iframe
标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%")。
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
iframe
- 移除边框
frameborder
属性用于定义iframe
表示是否显示边框。
设置属性值为 "0" 移除iframe
的边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用 iframe
来显示目标链接页面
iframe
可以显示一个目标链接的页面
目标链接的属性必须使用 iframe
的属性,如下实例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>