天天看點
傳回

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證

HTML (Hyper Text Mackup Language，超文本标記語言)

超文本包括文字、圖檔、音頻、視訊等。

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證

W3C标準

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證

HTML基本結構

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證
<!-- <!DOCTYPE 告訴浏覽器，這個文本要使用什麼标準> -->
<!--  寫DOCTYPE也可以，浏覽器預設使用HTML标準 -->
<!DOCTYPE html>
<html lang="en">
<!-- 網頁頭部 -->
<head>
    <!-- <meta> -- 用于描述網站資訊 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 可以用于SEO -->
    <meta name="keywords" content="haha">
    <meta name="description" content="hoho">
    <title>Document</title>
</head>
<!-- 網頁主體 -->
<body>
    
</body>
</html>

網頁基本标簽

标題标簽 

<h1>一級标簽</h1>
<h2>二級标簽</h2>
<h3>三級标簽</h3>
<h4>四級标簽</h4>
<h5>五級标簽</h5>
<h6>六級标簽</h6>

段落标簽

換行标簽 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁基本标簽</title>
</head>
<body>
    在該标簽中段文字都屬于這一自然段<br/>
</body>
</html>

水準線标簽 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁基本标簽</title>
</head>
<body>
    <hr/>
</body>
</html>

字型樣式标簽 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁基本标簽</title>
</head>
<body>
    <p><strong>粗體</strong></p>
    <p><em>斜體</em></p>
    <p><i>Italy</i></p>
</body>
</html>

注釋和特殊符号 

<!-- 注釋 -->
&nbsp;  空格

更多HTML特殊符号

圖像标簽

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證

超連結标簽及應用

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證

頁面間連結

從一個頁面跳轉到另一個頁面

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超連結标簽及應用</title>
</head>
<body>
    <!-- 在新頁面打開連結 -->
    <a href="https://www.jiumodiary.com" target="_blank">Text</a>  
    <!-- 在本頁打開連結 -->
    <a href="https://www.jiumodiary.com" target="_self">Text</a>

    <a href="https://www.jiumodiary.com" target="_blank">
        <img src="https://www2.jiumodiary.com/images/front/eleps.png" alt="預設文字" title="懸停文字">
    </a>
</body>
</html>

錨連結 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超連結标簽及應用</title>
</head>
<body>
    <!-- 以id為錨點标記 -->
    <p> <a href="https://www.jiumodiary.com" target="_blank" id="top">Text</a>  </p>
    <p> <a href="https://www.jiumodiary.com" target="_self">Text</a> </p>
    <p>
        <a href="https://www.jiumodiary.com" target="_blank">
            <img src="https://www2.jiumodiary.com/images/front/eleps.png" alt="預設文字" title="懸停文字">
        </a>
    </p>
    <p>
        <a href="https://www.jiumodiary.com" target="_blank">
            <img src="https://www2.jiumodiary.com/images/front/eleps.png" alt="預設文字" title="懸停文字">
        </a>
    </p>
    <p>
        <a href="https://www.jiumodiary.com" target="_blank">
            <img src="https://www2.jiumodiary.com/images/front/eleps.png" alt="預設文字" title="懸停文字">
        </a>
    </p>
    <p>
        <a href="https://www.jiumodiary.com" target="_blank">
            <img src="https://www2.jiumodiary.com/images/front/eleps.png" alt="預設文字" title="懸停文字">
        </a>
    </p>
    <p>
        <a href="https://www.jiumodiary.com" target="_blank">
            <img src="https://www2.jiumodiary.com/images/front/eleps.png" alt="預設文字" title="懸停文字">
        </a>
    </p>
    <p>
        <a href="https://www.jiumodiary.com" target="_blank">
            <img src="https://www2.jiumodiary.com/images/front/eleps.png" alt="預設文字" title="懸停文字">
        </a>
    </p>
    <p>
        <a href="https://www.jiumodiary.com" target="_blank">
            <img src="https://www2.jiumodiary.com/images/front/eleps.png" alt="預設文字" title="懸停文字">
        </a>
    </p>
    
    <p> <a href="#top">回到頂部</a> </p>

		<!-- 還可以實作任意頁面任意錨點跳轉 -->
    <p> <a href="https://www.jiumodiary.com/#top"></a> </p>
