HTML快速入門學習筆記

HTML 介紹

HTML（HyperText Markup Language）即超文本標記語言，是用來描述網頁的一種語言。用 HTML 編寫的文檔稱爲 HTML 文檔，也叫做Web 頁面，包括了 HTML 標籤、文本、圖片、視頻等內容。標記語言是一套標記標籤(markup tag)，不同於編程語言，markdown 語言也是一種標記語言。

HTML、CSS、JavaScript 的關係：
HTML、CSS、JavaScript 都是 Web 開發工程師必備的語言，HTML 用於承載網頁的內容(文本、圖片、語音、視頻)；CSS 用於實現網頁內容的裝飾(字體、顏色、佈局)；JavaScript 用於實現網頁內容的特效(交互、彈出、滑動)。

開發工具

HTML、CSS、JavaScript 是Web開發工程師必備的語言，有很多 IDE 和編輯器都能支持這幾種語言。
WebStorm：最強大的 Web 開發 IDE，JetBrains 出品。如果打算做全棧工程師，建議 JetBrains 系列都可以入手，代碼支持、插件支持、項目管理等都能全部支持。
Sublime Text：最推薦的代碼編輯器。跨平臺、顏值高、速度快，算是代碼編輯器裏面的神器。
Dreamweaver：Adobe 出品的圖形化 Web 開發工具，比較適合新手。

HTML網頁結構

HTML 的網頁結構由 HTML 版本聲明、HTML 頭部、HTML主體等幾個部分組成。HTML 頭部涉及頁面標題、字符集、樣式、鏈接等內容。HTML 主體部分是瀏覽器展現給用戶的內容，包括標題、文本、段落、鏈接、圖片、媒體等。所有的頁面內容都由 HTML 標籤來實現。

HTML標籤、元素、屬性關係

標籤：HTML 頁面由標籤和內容組成，標籤是成對出現，由開始和結束標籤組成。
元素：HTML 元素指的是開始標籤到結束標籤的所有代碼；元素的內容是開始和結束標籤之間的內容；HTML 文檔由嵌套的 HTML 元素組成。
屬性：HTML 元素可以設置屬性，屬性是 HTML 元素提供的附加信息，屬性一般描述於開始標籤，屬性總是以名稱-值對的形式出現。

第一個網頁

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>第一個網頁-</title>
</head>

<body>
	<h1>第一個網頁</h1>
    <p>2020/5/8</p>
</body>

</html>

網頁結構

<!DOCTYPE html> <!-- 告知 Web 瀏覽器頁面使用了哪種 HTML 版本，幫助瀏覽器正確顯示網頁 -->
<html lang="en"> <!-- html 標籤，包括 head 和 body 兩個模塊 -->
<head>  <!--頭部標籤，裏面的內容一般不顯示在網頁，主要給搜索引擎和瀏覽器使用-->
    <meta charset="UTF-8"> <!-- 設置 HTML 編碼，防止出現亂碼 -->
    <title>網頁結構</title> <!-- 設置瀏覽器標題 -->
</head>
<body> <!-- 網頁主體部分，內容會被瀏覽器解析顯示給用戶 -->
<h1>標題</h1>
<p>段落</p>
<a href="pinginglab.net">鏈接</a>
<img src ="pinginglab.net" alt="圖片">
</body>
</html>

HTML頭部

概述

head 元素包含了所有的頭部標籤元素。在 head 元素中你可以插入腳本（scripts）、樣式文件（CSS）及各種 meta 信息。

頭部標籤

head，定義關於文檔的信息。
title，定義文檔標題。
base，定義頁面上所有鏈接的默認地址或默認目標。
link，定義文檔與外部資源之間的關係。
meta，定義關於 HTML 文檔的元數據。
script，定義客戶端腳本。
style，定義文檔的樣式信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--爲網頁定義描述內容-->
    <meta name="description" content="HTML 頭部用於設置頁面標題、關鍵詞、鏈接、樣式、腳本等">
    <!--爲網頁定義關鍵詞-->
    <meta name="keywords" content="HTML">
    <!--定義作者-->
    <meta name="author" content="student">
    <title>頭部</title>
    <!-- rel 規定當前文檔與被鏈接文檔之間的關係，其中 stylesheet 代表文檔的外部樣式表-->
    <!-- type 規定被鏈接文檔的 MIME 類型-->
    <!-- href 規定被鏈接文檔的位置-->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <!-- script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件-->
    <script src="myscript.js"></script>
