HTML学习笔记

16 Feb 2021

Reading time ~1 minute

HTML(Hyper Text Markup Language)是用来描述网页的一种语言,它不是一种编程语言，而是一种标记语言 (markup language)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标题</title>
</head>
<body>

</body>
</html>

可打开.html文件, 直接输入html:5调出

语句

一些规范:

标签使用小写,元素必须闭合
空元素要加斜杠以闭合 eg. <br/>
不使用语义化,所有样式都存放于CSS中,内容与样式分离

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标题</title>
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <p>段落</p>

    <!--换行符-->
    <br />
    <!--分割线-->
    <hr />

    <!--列表，可嵌套-->
    <!--有序列表-->
    <ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>
    <!--无序列表-->
    <ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>

    <!--链接-->
    <a href="https://www.google.com/">链接显示的文本</a>
    <!--链接到页面特定位置，使用 ID 特性-->
    <a href="#top">回到顶部</a>
    <p id="top">顶部</p>
    <!--链接到其他页面的特定位置-->
    <a href="http://wiki-power.com/#top">跳转到站外页面的某个位置</a>

    <!--图像-->
    <img src="/xx.png" alt="无法加载时的文字说明" />

    <!--表格-->
    <table>
        <!--第一行-->
        <tr>
            <!--第一列-->
            <th></th>
            <!--第二列-->
            <th scope="col">周六</th>
            <!--第三列-->
            <th scope="col">周日</th>
        </tr>
        <!--第二行-->
        <tr>
            <th scope="row">数量</th>
            <td>120</td>
            <td>135</td>
        </tr>
        <!--第三行-->
        <tr>
            <th scope="row">收益</th>
            <!--跨列 colspan，跨行 rowspan-->
            <td colspan="2">500</td>
        </tr>
    </table>

    <!--表单，待补充-->
    <!--iframe，待补充-->
    <!--flash/视频/音频，待补充-->

</body>

</html>

DOCS