第一课时
- 一.HTML综合案例
- HEML的定义
- 超文本标记语言
- 超文本是链接
- 标记也叫标签，带尖括号的文本
- 开始标签<strong> 结束标签</strong>
- 标签成对出现，中间包裹内容
- <>里面放英文字母（标签名）
- 结束标签比开始标签多/
- 拓展
- 双标签：成对出现的标签
- 点标签：只有开始标签，没有结束标签 < b r >:换行
- <hr>:水平线
- 开始标签<strong> 结束标签</strong>
- 超文本标记语言
- HEML的定义
- 二.HTML基本骨架
- html:整个网页
- head:网页头部，用来存放给浏览器看到的信息，例如css。
- title：网页标题
- body:是网页的主体，用来存放给用户看的信息，例如图片，文字。
- VS Code 快速生成骨架：
- 在HTML文件（.html)中，!(英文)配合Enter/Tab健
- 三.标签之间的关系
- 作用是：明确标签的书写位置；让代码格式更整齐。
- 父子关系（嵌套关系）
- <html>
- <head></head>
- </html>
- 兄弟关系（并列关系）
- <head></head>
- <body></body>
- *代码格式
- 父子关系：子级标签换行且缩进（Tab）
- 兄弟关系：兄弟标签换行要对齐
- <html>
- <head></head>
- <body></body>
- </html>
- 四.注释
- 作用：提高可读性
- <!--...-->注释标签用来在文档中插入注释，注释不会在浏览器中显示
- 在VS Code 中，添加/删除注释的快捷键是：Ctrl+/
- 五.标签
- 1.标题标签
- 一般用在新闻标题，文章标题，网页区域名称，产品名称等等。
- 标签名：h 1-h 6(双标签)
- 显示特点：
- 文字加粗
- 字号逐渐减小
- 独占一行
- 显示特点：
- 经验分享：
- h 1标签在一个网页中只能用一次，用来放新闻标题或网页的logo
- h 2-h 6没有使用的限制
- 2.段落标签
- 一般用在新闻段落，文章段落，产品描述信息等等
- 标签名：P(双标签)
- 显示特点：
- 独占一行
- 段落之间存在间隙
- 显示特点：
- 3.换行与水平线标签
- 换行：<b r>(单标签)
- <body>
- 第一行内容
- <b r>
- 第二行内容
- </body>
- 水平线：<hr>()
- 换行：<b r>(单标签)
- 4.文本格式化标签
- 作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗，倾斜，下划线，删除线等
- 标签名 效果
- strong /b 加粗
- em/i 倾斜
- ins/u 下划线
- d e l/s 删除线
- strong/em/ins/d e l标签自带强调含义（语义）。
- 5.图像标签—基本使用
- 作用：在网页中插入图片
- <img src="图片的URL">
- SRC用于指定图像的位置和名称，是<img>的必须属性。
- 以./开头，VS Code有提示功能
- 图片标签的属性
- <img src="./cat.jpg>
- <img src="./dog.jpg>
- <img src="./cat.jpg" alt="替换文本” title=“提示文字”>
- 属性名 属性值
- 属性名=“属性值”
- 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
- 六.路径
- 路径指的是查找文件时，从起点到终点经历的路线
- 路径分类：
- 相对路径：从当前文件位置出发查找目标文件
- /
- 绝对路径：从盘符出发查找目标文件
- window 电脑从盘符出发
- mac 电脑从更目录出发
- 相对路径：从当前文件位置出发查找目标文件
