Skip to content

A1. HTML入门

你知道每天刷的网页是怎么构建的吗?就像盖房子需要砖块,网页也是由各种『标签』搭建而成。HTML就是网页的骨架,它用简单的标记语言定义标题、段落、图片、链接等元素。学完这个单元,你就能亲手搭建自己的第一个网页!从个人主页到班级网站,HTML是你踏入Web开发世界的第一步。让我们一起揭开网页背后的神秘面纱,用代码搭建属于你的数字世界!

速查表 / Cheatsheet

以下为教程内知识整理。关于 HTML 完整版,可参见:https://quickref.me/html.html

  1. 初识网页开发
    1. 前端开发通过浏览器实时渲染页面
    2. HTML定义内容结构,CSS控制视觉样式,JavaScript处理交互逻辑
    3. 三种语言协同工作,文件扩展名严格区分
  2. 元素的基础语法 格式元素
    1. 非空元素由标签和内容组成,开始标签和结束标签包围元素内容,语法形如<tag>content</tag>
    2. 空元素没有内容,只有一个标签,语法形如<tag>,如<br>表示换行。
    3. 格式元素是非空元素,用于设置文本的格式,可以叠加使用,如:
      • 粗体<b>/<strong>
      • 斜体<i>/<em>
      • 下划线<u>
      • 删除线<del>
      • 下标<sub>
      • 上标<sup>
      • 高亮<mark>
  3. 元素的属性 超链接与格式元素
    1. 元素的属性可以为元素添加额外的信息,常见格式为<tag name1="value1" name2="value2"></tag>
      • 属性均加在起始标签中;
      • 多个属性间以空格分隔;
      • 属性名和属性值之间以等号分隔;
      • 属性值需用双引号包裹。
    2. title属性可以为几乎所有元素添加悬停提示
    3. 元素表示超链接
      • href属性表示指向的页面的URL必需
      • target属性表示在何处打开链接可选,默认在当前窗口打开_self;也可选在新窗口打开_blank
    4. 元素表示图片
      • src属性表示图片的源URL必需
      • alt属性表示图片的替代文本,强烈建议添加;
      • width属性表示图片的宽度,单位为像素px
    5. 所有URL都能省略https://http:// 协议名。
  4. 元素的嵌套 调试
    1. 元素的内部既可以是文本,也可以是其他元素,层层嵌套形成树状结构
    2. divspan等常见无语义元素,不表示特定的含义,只是作为结构的占位。
    3. 元素嵌套遵守一定的规则
      • 普通块级元素(divbody等):独占一行,可以嵌套任意元素。
      • 终端块级元素(ph1等):独占一行,不能嵌套块级元素。
      • 普通行内元素(spana等):不独占一行,只能嵌套行内元素。
      • 透明元素(bi等):不独占一行,可以嵌套任意元素。
    4. 使用Emmet可以加速HTML代码的编写,使用方式为缩写+Tab
    5. 使用F12开发者工具可以调试HTML代码,查看元素的结构、属性、内容等。
  5. HTML 结构 基础语法
    1. HTML文档具有特定的结构,开头<!DOCTYPE html>声明文档类型,<html>元素是根元素,<head>元素包含文档的元数据,<body>元素包含文档的显示内容。
    2. <head>元素中,<title>元素定义文章的标题,<meta>元素定义文档的元数据:
      • <meta charset="UTF-8">定义文档的字符编码,唯一直接使用的属性,一般为UTF-8。
      • 其余的<meta>元素<meta name="..." content="...">用于定义页面的描述信息(description)、关键字(keywords)、作者(author)、视口(viewport)等。
    3. 六种标题元素标识文章层级,<h1>~<h6>,分别表示一到六级标题,均为非空元素。
    4. HTML注释提供不显示在界面上的备注信息,<!-- 注释内容 -->,可换行。
    5. HTML将连续的换行符和空格等效为一个空格。
    6. HTML提供了字符实体引用,可以实现连续多个空格、显示标签本身以防止与标签混淆等功能。
      • &nbsp;显示一个空格。
      • &lt;&gt;&amp;分别显示小于号、大于号、与符号。

Built by Vitepress | Apache 2.0 Licensed