Web安全——HTML基础

news/2024/11/25 21:05:02/

HTML

  • 一、对于前端以及后端的认识以及分析
  • 二、HTML认知
    • 1、网页的组成
    • 2、浏览器
    • 3、Web标准
  • 三、简单的HTML页面架构
  • 四、HTML常见标签
    • 1、meta标签
    • 2、标题标签
    • 3、文本属性
    • 4、form表单
    • 5、a 标签
    • 6、锚文本
    • 7、img 标签
    • 8、table 表格
    • 9、列表标签
      • 9.1、无序列表
      • 9.2、有序列表
    • 10、框架的使用

一、对于前端以及后端的认识以及分析

1、前端与后端的认识

  • 前端: 客户端开发
  • 后端: 服务器端开发

2、前端后端区别

  • 技能
    前端:Web开发者余姚掌握HTML,CSSJavaScript
    后端:开发者需要懂数据库,服务器,API等等
  • 职责
    前端:开发者负责设计网站的外观
    后端:开发者负责构建数据库架构,为前端提供支持
  • 独立性
    前端:不能作为单独的服务提供,除非它是一个静态的网站
    后端:可以作为BaaS(后端即服务,Backend as a Service)提供
  • 目标
    前端:开发者的目标是确保所有用户都可以访问网站或App
    后端:开发者的目标是围绕前端开发应用程序,并为前端提供支持,并确保整个网站或App正常运行
  • 编程语言
    前端:HTML,CSS,JavaScript
    后端:PHP,Python,SQL,Java,Ruby,NET,Perl
  • 开发框架
    前端:Angular.JS、React.JS、Backbone.JS、Vue.JS、Sass、Ember.JS、NPM
    后端:Laravel、CakePHP、Epress、Codelgnier、Ruby on Rails、Pylon、ASP.NET
  • 数据库
    前端:本地存储、核心数据、SQLite、Cookie、会话
    后端:MySQL、Casandra、PostgreSQL、MongoDB、Oracle、Sybase、SQL Server
  • 服务器
    后端:Ubuntu、Apache、Nginx、Linux、Windows

二、HTML认知

1、网页的组成

网页由文字,图片,音频,视频,超链接组成
网页背后的本质为前端程序员写的代码,通过浏览器进行译处理,浏览器转化(解析以及渲染)

2、浏览器

1、浏览器的定义浏览器:是网页显示以及运行的平台,是前端开发的必备利器
2、五大浏览器:IE、火狐、谷歌、Safari浏览器、Opera浏览器
3、浏览器市场份额为谷歌占由率高,60-70%
4、渲染引擎(了解)(1)、渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分(2)、浏览器以及其内核浏览器IE,内核Trident,IE、猎豹安全、360极速浏览器、百度浏览器浏览器FireFox、内核Gecko、火狐浏览器内核浏览器Safari、内核Webkit、苹果浏览器内核浏览器Chrome、内核Blink、Blink其实是Webkit的分支(3)、渲染引擎不同,导致解析相同代码时的速度、性能、效果也不同

3、Web标准

1、构成以及标准(1)、结构HTML页面元素和内容(2)、表现CSS页面元素的外观和位置等页面样式(如:颜色、大小等)(3)、行为JavaScript页面模型的定义与页面交互
2、要求页面实现结构、表现、行为三层分离

三、简单的HTML页面架构

HTML超文本标记语言)模板框架是用于构建网页的标准模板。
全称:Hyper Text Markup Language

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body></body>
</html>

charset 编码 gbk gbk2312 utf-8

保存内容的快捷方式为 ctrl+s
同时,我这里使用的开发工具HBuilder
开发工具有:
Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder
新建HTML文件即可加载出模板,或者输入h然后输出8回车。
在这里插入图片描述
网页的整体

  • html标签

网页的头部

  • head标签

网页的身体

  • body标签

网页的标题

  • title标签

