HTML日常知识备忘录

搬砖的乔布梭
225 阅读2分钟

常用标签

<i>倾斜</i>
<em>强调</em>

<b>加粗</b>
<strong>告诉SEO这个狠重要</strong>

<!-- 上标 -->
上标 买了100m<sup>2</sup>

<!-- 下标 -->
下标 水化学方程式 H<sub>2</sub>O

<!-- 转义字符 -->
注册商标 &reg;
空白 &nbsp;

<u>下划线</u>。
<del>删除线</del>

倾斜 强调

加粗 告诉SEO这个狠重要

注册商标®

上标 买了100m2

下标 水化学方程式 H2O

注册商标 ® 空白  

下划线。 删除线

列表项目符号

<!-- 英文字符 VS 罗马字符 -->
<!-- type="A/a/I/i"-->
<ol start="5" type="A">
    <li>梅西</li>
    <li>C罗</li>
    <li>姆巴佩</li>
</ol>

<ol start="5" type="i">
    <li>梅西</li>
    <li>C罗</li>
    <li>姆巴佩</li>
</ol>
  1. 梅西
  2. C罗
  3. 姆巴佩
  1. 梅西
  2. C罗
  3. 姆巴佩

自定义列表

<!-- 3.自定义列表 dl>dt+dd-->
<dl id="dali">
    <dt>大力神杯</dt>

    <dd>
        &nbsp;&nbsp;大力神杯，设计者为意大利艺术家西尔维奥·加扎尼加，官方称之为“国际足联世界杯奖杯（FIFA World Cup Trophy）”，是国际足联世界杯的奖杯，也是足球界最高荣誉的象征。
    </dd>

    <dd>
        &nbsp;&nbsp;大力神杯高36.8厘米，重6.175公斤，其中4.97公斤的主体由纯金铸造；基座宽13厘米，上面嵌有“FIFA”4个凸起的、用孔雀石雕刻的名字。整个奖杯看上去就像两个大力士托起了地球，故得此名；同时，奖杯上可以容纳17个镌刻冠军队名字的小铭牌——足以用到2038年世界杯。奖杯并没有固定“归属权”，每支冠军球队在拥有其4年之后，会在下一届世界杯举办时将奖杯带回。而每届世界杯冠军所拥有的“特权”，就是将自己国家或地区的名字刻在大力神杯的杯座下。
    </dd>

    <dd>
        &nbsp;&nbsp;世界杯赛自1930年至今共有过两座奖杯。从第一届到第九届，使用的是雷米特杯，巴西队于1970年夺冠后永久占有了该奖杯。1971年，时任国际足联主席斯坦利·劳斯领导的特别委员会从53份设计稿中，最终确定使用西尔维奥·加扎尼的设计方案，成就了今天的“大力神杯”。
    </dd>

    <dd>
        &nbsp;&nbsp;2022年11月20日，卡塔尔世界杯开幕，2018俄罗斯世界杯冠军法国队名宿德塞利高举大力神杯进入球场。
    </dd>
</dl>

image.png

楼层跳转

<a href="#f1">楼层1</a>
<a href="#f2">楼层2</a>
<a href="#f3">楼层3</a>
<a href="04列表.html#dali">外部跳转</a>

<p id="f1">楼层1</p>
<p id="f2">楼层2</p>
<p id="f3">楼层3</p>

表格布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 900px;
            height: 450px;
            margin: 100px auto;
            border: 2px solid #333;

            /* 合并相邻边框 */
            border-collapse: collapse;
        }

        caption{
            /* 粗细 字号/行高 字体 */
            font:200 26px/60px "宋体";
        }

        td {
            width: 100px;
            height: 30px;
            border: 1px solid #666;

            /* 文本水平居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 语法：table>tr>td -->
    <!-- 1.border="边框" -->
    <!-- 2.cellspacing="单元格与单元格间距" -->
    <!-- 3.cellpadding="单元格与内容的间距" -->
    <!-- 4.width="宽"  height="高" -->
    <!-- 5.caption表格标题 -->
    <!-- 6.colspan="合并列" -->
    <!-- 7.rowspan="合并行" -->
    <!-- 8.border-collapse: collapse合并相邻单元格边框 -->

    <table border="0" cellspacing="0" cellpadding="0">
        <caption>座位表</caption>
        <tr>
            <td colspan="9">
                12月19日&nbsp;&nbsp;&nbsp;&nbsp;
                HTML5-2201&nbsp;&nbsp;&nbsp;&nbsp;
                项目7
            </td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="16">过道</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <!-- <td>过道</td> -->
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>陈某某</td>
            <td>零某某</td>
            <td></td>
            <td>张某</td>
            <!-- <td>过道</td> -->
            <td></td>
            <td></td>
            <td>黄某某</td>
            <td>黄某某</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <!-- <td>过道</td> -->
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>陈某某</td>
            <td>零某某</td>
            <td></td>
            <td>张某</td>
            <!-- <td>过道</td> -->
            <td></td>
            <td></td>
            <td>黄某某</td>
            <td>黄某某</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <!-- <td>过道</td> -->
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>陈某某</td>
            <td>零某某</td>
            <td></td>
            <td>张某</td>
            <!-- <td>过道</td> -->
            <td></td>
            <td></td>
            <td>黄某某</td>
            <td>黄某某</td>
        </tr>
        <tr>
            <td colspan="9">讲台</td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
    </table>
</body>

</html>

image.png

音视频

<!-- 网页上所有内容(文本、图片、输入框、密码框、单选按钮复选按钮、表格) -->
<audio src="../audio/C400001S9O6V41UBae.mp3"></audio>

<video width="300" controls="controls" height="150"
    src="https://pgcvideo-cdn.xiaodutv.com/3158430346_3482328185_2017102518102920171025181937.mp4">
</video>
avatar
文章
阅读
粉丝