前端项目开发-03_第一个网页.pdf

你的第一个网页

王红元coderwhy

目录

content1第一个网页

2认识HTML

3开发工具

4HTML元素（重点）

5注释编写

coderwhy开发第一个网页–记事本

n新建一个.txt的文件

p在其中添加一些文字，比如HelloWorld

p保存文件

p修改文件的扩展名为.html文件

p使用浏览器打开页面

n这个网页有什么缺点？

p只能显示一段普通的文本；

p浏览器不知道是否要对这段文本加粗、放大、段落之间的间距；

coderwhy案例–显示一条新闻

n如果我们现在有一条新闻需要显示，那么可以通过某些“元素”来告知浏览器这部分内容如何显示。

n而我们编写的h2/h2，p/p就是HTML元素；

coderwhy认识HTML

n超文本标记语言（英语：HyperTextMarkupLanguage，简称：HTML）是一种用于创建网页的标准标记语言。

pHTML元素是构建网站的基石；

n什么是标记语言（markuplanguage）？

p由无数个标记（标签、tag)组成；

p是对某些内容进行特殊的标记，以供其他解释器识别处理；

p比如使用h2/h2标记的文本会被识别为“标题”进行加粗、文字放大显示；

p由标签和内容组成的称为元素（element）

n什么是超文本（HyperText）呢？

p表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；

p还可以表示超链接（HyperLink），从一个网页跳转到另一个网页；

coderwhyHTML文件的特点–扩展名（后缀名）

nHTML文件的拓展名是.htm\.html

p因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm

p现在统一使用.html

coderwhyHTML文件的特点–结构

nJD官方

n小米官方

n英雄联盟官网

n它们有什么共同点呢?

coderwhy改进自己的网页

n修改自己的网页代码，让自己的网页也具备正确的结构：

n运行效果是一样的，但是我们现在的网站也有正确的结构了

coderwhy开发工具选择

n记事本可以开发一个网页吗？答案：可以。但是有很多的缺点：

p创建和管理文件不方便；

p没有颜色标识/没有智能提示/无法调试程序；

p专业的前端开发工具

pWebStorm、SublimeText、VisualStudioCode、Atom、HBuilder、IntelliJIDEA、Dreamweaver

p智能提示、高亮识别、语法检测、集成环境、开发效率高

n上课推荐开发工具：

pWebstorm

ü优点：集成开发工具，包罗万象

ü缺点：重（占用系统资源多），收费

pVSCode（上课使用）

ü优点：轻（相当于一个编辑器），免费

ü缺点：需要安装一些插件来辅助开发

coderwhyVSCode工具安装

nVSCode编辑器下载-安装：/

n安装插件（增加功能）：右侧图标最后一项，Extensions，查找需要的插件（联网）

p中文插件：Chinese

p颜色主题：atomonedark

p文件夹图标：VSCodeGreatIcons

p在浏览器中打开网页：openinbrowser、LiveSever

p自动重命名标签：autorenametag

nVSCode的配置：

pAutoSave自动保存

pFontS