</head>
<body>

</body>
</html>

HTML標題

標題通過 <h1> - <h6> 標籤進行定義， <h1> 定義最大的標題， <h6> 定義最小的標題。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>標題1</h1>
    <h2>標題2</h2>
    <h3>標題3</h3>
    <h4>標題4</h4>
    <h5>標題5</h5>
    <h6>標題6</h6>
</body>
</html>

注：Ctrl + d 複製上一行；Ctrl + x 刪除選中行。

HTML水平線

<hr> 標籤在 HTML 頁面中創建水平線，可以實現內容上下文的分隔。

HTML段落

段落是通過 <p> 標籤定義的，一個<p>標籤內的全部字符爲一段，每個段落後會自動換行。

若希望在段落內實現換行，則需要使用<br>標籤。

//折行
<br>標籤可以實現在不產生一個新段落的情況下進行換行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>使用P標籤實現段落功能</p>
    <p>每個P標籤會自動換行</p>
    <p>P標籤會忽略源碼中的
    換行</p>
    <p>通過br標籤實現<br>段內換行</p>
</body>
</html>

HTML文本

概述

HTML 文本具備多種格式化標籤，可以實現文本的加粗、斜體、上下標、計算機輸出等處理。常用文本處理標籤主要涉及文本格式化標籤、計算機輸出標籤、引用標籤。

文本格式化標籤

<b>，定義粗體文本。
<big>，定義大號字。
<em>，定義着重文字。
<i>，定義斜體字。
<small>，定義小號字。
<strong>，定義加重語氣。
<sub>，定義下標字。
<sup>，定義上標字。
<ins>，定義插入字，下劃線。
<del>，定義刪除字，刪除線。

計算機輸出標籤

<code>，定義計算機代碼。
<kbd>，定義鍵盤碼。
<samp>，定義計算機代碼樣本。
<tt>，定義打字機代碼。
<var>，定義變量。
<pre>，定義預格式文本，例如保留空格和分行。

引用標籤

<abbr>，定義縮寫。
<acronym>，定義首字母縮寫。
<address>，定義地址。
<bdo>，定義文字方向。
<blockquote>，定義長的引用，實現一段長文字段落的引用，並且會自動縮進。
<q>，定義短的引用語，實現一段短段落的引用，被引用文字會自動加上雙引號。
<cite>，定義引用、引證。
<dfn>，定義一個定義項目。

HTML超鏈接

HTML 使用標籤 <a> 來設置超文本鏈接。超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像。
可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當鼠標指針移動到網頁中的某個鏈接上時，箭頭會變爲一隻小手。

文本鏈接

<a href="http://www.baidu.com">百度</a>

圖片鏈接

<!--alt 規定圖像的替代文本，當圖片加載失敗時，會用文本代替圖片-->
<a href="http://www.baidu.com"><img src="image/logo.png" alt="百度網站" width="1181" height="236"></a>

新窗口打開鏈接

<a href="http://www.baidu.com" target="_blank">百度</a>

郵件鏈接

<a href="mailto:[email protected]?subject=HelloWorld">郵箱鏈接</a>

頁面內跳到不同位置

<h3><a href="#底部">到達底部</a></h3>
<p><a name="頂部">這裏是頂部</a></p>
<p><a name="底部">這裏是底部</a></p>
<h3><a href="#頂部">回到頂部</a></h3>

HTML列表

HTML 支持有序、無序、自定義列表。

<ol>，定義有序列表。
<ul>，定義無序列表。
<li>，定義有序和無序列表的列表項。
<dl>，定義自定義列表。
<dt>，自定義列表項目。
<dd>，自定列表項的描述。

無序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無序列表</title>
</head>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</body>
</html>

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<ol start="100">
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

不同類型的無序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同類型的無序列表</title>
</head>
<body>
<p>Disc圓點項目符號列表</p>
<ul type="disc">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<p>Circle圓圈項目符號列表</p>
<ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<p>Square正方形項目符號列表</p>
<ul type="square">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</body>
</html>

不同類型的有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同類型的有序列表</title>
</head>

