前端基礎-- HTML

時間 2019-11-24

標籤前端基礎 html 欄目 HTML 简体版

原文原文鏈接

HTML知識

HTML介紹

Web服務本質javascript

瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面css

HTML是什麼？

超文本標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言。
本質上是瀏覽器可識別的規則，咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的網頁。對於不一樣的瀏覽器，對同一個標籤可能會有不一樣的解釋。（兼容性問題）
網頁文件的擴展名： .html或.htm

HTML不是什麼？

HTML是一種標記語言（markup language），它不是一種編程語言。html

HTML使用標籤來描述網頁java

HTML文檔結構

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

經過觀察咱們發現, HTML基本結構中全部的標籤都是成對出現的, 這些成對出現的標籤中有一個帶/有一個不帶/, 那麼這些不帶/的標籤咱們稱之爲開始標籤, 這些帶/的咱們稱之爲結束標籤

<!DOCTYPE html>聲明爲HTML5文檔django

html標籤編程

做用：用於告訴瀏覽器這是一個網頁，也就是說告訴瀏覽器我是一個HTML文檔
注意：其它全部的標籤都必須寫在html標籤裏面, 也就是寫在html開始標籤和結束標籤中間

head標籤瀏覽器

做用：用於給網站添加一些配置信息
列如：外掛一些外部的css/js文件；添加一些瀏覽器適配相關的內容
注意：通常狀況下，寫在head標籤內部的內容不會顯示給用戶查看，也就是說通常狀況下寫在head標籤內部的內容咱們都看不到

title標籤服務器

做用：專門用於指定網站的標題，而且這個指定的標題未來還會做爲用戶保存網站的默認標題
注意：title標籤必須寫在head標籤裏面

body標籤網絡

做用：專門用於定義HTML文檔中須要顯示給用戶查看的內容（文字/圖片/音頻/視頻）
注意：雖說有時候將內容寫到了別的地方在網頁中也能看到，可是千萬不要這麼幹，必定要將須要顯示的內容寫在body中；一對html標籤中（一個html開始標籤和一個html標籤結束）只能有一對body標籤

HTML標籤

HTML標籤格式編程語言

HTML標籤是有尖括號包圍的關鍵字，如<html>,<div>等
HTML標籤一般是陳規定出現的，好比：<div>和</div>, 第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線。
也有一部分標籤是單獨呈現的，好比：<br/>、<hr/>、<img src="1.jpg"/>等。
標籤裏面能夠有若干屬性，也能夠不帶屬性。

標籤的語法

<標籤名屬性1="屬性值1" 屬性2="屬性值2"......>內容部分</標籤名>
<標籤名屬性1="屬性值1" 屬性2="屬性值2"....../>

幾個很重要的屬性

id：定義標籤的惟一ID，HTML文檔樹中惟一
class：爲html元素定義一個或多個類名(classname)（CSS樣式類名）
style：規定元素的行內樣式（CSS樣式）

HTML標籤分類

單標籤：只有開始標籤沒有結束標籤，也就是由一個<>組成的
```
<meta charset="UTF-8" />
```
雙標籤：有開始標籤和結束標籤，也就是由一個<>和一個</>組成的
```
<html>
</html>
```

HTML標籤關係分類

並列關係（兄弟/平級）
```
<head>
</head>
<body>
</body>
```

嵌套關係（父子/上下級）

<head>
        <meta charset="UTF-8" />
        <title>百度一下,你就知道123</title>
</head>

HTML註釋

<!--註釋內容-->

註釋是代碼之母。

HTML經常使用標籤

head內經常使用的標籤

標籤	意義
<title></title>	定義網頁標題
<style></style>	定義內部樣式表
<script></script>	定義JS代碼或引入外部JS文件
<link/>	引入外部樣式表文件
<meta/>	定義網頁原信息

Meta標籤

Meta標籤介紹：

<meta>元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的。

meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣網頁的功能。

http-equil屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

<!--2秒後跳轉到對應的網址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

name屬性：主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
```
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院">
```

body內經常使用的標籤

