Web

超文本标记语言

HTML

代码示例：

<!DOCTYPE html>  <!-- H5标准网页声明 -->
<html lang="zh-CN">  <!-- 开始标签（lang属性：标记这个网页显示的语言是什么种类的，zh-CN：简体中文） -->
<head>  <!-- 头标签开始（此部分不会出现在页面显示当中） -->
    <meta charset="UTF-8">  <!-- 指定网页编码为UTF-8 -->
    <title>Hello World!</title>  <!-- 标题（标签页的名字） -->
    <style>  /* 层叠样式表的标签（h1：选择渲染的标签为h1标签，作用于所有默认属性的h1标签） */
    h1 {
        color: red;  /* 指定颜色为红色 */
        font-size: 100px;  /* 指定字体大小为100像素 */
        font-family: sans-serif;  /* 指定字体类型 */
    }

    .Foo {  /* 用类名标识选择渲染对应的标签 */
        color: aqua;
    }
    </style>
</head>  <!-- 头标签结束 -->
<body>  <!-- 主体标签开始（此部分显示在页面当中，此标签体可直接写入字符显示） -->
    hello
    <h1>Foo</h1>  <!-- 一级标题（字体突显一级显示） -->
    <hr>  <!-- 水平分割线 -->
    <h2>Foo    Hoo<br>Bar</h2>  <!-- 二级标题（字体突显二级显示，浏览器有空白折叠功能，无论标题内容有多少个空格都合并成一个空格） -->
    <!-- br标签（换行） -->
    <h3 class="Foo">Hoo</h3>  <!-- class属性（给h3标签设置类名标识） -->
    <p>Hello world!</p>  <!-- 段落（上下两行都有换行） -->
    <button onclick="foo()">按钮</button>  <!-- 按钮标签（onclick：鼠标点击按钮之后触发的事件） -->
    <script>
        function foo(){  // window.alert（提示信息）
            window.alert('黑崎时雨');
        }
    </script>  <!-- 脚本标签 -->
</body>  <!-- 主体标签结束 -->
</html>  <!-- 结束标签 -->

字符实体

标签注释
sup上标
sub下标
strong粗体
em斜体
del删除线
ins下划线

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>Foo<sup>[foo]</sup></p>
    <p>Bar<sub>[bar]</sub></p>
</body>
</html>

列表

  1. 有序
  2. 无序
  3. 定义
标签注释
ol有序列表项
li列表
ul无序列表项
dl定义列表项
dt列表的标题
dd列表的内容

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ol>
        <li>Foo</li>
        <li>Bar</li>
    </ol>
    <ul>
        <li>Foo</li>
        <li>Bar</li>
    </ul>
    <dl>
        <dt>Foo</dt>
        <dd>Bar</dd>
    </dl>
    <ul>  <!-- 嵌套 -->
        <li>
            <ol>
                <li>Foo</li>
            </ol>
        </li>
    </ul>
</body>
</html>

图片

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="" alt="">  <!-- alt：当图片无法正常加载时显示的文本 -->
</body>
</html>

超链接

  1. 页面
  2. 锚点
  3. 功能

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            color: aqua;
            text-decoration: none;  /* 下划线的属性 */
        }

        a:hover {  /* :hover：鼠标悬停时发生的事件 */
            color: red;
        }
    </style>
</head>
<body>
    <a href="" target="_blank">Foo</a>  <!-- href：要通向的链接，target：通向链接的方式 -->
    <a id="foo"></a>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <h1>Hoo</h1>
    <a href="#foo">回到顶部</a>
    <div>  <!-- 逻辑区域 -->
        <a href="mailto:test@example.com">联系方式</a>
    </div>
</body>
</html>

表格

标签注释
table表格项
tr表格的行
td表格的列
caption表格的标题
th加粗并居中表格的文本
thead表头
tbody表体
tfoot表尾

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <caption>Foo</caption>
        <thead>
            <tr>
                <td>td</td>
                <td>td</td>
                <td>td</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>th</th>
                <th>th</th>
                <th>th</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>td</td>
                <td rowspan="2" colspan="2">td</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表单

  1. TCP/IP协议
    • 应用层（HTTP/HTTPS）
    • 传输层（TCP/UDP）
    • 网络层（寻址与路由）
    • 网络接口层（接入网络）
  2. 请求类型
    • get（从服务器获取资源）
    • post（提交数据给服务器）
    • delete（删除服务器的资源）
    • put（修改服务器的资源）
    • patch（更新服务器的资源）
标签注释
form表单项
fieldset表单的内容区域边框
legend表单的标题
input输入数据
select下拉表单
option下拉表单的选项
textarea多行文本区

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">  <!-- action：处理请求的程序，method：请求类型，enctype：上传文件的编码 -->
        <fieldset>
            <legend>表单</legend>
            <input type="text" name="foo" value="默认文本">  <!-- type：输入的数据类型，name：元素的名称，value：元素的值 -->
            <input type="radio" name="foo" checked>  <!-- checked：默选 -->
            <input type="radio" name="foo" checked>
            <input type="checkbox" name="foo">
            <select>
                <option value="foo">Foo</option>
                <option value="bar" selected>Bar</option>  <!-- selected：默认选项 -->
            </select>
            <textarea rows="7" cols="7"></textarea>  <!-- rows：默认行数，cols：默认列数 -->
            <input type="submit">
            <input type="reset">
            <input required placeholder="提示语" size="80px" maxlength="10" readonly>  <!-- required：内容不可为空，placeholder：框内提示语，size：输入框的长度，maxlength：允许输入的最大字符数量，readonly：输入框只读不可写，disabled：禁用输入元素 -->
        </fieldset>
    </form>
</body>
</html>

多媒体

标签注释
audio音频
source媒介
video视频
figure把图像用作文档的插图
figcaption给文档的插图添加描述
iframe内嵌页面

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <audio autoplay controls loop>  <!-- autoplay：自动播放，controls：显示播放控件，loop：循环播放 -->
        <source src="" type="audio/mp3">
        <source src="" type="audio/ogg">
    </audio>
    <video width="1600px" height="900px" controls autoplay loop>
        <source src="" type="video/mp4">
        <source src="" type="video/webm">
    </video>
    <figure>
        <p>233</p>
        <img src="" alt="">
        <figcaption>黑崎时雨</figcaption>
    </figure>
    <iframe src=""></iframe>
</body>
</html>