HTML簡介

HTML和文本

HTML5中變化

• doctype.meta

• 新增予以花標籤和屬性

• 去掉純展現型標籤

• canvas, video, audio, 離線，本地存儲，拖拽

列表

無序列表
    有序列表
    <h1>世界電影</h1>
    <ol start="2">
        <li>泰坦尼克號</li>
        <li>泰坦尼克號</li>
        <li>泰坦尼克號</li>
    </ol>
    定義列表
    <h3>霸王別姬</h3>
    <dl>
        <dt>導演</dt>
        <dd>陳凱歌</dd>
        <dt>主演</dt>
        <dd>張國榮</dd>
        <dd>鞏俐</dd>
    </dl>

引用

<blockquote cite="www.baidu.com"><p>我最喜歡的一本書是小王子我最喜歡的一本書是小王子我最喜歡的一本書是小王子</p></blockquote>
<p>在<cite>第一章</cite>咱們講過,<q>字符串是不可變量</q> </p>

預格式化文本

<p>第一行 空   格
換行
</p>

<pre>第一行 空   格
換行</pre>

代碼

<code>const add = (a, b) => a * b;</code>
<p>const add = (a, b) => a * b;</p>
<p>能量<var>E</var>等於質量<var>m</var>乘以光速<var>c</var>的平方</p>
<p>按下<kbd>F12</kbd>打開瀏覽器開發工具</p>

figure 不單單能夠放圖片

<figure>
    <img src="http://placekitten.com/300/300">
    <figcaption>圖片圖片圖片</figcaption>
</figure>

強調

<strong>重要性,嚴重性，緊急性</strong>
<em>從一句話中突出某個詞語</em>
<b>將語句從視覺上可其餘部分區分，好比一篇論文的關鍵詞</b>
<i>換一種語調去說一句話時，好比對話中的旁白</i>

上標和下標

<p>E=MC<sub>2</sub></p>
<p>CO<sub>2</sub></p>

插入和刪除

<p><del>原價288</del><ins>特價188</ins></p>

實體字符

&   < > © ¥ ☯

html表格

<table border="1">
    <caption>瀏覽器及其引擎</caption>
    <thead>
        <tr>
            <th>瀏覽器</th>
            <th>渲染引擎</th>
            <th>javaScript 引擎</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Chrome</th>
            <td rowspan="2">Blink</td>
            <td rowspan="2">v8</td>
        </tr>
        <tr>
            <th>Opera</th>
        </tr>
        <tr>
            <th>Firefox</th>
            <td>Gecko</td>
            <td>SpiderMonkey</td>
        </tr>
        <tr>
            <th>Edge</th>
            <td>EdgeHTML</td>
            <td>Chakra</td>
        </tr>
    </tbody>
</table>

meta

<!-- 編碼 -->
<meta charset="UTF-8">
<!-- 指定HTTP Header -->
<meta http-equiv="Content-security-Policy">
<!-- SEO 搜索引擎優化-->
<meta name="keyword" content="關鍵詞">
<meta name="description" content="頁面介紹">
<!-- 移動端viewport -->
<meta name="viewport" content="initial-scale=1">