基本標籤(塊級標籤和內聯標籤)

<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>

<!--p標籤：段落標籤，注意：在瀏覽器中會單獨佔一行-->
<p>段落標籤</p>

<!--標題標籤-->
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

<!--換行-->
<br>

<!--水平線 分割線-->
<hr>

特殊字符

內容	對應代碼
空格
>	>
<	<
&	&
¥	¥
版權	©
註冊	®

div標籤和span標籤

div：div標籤用來定義一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。
span：span標籤用來定義內聯（行內）元素，並沒有實際的意義。主要是經過CSS樣式爲其賦予不一樣的表現。

div和span有什麼區別?

1.div會單獨的佔領一行,而span不會單獨佔領一行
2.div是一個容器級的標籤, 而span是一個文本級的標籤

塊級元素與行內元素的區別

所謂塊級元素，是以另起一行開始渲染的元素，行內元素則不須要另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。

這兩個元素是專門爲定義CSS樣式而生的。

注意：

關於標籤嵌套：一般塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。

p標籤不能包含塊級標籤，p標籤也不能包含p標籤。

img標籤

做用：在網頁上插入一張圖片

格式：

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

屬性：

屬性名稱	做用
src(source)	告訴瀏覽器須要`插入`的圖片路徑, 以便於瀏覽器到該路徑下找到須要插入的圖片
alt(alternate)	規定圖像的替代文本, `只有`在src指定的路徑下`找不到圖片`,纔會顯示alt指定的文本
title	懸停文本(介紹這張圖片, 只有在鼠標移動到圖片上時纔會顯示)
height	設置圖片顯示的高度
width	設置圖片顯示的寬度

注意點：img標籤添加的圖片默認的不是佔一整行空間；若是想讓圖片等比拉伸，只寫高度或者寬度便可；若是img標籤沒有指定須要顯示的圖片的寬高, 那麼系統會按照圖片默認的寬高來顯示；若是img標籤指定的寬高, 那麼系統會按照指定的寬高來顯示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img標籤</title>
</head>
<body>
<!--
1.img標籤中的img實際上是英文image的縮寫
因此img標籤的做用, 就是告訴瀏覽器咱們須要顯示一張圖片

2.img標籤格式: <img src="">
其實img標籤中的src是英文source的縮寫
因此img標籤中的src就是用來告訴img標籤, 須要顯示的圖片名稱

3.注意點
- 和H系列標籤/p標籤還有Hr標籤不同, img標籤不會獨佔一行
- 若是咱們手動指定了img標籤顯示的圖片的寬度和高度, 有可能會致使圖片變形, 那麼若是又想指定寬度和高度, 又不想讓圖片變形. 咱們能夠只指定寬度和高度其中的一個值便可
- 只要指定了高度, 系統會自動根據高度計算出寬度, 只要指定了寬度, 系統會自動根據寬度計算出高度, 而且都是等比拉伸的, 也就是說不會變形

4.img中的其它屬性
width: 寬度
height: 高度
因此在img標籤中width/height這兩個屬性的做用, 就是用來告訴img標籤未來須要顯示的圖片有多寬有多高
若是img標籤沒有指定須要顯示的圖片的寬高, 那麼系統會按照圖片默認的寬高來顯示
若是img標籤指定的寬高, 那麼系統會按照指定的寬高來顯示

title: 用於告訴瀏覽器, 當鼠標懸停在圖片上時, 須要彈出的描述框中顯示什麼內容

alt實際上是英文alternate的縮寫, 它的做用就是用於告訴瀏覽器, 當須要顯示的圖片找不到時顯示什麼內容

-->

<img src="images/QRCode.jpg">

<img src="images/QRCode.jpg" width="300" height="478">

<img src="images/QRCode.jpg" width="100" height="478">

<img src="images/QRCode.jpg" height="178">
<img src="images/QRCode.jpg" width="100">

<img src="images/QRCode.jpg" width="100" title="這個是圖片">

<img src="images/QRCode1.jpg" width="100" alt="對不起, 你須要查看的圖片不見了">
</body>
</html>