</body>
</html>

功能性連結 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>
        <a href="mailto:[email protected]"></a>
    </p>
</body>
</html>

塊内元素和行内元素

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證

清單标簽

無序清單 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- unordered list -->
    <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

有序清單 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- ordered list -->
    <ol>
        <li>C++</li>
        <li>Golang</li>
        <li>Python</li>
    </ol>
</body>
</html>

自定義清單 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- Defined List -->
    <dl>
        <!-- Defined Title -->
        <dt>Descipline</dt>
        <!-- Defined item -->
        <dd>Math</dd>
        <dd>English</dd>
        <dd>Chinese</dd>

        <dt>Week</dt>
        <dd>Monday</dd>
        <dd>Tuesday</dd>
    </dl>
</body>
</html>

表格标簽

為什麼要使用表格?

  • 簡單通用
  • 結構穩定

基本結構：

  • 行
  • 列
  • 單元格
  • 跨行
  • 跨列 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1px">
        <!-- th: table header -->
        <th colspan="2px">A</th><th>B</th><th>C</th>
        <!-- tr: table row -->
        <tr>
            <!-- td: table data -->
            <td colspan="2px">1-1</td><td>1-2</td><td>1-3</td>
            <td>2-1</td><td>2-2</td><td>2-3</td>
        </tr>
        <tr>
            <!-- td: table data -->
            <td rowspan="2px">1-1</td><td>1-2</td><td>1-3</td>
            <td>2-1</td><td>2-2</td><td>2-3</td>
        </tr>
    </table>
</body>
</html>

媒體元素

Video 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <video src="a.mp4" controls="controls" autoplay="autoplay"></video>
</body>
</html>

Audio 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="a.mp3" controls="controls" autoplay="autoplay"></audio>
</body>
</html>

頁面結構分析

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
        <h2>Header</h2>
    </header>

    <nav>
        <h4>Navigation</h4>
    </nav>

    <section>
        <h1>Section1</h1>
    </section>

    <article>
        <h3>Article</h3>
    </article>

    <aside>
        <h3>Aside</h3>
    </aside>

    <footer>
        <h5>Footer</h5>
    </footer>
</body>
</html>

iframe内聯架構

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證

在一個網頁内嵌套另一些網頁

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <iframe name="jiumodiary" src="https://www.jiumodiary.com" frameborder="0" width="500px" height="500px">jiumodiary</iframe>

    <a href="https://www.bing.com" target="jiumodiary">在指定iframe中打開網頁</a>
</body>
</html>

初識表單post和get送出

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="POST">
        <p> UserName: <input type="text" name="username"> </p>
        <p> Password: <input type="password" name="password"> </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>

文本框和單選框

HTML5學習筆記W3C标準HTML基本結構網頁基本标簽圖像标簽超連結标簽及應用塊内元素和行内元素清單标簽表格标簽媒體元素頁面結構分析iframe内聯架構初識表單post和get送出文本框和單選框按鈕和多選框清單框、文本域和檔案域搜尋框滑塊和簡單驗證表單的應用Label表單的初級驗證
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="GET">
        <p> UserName: <input type="text" name="username"> </p>
        <p> Password: <input type="password" name="password"> </p>
        <p> Gender: 
            Boy<input type="radio" value="boy" name="gender">
            Girl<input type="radio" value="girl" name="gender"> 
        </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>

按鈕和多選框 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="GET">
        <p> UserName: <input type="text" name="username"> </p>
        <p> Password: <input type="password" name="password"> </p>
        <p> Gender: 
            Boy<input type="radio" value="boy" name="gender">
            Girl<input type="radio" value="girl" name="gender"> 
        </p>
        <p> Hobby:
            A<input type="checkbox" name="hobby" value="A">
            B<input type="checkbox" name="hobby" value="B">
            C<input type="checkbox" name="hobby" value="C">
        </p>
        <p>
            <input type="button" name="click" value="點選變長">
            <!-- 圖檔按鈕 -->
            <input type="image" src="https://www2.jiumodiary.com/images/front/eleps.png">
        </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>

清單框、文本域和檔案域

