国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

Web安全——HTML基礎

2年前作者：君衍.?分類：Toy博客閱讀(14)違法舉報

這篇具有很好參考價值的文章主要介紹了Web安全——HTML基礎。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

一、對于前端以及后端的認識以及分析

1、前端與后端的認識

  • 前端： 客戶端開發(fā)
  • 后端： 服務器端開發(fā)

2、前端后端區(qū)別

  • 技能
    前端：Web開發(fā)者余姚掌握HTML,CSS和JavaScript
    后端：開發(fā)者需要懂數(shù)據(jù)庫，服務器，API等等
  • 職責
    前端：開發(fā)者負責設計網(wǎng)站的外觀
    后端：開發(fā)者負責構建數(shù)據(jù)庫架構，為前端提供支持
  • 獨立性
    前端：不能作為單獨的服務提供，除非它是一個靜態(tài)的網(wǎng)站
    后端：可以作為BaaS（后端即服務，Backend as a Service）提供
  • 目標
    前端：開發(fā)者的目標是確保所有用戶都可以訪問網(wǎng)站或App
    后端：開發(fā)者的目標是圍繞前端開發(fā)應用程序，并為前端提供支持，并確保整個網(wǎng)站或App正常運行
  • 編程語言
    前端：HTML,CSS,JavaScript
    后端：PHP,Python，SQL，Java，Ruby，NET，Perl
  • 開發(fā)框架
    前端：Angular.JS、React.JS、Backbone.JS、Vue.JS、Sass、Ember.JS、NPM
    后端：Laravel、CakePHP、Epress、Codelgnier、Ruby on Rails、Pylon、ASP.NET
  • 數(shù)據(jù)庫
    前端：本地存儲、核心數(shù)據(jù)、SQLite、Cookie、會話
    后端：MySQL、Casandra、PostgreSQL、MongoDB、Oracle、Sybase、SQL Server
  • 服務器
    后端：Ubuntu、Apache、Nginx、Linux、Windows

二、HTML認知

1、網(wǎng)頁的組成

