HTML5 基礎

HuDu發表於2020-07-03
HTML

本博文不包括CSS和JavaScript

HTML基本結構

HTML眾所周知是超文字標記語言，之所以叫超文字標記語言肯定是有超過一般文字的地方，包括很多多媒體元素等。
一般最簡單的HTML包括頭部，標題，頁面的主體這幾部分

<!--DOCTYPE:文件型別，告訴瀏覽器使用什麼規範-->
<!DOCTYPE html>
<html lang="en">
<!--head代表網頁頭部-->
<head>
<!--  meta描述網站一些資訊  -->
<!--  meta一般用來做SEO  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="我的第一個網站"/>
    <meta name="description" content="hahaha">
    <!--網頁標題-->
    <title>My First Web</title>
</head>
<!--body網頁主題-->
<body>
Hello,World!
</body>
</html>

常用基本標籤

包括<h1></h1>等標題標籤，<p></p>段落標籤，<hr/>水平線標籤，<br/>換行標籤。
還有可以直接對字型進行修飾的標籤<strong>加粗，<em>斜體等。
還有很多特殊符號例如&nbsp;空格，&gt;大於號，&lt;小於號，&copy;版權符號等。

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

<!--段落標籤-->
<h2>樂遊原 / 登樂遊原</h2>
<h5>唐代：李商隱</h5>
<p>向晚意不適，驅車登古原。</p>
<p>夕陽無限好，只是近黃昏。</p>

<!--水平線標籤-->
<hr/>

<!--換行標籤-->
向晚意不適，驅車登古原。<br/>
夕陽無限好，只是近黃昏。<br/>

<!--粗體斜體-->
<strong>I love u</strong>
<em>I love u</em><br/>

<!--特殊符號-->
空格:&nbsp;&nbsp;空格
<br/>
大於號:&gt;
<br/>
小於號:&lt;
<br/>
&copy;版權所有

</body>
</html>

影像、連結標籤

<img>影像標籤，<a>連結標籤，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>連結</title>
</head>
<body>

<!--使用name標記-->
<a name="top">頂部</a>

<!--a標籤
href：必填
target:表示視窗在哪裡開啟
    _blank:當前
    _self：另一個
-->

<a href="3.photo.html" target="_blank">點選我跳轉</a>
<a href="https://www.baidu.com" target="_self">點選我跳轉</a>

<br>

<p>
    <a href="1.First.html">
        <img src="../resources/image/1.jpg" alt="圖片載入失敗" title="Photo" width="600" height="400">
    </a>
</p>
<p>
    <a href="1.First.html">
        <img src="../resources/image/1.jpg" alt="圖片載入失敗" title="Photo" width="600" height="400">
    </a>
</p>
<p>
    <a href="1.First.html">
        <img src="../resources/image/1.jpg" alt="圖片載入失敗" title="Photo" width="600" height="400">
    </a>
</p>
<p>
    <a href="1.First.html">
        <img src="../resources/image/1.jpg" alt="圖片載入失敗" title="Photo" width="600" height="400">
    </a>
</p>


<!--錨連結
需要一個錨標記
跳轉標記
#
-->
<a href="#top">回到頂部</a>

<a name="down">底部</a>


<!--功能性連結
郵件連結：mailto
QQ連結

-->

<a href="mailto:2345366364@qq.com">點選聯絡我</a>

<a target="_blank" href="1.First.html">
    <img src="../resources/image/1.jpg" alt="圖片記載失敗" width="50" height="50">
</a>

</body>
</html>

列表，表格，媒體標籤，內聯標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表order list-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>Linux</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>
<hr>
<!--無序列表
導航，側邊欄
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>Linux</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<!--自定義列表 define list define title
dl：標籤
dt：列表標題
dd：列表內容
網站底部
-->
<dl>
    <dt>學習</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C</dd>
    <dt>位置</dt>
    <dd>江蘇</dd>
    <dd>雲南</dd>
    <dd>杭州</dd>
</dl>

<!--表格
行   table rows  tr
列   table date  td
-->