<body>
<p>數字列表</p>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</ol>

<p>大寫字母列表</p>
<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

<p>小寫字母列表</p>
<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

嵌套列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套列表</title>
</head>
<body>
<ul>
    <li>HTML
        <ul>
            <li>標題</li>
            <li>鏈接</li>
            <li>列表</li>
        </ul>
    </li>
    <li>CSS
        <ol>
            <li>背景</li>
            <li>文本</li>
            <li>字體</li>
        </ol>
    </li>
    <li>JavaScript</li>
</ul>
</body>
</html>

HTML表格

表格由 <table> 標籤來定義。
每個表格均有若干行，由 <tr> 標籤定義；
每行被分割爲若干單元格，由 <td> 標籤定義。
字母 td 指表格數據（table data），即單元格的內容；
單元格可以包含文本、圖片、列表、段落、表單、水 平線、表格。

可以通過屬性改變表格的樣式。

<table>，定義表格
<th>，定義表格的表頭
<tr>，定義表格的行
<td>，定義表格單元
<caption>，定義表格標題
<colgroup>，定義表格列的組
<col>，定義用於表格列的屬性
<thead>，定義表格的頁眉
<tbody>，定義表格的主體
<tfoot>，定義表格的頁腳

代碼實現1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<h3>表格標籤</h3>
<p>每個表格由table標籤開始</p>
<p>每個表格行由tr標籤開始</p>
<p>每個表格數據由td標籤開始</p>

<h4>一列表格</h4>
<table border="1">
    <tr>
        <td>web</td>
    </tr>
</table>

<h4>一行三列表格</h4>
<table border="1">
    <tr>
        <td>html</td>
        <td>css</td>
        <td>javascript</td>
    </tr>
</table>

<h4>兩行三列表格</h4>
<table border="1">
    <tr>
        <td>html</td>
        <td>css</td>
        <td>javascript</td>
    </tr>
    <tr>
        <td>html</td>
        <td>css</td>
        <td>javascript</td>
    </tr>
</table>

</body>
</html>

代碼實現2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帶表頭的表格</title>
</head>
<body>
<h4>帶水平表頭的表格</h4>
<table border="1">
    <tr>
        <th>第一章</th>
        <th>第二章</th>
        <th>第三章</th>
    </tr>
    <tr>
        <td>html</td>
        <td>css</td>
        <td>javascript</td>
    </tr>
</table>

<h4>帶垂直表頭的表格</h4>
<table border="1">
    <tr>
        <th>第一章</th>
        <td>html</td>
    </tr>
    <tr>
        <th>第二章</th>
        <td>css</td>
    </tr>
    <tr>
        <th>第三章</th>
        <td>javascript</td>
    </tr>
</table>
</body>
</html>

表單

HTML 表單用於蒐集不同類型的用戶輸入。表單元素指的是不同類型的 input 元素、包括複選框、單選按鈕、提交按鈕等。

<form>，元素定義 HTML 表單
<input>，元素是最重要的表單元素
input text，定義常規文本輸入
input radio，定義單選按鈕輸入
input submit，定義提交按鈕
input checkbox，定義複選框
input select，定義下拉框
input textarea，定義多行文本框
input button，定義按鈕

代碼案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單（文本-密碼-單選-複選）</title>
</head>
<body>
<h4>input text - 文本域</h4>
<form>
    姓名：<input type="text" name="姓名">
    手機：<input type="text" name="手機">
</form>

<h4>textarea - 文本框</h4>
<textarea row="80" cols="80">
    文本框能接收用戶輸入多行信息
</textarea>

<h4>input password - 密碼域</h4>
<form>
    姓名：<input type="text" name="姓名">
    密碼：<input type="password" name="密碼">
</form>

<h4>input radio - 單選框</h4>
<form>
    HTML：<input type="radio" name="web"  " checked="checked">
    CSS：<input type="radio" name="web" value="css">
</form>

<h4>input checkbox - 複選框</h4>
<form>
    HTML：<input type="checkbox" name="html" value="html">
    CSS：<input type="checkbox" name="css" value="css">
</form>

</body>
</html>

代碼案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉表單與按鈕</title>
</head>
<body>
<form>
    <select name="web">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
    </select>
    <input type="submit" value="確認">
