目标 Objective

内容 Content

  1. Lorem ipsum dolor sit.
  2. Aperiam beatae odit consectetur?
  3. Consectetur amet repellat error?
  4. Cum, delectus deserunt? Magni.
  5. Atque illum reiciendis ut.

回顾 Review

引言 Introduction

标签 Tags

常见标签 Tags

  1. 划分网页；包括用户不可见部分 <head> 和可见部分 <body>
    2. 页面结构标签
    item desc
    <html> HTML页面根元素；定义了整个 HTML 文档
    <head> HTML页面头部元素
    <body> HTML页面主体元素；包括脚本标签<script>
  2. 划分页面结构；页面的各个功能区
    3. 框架结构标签
    item desc
    <article> 完整的文章结构；通常包括以下结构化标签
    <header> 页眉/头部信息，通常用在<body>；<article>和<section>头部
    <nav> navigation；导航，使用<ul>实现；顶部、侧边、分页导航
    <aside> 侧边栏
    <section> 节元素，类似于<div>，但是HTML5建议应带上标题<header>；如果不需要标题，使用<div>即可
    <footer> 页脚/底部信息，通常位于<body>、<article>底部，包括：版权声明、友情链接、备案信息等
    <h1> - <h6> headline；标题，h1只能出现一次；便于搜索引擎为网页编制索引
    <p> paragraph；段落
    <div> division；块，用于分隔区域/布局；对搜索引擎来说，无语义，不利于网站的推广和使用
    <span> 行内块；对搜索引擎来说，无语义
  3. 页面组成元素；具备一定的语义
    4. 普通元素标签
    item desc
    <a> anchor；超链接/导航；单级导航可直接使用；多级导航应配合列表
    <img> image；图像；多使用<figure>或<picture>代替
    <figure> 图形标签，配合<figcaption>一起使用，可以取代<img>
    <picture> 图片标签，组合标签；配合<source>、<img>一起使用，可以实现响应式开发
    <ul><li>
    <ol><li>
    <dl><dt><dd>    		 <ul>；unordered list 有序列表；其子标签只能是列表项<li>
    <ol>；ordered list 无序列表；其子标签只能是列表项<li>
    <dl>；defined list 自定义列表；其子标签只能是：<dt>、t:title；<dd>、d:description
    <table> 表格；由行列组成
    <tr>；行
    <th>；标题行单元格
    <td>；普通单元格
    <form> 表单
    <input>；单行文本输入框、单选、多选
    <label>；标签
    <textarea>；多行文输入本框
    <select>；下拉列表
    <button>；按钮等
    <audio> 音频
    <video> 视频
    <iframe> inner-frame；内联框架；在当前页面嵌入/显示另外一个页面；早期使用较多
  4. 其它
    5. 其他标签
    item desc
    <pre> 定义预格式文本/按照原始代码的排列方式进行显示
    <code> 定义计算机代码
    <details> 细节|更多标签，用于区域的折叠和展开
    <summary> 配合<details>使用，定义标题
    <sup> 定义上标字
    <sub> 定义下标字
    <small> 小字体标签
    <progress> 动态进度条标签
    <meter> 静态进度条

标签属性 Attribute

标签属性 Attribute
类别 说明
id ID属性，唯一标识元素
class 类样式属性；一个元素可以指定多个类，以空格分隔
style 内联样式属性
data- 数据属性[自定义属性]
title 额外提示信息
alt 替换属性
contenteditable 是否可编辑
src 资源路径属性
href 超链接地址属性
hidden 隐藏属性
checked 选中属性
selected 选中属性

标签分类 Classification

  1. 行内元素/内联元素/行盒 inline
    2. display: inline;

    . 根据本身内容占有空间，在文档流中从左到右依次显示

    . 不能设置宽度，不会独占一行

    . 满行时候切换到下一行重新开始

    . 行内元素和文字一样，并不是紧紧挨着，而是有一定的间隙

    . 常见的有：<a> <i> <span> <label> <small> <img> <audio> <video>

  2. 行内块元素 inline-block
    3. display: inline-block;

    . 可以设置宽度的内联元素

    . 在文档流中的排列方式同 inline

    . 数量很少： <input> <button>

  3. 块级元素/块盒 block
    4. display: block;

    . 可以设置宽度

    . 独占一行，在文档流中从上到下依次排列

    . 大部分标签都是块级元素；很多结构化的标签，如 <header> 本质上都是块元素

表格 Table