对HTML模板的解读:
文档类型声明DOCTYPE):HTML文件始于文档类型声明,它指示浏览器当前页面使用的HTML版本。例如,HTML5版本的声明为:<!DOCTYPE html>。
html 标签: 此标签是HTML文档的根元素,包含整个HTML文件的内容。

  • head 标签:在html标签内,head标签包含关于页面的元信息,如文档标题、字符编码、样式表链接等。对于浏览器显示页面时的非主要内容。
    • meta 标签: 用于定义字符集(<meta charset="UTF-8">),SEO优化关键字(<meta name="keywords" content="your_keywords">),以及描述文本(<meta name="description" content="your_description">)
    • title 标签:定义文档的标题,显示在浏览器标签页上。
    • link 标签:用于引入外部资源,如样式表(<link rel="stylesheet" href="styles.css">)
    • script 标签:用于引入外部的JavaScript文件(<script src="myscripts.js"&gt;&lt;/script>)或直接插入JavaScript代码
  • body 标签:html标签内,body标签是主要内容部分,包含页面上可见的所有元素,如文本、图像、链接、表格等。
    • 结构性标签div、header、nav、section、article、aside、footer等):这些标签用于组织文档内容的结构,方便开发者和浏览器理解网页的布局。
    • 文本标签h1-h6、p、strong、em、ul、li等):这些标签用于格式化文本内容,增强页面的可读性。
    • 超链接a 标签):超链接用于导航到其他页面、文件或电子邮件地址。
    • 表单元素form、input、textarea、button等):这些标签用于创建用户输入表单,收集和发送用户数据。
    • 多媒体元素img、video、audio):这些标签可用于嵌入图像、视频、音频等内容,提升页面的交互性和多媒体体验。
    • 表格元素table、tr、td、th):用于显示数据表格。

为了获得更好的页面样式和布局,通常还需要引入CSS层叠样式表)和JavaScript技术。

四、HTML常见标签

1、HTML标签的构成

  • 标签由<、>、/、英文单词或字母组成,并且把标签中<>包括起来的英文单词或字母称为标签名。
  • 常见标签由两部分组成,我们称之为:双标签,前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容。
  • 少数标签由一部分组成,我们称之为:单标签,自成一体,无法包裹内容。

2、HTML标签的关系

  • 嵌套关系
  • 并列关系

1、meta标签

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

设置网站关键字
meta name="keywords" content="网络安全,WEB渗透,数据安全,渗透测试,安全培训" />
<link> 标签定义文档与外部资源的关系。
<script> 引入js文件

常见用法:

  • <meta charset="UTF-8"> 指定网页的字符集为UTF-8,确保浏览器正确地显示和解析页面的文本内容。
  • <meta name="viewport" content="width=device-width,initial-scale=1.0"> 用于响应式网页设计,定义页面在不同设备上的视口大小和缩放比例。
  • <meta name="keywords"content="关键词,关键短语,关键列表" />指定网页的关键词,用于搜索引擎优化(SEO)。这些关键词描述了网页内容的主题和关联性,有助于提高网页在搜索引擎结果中的排名。
  • <meta name="description"content="网页描述"/>提供对网页内容的简要描述,这个描述通常在搜索引擎结果中显示,帮助用户了解网页的内容。
  • <meta name="robots"content="noindex,nofollow" /> 用于告诉搜索引擎不要索引和追踪当前页面。
  • <meta name="author"content="作者姓名" />用于指定网页的作者。
  • <meta http-equiv="refresh"content="秒数;URL=重定向地址” />通过设置一个指定的时间间隔,自动将用户重定向到另一个网页。

注释
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
实践:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1.0"><meta name="keywords"content="关键词,关键短语,关键列表"/><meta name="description"content="网页描述"/><meta name="robots"content="noindex,nofollow" /><meta name="author"content="作者姓名" /><title></title></head><body><p>这个是一个段落</p><!--这是一个注释--></body>
</html>