</form>
</body>
</html>

代碼案例3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單提交（很重要！）</title>
</head>
<body>
<p>由用戶填寫username和password參數，並submit提交給login.php頁面並跳轉，默認get方法</p>
<form action="login.php">
    姓名：<input type="text" name="username">
    密碼：<input type="password" name="password">
    <input type="submit" value="登錄">
</form>

<p>由用戶填寫username和password參數，並submit提交給login.php頁面並跳轉，採用post方法</p>
<form action="login.php" method="post">
    姓名：<input type="text" name="username">
    密碼：<input type="password" name="password">
    <input type="submit" value="提交">
</form>

<p>由用戶選擇選項，參數是web=html或者web=css，並submit提交給login.php頁面並跳轉，默認get方法</p>
<form action="login.php">
    HTML：<input type="radio" name="web" value="html" checked="checked">
    CSS：<input type="radio" name="web" value="css">
    <input type="submit" value="提交">
</form>

<p>由用戶選擇選項，參數是web=html或者web=css，並submit提交給login.php頁面並跳轉,採用post方法</p>
<form action="login.php" method="post">
    HTML：<input type="radio" name="web" value="html" checked="checked">
    CSS：<input type="radio" name="web" value="css">
    <input type="submit" value="提交">
</form>

</body>
</html>

HTML排版佈局

<div> 可定義文檔中的分區或節（division/section）。

<div> 標籤可以把文檔分割爲獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。

如果用 id 或 class 來標記 <div>，那麼該標籤的作用會變得更加有效。

<div> 是一個塊級元素。這意味着它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。
可以通過 <div> 的 class 或 id 應用額外的樣式。

不必爲每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。

可以對同一個 <div> 元素應用 class 或 id 屬性，但是更常見的情況是隻應用其中一種。
這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解爲某一類元素），而 id 用於標識單獨的唯一的元素。

HTML語義化標籤

將編碼命名習慣用作標籤元素。可以自行查看手冊學習常用的語義化標籤，下面展示一個案例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5新語義元素(用於排版與佈局)</title>
    <style>
        <!--爲了解決HTML5新語義元素兼容性問題，可以添加這句標識-->
        header, section, footer, aside, nav, article, figure
        {
            display: block;
        }
    </style>
</head>
<body>

<header>
    <h1>header元素描述了文檔的頭部區域</h1>
    <p>header元素用於定義內容的介紹展現區域</p>
</header>
<br>

<nav>
    <h1>nav元素定義導航鏈接部分</h1>
    <a href="html">HTML</a> |
    <a href="CSS">CSS</a> |
    <a href="JS">JavaScript</a>
</nav>
<br>

<div class="aside">
    <h1>aside元素定義側邊欄，主區域內容之外的內容</h1>
    <p>aside元素的內容應與主區域的內容相關</p>
</div>
<br>

<div class="article">
    <h1>article元素</h1>
    <p>採用article元素定義文檔中的獨立內容或文章</p>
</div>
<br>

<div class="figure">
    <h1>figure元素描述圖表</h1>
    <img src="image/html5.jpeg" alt="html5" width="100" height="50">
    <figcaption>Fig.1 - figure元素描述圖表.</figcaption>
</div>
<br>

<div class="footer">
    <h1>footer元素描述文檔的底部區域</h1>
    <p>footer元素頁腳信息以便包括文檔作者、著作權、使用條款、聯繫信息等</p>
</div>
<br>

</body>
</html>

HTML快速入門學習筆記

HTML快速入門學習筆記

HTML 介紹

開發工具

HTML網頁結構

HTML標籤、元素、屬性關係

第一個網頁

網頁結構

HTML頭部

概述

頭部標籤

HTML標題

HTML水平線

HTML段落

HTML文本

概述

文本格式化標籤

計算機輸出標籤

引用標籤

HTML超鏈接

HTML列表

HTML表格

代碼實現1

代碼實現2

表單

代碼案例1

代碼案例2

代碼案例3

HTML排版佈局

HTML語義化標籤

androguard解析指令及字節碼

python理解類和麪向對象

使用androguard生成方法控制流圖CFG

IOTFUZZER: Discovering Memory Corruptions in IoT Through App-based Fuzzing

python函數與模塊

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結