整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          軟件測試/測試開發-一篇文章帶你入門HTML

          上一篇文章我們提到了web的三大主要資源,HTML,CSS以及JS,HTML是提供web頁面內容的資源,本文我們就來介紹一下HTML。

          HTML

          HTML(HyperText Markup Language)是web的核心組成部分之一,是構建網頁的基礎語言。HTML使用標記來描述文檔的結構,并定義了網頁上的內容,包括文本、圖像、鏈接等。

          HTML 是一種在 Web 上使用的通用標記語言。HTML 允許你格式化文本,添加圖片,創建鏈接、輸入表單、框架和表格等等,并可將之存為文本文件,瀏覽器即可讀取和顯示。

          • HTML 指的是超文本標記語言: HyperText Markup Language
          • HTML 不是一種編程語言,而是一種標記語言
          • 標記語言是一套標記標簽 (markup tag)
          • HTML 使用標記標簽來描述網頁
          • HTML 文檔包含了HTML 標簽及文本內容
          • HTML文檔也叫做 web 頁面

          示例

          我們可以直接通過示例來介紹HTML的基本使用,首先,我們新建一個html文件,命名可以隨意,但是后綴必須為.html,比如叫study.html

          html<!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Muller</title>
          </head>
          <body>
           
          <h1>拜仁慕尼黑</h1>
          <p>德甲聯賽霸主</p>
           
          </body>
          </html>
          

          其中:

          • <!DOCTYPE html> 聲明為 HTML5 文檔
          • <html> 元素是 HTML 頁面的根元素
          • <head> 元素包含了文檔的元(meta)數據,如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8(由于在大部分瀏覽器中直接輸出中文會出現亂碼,所以要在頭部將字符聲明為UTF-8)
          • <title> 元素描述了文檔的標題
          • <body> 元素包含了可見的頁面內容
          • <h1> 元素定義一個大標題
          • <p> 元素定義一個段落

          我們可以在瀏覽器中打開這個HTML文件,界面如下圖:

          HTML各標簽詳解

          1. 標題

          HTML 標題(Heading)是通過<h1> - <h6> 標簽來定義的,示例如下:

          html<!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Muller</title>
          </head>
          <body>
           
          <h1>這是標題 1</h1>
          <h2>這是標題 2</h2>
          <h3>這是標題 3</h3>
          <h4>這是標題 4</h4>
          <h5>這是標題 5</h5>
          <h6>這是標題 6</h6>
           
          </body>
          </html>
          
          1. 段落

          HTML 段落是通過標簽 <p> 來定義的,示例如下:

          html<!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Muller</title>
          </head>
          <body>
           
          <p>德甲霸主xxx。</p>
          <p>歐陸豪門xxx。</p>
          <p>國家隊貢獻xxx。</p>
           
          </body>
          </html>
          
          1. 鏈接

          HTML 鏈接是通過標簽 <a> 來定義的,示例如下:

          html<!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Muller</title>
          </head>
          <body>
           
          <a href="https://testing-studio.com/">這是一個鏈接</a>
           
          </body>
          </html>
          
          1. 圖像

          HTML 圖像是通過標簽 <img> 來定義的。注意: 圖像的名稱和尺寸是以屬性的形式提供的。示例如下:

          html<!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Muller</title>
          </head>
          <body>
           
          <img src="muller.jpg" width="640" height="640" />
           
          </body>
          </html>
          
          1. 表格

          表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標簽進行定義。如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。使用邊框屬性來顯示一個帶有邊框的表格:

          html<table border="1">
              <tr>
                  <th>Header 1</th>
                  <th>Header 2</th>
              </tr>
              <tr>
                  <td>row 1, cell 1</td>
                  <td>row 1, cell 2</td>
              </tr>
              <tr>
                  <td>row 2, cell 1</td>
                  <td>row 2, cell 2</td>
              </tr>
          </table>
          

          總結

          HTML作為構建網頁的基礎語言,為互聯網世界的發展奠定了堅實的基礎。通過不斷地學習和了解HTML的新特性,我們能夠創造出更加豐富、功能更強大的網頁體驗。本文主要介紹了HTML的基礎知識,各種內容如何在HTML上體現,希望本文能夠幫到大家!

          獲取更多技術資料,請點擊!

          推薦

          Python全棧開發與自動化測試開發班 由淺入深實戰進階,從小白到高手

          以Python全棧開發為基礎,深入教授自動化測試技能,為學員打造全面的技術能力。通過系統學習和實際項目實戰,學員將具備在職場中脫穎而出的競爭力。不僅能夠靈活運用Python進行開發,還能夠保障項目質量通過自動化測試手段。這是一個全面提升職業競爭力的機會。

          課程詳情 Python開發必備基礎技能與項目實戰 Pvthon 編程語言/算法和數據結構/面向對象編程Web后端開發/前端開發/測試管理平臺項目實戰

          人工智能ChatGPT實戰 人工智能輔助學習各種開發和測試技能/Pytorch深度學框架/平臺開發實戰

          數據分析與自動化辦公 數據采集/Pandas與數據處理技術/ECharts與數據可視化技術/爬蟲實戰/自動化辦公/批量文件處理

          UI自動化測試與高級項目實戰 Web自動化測試/App自動化測試/ PageObject設計模式

          接口自動化測試 接口協議分析/Mock實戰/服務端接口測試

          性能測試 性能測試流程與方法/JMeter 腳本參數化/Grafana監控系統搭建

          簡歷指導與模擬面試 1V1簡歷指導/模擬真實面試/測試開發崗面試全攻略名企私教服務 名企專家1v1輔導/行業專家技術指導/針對性解決工作難題/績效提升輔導與晉升復盤

          課程亮點 名企私教服務 先學習后付費 高額獎學金 專屬社群+晚自習在線答疑 5V1全方位輔導作業+考試強化學習效果 簡歷修改 模擬面試 就業內推 面試復盤

          在瀏覽器中瀏覽了網頁之后,下一步就是查看其HTML源代碼。盡管這種方法很簡單,但仍然非常值得去做。查看源代碼有兩項作用;它可以幫助你發現最明顯的安全問題,但最重要的是,它使你能夠為將來的測試建立一個比較基準。對攻擊失敗之前和之后的源代碼進行比較,你就能夠調整你是輸入,了解到哪些通過了,哪些沒有通過,并再次嘗試。

          解決方案

          我們推薦使用Firefox,你已經在2.1節中學會了它的安裝。首先瀏覽應用中你所感興趣的網頁。

          右擊,并選擇“查看源文件”或從菜單欄選擇“查看”→ "源文件"。

          我們推薦Firefox的主要原因是因為它的彩色顯示。如圖3-1所示,使用這種顯示方式,HTML標簽和屬性都要容易理解得多。相比之下,Internet Explorer在記事本中打開網頁。就會難讀得多。

          討論

          作為比較基準,訪問HTML源代碼會非常有幫助。最常見的Web漏洞涉及到向Web應用提供惡意輸入以修改HTML源代碼。在測試這些漏洞時,驗證測試通過或失敗的最簡單的方法就是檢查源代碼是否被惡意更改。

          當心一切未經更改就寫進源代碼中的輸入。我們將在第8章討論輸入驗證,然后許多應用根本就不對輸入進行驗證。在開始討論更加復雜的內容之前,不妨在源代碼中搜索你剛剛提供的輸入。然后,使者將可能的危險值作為輸入,比如HTML標簽或JavaScript,并注意它是否未經修改就直接顯示在源代碼中。如果是這樣的話,那么這就是個警示信號。

          注意,你可以像搜索任何其他Firefox頁面那樣搜索HTML源代碼(根據具體情況,使用Ctrl+F或(Windows徽標鍵)+F)。

          在以后的秘訣和章節中,我們將使用工具來自動搜索、解析和比較源代碼。記住基本要點;通常,可以通過重復地手動檢查源代碼以檢查怎樣做才能使它通過篩選程序或編碼找出漏洞。

          注意:你在這里看到的靜態源代碼不能反映JavaScript或AJAX功能所做的任何更改。

          搜索微信公眾號:TestingStudio霍格沃茲的干貨都很硬核

          tml查看工具

          瀏覽器開發者工具 F12

          html結構

          html標簽

          • 標簽的類型
          • 標簽的屬性

          對于雙標簽,屬性只能寫在開始標簽中。對于單標簽,屬性就寫在單標簽內就好

          全局屬性

          事件屬性——窗口事件

          事件屬性——表單事件

          事件屬性——鍵盤事件

          事件屬性——鼠標事件

          事件屬性——多媒體事件

          注釋標簽

          文檔標題標簽

          標題標簽

          段落標簽

          容器標簽

          • span標簽
          • div標簽

          圖像標簽

          超鏈接標簽

          列表標簽——無序列表

          列表標簽——有序列表

          表格標簽

          表單域

          比如注冊的時候,要填一些信息。

          action 是指表單要提交到哪兒

          表單標簽

          文本域標簽

          多行文本輸入控件

          下拉菜單

          霍格沃茲的測試管理班是專門面向測試與質量管理人員的一門課程,通過提升從業人員的團隊管理、項目管理、績效管理、溝通管理等方面的能力,使測試管理人員可以更好的帶領團隊、項目以及公司獲得更快的成長。提供 1v1 私教指導,BAT 級別的測試管理大咖量身打造職業規劃。


          主站蜘蛛池模板: 国产精品高清一区二区三区| 综合久久久久久中文字幕亚洲国产国产综合一区首 | 亚洲欧美日韩国产精品一区| 国产美女露脸口爆吞精一区二区| 色综合视频一区二区三区| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 精品国产不卡一区二区三区| 免费一区二区无码东京热| 无码AV中文一区二区三区| 亚洲AV噜噜一区二区三区 | 一区二区三区免费在线观看| 国产一区二区三区在线看| 亚洲Av高清一区二区三区| 国产天堂在线一区二区三区| 97久久精品午夜一区二区| 国产一区二区三区影院| 一区二区三区在线观看视频| 色妞色视频一区二区三区四区| 无码日韩人妻av一区免费| 大伊香蕉精品一区视频在线| 日韩一区二区在线视频| 一区二区三区免费在线观看| 国产精品制服丝袜一区| 久久精品无码一区二区三区日韩 | 亚洲一区二区三区成人网站| 亚洲国产成人久久综合一区77| 午夜天堂一区人妻| 精品综合一区二区三区| 无码国产精品一区二区免费式芒果| 日韩一区二区三区射精| 美女一区二区三区| 免费国产在线精品一区| 无码午夜人妻一区二区三区不卡视频| 成人毛片无码一区二区| 无码少妇一区二区性色AV| 亚洲日本中文字幕一区二区三区| 亚洲日韩国产一区二区三区在线 | 国产一区二区精品| 亚洲AV无码国产一区二区三区| 国产美女口爆吞精一区二区| 加勒比无码一区二区三区|