超文本标记语言(英語:HyperText Markup Language,简称:HTML) 是一种用于创建网页的标准标记语言。HTML 是一种基础技术,常与 CSS、JavaScript 一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取 HTML 文件,并将其渲染成可视化网页。

基本结构

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

一个 HTML 文件分两块,一块是 head 部,一块是 body 部,head 部用来描述网页,body 部 用来渲染。

块级元素和内联元素

我们日常看网页内容的时候,会按照从左往右,从上往下的方向看网页,那么怎么编排这些内容呢?

html 中把从左往右的标签叫内联元素 ,把从上往下排列的标签叫块级元素。所以,我们平时设计网页的时候,先要思考我们的网站是上下划分块呢,还是左右划分块,这样比较清晰。

块级元素有 : 标题(h1-h6),段落(p), div ,标题是因为我们不大希望标题右边还有东西,段落也一样,段落是一段一段的,这些是从上往下排列的

内联元素:其他小东西基本都是 ,什么链接,图片,格式化的文字,这些可以行内排列

布局块

  • section 章节

  • nav 导航

  • header 章节的头部

  • h1 标题

  • article 内容

  • aside 无关内容

  • footer 章节的尾部

  • address 联系信息

  • main 重要的内容

  • div 通用容器

列表

  • 有序列表(ordered list)- ol / li

  • 无序列表(unordered list)- ul / li

  • 定义列表(definition list)- dl / dt / dd

图像

  • img 图片

  • figure 图例

  • figcaption 图例说明

文本

  • 标题(heading)和段落(paragraph)

    • h1 ~ h6

    • p

  • 上标(superscript)和下标(subscript)

    • sup

    • sub

  • 空白(白色空间折叠)

  • 折行(break)和水平标尺(horizontal ruler)

    • br

    • hr

  • 语义化标签

    • 加粗和强调 - strong

    • 引用 - blockquote

    • 缩写词和首字母缩写词 - abbr / acronym

    • 引文 - cite

    • 所有者联系信息 - address

    • 内容的修改 - ins / del

表格

  • 基本的表格结构 - table / tr / td / th

  • 表格的标题 - caption

  • 跨行和跨列 - rowspan 属性 / colspan 属性

  • 长表格 - thead / tbody / tfoot

表单

  • 重要属性 - action / method / enctype

  • 表单控件(input)- type 属性

    • 文本框 - text / 密码框 - password / 数字框 - number

    • 邮箱 - email / 电话 - tel / 日期 - date / 滑条 - range / URL - url / 搜索 - search

    • 单选按钮 - radio / 复选按钮 - checkbox

    • 文件上传 - file / 隐藏域 - hidden

    • 提交按钮 - submit / 图像按钮 - image / 重置按钮 - reset

  • 下拉列表 - select / option

  • 文本域(多行文本)- textarea

  • 组合表单元素 - fieldset / legend

音视频(audio / video)

  • video 标签和属性 - autoplay / controls / loop / muted / preload / src

  • audio 标签和属性 - autoplay / controls / loop / muted / preload / src / width / height / poster

窗口(frame)

  • 内嵌窗口 - iframe

辅助工具

设计软件 figma