1 HTML 认知
➢HTML (Hyper Text Markup Language)中文译为:超文本标记语言 ➢专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
➢案例: 文字变粗案例
我没有变粗
<!-- 通过 strong 标签能够实现字体变粗 -->
<strong>我要变粗</strong>
1.1 HTML 页面固定结构
➢ 网页类似于一篇文章:
➢ 每一页文章内容是有固定的结构的，如:开头、正文、落款等…. ➢ 网页中也是存在固定的结构的，如:整体、头部、标题、主体
➢ 网页中的固定结构是要通过特点的 HTML标签 进行描述的
在这下图中展示得效果就是网页的固定结构，可以理解为骨架，通过观察我们可以发现它是通过一层层 html 标签包裹起来，接着是 head 标签，表示网页的头，过了是 title 标签表示网页得标题， 接着是 body 标签表示网页的主体
为了更好理解看下图：
为了更加好记我们可以看上面得小猪佩奇，全部为一个 html，头表示 head ，身体部分表示为 body，耳朵就为 title
范例代码演示：
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
浏览器访问
总结：
HTML骨架结构由哪些标签组成：
-
html标签:网页的整体
-
head标签:网页的头部
-
body标签:网页的身体
-
title标签:网页的标题
1.2 VS Code的基本快捷键
-
快速生成标签:英文+ tab
-
保存文件: ctrl + s
-
注意1:写完文件之后务必需要保存文件，否则网页无变化
-
注意2:可以设置自动保存省去每次保存的麻烦
-
-
快速查看网页效果:右击→Open in Default Browser
-
快捷键: alt + b
-
注意:必须安装了open in browser插件
-
-
快速生成结构标签: ! + tab 如下图
-
注意1: !必须是英文的，中文!无效
-
注意2:必须保证当前文件后缀名是.html,否则无效
-
VS Code自动生成的骨架多了其他标签,之后会介绍
-
1.3 HTML 语法规范
目标:认识网页组成和五大浏览器，明确Web标准的构成，使用HTML骨架搭建出-一个网页。
学习路径:
-
基础概念铺垫(了解)
-
HTML初体验
-
语法规范
-
HTML的注释
-
HTML标签的构成
-
HTML标签的属性
-
HTML标签的关系
-
1.3.1 注释
对代码的注解，方便后期自己查阅
➢注释的作用:
-
为代码添加的具有解释性、描述性的信息,主要用来帮助开发人员理解代码
➢注释的快捷键 :
-
在 VS Code 中：ctrl + /
1.3.2 标签构成
-
标签的结构体图：
-
结构说明：
-
标签由
<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名 -
常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
-
少数标签由一部分组成，我们称之为:单标签。自成一-体,无法包裹内容。
-
总结：
-
常见标签由几部分组成?称之为?
-
两部分组成、双标签
-
-
少数标签由几部分组成?称之为?
-
一部分组成、单标签
-
-
以下标签按照结构划分，分别属于哪一类标签?
-
<P>我是标签</P>双标签 -
<hr>单标签
-
1.3.3 标签属性
-
标签的结构体图：
-
属性注意事项
-
标签的属性写在开始标签内部
-
标签上可以同时存在多个属性
-
属性之间以空格隔开
-
标签名与属性之间必须以空格隔开
-
属性之间没有顺序之分
-
<!-- 超链接双标签 href 为标签属性，写在开始标签内部 -->
<a href=""></a>
<!-- 图片单标签 标签上可以同时存在多个属性，属性之间以空格隔开，标签与属性之间也是空格隔开 -->
<!-- 属性之间没有顺序之分 -->
<img src="" alt="">
总结：
-
双标签的属性需要写在开始标签还是结束标签中?
-
写在开始标签中
-
-
标签上可以同时存在几个属性?
-
多个属性
-
-
标签名:与属性之间，属性与属性之间以什么隔开?
-
空格
-
1.3.4 HTML标签与标签之间的关系可分为:
-
父子关系（嵌套关系）
<!-- 如 head 标签和 title 标签的关系，head 包含了 title 标签 --> <head> <!-- 父标签 --> <title></title> <!-- 子标签 --> </head>
-
兄弟关系（并列关系）
<head></head> <body></body>