HTML詳解

落落的学习發表於2024-05-16
HTML

1.HTML

HTML（Hyper Text Markup Language）：超文字標記語言
W3C（World Wide Web Consortium）：全球資訊網聯盟
標準：

  • 結構化語言：HTML、XML
  • 表現標準語言：CSS
  • 行為標準：DOM、ECMAScript

2.網頁基本標籤

網頁基本資訊：

<!--DOCTYPE：告訴瀏覽器，要使用什麼規範-->
<!DOCTYPE html>
<html lang="en">
<!--head：代表網頁頭部-->
<head>
<!--    meta：用來描述網站的一些資訊，一般用來做SEO（Search Engine Optimization，搜尋引擎最佳化）-->
    <meta charset="UTF-8">
    <meta name="keywords" content="關鍵詞">
    <meta name="description" content="描述資訊">
<!--    title：網頁標題-->
    <title>第一個網頁</title>
</head>
<body>
<!--body：代表網頁主體-->
</body>
</html>

常用標籤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本標籤</title>
</head>
<body>
<!--標題標籤-->
<h1>一級標籤</h1>
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
<h6>六級標籤</h6>

<!--段落標籤-->
<p>段落1 </p>
<p>段落2 </p>
<p>段落3 </p>
<p>段落4 </p>
<!--水平線標籤-->
<hr/>

<!--換行標籤-->
文字1<br/>
文字2<br/>
<!--粗體、斜體-->
<strong>粗體</strong>
<em>斜體</em><br/>
<!--特殊符號-->
空格:&nbsp;<br/>
大於：&gt;<br/>
小於：&lt;<br/>
版權符合：&copy;<br/>

</body>
</html>

3.影像、超連結、網頁佈局

3.1.影像標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影像標籤</title>
</head>
<body>
<!--
src：圖片地址（推薦使用相對路徑）
alt：影像未載入時顯示
-->
<img src="http://gips2.baidu.com/it/u=844435709,4181700723&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280" alt="影像名稱" title="懸停文字" width="300" height="300">
</body>
</html>

3.2.超連結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>連結標籤</title>
</head>
<body>
<!--name屬性被棄用-->
<a id="top">頂部</a>
<!--
href：表示要跳轉到哪個頁面
target：表示視窗在哪兒開啟
    _blank：新建視窗
    _self：當前視窗
-->
<a href="https://www.baidu.com" target="_blank">百度</a>
<br/>
<a href="https://www.baidu.com">
    <img src="http://gips2.baidu.com/it/u=844435709,4181700723&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280" alt="影像名稱" title="懸停文字" width="300" height="300">
</a>
<!--錨連結
1.需要一個錨標記
2.跳轉到標記
#
-->
<a href="#top">回到頂部</a>
</body>
</html>

3.3.行內元素和塊元素

塊元素：無論內容多少，該元素獨佔一行（p、h1-h6……）
行內元素：內容撐開寬度，左右都是行內元素的可以排在一行（a、strong、em……）

4.列表、表格、媒體元素

4.1.列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表標籤</title>
</head>
<body>
<!--有序列表-->
<ol>
  <li>java</li>
  <li>python</li>
  <li>C/C++</li>
</ol>
<hr/>
<!--無序列表-->
<ul>
  <li>java</li>
  <li>python</li>
  <li>C/C++</li>
</ul>
<!--自定義列
dl：標籤
dt：列表名稱
dd：列表內容
表-->
<dl>
  <dt>學科</dt>
  <dd>java</dd>
  <dd>python</dd>
  <dd>C/C++</dd>

  <dt>位置</dt>
  <dd>上海</dd>
  <dd>武漢</dd>
  <dd>四川</dd>
</dl>

</body>
</html>

4.2.表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格table
行：tr
列：td
-->
<table border="2">
  <tr>
<!--    colspan：跨列-->
    <td colspan="3">1-1</td>
  </tr>
  <tr>
<!--    rowspan：跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
  </tr>
</table>
</body>
</html>

