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">