A1. HTML入门
你知道每天刷的网页是怎么构建的吗?就像盖房子需要砖块,网页也是由各种『标签』搭建而成。HTML就是网页的骨架,它用简单的标记语言定义标题、段落、图片、链接等元素。学完这个单元,你就能亲手搭建自己的第一个网页!从个人主页到班级网站,HTML是你踏入Web开发世界的第一步。让我们一起揭开网页背后的神秘面纱,用代码搭建属于你的数字世界!
速查表 / Cheatsheet
以下为教程内知识整理。关于 HTML 完整版,可参见:https://quickref.me/html.html
- 初识网页开发
- 前端开发通过浏览器实时渲染页面
- HTML定义内容结构,CSS控制视觉样式,JavaScript处理交互逻辑
- 三种语言协同工作,文件扩展名严格区分
- 元素的基础语法 格式元素
- 非空元素由标签和内容组成,开始标签和结束标签包围元素内容,语法形如
<tag>content</tag>
。 - 空元素没有内容,只有一个标签,语法形如
<tag>
,如<br>
表示换行。 - 格式元素是非空元素,用于设置文本的格式,可以叠加使用,如:
- 粗体
<b>
/<strong>
- 斜体
<i>
/<em>
- 下划线
<u>
- 删除线
<del>
- 下标
<sub>
- 上标
<sup>
- 高亮
<mark>
- 粗体
- 非空元素由标签和内容组成,开始标签和结束标签包围元素内容,语法形如
- 元素的属性 超链接与格式元素
- 元素的属性可以为元素添加额外的信息,常见格式为
<tag name1="value1" name2="value2"></tag>
:- 属性均加在起始标签中;
- 多个属性间以空格分隔;
- 属性名和属性值之间以等号分隔;
- 属性值需用双引号包裹。
title
属性可以为几乎所有元素添加悬停提示。- 元素表示超链接:
href
属性表示指向的页面的URL,必需;target
属性表示在何处打开链接,可选,默认在当前窗口打开_self
;也可选在新窗口打开_blank
。
- 元素表示图片:
src
属性表示图片的源URL,必需;alt
属性表示图片的替代文本,强烈建议添加;width
属性表示图片的宽度,单位为像素px
。
- 所有URL都不能省略
https://
或http://
协议名。
- 元素的属性可以为元素添加额外的信息,常见格式为
- 元素的嵌套 调试
- 元素的内部既可以是文本,也可以是其他元素,层层嵌套形成树状结构。
div
、span
等常见无语义元素,不表示特定的含义,只是作为结构的占位。- 元素嵌套遵守一定的规则:
- 普通块级元素(
div
、body
等):独占一行,可以嵌套任意元素。 - 终端块级元素(
p
、h1
等):独占一行,不能嵌套块级元素。 - 普通行内元素(
span
、a
等):不独占一行,只能嵌套行内元素。 - 透明元素(
b
、i
等):不独占一行,可以嵌套任意元素。
- 普通块级元素(
- 使用Emmet可以加速HTML代码的编写,使用方式为缩写+Tab。
- 使用
F12
开发者工具可以调试HTML代码,查看元素的结构、属性、内容等。
- HTML 结构 基础语法
- HTML文档具有特定的结构,开头
<!DOCTYPE html>
声明文档类型,<html>
元素是根元素,<head>
元素包含文档的元数据,<body>
元素包含文档的显示内容。 <head>
元素中,<title>
元素定义文章的标题,<meta>
元素定义文档的元数据:<meta charset="UTF-8">
定义文档的字符编码,唯一直接使用的属性,一般为UTF-8。- 其余的
<meta>
元素<meta name="..." content="...">
用于定义页面的描述信息(description
)、关键字(keywords
)、作者(author
)、视口(viewport
)等。
- 六种标题元素标识文章层级,
<h1>
~<h6>
,分别表示一到六级标题,均为非空元素。 - HTML注释提供不显示在界面上的备注信息,
<!-- 注释内容 -->
,可换行。 - HTML将连续的换行符和空格等效为一个空格。
- HTML提供了字符实体引用,可以实现连续多个空格、显示标签本身以防止与标签混淆等功能。
显示一个空格。<
、>
、&
分别显示小于号、大于号、与符号。
- HTML文档具有特定的结构,开头