准备
Visual Studio Code
（我安装了两个插件，一个是中文插件，一个是浏览器插件 ）
HTML 第 01 天 —— HTML 基础
能力目标
- 能够使用常用标签搭建基本网页结构，包括标题、段落、图像等；
- 能够使用链接实现页面内和页面间的跳转。
基础认知
- 什么是网站？
答：提供特定服务的一组网页集合 - 什么是网页？
答：网页是网站中的一“页”，可以用浏览器查看； 通常由文字、图片、链接、音频、视频等元素组成；网页又称为 HTML 文件，常以 .html 或 .htm 为扩展名。
3.什么是 HTML？
答：HTML：超文本标记语言（Hyper Text Markup Language）；不是编程语言，而是标记语言；超文本（1.超级内容：除了文本还可以包含：图片、链接、音频、视频等； 2. 超级链接：页面间的跳转，让网站内部联系起来，让各个网站联系起来。 ）
4.网页的形成？
答：1. 前端工程师用开发工具写代码（标签及内容）2. 浏览器解释和渲染代码（解释：读取 HTML 并分析 HTML 结构和内容；渲染：生成后的页面并显示结果；）3. 用户在浏览器中浏览页面的展示结果。
常用浏览器以及内核
Web 标准
！！！重点来啦！！！
HTML 骨架
我们可以在VSCode里新建一个HTML文件，在第一行输入！+回车(或者! + TAB)，我们可以看到HTML骨架：
文档和脚本标签
DOCTYPE 和 lang 以及字符集的作用」
问题1： 标签的作用是什么？
答： 告诉浏览器当前页面是 H5 的网页；必须写在页面的第一行 的上方；不是 HTML 标签，是文档类型的声明标签。
问题 2： lang 的作用是什么？
答：lang 用来定义当前文档显示的语言； en 英语； zh-CN 中文。
问题 3： charset 字符集应该用哪一个字符集？
答：charset=“UTF-8” ； 网页中一定要写，否则有可能会出现乱码的情况；
UTF-8 （万国码）以前常用的字符集；
GB2312 ：常用汉字；
GBK ：国标汉字；
BIG5 ：繁体中文（台湾）。
HTML 常用标签
第一个 HTML 网页 ：
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
视野所及，唯有前端
</body>
</html>
标题标签
-
（重要）：
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
段落和换行标签（重要） ：
<p> 我是一个段落标签 </p>
<p> 我是一个段落标签 </p> 换行标签 <br />
文本格式化标签
实例：
<body>
<h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
<h3>数据统计：水花兄弟合砍61分</h3>
<p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>
<p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
<h3>兄弟对决升级：小库里给哥哥造成压力</h3>
<p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
<p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>
作者: 東三城<br>
2020-10-11
</body>
<body>
我是<strong>加粗</strong>的文字<br>
我是<b>加粗</b>的文字<br>
我是<em>倾斜</em>的文字<br>
我是<i>倾斜</i>的文字<br>
我是<del>删除线</del><br>
我是<s>删除线</s><br>
我是<ins>下划线</ins><br>
我是<u>下划线</u>
</body>
布局标签
div单独占一行，span一行有好多个。
<div> 这是头部 </div>
<span> 今日价格 </span>
图片标签
<img src="图像URL" />
路径
问题 1：什么是相对路径？
答：以文件所在位置为参考基础建立的目录路径。
问题 2：文件夹之间用什么符号分隔？
答：文件夹之间使用 / 分隔。
问题 3：什么是绝对路径？
答：文件或文件夹的绝对位置，能够直接定位.
问题 4：绝对路径能够定位唯一的文件或者文件夹吗？
答：绝对路径能够定位唯一的文件或文件夹。
链接标签
超链接标签 (重点）：
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
链接分类：
- 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
- 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=“index.html”> 首页 。
- 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 。
- 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
- 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
- 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中，设置属性值为 #名字 的形式，如 第2集
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：第2集介绍
注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
<!-- 注释语句 --> 快捷键: ctrl + /
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！
6651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