4.3.媒體元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒體元素</title>
</head>
<body>
<!--音訊和影片
controls：控制影片播放
autoplay：自動播放
-->
<!--<video src="xxxx.mp4" controls autoplay></video>-->

<audio src="xxxxx.mp3" controls autoplay></audio>
</body>
</html>

5.表單及表單應用

5.1.頁面結構

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁面結構</title>
</head>
<body>
<header><h2>網頁頭部</h2></header>
<section><h2>網頁主體</h2></section>
<footer><h2>網頁尾部</h2></footer>
</body>
</html>

5.2.iframe 內聯框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe內聯框架</title>
</head>
<body>
<!--iframe內聯框架-->
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://cn.bing.com/" target="hello">點選跳轉</a>
</body>
</html>

5.3.表單

表單語法：
image

表單元素格式：
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入註冊</title>
</head>
<body>
<h1>註冊</h1>
<!--表單 form
action：表單提交的位置，可以是網站，也可以是一個請求處理地址
method：post、get 提交方式
-->
<form action="我的第一個網頁.html" method="get">
<!--  文字輸入框，placeholder：提示資訊-->
  <p>名字：<input type="text" name="username" placeholder="請輸入使用者名稱"></p>
<!--  密碼框-->
  <p>密碼：<input type="password" name="pwd"></p>
<!--  單選框標籤，name：表示組-->
  <p>性別：
    <input type="radio" value="boy" name="sex" />男
    <input type="radio" value="girl" name="sex" />女
  </p>
<!--  多選框，checked：預設選擇-->
  <p>愛好：
    <input type="checkbox" value="sleep" name="hobby" checked />睡覺
    <input type="checkbox" value="code" name="hobby" />敲程式碼
    <input type="checkbox" value="chat" name="hobby" />聊天
  </p>
<!--  按鈕
      button：普通按鈕
      image：影像按鈕
      submit：提交按鈕
      reset：重置
-->
  <p>按鈕：
    <input type="button" name="btn1" value="點選" />
    <input type="image" src="影像標籤.html" />
  </p>
  <input type="submit">
  <input type="reset">
</form>

</body>
</html>

5.4.下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
</head>
<body>
<!--下拉框，selected：預設選擇-->
<p>國家：
  <select name="country" id="">
    <option value="china">中國</option>
    <option value="us">美國</option>
    <option value="eth" selected>瑞士</option>
    <option value="yingdu">印度</option>
  </select>
</p>
<!--文字域-->
<p>反饋：
  <textarea name="textarea" cols="30" rows="10">文字內容</textarea>
</p>
<!--檔案域-->
<p>
  <input type="file" name="files" />
  <input type="button" value="上傳" name="upload">
</p>
</body>
</html>

6.表單初級驗證

6.1.郵件驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>郵件驗證</title>
</head>
<body>
<!--郵件驗證-->
<p>郵箱：
  <input type="email" name="email">
</p>
<!--URL-->
<p>URL：
  <input type="url" name="url">
</p>
<!--數字
  step：步長
-->
<p>數字：
  <input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑塊-->
<p>音量：
  <input type="range" name="voice" min="0" max="100" step="5">
</p>
<!--搜尋框-->
<p>
  <input type="search" name="search">
</p>
</body>
</html>

6.2.表單的應用

readonly：只讀
disabled：禁用
hidden：隱藏域

增強滑鼠可用性：

<form action="">
  <p>
    <input type="search" name="search" id="mark" />
  </p>
  <p>
<!--    增強滑鼠可用性-->
    <label for="mark">你點我試試</label>
    <input type="text">
  </p>
</form>

6.3.表單初級驗證

常用方式：

  • placeholder：輸入框中用於提示資訊
  • require：非空判斷
  • pattern：正規表示式
<form>
<!--  常用正規表示式：https://www.jb51.net/tools/regexsc.htm-->
  <p>郵箱：
    <input type="text" name="diymail" pattern="正規表示式">
  </p>
</form>

相關文章