前置知识
Web（网页) : 由文字、图片、视频、音频、超链接组成。
Web（网页）标准 : 让所有浏览器按照相同的标准展示结果，展示的效果统一。
Web（网页）构成 : 1.结构 HTML 页面元素、内容。2.表现 CSS 网页元素外观、位置、颜色、大小…等。3.行为 JavaScript 网页模型定义与页面交互。
HTML
HTML 定义 : 超文本标记语言,用 HTML 标签对页面内容描述。
HTML 骨架结构 :
- html 标签:网页整体
- head 标签:网页头部
- body 标签:网页身体
- title 标签:网页标题
HTML 标签关系 : - 父子(嵌套)关系 :
<head><title></title><head> - 兄弟(并列)关系 :
<head></head><body></body>
HTML 标签
HTML 排版标签 :
h1-h6 标签 : 文本标题1级-6级，文字都有加粗，文字都有变大，但是从h1 → h6文字逐渐减小，独占一行。
p 标签 : 段落，段落之间存在间隙，独占一行，文字一行放不下会自动换行。
br 标签 : 换行，单标签，让文字强制换行，不会像p标签那样有明显的间隙。
hr 标签 : 水平线，单标签 ，在页面中显示一条水平线。
HTML 文本格式标签 :
- strong(b)标签:加粗
- ins(u)标签:下划线
- em(i)标签:倾斜
- del(s)标签:删除线
HTML 媒体标签 ：
1. 图片标签 img
img 标签常见属性 ：
-
src : 图片路径，当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可。
-
alt : 替换文本，当图片加载失败时，才显示alt的文本。
-
title : 提示文本，当鼠标悬停时，才显示的文本。
-
width : 宽，如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
-
height : 高同上
注意 ： 如果同时设置了width和height两个，若设置不当此时图片可能会变形
img 标签路径 ：
- 绝对路径
盘符开头：D:\day01\images\1.jpg
• 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif
- 相对路径 ：
- 同级目录
方法一：<img src="目标图片.gif">
方法二：<img src="./目标图片.gif">
- 下级目录
1. 先知道在哪个文件夹里面 → 文件夹名字
2. 进入这个文件夹 → /
3. 此时看到目标文件直接喊她 → 直接写目标文件名字
- 上级目录
1. 先出当前文件夹，到上一级目录 → ../
2. 此时看到目标文件直接喊她 → 直接写目标文件
2. 音频标签 audio
常见属性 :
- src : 音频路径
- controls : 播放控件
- autoplay : 自动播放(Google浏览器禁用)
- loop : 循环播放
3. 视频标签 video
常见属性 :
- src : 视频路径
- controls : 播放控件
- autoplay : 自动播放(Google浏览器禁用),谷歌浏览器中可以配合muted属性实现自动静音播放
- muted : 静音播放
- loop : 循环播放
HTML 超链接标签 a :
常见属性 :
- href : 网页路径(跳转去哪里)
- target : 目标属性
属性值
• _self：默认值(不用输入)，在当前窗口中跳转（会覆盖原网页）
• _blank：在新窗口中跳转（原网页保留）
- 空连接
代码<a href="#">空连接</a>
• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置（先用空链接占个位置）
1086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
