HTML基础认知
-
前端基础概念铺垫
-
认识网页（网页的基本组成部分）
- 文字 - 图片 - 超链接 - 视频 - 音频 -
五大浏览器和渲染引擎
-
ie浏览器 - trident
-
火狐浏览器 - gecko
-
谷歌浏览器 - blink
-
safari浏览器 - webkit
-
欧朋浏览器 - blink
Web标准
-
结构 - html
-
样式 - css
-
行为 - js
- javascript - 动态效果
-
HTML初体验
-
HTML是什么？
- HTML：超文本标记语言
-
HTML骨架结构
<head> <title>网页的标题</title> </head> <body> 自己的代码 </body> -
开发工具使用
- VSCode
-
-
语法规范
-
HTML的注释
- 快捷键：ctrl + /
-
HTML标签的构成
- 双标签
-如：
<body></body><strong></strong>-
单标签
-如：
<br><hr>
-
HTML标签的属性
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间通过空格隔开
- 标签名与属性之间必须通过空格隔开
- 属性之间没有顺序之分
-
HTML标签的关系
-
父子关系(嵌套关系)
-
兄弟关系(并列关系)
-
-
HTML标签学习
-
排版系列标签
-
标题标签
-
h系列标签
-
语义：标题
-
代码
- h1~h6
-
显示特点
- 1、文字都有加粗
- 2、文字都有变大，但是从h1~h6逐渐减小
- 3、独占一行
-
注意点
- h1不能乱用，一般只用于新闻的标题或者网页的logo
- 因为h1标签对于SEO比较重要
-
-
段落标签
-
p标签
-
语义：段落
-
显示特点
- 1、段落之间有默认的间隙
- 2、独占一行
-
-
水平线标签
-
hr标签
- 单标签
-
作用：在网页中显示一条水平线
-
-
换行标签
-
br标签
- 单标签
-
作用：强制换行
-
-
-
文本格式化标签
-
标签语义化
-
第一组：
- b：加粗
- u：下划线
- i：倾斜
- s：删除线
-
第二组：（推荐，语义更强）
- strong：加粗
- ins：下划线
- em：倾斜
- del：删除线
-
-
-
媒体标签
-
图片标签
-
img标签
-
作用：在网页中显示一张图片
-
属性
-
1、src：图片的路径
-
2、alt：替换文本
- 只有当图片加载失败时，才会显示的文字
-
3、title：图片的标题
- 鼠标悬停在图片上时，才会显示的文字
-
4、width宽度/height高度
- 如果只设置了其中的一个，另一个会等比例缩放
-
注意点
- 一般只会设置width或者height中的一个，如果同时设置了两个，图片可能会拉伸变形
-
-
-
路径
-
绝对路径
- 1、在个人电脑中，带有盘符的路径
- 2、外部链接，以https://开头的路径
-
相对路径
-
同级目录
- 1、直接写目标文件的名字
-
下级目录
-
1、写目标文件所在文件夹的名字
-
2、进入目录文件夹
- /
-
3、直接写目标文件的名字即可
-
-
上级目录
-
1、去上一级目录
- ../
-
2、直接写目标文件的名字即可
-
-
-
-
音频标签
-
audio标签
-
作用：在网页中插入音频
-
属性
- 1、src：音频的路径
- 2、controls：播放的控件
- 3、autoplay：自动播放
- 4、loop：循环播放
-
-
视频标签
-
video标签
-
作用：在网页中插入视频
-
属性
- 1、src：视频的路径
- 2、controls：播放的控件
- 3、autoplay：自动播放
- 4、loop：循环播放
-
-
-
链接标签
-
href：告诉浏览器点击之后去哪一个网页
- 取值：就是一个路径
- 1、外部链接：直接写网址即可（网址需要写完整，https://）
- 2、本地网页：直接写路径
-
target：设置跳转方式
-
取值
-
_self
- 在当前窗口中进行跳转，原网页不在了
- 默认值
-
_blank
- 在新窗口中进行跳转，原网页还在
-
-
-
空链接
- (#)
-