清單框、文本域和檔案域 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="GET">
        <p> UserName: <input type="text" name="username"> </p>
        <p> Password: <input type="password" name="password"> </p>
        <p> Gender: 
            Boy<input type="radio" value="boy" name="gender">
            Girl<input type="radio" value="girl" name="gender"> 
        </p>
        <p> 下拉框：
            <select name="options">
                <option value="1">1</option>
                <option value="2" selected>2</option>
                <option value="3">3</option>
            </select>
        </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>

文本域 Textarea 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="GET">
        <p> UserName: <input type="text" name="username"> </p>
        <p> Password: <input type="password" name="password"> </p>
        <p> Gender: 
            Boy<input type="radio" value="boy" name="gender">
            Girl<input type="radio" value="girl" name="gender"> 
        </p>
        <p> 下拉框：
            <select name="options">
                <option value="1">1</option>
                <option value="2" selected>2</option>
                <option value="3">3</option>
            </select>
        </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>

搜尋框滑塊和簡單驗證

自帶簡單驗證的元件 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="GET">
        <p> UserName: <input type="text" name="username"> </p>
        <p> Password: <input type="password" name="password"> </p>
        <p> Gender: 
            Boy<input type="radio" value="boy" name="gender">
            Girl<input type="radio" value="girl" name="gender"> 
        </p>
        <p> Email checking: 
            <input type="email" name="email">
        </p>
        <p> URL checking: 
            <input type="url" name="url">
        </p>
        <p> Number checking: 
            <input type="number" name="number" max="100" min="0" step="10">
        </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>

滑塊 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="GET">
        <p> UserName: <input type="text" name="username"> </p>
        <p> Password: <input type="password" name="password"> </p>
        <p> Gender: 
            Boy<input type="radio" value="boy" name="gender">
            Girl<input type="radio" value="girl" name="gender"> 
        </p>
        <p> 滑塊
            <input type="range" name="range" max="100" min="0">
        </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>

搜尋框 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="GET">
        <p> UserName: <input type="text" name="username"> </p>
        <p> Password: <input type="password" name="password"> </p>
        <p> Gender: 
            Boy<input type="radio" value="boy" name="gender">
            Girl<input type="radio" value="girl" name="gender"> 
        </p>
        <p> 搜尋框
            <input type="search" name="search">
        </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>

表單的應用

  • 隐藏域
  • 隻讀
  • 禁用 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="GET">
        <p> UserName: <input type="text" name="username" readonly> </p>
        <p> Password: <input type="password" name="password" hidden> </p>
        <p> Gender: 
            Boy<input type="radio" value="boy" name="gender" disabled>
            Girl<input type="radio" value="girl" name="gender"> 
        </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>

Label 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="GET">
        <p> UserName: <input type="text" name="username"> </p>
        <p> Password: <input type="password" name="password"> </p>
        <p> Gender: 
            Boy<input type="radio" value="boy" name="gender">
            Girl<input type="radio" value="girl" name="gender"> 
        </p>
        <p>
            <!-- 使用label可以增加滑鼠的可用性，點文字如同點text框，即label所綁定的元件 -->
            <label for="text">Text</label>
            <input type="text" id="text">
        </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>

表單的初級驗證

  • placeholder
  • required
  • pattern正規表達式 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <form action="url" method="POST | GET"> -->
    <!-- Get：可以直接在submit的url裡看到送出到資料，不安全，但是高效 -->
    <!-- POST：在url裡看不到送出到資料，但是也可以在inspect element裡看到，可以後期加密 -->
    <form action="https://www.jiumodiary.com" method="GET">
        <p> UserName: <input type="text" name="username" placeholder="Please input user name"> </p>
        <p> Password: <input type="password" name="password" required> </p>
        <p> Gender: 
            Boy<input type="radio" value="boy" name="gender">
            Girl<input type="radio" value="girl" name="gender"> 
        </p>
        <p>
            <!-- 使用label可以增加滑鼠的可用性，點文字如同點text框，即label所綁定的元件 -->
            <label for="text">Text</label>
            <input type="text" id="text" placeholder="Regex text checking" pattern="^\d">
        </p>
        <p> 
            <input type="submit"> 
            <input type="reset">
        </p>
    </form>
</body>
</html>
前端知識積累 html5 html
上一篇: HTML5 基礎表單 學習筆記
下一篇: html5視訊錄制,html5 pc端錄制視訊 MediaStreamRecorder

繼續閱讀