海南网络推广公司济南网站seo
准备工作
vscode下载
百度网盘 Subline Text 下载
Sublime Text下载
百度网盘 vscode 下载
Sublime Text 是一款轻量好用的文本编辑器，我们在写前端代码时，使用 Sublime Text 打开比使用记事本打开，得到的代码体验更好，比 vscode 更轻量；
Sublime Text使用
创建一个HTML文件
使用subline text 打开HTML文件，并用浏览器运行
HTML基础
概念
HTML(Hyper Text Markup Language)，超文本标记语言；
超文本：
比文本要强大，通过链接和交互式方式来组织和呈现信息的文本形式，不仅仅有文本，还可能包含图片，音频，或者自已经审阅过它的学者所加的评注、补充或脚注等等；
标记语言：
由标签构成的语言；
认识 HTML 标签
HTML代码是由"标签"构成的，形如:
<h3>我是三级标题</h3>
- 标签名(body) 放到<>中
- 大部分标签成对出现：
<h3>为开始标签，</h3>为结束标签. - 少数标签只有开始标签，称为"单标签".
- 开始标签和结束标签之间，写的是标签的内容；
<h3 id="myId">我是三级标题</h3>
- 开始标签中可能会带有"属性"，id属性相当于给这个标签设置了一个唯一的标识符(身份证号码).
HTML 文件基本结构
<html><head><title>我是一个标签</title></head><body><h1>我是一级标题</h1></body>
</html>
- html 标签是整个html文件的
根标签 (最顶层标签)； - head 标签中
写页面的属性； - body 标签中写的是
页面上显示的内容； - title 标签中写的是
页面的标题；
标签之间的结构关系,构成了一个
DOM 树，Document Object Mode(文档对象模型)
双击打开 test.html 文件
刚开始我们没写 <head>， <body> 等标签，在浏览器中依旧可以运行，因为浏览器有良好的“鲁棒性”，哪怕代码不规范，浏览器也能解析代码。
使用 chrome 的开发者工具查看页面的结构
F12 或者右键审查元素，开启开发者工具，切换到Elements标签，就可以看到页面结构细节.
快速入门开发
开发工具：vscode
在 VS Code中创建文件 xxx.html
直接输入! ，按 Enter或tab键，此时能自动生成代码的主体框架.
点击 ctrl+s保存代码，然后在刚刚的文件夹中打开该文件