<table  border="1px">
 <tr>
      <!--跨列-->
      <td  colspan="4">1-1</td>
  </tr>
 <tr>
      <!--跨行-->
      <td  rowspan="2">2-1</td>
     <td>2-2</td>
     <td>2-3</td>
     <td>2-4</td>
 </tr>
 <tr>
     <td>3-1</td>
     <td>3-2</td>
     <td>3-3</td>
  </tr>
</table>

<!--音訊和視訊
src:資源路徑
controls:控制條
autoplay:自動播放
-->
<video  src="../resources/video/測試.mp4" controls autoplay width="600px" height="450px"></video>

<audio  src="../resources/audio/1.flac" controls></audio>

<!--iframe
src：地址
w-h：寬高
name
-->
<iframe  src="" name="hello" frameborder="0" width="800px" height="450px"></iframe>

<a  href="https://www.baidu.com" target="hello">點選跳轉</a>

</body>
</html>

表單

<!DOCTYPE html>
<html  lang="en">
<head>
 <meta  charset="UTF-8">
 <title>登入註冊</title>
</head>
<body>
<!--
method：必填，表示什麼請求方式
action：必填：表示向何處傳送表單，可以是網站，也可以是一個處理地址
 get方式提交:我們可以在url中看到我們提交的資訊，不安全，高效 post：比較安全，可以傳輸大檔案-->
<h1>註冊</h1>
<form  action="1.First.html" method="post">
  <!--文字輸入框
 value="請輸入名字" maxlength="8" size="30" readonly hidden disable value：預設值 placeholder：提示資訊 required：非空判斷 pattern：正規表示式 -->  
 <p>名字：
     <input  type="text" name="username" placeholder="請輸入使用者名稱" required>
 </p>
 <p>密碼：
     <input  type="password" name="pwd" value="123" hidden>
 </p>

  <!--單選框-->
  <p>性別：
        <input  type="radio" value="boy" name="sex" checked/>男
        <input  type="radio" value="girl" name="sex" disabled>女
    </p>

  <!--多選框-->
  <p>
  愛好：
        <input  type="checkbox" value="sleep" name="hobbies">睡覺
        <input  type="checkbox" value="coding" name="hobbies">程式碼
        <input  type="checkbox" value="Animal" name="hobbies" checked>動漫
        <input  type="checkbox" value="fishing" name="hobbies">釣魚
        <input  type="checkbox" value="camping" name="hobbies">野炊
    </p>

  <!--按鈕
 input type="button" input type="image" input type="submit" input type="reset" -->  
 <p>按鈕
        <input  type="button" name="btn1" value="點選變長">
<!--        <input type="image" src="../resources/image/1.jpg" width="60px" height="30px">-->
  </p>

  <!--下拉框-->
  <p>
  下拉框：
        <select  name="別表名稱" id="">
 <option  value="shagnhai">上海</option>
 <option  value="nanjing">南京</option>
 <option  value="suzhou" selected>蘇州</option>
 <option  value="hangzhou">杭州</option>
 </select>
 </p>

  <!--文字域-->
  <p>
  反饋
        <textarea  name="textarea" cols="50" rows="10">文字內容</textarea>
 </p>

  <!--檔案域-->
  <p>
 <input  type="file" name="files">
 <input  type="button" value="上傳" name="upload">
 </p>

  <!--郵件驗證-->
  <p>郵箱：
        <input  type="email" name="email">
 </p>

  <!--url-->
  <p>URL：
        <input  type="url" name="url">
 </p>

  <!--數字-->
  <p>年齡：
        <input  type="number" name="num" max="130" min="0" step="10">
 </p>

  <!--滑塊-->
  <p>音量：
        <input  type="range" name="vioce" min="0" max="100" step="5">
 </p>

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

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

  <!--自定義郵箱-->
  <p>自定義郵箱
        <input  type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
 </p>

 <p>
 <input  type="submit" value="提交資訊">
 <input  type="reset" value="清空表單">
 </p>

</form>

</body>
</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章