输出结果:
输出方法
在这里插入图片描述
HBuilder右边有Web浏览器预览界面,进行CTRL+S可直接保存看到输出结果。
输出方法
在这里插入图片描述
这里在代码输出框的上方可进行跳转浏览器界面进行输出查看。
在这里插入图片描述
这里我选择的是edge浏览器进行输出查看结果。
这里显然易见第一行段落进行了显示,而第二行未进行显示。

2、标题标签

由大到小

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>6</h6>
</br> 换行标签
<hr>换行线标签

实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1.0"><meta name="keywords"content="关键词,关键短语,关键列表"/><meta name="description"content="网页描述"/><meta name="robots"content="noindex,nofollow" /><meta name="author"content="作者姓名" /><title></title></head><body><p>这个是一个段落</p><!--这是一个注释--><p>这个是标题大小</p><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><p>这里是CSDN论坛<br>梦开始的地方<hr>后浪前驱</p></body>
</html>

输出结果:
在这里插入图片描述

3、文本属性

<strong>加粗</strong>
<b></b>加粗
<i></i>斜体
<u></u> 下划线
<sup></sup>上标
<sub></sub>下标
<del></del> 删除线
<font></font> 规定字体属性size 字体的大小color 字体颜色
代码样式原样输出
<pre></pre>

实践:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1.0"><meta name="keywords"content="关键词,关键短语,关键列表"/><meta name="description"content="网页描述"/><meta name="robots"content="noindex,nofollow" /><meta name="author"content="作者姓名" /><title>技术分享</title></head><body><p>这个是一个段落</p><!--这是一个注释--><p>这个是标题大小</p><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><p>这里是CSDN论坛<br>梦开始的地方<hr>后浪前驱</p><p><strong>加粗</strong><br><b>加粗</b><br><i>斜体</i><br><u>下划线</u><br><sup>上标</sup><br><sub>下标</sub><br><del>删除线</del> <br><font size="5px" color="red">规定字体属性</font> </p><p>wwww</p><pre>	wwww</pre></body>
</html>

输出结果:
在这里插入图片描述
这里我们可以来看下字体的默认大小:
在这里插入图片描述
以及我们最终将文字的属性,颜色包括字体的大小的设定:
在这里插入图片描述

4、form表单

form表单:规定当提交表单时向何处发送表单数据
method 提交的方法get、post

规定在发送表单数据之前如何对其进行编码。
enctype 属性可能的值:
application/x-www-form-urlencoded
multipart/form-data
text/plain

input的标签
name:同样是表示的该文本输入框名称
size:输入框的长度大小
maxlength:输入框中允许输入字符的最大数
value:输入框中的默认值
readonly:表示该框中只能显示,不能添加修改。

input的类型
1、文本输入框(Text Input):

  • 类型(type):text
  • 示例代码:input type="text" name="username">

