HTML基础语法
HTML发展史:
HTML1.0——1993年由IETF发布(互联网工程任务组)
HTML2.0——1995年由W3C制定(W3C:The World Wide Web Consortium,万维网联合会,是万维网的主要国际标准组织。该联盟成立于1994年,负责指定web标准,主要是HTML和CSS)
HTML3.2——1996年
HTML4.0——1997年
HTML4.0.1——1999年
XHTML1.0——2000年
HTML5草案——2004年
HTML5正式版——2008年
HTML5——2014年定稿
一、什么是HTML?
Hypertext Markup Language:超文本标记语言
二、HTML有什么特点?
不需要编译
纯文本文件
大小写不敏感
三、利用Vscode创建第一个网页
Step1:创建一个空文件夹,在VScode中打开这个文件夹
Step2:在编辑器中新建一个
index.html
文件(思考:为什么文件名要叫index?)Step3:打开html文件,输入英文状态下的
!
键,然后按下tab
键
四、如何浏览创建好的网页
方法一:打开文件夹找到网页文件,右键已浏览器打开
方法二:在VScode中安装
Live Server
插件
五、HTML基本结构
<!-- 文档类型声明DTD -->
<!DOCTYPE html>
<html lang="en">
<!-- 头部信息 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 网页内容 -->
<body>
</body>
</html>
六、HTML基本组成
标签:
<body>
元素:开始标签
<body>
+ 内容 + 结束标签</body>
属性:
<body bgcolor="blue">
,其中bgcolor就是body标签的属性
七、文档类型声明DTD
HTML文件第一行必须是DTD(Document Type Definition,文档类型声明)
不写DTD会应发浏览器的一些兼容问题
不同版本的HTML有不同的DTD写法
<!-- HTML5: --> <!DOCTYPE html> <!-- HTML4.01严格版:该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets) --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- HTML4.01过渡版:该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets) --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- HTML4.01框架板:该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
八、HTML配置项
- 字符集:
<meta charset="UTF-8">
- meta:元标签,标识网页的基础配置
- charset:字符集属性
- UTF-8:字符集的一种类型
字符集 | 涵盖字符 | 1个汉字字节数 | 适用场景 |
---|---|---|---|
UTF-8 | 涵盖全球所有国家、民族的文字和大量图形字符 | 3 | 有非汉字文字的网页 |
gb3212 | 收录所有汉字字符(包括简体、繁体)和英语、少量韩文、日语和少量图形字符 | 2 | 只有汉语和英语的网页,由于1个汉字仅占2个字节,网页大小明显减小 |
title:
<title></title>
关键词:
<meta content="网盘,百度网盘,百度云,网络U盘,网络硬盘,免费网盘,网盘下载,网盘资源,同步,云存储,外链分享,离线下载" name="keywords">
页面描述:
<meta content="百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固,支持教育网加速,支持手机端。注册使用百度网盘即可享受免费存储空间" name="description">
九、HTML特性
空白折叠现象
- 文字和文字间的多个空格、换行会被折叠成一个空格
- 标签“内壁”和文字之间的空格会被忽略
转义符
- 小于号:
<
- 大于号:
>
- 空格:
- 版权符号:
©
- 小于号:
注释:方便日后维护代码时对代码的理解,在VScode中可以通过
ctrl
+/
快速生成注释