1.开发第一个网页
1.1 新建一个.txt文件
- 在其中添加一些文字,比如
hello world
- 保存文件
- 修改文件的扩展名为
.html
文件 - 使用浏览器打开页面
1.2 这个网页有什么缺点
- 只能显示一段普通文本;
- 浏览器不知道是否要对这段文本加粗、放大、段落之间的间距;
2. 认识HTML
超文本标记语言(HyperText Markup Language
, HTML)是一种用于创建网页
的标准标记语言
。
- HTML 元素是构建网站的基石
什么是标记语言(markup language)?
- 由无数个标记(标签、tag)组成;
- 是对某些内容进行特殊的标记,以供其他解释器识别粗合理;
- 比如使用
<h2></h2>
标记的文本会被识别为“标题” 进行加粗、文字加大显示; - 由标签和内容组成的称为元素(element)
什么是超文本(HyperText)呢?
-
表示不仅仅可以插入
普通的文本(Text
),还可以插入图片
、音频
、视频
等内容; -
还可以表示
超链接(HyperLink)
,从一个网页跳转到另一个网页;
2.1 HTML文件的特点 - 扩展名(后缀名)
HTML文件的扩展名是.htm
\.html
- 因历史遗留问题,Win95\Win98系统的文件拓展名不能超过3字符,所以使用.htm
- 现在统一使用
.html
2.2 HTML文件的特点 - 结构
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>
3. 开发工具
3.1 前端开发工具
- WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver
- 智能提示、高亮识别、语法检测、集成环境、开发效率高
WebStorm
- 优点:集成开发工具,包罗万象
- 缺点:重(占用系统资源多),收费
VS Code
-
优点:轻(相当于一个编辑器),免费
-
缺点:需要安装一些插件来辅助开发
3.2 VS Code 工具安装配置
下载:https://code.visualstudio.com/
安装插件
- 中文插件:
Chinese
- 颜色主题:
atom one dark
- 文件夹图标:
VSCode Great Icons
- 在浏览器中打开网页:
open in browser
、Live Sever
- 自动重命名标签:
auto rename tag
VSCode的配置(快捷键Ctrl + ,)
- Auto Save 自动保存
- Font Size 修改代码字体大小
- Word Wrap 代码自动换行
- Render Whitespace 空格的渲染方式(个人推荐)
- Tab Size 代码缩进
- 推荐2个空格(公司开发项目基本都是2个空格)
4. 认识元素
HTML本质上是由一系列的**元素(Element)**构成的;
什么是元素(Element)呢?
- 元素是网页的一部分;
- 一个元素可以包含一个数据项,或是一块文本,或是一张照片,亦或是什么也不包含;
HTML有哪些元素?
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
4.1 元素的组成
开始标签 结束标签
|| ||
\/ \/
<p>啦啦啦啦</p>
|_____|
内容
|____________|
元素
元素的主要组成部分有:
开始标签(Opening tag)
:包含元素的名称(本例为 p),被左、右尖括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。结束标签(Closing tag)
:与开始标签相似,只是其在元素名之前包含了一个斜杠
。这表示着元素的结尾 —— 在本例中即段落 在此结束。初学者常常会犯忘记包含结束标签的错误
,这可能会产生一些奇怪的结果。内容(Content)
:元素的内容,本例中就是所输入的文本本身。元素(Element)
:开始标签、结束标签与内容相结合,便是一个完整的元素。
4.2 元素的属性
元素也可以拥有属性(Attribute):
<p class="editor-note">啦啦啦啦</p>
|_________________|
属性
属性包含元素的额外信息,这些信息不会出现在实际的内容中。
创建一个超链接元素a:
<a href="http://www.baidu.com">百度一下</a>
4.2.1 分类
有些属性是公共的,每一个元素都可以设置
- 比如class、id、title属性
有些属性是元素特有的,不是每一个元素都可以设置
- 比如meta元素的charset属性、img元素的alt属性等
4.3 单标签与双标签元素
双标签元素:我们会发现前面大部分看到的元素都是双标签的;
- html、body、head、h2、p、a元素;
单标签元素:也有一些元素是只有一个标签;
- br、img、hr、meta、input;
HTML元素不区分大小写,但是推荐小写
4.4 元素的嵌套
某些元素的内容除了可以是文本之外,还可以去其他元素,这样就形成了元素的嵌套。
<ul>
<li>
<div>
<span>我是span元素</span>
<span>我是span元素</span>
<span>我是span元素</span>
</div>
</li>
</ul>
5. HTML的注释
5.1 什么是注释
简单来说,注释就是一段代码说明
<!-- 这是一段注释 -->
注释是只给开发者看的,浏览器并不会把注释显示给用户看
5.2 注释的意义
- 帮助我们自己理清代码的思路, 方便以后进行查阅.
- 与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)
- 开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)
- 可以临时注释掉一段代码, 方便调试.
注释快捷键:ctrl + /