表格思维导图
  1. <table>
    • 表格容器
    • display 类型是 tabel，inline-block
  2. <caption>
    • 表格的标题/题注/说明
    • 如果指定，必须是表格第一个子元素
    • 部分属性需要单独设置，如背景色
  3. <thead>
    • 表格的头部
    • display 类型是 table-row-group
    • 需手动添加
  4. <tbody>
    • 表格的主体
    • display 类型是 table-row-group
    • 系统自动添加
  5. <tfoot>
    • 表格的尾部
    • display 类型是 table-row-group
    • 需手动添加
  6. <tr>
    • 表格的行
    • display 类型是 table-row，它的子元素只能是 <td> 或 <th>
    • <tr> 至少有一个单元格 <td> 有数据；否则空行会被压缩
  7. <th>
    • 单元格；通常 出现表格标题行/首行，也可以出现在任何位置
    • display 类型是 table-cell
  8. <td>
    • 单元格；表格的普通单元格
    • display 类型是 table-cell
<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot> 
<table>
[] 示例 - 使用表格展示学生基本信息，如学号、姓名、专业、年级等

列表 List

列表思维导图

有序列表 Ordered List

  1. <ol>
    • 列表容器
    • 块盒 block
    • 使用属性 type 指定排序方式；默认按照数字升序排序
    • 可以嵌套使用
  2. <li>
    • 列表项
    • 列表项 list item；块盒 block
    • <ol> 的子元素只能是 <li>
有序列表属性
item desc
type 编号的类型：阿拉伯数字1、字母a、A和罗马数字i、I
start 从哪个序号开始；始终是整数
reversed 反向编号；倒序排列 
<ol>
  <li>Lorem.</li>
  <li>Quos.</li>
  <li>Ipsum.</li>
  <li>Repudiandae.</li>
</ol>
[] 示例 - 学习计划

无序列表 Unordered List

  1. <ul>
    • 列表容器
    • 块盒 block
    • 可以嵌套使用
  2. <li>
    • 列表项 list item
    • 块盒 block
    • <ul> 的子元素只能是 <li>
无序列表属性 type
item desc
disc 点；默认标记
square 方块
circle 圆圈 
<ul>
  <li>Lorem.</li>
  <li>Quos.</li>
  <li>Ipsum.</li>
  <li>Repudiandae.</li>
</ul>
[] 示例 - 新歌排行榜

自定义列表 Definition list

  1. <dl>
    • 列表容器
    • 块盒 block
    • 一个 <dl> 可以有多个 <dt>、多个 <dd>
    • 也可以使用多个<ul> 代替
  2. <dt>
    • 列表项
    • 块盒 block
    • 定义列表项标题 Description Term / Definition Title - 数据项的汇总/分类标题
  3. <dd>
    • 列表项
    • 块盒 block
    • 定义列表项详情/描述 Description Details / Definition Description - 各个数据项
<dl>
  <dt>lorem3</dt>
  <dd>Lorem, ipsum dolor.</dd>
  <dd>Repudiandae, pariatur nulla?</dd>
  <dd>Totam, mollitia et!</dd>
  <dt>lorem3</dt>
  <dd>Lorem, ipsum dolor.</dd>
  <dd>Vero, optio explicabo.</dd>
  <dd>Temporibus, reiciendis ipsa!</dd>
</dl>
[] 示例 - 网页底部页脚信息资源区

多媒体 Multimedia

多媒体思维导图

图片 <img>

图形 <figure>

音频 <audio>

视频 <video>

图像 <picture>

画布 <canvas>

可缩放矢量图形 <svg>

表单 Form

表单思维导图

表单 <form>

输入 <input>

标签 <label>

按钮 <button>

文本域 <textarea>

选择 <select>

练习 Drill

  1. 表格：个人简介
  2. 图片：相册
  3. 音频：播放器
  4. 表单：登录

小结 Summary

作业 Homework

  1. 标签综合运用

参考 Reference

  1. 超链接 <a>
  2. 导航 <nav>
  3. 内联框架 <iframe>
  4. 列表 List
  5. 实体 Entity
  6. 伪元素 ::before
  7. 阿里字体图标 Iconfont
  8. 计数器 Counter
  9. 图片 <img>
  10. 图形 <figure>
  11. 图像 <picture>
  12. 画布 <canvas>
  13. 可缩放矢量图形 <svg>
  14. 音频 <audio>
  15. 视频 <video>
  16. 轨道 <track>
  17. 字幕 ::cue
  18. 表单 <form>
  19. 输入 <input>
  20. 标签 <label>
  21. 按钮 <button>
  22. 文本域 <textarea>
  23. 选择 <select>