1.开发环境搭建
可用于编写HTML的编译工具有很多
-
记事本:特点:无代码提示、无代码高亮显示、用户界面不友好;
-
Sublime(推荐):特点:运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件;
-
VSCode(推荐):特点:丰富的插件支持、可进行git管理;
-
Idea:特点:集成开发工具、类似DW,node,npm...运行速度较慢;
Html是在浏览器上解析执行的,每种浏览器对相同的Html代码解析可能产生不同的结果,所以我们需要安装多种主流的浏览器进行兼容性测试;
主流浏览器:Google Chrome(谷歌)、Firefox(火狐)、Opera、Safari、Microsoft Edge。
VSCode插件推荐
HTML CSS Support - Html提示Css自动补全
HTML Preview - 提供预览HTML文档的功能
HTML Snippets - 完整的HTML标签,包括HTML5片段
Live Server - 启动一个开发本地服务器,为静态和动态页面提供实时重载功能
open in browser - 可以在默认浏览器或应用程序中打开当前文件。
2.Hello HTML
打开VSCode,新建后缀名为.html的文件,输入"!"或"html:5"生成基本的html5结构
<!-- 文档头信息 -->
<!-- html5标准网页声明 -->
<!-- 不加这一行,就表示页面采用浏览器本身的解析标准,这样会造成页面在不同的浏览器(IE、火狐等)可能出现不同的显示效果。 -->
<!-- h5的文档声明,声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边。
如果不写文档声明,则会导致有些浏览器会进入一个怪异模式,进入怪异模式以后,浏览器解析页面会导致页面无法正常显示,所以为了避免进入该模式,一定要写文档声明
-->
<!DOCTYPE html>
<!-- 属性lang是单词language的缩写,意思是语言,”en”代表英语,”zh-CN”代表中文 -->
<!--
html根标签,一个页面中有且只有一个根标签,网页中的所有内容都应该写在html根标签中
-->
<!-- 只有两个子标签 head:浏览器设置 body:可视区展示 -->
<html lang="en">
<!-- head标签,该标签中的内容,不会在网页中直接显示,它用来帮助浏览器解析页面的 -->
<head>
<!--
meta标签用来设置网页的一些元数据,比如网页的字符集,关键字、简介
meta是一个自结束标签,编写一个自结束标签时,可以在开始标签中添加 一个/
-->
<!--
字符编码,浏览器会根据字符编码进行解析
常见的字符编码有:gb2312、gbk、unicode、utf-8。
-->
<meta charset="UTF-8">
<!--
viewport 设备的屏幕
width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览, 那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器选项卡上的名字 -->
<title>Hello HTML</title>
</head>
<!--
body标签用来设置网页的主体内容,网页中所有可见的内容,都应该在body中编写
-->
<body>
<!-- 在body里的内容都是显示在浏览器的视图区的 -->
<!--
在这个结构中,可以来编写HTML的注释注释中的内容,不会在页面中显示,但是可以在源码中查看我们可以通 过编写注释来对代码进行描述,从而帮助其他的开发人员工作,一定要养成良好的编写注释的习惯,但是注释一 定要简单明了
-->
</body>
</html>
HTML文档( HTML document) DOCTYPE 在Html非常年轻的时候(1991、2年左右),doctype是用来作为一组规则的链接,HTML页面必须遵循这些规则才能被认为是好的HTML,这些规则会用来检测网页是不是存在问题。然而,这些年没有人真正的关心doctype,他们只是一个历史产物必须包含在页面中。
严格的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
宽松的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
H5文档类型( HTML document)说明该文档为Html5文档
<!DOCTYPE html>
HTML的根元素,用来包含HTML文档的所有元素,所有的html标签应该位于html标签内部
<html>
表示html的头部,head内部标签主要用于设置或者导入外部文件,一般不直接显示在浏览器视口中,常用的子标签为 meta 、title、link、script,分别表示元信息设定、文档标题、css、js
编码:
utf-8 万国码
GBK 国标码
Big5 繁体字 (环球新闻导报社)
解码:浏览器
<head>
用来声明当前文档的编码方式为utf-8
<meta charset="utf-8">
用来声明当前文档的标题,标题将会出现在浏览器的选项卡中
<title>
表示html的体部,其内部主要放网页内容,其内容会显示到浏览器视口中,所有想要显示在浏览器中的元素都被包含在该元素中。
<body>
html4文档结构:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css"></style>
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
</body>
</html>