img示例

a標籤

做用：用於從一個頁面連接到另外一個頁面

格式：

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

屬性：

屬性名稱	做用
href(hypertext reference)	指定跳轉的目標地址
target	告訴瀏覽器是否保留原始界面, _blank表示在新標籤頁中打開目標網頁, _self表示在當前標籤頁中打開目標網頁
title	懸停文本(介紹這個連接, 只有在鼠標移動到超連接上時纔會顯示)

注意點：在a標籤之間必定要寫上文字, 若是沒有, 那麼在頁面上找不到這個標籤；a標籤也叫作超級連接或者超連接；a標籤不只可讓文字能夠點擊, 還可讓圖片也可以被點擊；一個a標籤必須有一個href屬性, 不然a標籤不知道要跳轉到什麼地方；若是經過a標籤的href屬性指定一個URL地址, 那麼必須在地址前面加上http://或https://；a標籤的href屬性除了能夠指定一個網絡地址之外, 還能夠指定一個本地地址

a標籤的其它用法：

假連接（本質是跳轉到當前頁面）

格式<a href="#">百度</a>
格式<a href="javascript:">百度</a>

跳轉到當前頁面指定位置（錨點連接）

格式<a href="#location">跳轉到指定位置</a>
在頁面的指定位置給任意標籤添加一個id屬性
例如 <p id="location">這個是目標</p>

跳轉到指定頁面的指定位置

格式: <a href="01-錨點連接.html#location">跳轉到指定位置</a>
只須要在01-錨點連接.html頁面添加一個id位置便可

下載（極力不推薦使用）

例如<a href="girl.zip">下載福利資源<a/>

列表標籤

列表標籤的做用：給一堆數據添加列表語義，也就是告訴搜索引擎告訴瀏覽器這一堆數據是一個總體

分類：無序列表；有序列表；定義列表

無序列表

給一堆數據添加列表語義, 而且這一堆數據中全部的數據都沒有前後之分

<ul type="disc">
  <li>第一項</li>
  <li>第二項</li>
</ul>

type屬性

disc （實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）

注意

ul標籤和li標籤是一個總體, 是一個組合. 因此通常狀況下ul標籤和li標籤都是一塊兒出現, 不會單個出現. 也就是說不會單獨使用一個ul標籤或者單獨使用一個li 標籤, 都是結合在一塊兒使用；因爲ul標籤和li標籤是一個組合, 因此ul標籤中不推薦包含其它標籤, 也就是說之後你在ul標籤中只會看到li標籤

應用場景：1.新聞列表；2.商品列表；3導航條

有序列表

有序列表的做用: 給一堆數據添加列表語義, 而且這一堆數據中全部的數據都有前後之分

<ol type="1" start="2">
  <li>第一項</li>
  <li>第二項</li>
</ol>

type屬性

1 數字列表，默認值
A 大寫字母
a 小寫字母
I 大寫羅馬
i 小寫羅馬

定義列表

給一堆數據添加列表語句；先經過dt標籤訂義列表中的全部標題，而後再經過dd標籤給每一個標題添加描述信息

<dl>
  <dt>標題1</dt>
  <dd>內容1</dd>
  <dt>標題2</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
</dl>

注意

dl和dt/dd是一個總體，因此他們通常狀況下不會單獨出現，都是一塊兒出現；因爲dl和dt/dd是一個組合標籤，因此dl中建議只放dt和dd標籤。

應用場景：作網站尾部的相關信息；作圖文混排。

表格標籤

表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。

完整結構

<table>
    <caption>表格的標題</caption>
    <thead>
        <tr>
            <th>每一列的標題</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>數據</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>數據</td>
        </tr>
    </tfoot>
</table>

caption做用: 指定表格的標題
thead做用:   指定表格的表頭信息
tbody做用:   指定表格的主體信息
tfoot做用:   指定表格的附加信息

格式

table定義表格
tr定義行
td定義單元格

<table>
  <thead>
  <tr>
    <th>序號</th>
    <th>姓名</th>
    <th>愛好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>槓娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

