1 语法规范
- 标签是有尖括号包围的关键词,例如<html>
- HTML标签通常是成对出现的,称为双标签<html> </html>
- 有些特殊的标签必须是但标签(极少情况),例如<br />,称为单标签。
1.1标签关系
- 包含关系,所有的标签必须包含在<html> </html>中。
- 并列关系
2 HTML基本结构标签
<html> </html> HTML标签,页面中最大的标签,我们称之为根标签。
<head> </head> 文档的头部,在head标签中我们必须设置title。
<title> </title> 文档的标题,让页面拥有一个属于自己的网页标题。
<body> </body> 文档的主体,元素包含文档的所有内容,页面的内容基本都是放到body里面的。
HTML文档的后缀名必须是.html或.htm,浏览器的作用是读取HTML文档,然后以网页的形式体现出来。
2.1 基本结构标签总结
2.2 开发工具
HTML开发工具:DW CS6 VSCode(前端开发人员使用最多的轻量级的)
2.2.1 VSCode快捷键
- 新建文件Ctrl+N
- 保存Ctrl+ S,注意保存文件格式为.html(注意:更新完文档之后一定要保存否则打开该HTML文件不会显示更新内容)
- Ctrl+加号键,Ctrl+减号键,可以缩放界面大小
- !按下Tab键可以自动生成页面固件结构
- 利用Open in Browser插件,右键直接打开浏览器
2.2.2 VSCode编辑HTML推荐插件
- Chinese简体中文插件
- Open in Browser 在浏览器中打开
- JS-CSS-HTML Formatter 每次保存会自动格式化JS CSS和HTML代码
- Auto Rename Tag 自动重命名配对的HTML或XML标签
- CSS Peek 追踪样式插件
3 网页开发工具
3.1文档类型声明标签
<!DOCTYPE html> 作用说明该文档是什么类型,称为文档类型声明标签,它不是HTML的标签。
3.2lang 语言种类
<html lang=”zh-CN”>用来表示该文档显示的语言,双引号中的时语言关键词。
- en为英文
- zh-CN为中文
- fr为法语
但是对于文档的显示来说,定义为en的文档也可以显示中文,定义为zh-CN的文档也可以显示英文。
3.3字符集关键字
<meta charset =”UTF-8”>以便于计算机能够识别和存储数据。
UFT-8万国码。
3.4总结
- 以上的三个代码VSCode可以自动生成。
- <!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面。
- <html lang=”en”>告诉浏览器或者搜索引擎这是一个英文网页,采用英文来显示。