HTML網頁基礎

1.基本結構

<!--網頁基本結構-->

    <header> <h2>網頁的頭部</h2> </header>

    <section> <h2>網頁主體</h2> </section>

    <footer> <h2>網頁尾步</h2> </footer>

2.內聯框架

<!--內聯框架 iframe  width寬度  height高度-->
    <iframe src="https://www.baidu.com" name="hl" frameborder="0" width="300px" height="500px"></iframe>
<!--通過a標籤來跳轉到hl裡面-->
    <a href="https://user.qzone.qq.com/3187311481" target="hl">點選跳轉</a>

3.表單語法

<!--表單語法

    表單提交的位置：action 可以是一個網站，也可以是一個請求處理
    method: post ,  get 提交方式
    get提交方式會在瀏覽器上方顯示我們輸入的賬號密碼，所以不安全
    post比較安全，傳輸大檔案
-->

<form action="Deom1.html" method="get">

<!-- 文字輸入框：input type=text
      密碼框： input  type=password
-->
    <p>賬號:<input type="text" name="username"> </p>
    <p>密碼:<input type="password" name="pwd"> </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

4.按鈕

無線電鈕

<!--無線電鈕 name值一樣的情況下才可以只選擇其中一個，否則會全部選中-->

    <input type="radio" name="sex">男
    <input type="radio" name="sex">女

多選按鈕

<!--多選按鈕 -->

    <input type="checkbox" >睡覺
    <input type="checkbox" >泡澡
    <input type="checkbox" >沐浴

5.下拉選單

<!--下拉選單-->


    <select>

        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>

    </select>

6.檔案域

<!--檔案域  input標籤都是name加上上傳的東西 以鍵值對的形式昂-->

    <p>
        <input type="file" name="files">
    </p>

7.email郵件判斷

<!--email郵件判斷  這只是初級驗證，往後咱們用JS來進行驗證-->

<input type="email" name="email">

8.滾軸

<!--滾軸-->
音量：
<input type="range" min="0" max="100" name="voice">

9.搜尋

<!--搜尋-->
    <input type="search" name="search">

10.禁用&隱藏

<input type="submit" disabled>
<input type="submit" hidden>
<!--disabled 是禁用域-->
<!--hidden   是隱藏域-->

11.增強

<!--增強滑鼠可用性  點選文字可以直接選中所屬ID的文字方塊-->

    <label for="mark">你點我試試看</label>
    <input type="text" id="mark">

12.表單初級驗證

<!--
	 placeholder：提示性的訊息
	 required：非空判斷，必須填寫內容	
	 pattern: 正規表示式
	 正規表示式速查表網址：https://www.jb51.net/tools/regexsc.htm	
-->
	<p>賬號:<input type="text" name="username" placeholder="請輸入使用者名稱" required  pattern=""> </p>
    <p>密碼:<input type="password" name="pwd"> </p>

• 正規表示式速查表網址：點選進入