屬性

border：默認狀況下表格的邊框寬度爲0看不到, 經過border屬性給表格指定邊框寬度
width：默認狀況下表格的寬度是由內容自動計算出來的, 能夠經過width屬性指定表格的寬度
height：默認狀況下表格的高度是由內容自動計算出來的, 能夠經過height屬性指定表格的高度
cellspacing：外邊距. 默認狀況下單元格之間有2個像素的間隙, 能夠經過cellpadding指定表格之間的間隙
cellpadding：內邊距. 默認狀況下單元格邊緣距離內容有1個像素的內邊距, 能夠經過cellpadding屬性指定單元格邊緣和內容之間的內邊距
rowspan：單元格豎跨多少行
colspan：單元格橫跨多少列（即合併單元格）

form標籤

功能：

表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。
表單還能夠包含textarea、select、fieldset和 label標籤。

表單屬性

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）。
enctype	規定被提交數據的編碼（默認：url-encoded）。
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。
name	規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。

表單元素

基本概念：
HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
表單通常用來收集用戶的輸入信息
表單工做原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息。

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, 'wb') as f:
            for chunk in request.FILES['file'].chunks():
                f.write(chunk)
            return HttpResponse('上傳成功')
    return HttpResponse("收到了！")

urlpatterns = [
    url(r'^upload/', upload),
]

Django接收上傳文件代碼

input標籤

<input> 元素會根據不一樣的 type 屬性，變化爲多種形態。若是說td是表格最核心的標籤, 那麼input就是表單最核心的標籤. nput標籤有一個type屬性, 這個屬性有不少類型的取值, 取值的不一樣就決定了input標籤的功能和外觀不一樣

type屬性值	表現形式	對應代碼
text	單行輸入文本	<input type=text" />
password	密碼輸入框	<input type="password" />
date	日期輸入框	<input type="date" />
checkbox	複選框	<input type="checkbox" checked="checked" />
radio	單選框	<input type="radio" />
submit	提交按鈕	<input type="submit" value="提交" />
reset	重置按鈕	<input type="reset" value="重置" />
button	普通按鈕	<input type="button" value="普通按鈕" />
hidden	隱藏輸入框	<input type="hidden" />
file	文本選擇框	<input type="file" />

屬性說明：

name：表單提交時的「鍵」，注意和id的區別
value：表單提交時對應項的值
- type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容
- type="text","password","hidden"時，爲輸入框的初始值
- type="checkbox", "radio", "file"，爲輸入相關聯的值
checked：指定radio和checkbox默認值, 前提是同一組內容必須設置相同name屬性
readonly：text和password設置爲只讀
disabled：全部input均適用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>34-表單練習</title>
</head>
<body>

<form action="http://www.baidu.com">
    <fieldset>
        <legend>註冊界面</legend>
        <p>
            帳號: <input type="text" name="account">
        </p>
        <p>
            密碼: <input type="password" name="pwd">
        </p>
    <!--
    在單選框和多選框中,全部的項目的name必須一致
    在表單標籤中,除了按鈕標籤之外的標籤,均可以經過value來指定須要提交到服務器的數據
    -->
        <p>
            性別:
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" value="female">女
            <input type="radio" checked="checked" name="gender" value="yao">保密
        </p>
        <p>
            愛好:
            <input type="checkbox" name="sport" value="basketball">籃球
            <input type="checkbox" name="sport" value="football">足球
            <input type="checkbox" checked="checked" name="sport" value="crazy">足浴
        </p>
        <p>
            簡介:
            <textarea cols="30" rows="10" name="desc"></textarea>
        </p>
        <p>
            生日:
            <input type="date" name="birthday">
        </p>
        <p>
            郵箱:
            <input type="email" name="email">
        </p>
        <p>
            電話:
            <input type="number" name="phone">
        </p>
        <p>
            <input type="submit" value="註冊">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="清空">
        </p>
        </fieldset>
</form>
</body>
</html>

表單和input標籤練習

label標籤