網(wǎng)頁由文字，圖片，音頻，視頻，超鏈接組成
網(wǎng)頁背后的本質為前端程序員寫的代碼，通過瀏覽器進行譯處理，瀏覽器轉化(解析以及渲染）

2、瀏覽器

1、瀏覽器的定義
	瀏覽器：是網(wǎng)頁顯示以及運行的平臺，是前端開發(fā)的必備利器
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）、表現(xiàn)
		CSS
			頁面元素的外觀和位置等頁面樣式（如：顏色、大小等）
	（3）、行為
		JavaScript
			頁面模型的定義與頁面交互
2、要求頁面實現(xiàn)
	結構、表現(xiàn)、行為三層分離

三、簡單的HTML頁面架構

HTML（超文本標記語言）模板框架是用于構建網(wǎng)頁的標準模板。
全稱：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
同時，我這里使用的開發(fā)工具為HBuilder
開發(fā)工具有：
Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder
新建HTML文件即可加載出模板，或者輸入h然后輸出8回車。
Web安全——HTML基礎
網(wǎng)頁的整體

  • html標簽

網(wǎng)頁的頭部

  • head標簽

網(wǎng)頁的身體

  • body標簽

網(wǎng)頁的標題

  • title標簽

對HTML模板的解讀：
文檔類型聲明（DOCTYPE）：HTML文件始于文檔類型聲明，它指示瀏覽器當前頁面使用的HTML版本。例如，HTML5版本的聲明為：<!DOCTYPE html>。
html 標簽： 此標簽是HTML文檔的根元素，包含整個HTML文件的內容。

  • head 標簽：在html標簽內，head標簽包含關于頁面的元信息，如文檔標題、字符編碼、樣式表鏈接等。對于瀏覽器顯示頁面時的非主要內容。
    • meta 標簽： 用于定義字符集（<meta charset="UTF-8">），SEO優(yōu)化關鍵字（<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等）：這些標簽用于組織文檔內容的結構，方便開發(fā)者和瀏覽器理解網(wǎng)頁的布局。
    • 文本標簽（h1-h6、p、strong、em、ul、li等）：這些標簽用于格式化文本內容，增強頁面的可讀性。
    • 超鏈接（a 標簽）：超鏈接用于導航到其他頁面、文件或電子郵件地址。
    • 表單元素（form、input、textarea、button等）：這些標簽用于創(chuàng)建用戶輸入表單，收集和發(fā)送用戶數(shù)據(jù)。
    • 多媒體元素（img、video、audio）：這些標簽可用于嵌入圖像、視頻、音頻等內容，提升頁面的交互性和多媒體體驗。
    • 表格元素（table、tr、td、th）：用于顯示數(shù)據(jù)表格。

為了獲得更好的頁面樣式和布局，通常還需要引入CSS（層疊樣式表）和JavaScript技術。

四、HTML常見標簽

1、HTML標簽的構成

  • 標簽由<、>、/、英文單詞或字母組成，并且把標簽中<>包括起來的英文單詞或字母稱為標簽名。
  • 常見標簽由兩部分組成，我們稱之為：雙標簽，前部分叫開始標簽，后部分叫結束標簽，兩部分之間包裹內容。
  • 少數(shù)標簽由一部分組成，我們稱之為：單標簽，自成一體，無法包裹內容。

2、HTML標簽的關系

  • 嵌套關系
  • 并列關系

1、meta標簽

<meta> 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。

設置網(wǎng)站關鍵字
meta name="keywords" content="網(wǎng)絡安全，WEB滲透，數(shù)據(jù)安全，滲透測試，安全培訓" />
<link> 標簽定義文檔與外部資源的關系。
<script> 引入js文件

常見用法：

  • <meta charset="UTF-8"> 指定網(wǎng)頁的字符集為UTF-8，確保瀏覽器正確地顯示和解析頁面的文本內容。
  • <meta name="viewport" content="width=device-width,initial-scale=1.0"> 用于響應式網(wǎng)頁設計，定義頁面在不同設備上的視口大小和縮放比例。
  • <meta name="keywords"content="關鍵詞，關鍵短語，關鍵列表" />指定網(wǎng)頁的關鍵詞，用于搜索引擎優(yōu)化（SEO）。這些關鍵詞描述了網(wǎng)頁內容的主題和關聯(lián)性，有助于提高網(wǎng)頁在搜索引擎結果中的排名。
  • <meta name="description"content="網(wǎng)頁描述"/>提供對網(wǎng)頁內容的簡要描述，這個描述通常在搜索引擎結果中顯示，幫助用戶了解網(wǎng)頁的內容。
  • <meta name="robots"content="noindex,nofollow" /> 用于告訴搜索引擎不要索引和追蹤當前頁面。
  • <meta name="author"content="作者姓名" />用于指定網(wǎng)頁的作者。
  • <meta http-equiv="refresh"content="秒數(shù);URL=重定向地址” />通過設置一個指定的時間間隔，自動將用戶重定向到另一個網(wǎng)頁。

注釋
<!--這是一段注釋。注釋不會在瀏覽器中顯示。-->
<p>這是一段普通的段落。</p>
實踐：
實現(xiàn)代碼：

<!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="網(wǎng)頁描述"/>
		<meta name="robots"content="noindex,nofollow" />
		<meta name="author"content="作者姓名" />
		<title></title>
	</head>
	<body>
		<p>這個是一個段落</p>
		<!--這是一個注釋-->
	</body>
</html>

輸出結果：
輸出方法一、
Web安全——HTML基礎
HBuilder右邊有Web瀏覽器預覽界面，進行CTRL+S可直接保存看到輸出結果。
輸出方法二、
Web安全——HTML基礎
這里在代碼輸出框的上方可進行跳轉瀏覽器界面進行輸出查看。
Web安全——HTML基礎
這里我選擇的是edge瀏覽器進行輸出查看結果。
這里顯然易見第一行段落進行了顯示，而第二行未進行顯示。

2、標題標簽

由大到小

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>6</h6>
</br> 換行標簽
<hr>換行線標簽

實現(xiàn)代碼：

<!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="網(wǎng)頁描述"/>
		<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>

輸出結果：
Web安全——HTML基礎

3、文本屬性

<strong>加粗</strong>
<b></b>加粗
<i></i>斜體
<u></u> 下劃線
<sup></sup>上標
<sub></sub>下標
<del></del> 刪除線
<font></font> 規(guī)定字體屬性
	size 字體的大小
	color 字體顏色
代碼樣式原樣輸出
<pre></pre>

實踐：
實現(xiàn)代碼：

<!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="網(wǎng)頁描述"/>
		<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">規(guī)定字體屬性</font> 
		</p>
		<p>
			wwww
		</p>
		<pre>	wwww</pre>
	</body>
</html>

輸出結果：
Web安全——HTML基礎
這里我們可以來看下字體的默認大小：
Web安全——HTML基礎
以及我們最終將文字的屬性，顏色包括字體的大小的設定：
Web安全——HTML基礎

4、form表單

form表單：規(guī)定當提交表單時向何處發(fā)送表單數(shù)據(jù)
method 提交的方法 有 get、post

規(guī)定在發(fā)送表單數(shù)據(jù)之前如何對其進行編碼。
enctype 屬性可能的值：
application/x-www-form-urlencoded
multipart/form-data
text/plain

input的標簽
name：同樣是表示的該文本輸入框名稱。
size：輸入框的長度大小。
maxlength：輸入框中允許輸入字符的最大數(shù)。
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>安全開發(fā)<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>

輸出結果：
Web安全——HTML基礎
Web安全——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 在整個窗口中打開被鏈接文檔。

實現(xiàn)代碼：

<!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>

輸出結果：
Web安全——HTML基礎

好的，我們下面來看這三個a標簽：
首先點擊第一個：

點擊第二個：

點擊第三個：

我們可以看到只有第三個標簽進行了創(chuàng)建新的標簽頁進行訪問，而第一個以及第二個標簽只進行了全標簽頁的跳轉。

6、錨文本

錨文本（Anchor Text）是指在超鏈接（HTML中使用<a>標簽創(chuàng)建的鏈接）中顯示的可點擊文本或詞語。
它通常是以藍色（或其他指定的鏈接色）并帶有下劃線的形式展現(xiàn)，用于吸引用戶點擊以跳轉到目標網(wǎng)頁或位置。

<a href="#2">錨點</a>
<a name="2">錨點</a>

錨文本的使用：
實現(xiàn)代碼：

<!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>

輸出結果：
這里我們首先滑到底部：
Web安全——HTML基礎
然后點擊返回頂部：
Web安全——HTML基礎
即可完成跳轉。

7、img 標簽

<img> 標簽是HTML中用于插入圖像的標簽。它是一個自閉合標簽，不需要閉合標簽。
<img> 標簽使用一個必需的屬性 src 來指定圖像的來源（即圖像的URL）。除此之外，還可以使用其他屬性來控制圖像的顯示和行為。
img 元素向網(wǎng)頁中嵌入一幅圖像。
<img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" />
alt 規(guī)定圖像的替代文本。
src 規(guī)定顯示圖像的url
width 規(guī)定圖片的高度
height 規(guī)定圖片的寬度
title：為圖像添加標題，當用戶將鼠標懸停在圖像上時顯示。
class 或 id：用于應用 CSS 樣式或 JavaScript 操作圖像。
img標簽的使用：
1、首先我們將需要顯示的圖片保存在項目的img文件里面：
Web安全——HTML基礎
2、實現(xiàn)代碼：

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

3、輸出結果：
Web安全——HTML基礎
4、同時，我們也可以進行設置圖片顯示的大?。?br> 實現(xiàn)代碼：

<!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、輸出結果：
Web安全——HTML基礎
6、這里我們嘗試去掉圖片地址看會顯示什么
實現(xiàn)代碼：

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

7、輸出結果：
Web安全——HTML基礎
8、在未能正常顯示的畫面上加上闡述：
實現(xiàn)代碼：

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

9、輸出結果：
Web安全——HTML基礎
a標簽，img標簽以及錨文本的配置使用：
實現(xiàn)代碼：

<!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>

輸出結果：
Web安全——HTML基礎

8、table 表格

<caption>我的標題</caption>表格帶標題
border 邊框
width 寬度
height 高度
colspan 行
rowspan 豎

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

cellpadding 單元邊與內容的空白
cellspacing 單元格的空白
案例區(qū)分：
實現(xiàn)代碼：

<!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>總數(shù)</td><td colspan="2">5</td></tr>
		</table>
	</body>
</html>

輸出結果：
Web安全——HTML基礎
這里可以明顯的區(qū)分出以上的代碼功能。

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、有序列表

數(shù)字列表 默認 數(shù)字

小寫字母列表
大寫字母列表 A
羅馬字母列表 I
小寫羅馬字母列表 i

<ol type="1"> <!--有序列表-->
			<li>暗月實戰(zhàn)項目九 不出網(wǎng)的情況下的內網(wǎng)多域控滲透</li>
			<li>xp/2003開關3389指令</li>
			<li>一條命令修改windows注冊表</li>
</ol>

列表的使用案例：
實現(xiàn)代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ZY技術分享</title>
	</head>
	<body>
		<ul type="disc"> <!--無序列表-->
            <p>RIP的數(shù)據(jù)包</p>           
			<li>request——請求數(shù)據(jù)包</li>
			<li>response——響應數(shù)據(jù)包</li>
		</ul>
		<hr />
		<ol type="1"> <!--有序列表-->
			<p>OSPF的數(shù)據(jù)包</p>
			<li>Hello包</li>
			<li>DBD包</li>
			<li>LSA包</li>
			<li>LSR包</li>
			<li>LSU包</li>
		</ol>
	</body>
</html>

輸出結果：
Web安全——HTML基礎

10、框架的使用

frameset 元素可定義一個框架集。它被用來組織多個窗口（框架）。每個框架存有獨立的文檔。在其最簡單的應用中，frameset 元素僅僅會規(guī)定在框架集中存在多少列或多少行。您必須使用 cols 或 rows 屬性。

frameset 在一個頁面中設置一個或多個框架，不能嵌套在body標簽里
iframe 是在html頁面內嵌入框架，框架內可以連接另一個頁面

frameset 不能在body內使用
frame 一般都是在frameset中使用
cols 定義框架集中列的數(shù)目和尺寸
rows 定義框架集中行的數(shù)目和尺寸

scrolling 滾動條
auto 在需要的情況下出現(xiàn)滾動條（默認值）。
yes 始終顯示滾動條（即使不需要）。
no 從不顯示滾動條（即使需要）

案例，制作如下格式框架：
Web安全——HTML基礎
1、首先我們先創(chuàng)建一個新的項目。
2、創(chuàng)建top，main，left三個html并輸入名稱：
top.html
實現(xiàn)代碼：

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

main.html
實現(xiàn)代碼：

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

left.html
實現(xiàn)代碼：

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

3、對文件index.html進行配置，并賦入框架：
實現(xiàn)代碼·：

<!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>

輸出結果：
Web安全——HTML基礎
4、對left.html進行修改并配置無序列表：
實現(xiàn)代碼：

<!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="#">系統(tǒng)信息</a></li>
			<li><a href="#">備份</a></li>
		</ul>
	</body>
</html>

輸出結果：
Web安全——HTML基礎
以及此時index.html的輸出結果：
Web安全——HTML基礎
5、給left.html里面功能添加文章配置功能代碼，此時，重新創(chuàng)建add.html并配置：
實現(xiàn)代碼：

<!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>

輸出結果：
Web安全——HTML基礎
6、在left.html上進行配置連接：
實現(xiàn)代碼：

<!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="#">系統(tǒng)信息</a></li>
			<li><a href="#">備份</a></li>
		</ul>
	</body>
</html>

7、將add.html界面放于main.html框架界面上：index.html進行配置：
實現(xiàn)代碼：

<!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框架中彈出界面：
Web安全——HTML基礎
8、給left.html中文章列表創(chuàng)建界面，這里首先創(chuàng)建一個artlist.html文件并配置：
實現(xiàn)代碼：

<!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>

輸出結果：
Web安全——HTML基礎
然后我們利用index.html進行打開left框架的文章列表：
Web安全——HTML基礎
9、這里界面就補充這么多，剩下的原理都一樣。文章來源地址http://www.zghlxwxcb.cn/news/detail-496305.html

到了這里，關于Web安全——HTML基礎的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處： 如若內容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經查實，立即刪除！

領支付寶紅包贊助服務器費用

相關文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包