2、密码输入框(Password Input

  • 类型(type):password
  • 示例代码:<input type="password" name="password" />

3、文件上传(File Upload):

  • 类型:file
  • 示例代码:<input type="file" name="file" />

3、隐藏域:

  • 示例代码:<input type="hidden" value="1"/>

button 按钮
1、复选框(checkbox

  • 类型:checkbox
  • 示例代码:<input type="submit" vale="提交"/>

2、单选框(radio

  • 类型:radio
  • 示例代码:
    男<input type="radio" value="1" name="sex">
    女<input type="radio" name="sex" value="2">

3、提交按钮(Submit Button

  • 类型:submit
  • 示例代码:<input type="submit" vale="提交"/>

实际应用:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>求职界面</title></head><body><p>求职界面</p><form action="" method="post" ><label>用户名:</label><input type="text" name="username" size="30" maxlength="4" value="admin" readonly/></br><label>&nbsp;码:</label><input type="password" name="password" /></br><label for="email">&nbsp;箱:</label><input type="text" name="email" id="email" /></br><label>&nbsp;能:</label>安全开发<input type="checkbox"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;渗透测试<input type="checkbox"></br><label>&nbsp;别:</label><input type="radio" value="1" name="sex"><input type="radio" name="sex" value="2"></br><input type="hidden" value="1"/><input type="submit" vale="提交"/><input type="reset" value="重置" /><input type="button" value="button" /></form><hr><form method="post" enctype="multipart/form-data"><input type="file" name="file" /><input type="submit" /></form></body>
</html>

输出结果:
在这里插入图片描述
在这里插入图片描述

5、a 标签

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整个窗口中打开被链接文档。

实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ZY技术分享</title></head><body><a href="http://www.baidu.com">百度</a><a href="http://www.baidu.com"target="_self">百度</a><a href="http://www.baidu.com"target="_blank">百度</a></body>
</html>

输出结果:
在这里插入图片描述

好的,我们下面来看这三个a标签:
首先点击第一个:
在这里插入图片描述
点击第二个:
在这里插入图片描述
点击第三个:
在这里插入图片描述
我们可以看到只有第三个标签进行了创建新的标签页进行访问,而第一个以及第二个标签只进行了全标签页的跳转。

6、锚文本

锚文本(Anchor Text)是指在超链接(HTML中使用<a>标签创建的链接)中显示的可点击文本或词语。
它通常是以蓝色(或其他指定的链接色)并带有下划线的形式展现,用于吸引用户点击以跳转到目标网页或位置。

<a href="#2">锚点</a>
<a name="2">锚点</a>

锚文本的使用:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ZY技术分享</title></head><body><p name="top">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><a href="http://www.baidu.com">百度</a><a href="http://www.baidu.com"target="_self">百度</a><a href="http://www.baidu.com"target="_blank">百度</a><a href="#top">返回顶部</a></br></body>
</html>

输出结果:
这里我们首先滑到底部:
在这里插入图片描述
然后点击返回顶部:
在这里插入图片描述
即可完成跳转。

7、img 标签

<img> 标签是HTML中用于插入图像的标签。它是一个自闭合标签,不需要闭合标签。
<img> 标签使用一个必需的属性 src 来指定图像的来源(即图像的URL)。除此之外,还可以使用其他属性来控制图像的显示和行为。
img 元素向网页中嵌入一幅图像。
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
alt 规定图像的替代文本。
src 规定显示图像的url
width 规定图片的高度
height 规定图片的宽度
title:为图像添加标题,当用户将鼠标悬停在图像上时显示。
classid:用于应用 CSS 样式或 JavaScript 操作图像。
img标签的使用:
1、首先我们将需要显示的图片保存在项目的img文件里面:
在这里插入图片描述
2、实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ZY技术分享</title></head><body><img src="img/web1.jpg""></body>
</html>

3、输出结果:
在这里插入图片描述
4、同时,我们也可以进行设置图片显示的大小:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ZY技术分享</title></head><body><img src="img/web1.jpg"width="1000" height="500"></body>
</html>

5、输出结果:
在这里插入图片描述
6、这里我们尝试去掉图片地址看会显示什么
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ZY技术分享</title></head><body><img src=""width="1000" height="500"></body>
</html>

7、输出结果:
在这里插入图片描述
8、在未能正常显示的画面上加上阐述:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ZY技术分享</title></head><body><img src=""width="1000" height="500"alt="web1"></body>
</html>

9、输出结果:
在这里插入图片描述
a标签,img标签以及锚文本的配置使用:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ZY技术分享</title></head><body><p name="top">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><a href="http://www.baidu.com">百度</a><a href="http://www.baidu.com" target="_self">百度</a><a href="http://www.baidu.com" target="_blank">百度</a><a href="#top">返回顶部</a></br></hr><img src="img/web1.jpg" width="100" height="100" alt="logo"></body>
</html>

输出结果:
在这里插入图片描述

8、table 表格

<caption>我的标题</caption>表格带标题
border 边框
width 宽度
height 高度
colspan
rowspan

<th></th>
<tr></tr>
<td>表格</td>

cellpadding 单元边与内容的空白
cellspacing 单元格的空白
案例区分:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1" cellpadding='10' cellspacing='10' ><caption>姓名 图</caption><tr><th>\</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>张三</td><td>18</td></tr><tr><td>2</td><td>李四</td><td>19</td></tr></table><hr /><br /><table border="1" cellpadding='10'><caption>姓名 图</caption><tr><th>\</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>张三</td><td rowspan='2'>18</td></tr><tr><td>2</td><td>王五</td></tr><tr><td>3</td><td>李四</td><td>19</td></tr><tr><td>4</td><td>赵六</td><td rowspan='2'>20</td></tr><tr><td>5</td><td>魏七</td></tr><tr><td>总数</td><td colspan="2">5</td></tr></table></body>
</html>

输出结果:
在这里插入图片描述
这里可以明显的区分出以上的代码功能。

9、列表标签

<ul><li></li><li></li><li></li><li></li>
</ul>

9.1、无序列表

项目符号 square circle disc

<ul><li></li><li></li><li></li><li></li>
</ul>

9.2、有序列表

数字列表 默认 数字

小写字母列表
大写字母列表 A
罗马字母列表 I
小写罗马字母列表 i

<ol type="1"> <!--有序列表--><li>暗月实战项目九 不出网的情况下的内网多域控渗透</li><li>xp/2003开关3389指令</li><li>一条命令修改windows注册表</li>
</ol>

列表的使用案例:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ZY技术分享</title></head><body><ul type="disc"> <!--无序列表--><p>RIP的数据包</p>           <li>request——请求数据包</li><li>response——响应数据包</li></ul><hr /><ol type="1"> <!--有序列表--><p>OSPF的数据包</p><li>Hello包</li><li>DBD包</li><li>LSA包</li><li>LSR包</li><li>LSU包</li></ol></body>
</html>

输出结果:
在这里插入图片描述

10、框架的使用

frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 colsrows 属性。

frameset 在一个页面中设置一个或多个框架,不能嵌套在body标签里
iframe 是在html页面内嵌入框架,框架内可以连接另一个页面

frameset 不能body内使用
frame 一般都是frameset中使用
cols 定义框架集中的数目和尺寸
rows 定义框架集中的数目和尺寸

scrolling 滚动条
auto 在需要的情况下出现滚动条(默认值)。
yes 始终显示滚动条(即使不需要)。
no 从不显示滚动条(即使需要

案例,制作如下格式框架:
在这里插入图片描述
1、首先我们先创建一个新的项目。
2、创建top,main,left三个html并输入名称:
top.html
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>top</body>
</html>

main.html
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>main</body>
</html>

left.html
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>left</body>
</html>

3、对文件index.html进行配置,并赋入框架:
实现代码·:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><frameset rows="20%,*"><frame src="top.html" /><frameset cols="20%,*"><frame src="left.html" /><frame src="main.html" /></frameset></frameset><body></body>
</html>

输出结果:
在这里插入图片描述
4、对left.html进行修改并配置无序列表:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><ul><li><a href="#">添加文章</a></li><li><a href="#">文章列表</a></li><li><a href="#">系统信息</a></li><li><a href="#">备份</a></li></ul></body>
</html>

输出结果:
在这里插入图片描述
以及此时index.html的输出结果:
在这里插入图片描述
5、给left.html里面功能添加文章配置功能代码,此时,重新创建add.html并配置:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form method="post">标题:<input type="text" /><br>内容:<textarea cols="40" rows="20"></textarea><input type="submit" /></form></body>
</html>

输出结果:
在这里插入图片描述
6、在left.html上进行配置连接:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><ul><li><a href="add.html" target="add">添加文章</a></li><li><a href="#">文章列表</a></li><li><a href="#">系统信息</a></li><li><a href="#">备份</a></li></ul></body>
</html>

7、将add.html界面放于main.html框架界面上:index.html进行配置:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ZY技术分享</title></head><frameset rows="20%,*"><frame src="top.html" /><frameset cols="20%,*"><frame src="left.html" /><frame src="main.html" name="add"/></frameset></frameset><body></body>
</html>

输出结果:
点击主页的添加文章即可在main框架中弹出界面:
在这里插入图片描述
8、给left.html中文章列表创建界面,这里首先创建一个artlist.html文件并配置:
实现代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><ol><li><a href="#">第一天</a></li><li><a href="#">第二天</a></li><li><a href="#">第三天</a></li><li><a href="#">第四天</a></li></ol></body>
</html>

输出结果:
在这里插入图片描述
然后我们利用index.html进行打开left框架的文章列表:
在这里插入图片描述
9、这里界面就补充这么多,剩下的原理都一样。


http://www.ppmy.cn/news/510214.html

相关文章

Qcom 相机点亮流程学习笔记

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、Kernel 代码移植二、Vendor 代码移植三、扩展 一、Kernel 代码移植 1. DTS 文件配置 dts 文件目录&#xff1a;高通SDM660平台代码中&#xff0c;a…

【qcom Android camera调试纪要】

qcom Android camera调试纪要 1、平台适配1.1、kernel端 1.2、vendor端1.2.1、cameraService lib代码 注意&#xff1a;需要在vendor\qcom\proprietary\common\config\device-vendor.mk中添加需要将当前的camera service lib加入到系统的编译路径中。1.2.2、camera Chromatix效…

imx6ul之OpenWRT中使用无线网卡做中继器与AP热点

中继器与AP的实现 这里我们假定中继器完成下面这样的一个功能&#xff1a; Wired Network ---> Wireless Network ---> 上级无线路由器 即从外部插入一个网线&#xff0c;通过imx6UL上面的无线网卡将数据转发到上级的路由器上面&#xff0c; 当然也可以完成下面这样的传…

imx6 DDR_Stress_Test

在调试DDR的时候&#xff0c;有时候需要更改参数。今天发现NXP提供了DDR Stress Test工具&#xff0c;用于DDR参数的校准。 参考链接 http://blog.csdn.net/qq405180763/article/details/44977449 http://www.imx6rex.com/software/how-to-run-ddr3-calibration-on-imx6/ 验证 …

IMX6Q调试之 —– DDR3 32位移植

IMX6Q调试之 —– DDR3 32位移植 自己的板子是参考[fleescale][6]官方开发板[imx6qsabresd][6]的开发套件做的设计的&#xff0c;无奈修改的地方太多了本章主要来说ddr3 的移植&#xff0c;首先需要的工具和软件&#xff1a; 一 、飞思卡尔IMX6 平台DRAM 接口高阶应用指南 -DDR…

WM8978移植到imx6或imx8上

有人移植过WM8978的音频吗&#xff1f;求指教啊~~~~~~~~~~~~~~~~~~~~~~~~~~ 设备树&#xff1a; MX8MM_IOMUXC_SAI3_RXD_SAI3_RX_DATA0 0xd6 驱动&#xff1a; sound/soc/soc-pcm.c sound/soc/codecs/wm8978.c sound/soc/fsl/imx-ak5558.c kernel-source/include/sound/soc…

关于imx8mp的es8316的芯片调试

文章目录 一、驱动配置1.1 dts配置1.2 cpu端的配置1.3 添加驱动 1.4 对应的验证二、device目录下的配置 记录在imx8mp上调试音频芯片es8316的笔记&#xff0c;因为在这个平台上是第一次调试这个芯片&#xff0c;遇到的一些问题比较多&#xff0c;做一次笔记 一、驱动配置 1.1 …

myir-imx6ull_iot uboot移植

最近闲了5&#xff0c;6个月了&#xff0c; 偶尔拿出来自己之前的myir开发板&#xff0c;想玩一玩。想学点uboot移植的内容。 就自己看看了正点原子的教程。自己又在myir的官网看了有最新的uboot版本可以更新&#xff0c;所以自己尝试自己搞一下。先简单介绍一个自己的开发环境…