做用：label標籤不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性

注意：表單元素要有一個id，而後label標籤就有一個for屬性，for屬性和id相同就表示綁定了；全部表單元素均可以經過label綁定

<!--給文本框添加綁定-->
<label for="account">帳號:</label>
<input type="text" id="account" />

<!--給單選框添加綁定-->
<input type="radio" name="sex" id="man" /> <label for="man">男</label>

<!--給多選框添加綁定-->
<input type="checkbox" id="basketball" />
<label for="basketball">籃球</label>

datalist標籤

做用：給輸入框綁定待選項

<datalist>
    <option>待選項內容</option>
</datalist>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>31-Datalist標籤</title>
</head>
<body>
<!--
1.datalist標籤
做用: 給輸入框綁定待選項

2.datalist格式:
<datalist>
    <option>待選項內容</option>
</datalist>

3.如何給輸入框綁定待選列表
1.搞一個輸入框
2.搞一個datalist列表
3.給datalist列表標籤添加一個id
4.給輸入框添加一個list屬性,將datalist的id對應的值賦值給list屬性便可
-->

請輸入你的車型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔馳</option>
    <option>寶馬</option>
    <option>奧迪</option>
    <option>路虎</option>
    <option>賓利</option>
</datalist>

</body>
</html>

示例

select標籤

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">廣州</option>
    <option value="4">深圳</option>
  </select>
</form>

屬性說明：

multiple：布爾屬性，設置後爲多選，不然默認單選
disabled：禁用
selected：默認選中該項
value：定義提交時的選項值

textarea標籤

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默認內容
</textarea>

屬性說明：

name：名稱
rows：行數
cols：列數
disabled：禁用

marquee標籤

做用：跑馬燈

格式：<marquee>內容</marquee>

屬性

direction: 設置滾動方向 left/right/up/down
scrollamount: 設置滾動速度, 值越大就越快
loop: 設置滾動次數, 默認是-1, 也就是無限滾動
behavior: 設置滾動類型 slide滾動到邊界就中止, alternate滾動到邊界就彈回

注意：marquee標籤不是W3C推薦的標籤, 在W3C官方文檔中也沒法查詢這個標籤, 可是各大瀏覽器對這個標籤的支持很是好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>39-marquee標籤</title>
    <style>
        marquee {
            width:200px;
            height:200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<!--滾動方向-->
<marquee>隨便寫點內容</marquee>
<marquee direction="right">隨便寫點內容</marquee>
<marquee direction="up">隨便寫點內容</marquee>
<marquee direction="down">隨便寫點內容</marquee>
<hr>
<!--設置滾動速度-->
<marquee scrollamount="1">隨便寫點內容</marquee>
<marquee scrollamount="100">隨便寫點內容</marquee>
<hr>
<!--設置滾動次數-->
<marquee loop="1">隨便寫點內容</marquee>
<hr>
<!--設置滾動類型-->
<marquee behavior="slide">隨便寫點內容</marquee>
<marquee behavior="alternate">隨便寫點內容</marquee>

<marquee>
    <img src="images/NJ.jpg" width="50px">
</marquee>
</body>
</html>

跑馬燈示例

詳情和概要標籤

什麼是詳情和概要標籤?

做用:利用summary標籤來描述概要信息, 利用details標籤來描述詳情信息

默認狀況下是摺疊展現, 想看見詳情必須點擊

格式:

<details>
    <summary>概要信息</summary>
    詳情信息
</details>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>38-詳情和概要標籤</title>
</head>
<body>
<!--
1.什麼是詳情和概要標籤?
做用:利用summary標籤來描述概要信息, 利用details標籤來描述詳情信息
默認狀況下是摺疊展現, 想看見詳情必須點擊

格式:
<details>
    <summary>概要信息</summary>
    詳情信息
</details>
-->

<details>
    <summary>鄭伊健</summary>
簡介：鄭伊健，1967年10月4日出生於中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝「陽光檸檬茶」廣告而入行，拜羅文爲師。1991年...
</details>
</body>
</html>

示例

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。