前置知识
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>
• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置(先用空链接占个位置)