基础认识
- 网页由什么部分组成？
- 文字、图片、音频、视频、超链接
- 我们看到的网页背后本质是什么
- 前端程序员写的代码
- 前端代码是通过什么软件转换成用户眼中的页面的？
- 通过浏览器转化（解析和渲染）成用户看到的网页
- 浏览器
- 是页面显示、运行的平台，是前端开发的利器
- 五大常见浏览器：IE浏览器、火狐浏览器、谷歌浏览器、safari浏览器、Opera浏览器
- 渲染引擎
- （浏览器内核）：浏览器中专门对代码进行渲染的部分
- 浏览器出品公司不同，内在的渲染引擎也不同，导致解析校内沟通代码时速度、性能、效果也不同
- web标准
- 为了让不同的浏览器看到相同的效果
- HTML：负责网页的结构，页面元素和内同
- CSS：负责表现，网页元素的外观和位置等页面样式
- JavaScript：负责行为，负责页面的动态效果，页面交互
语法规则
- 固定结构
- 整体
<html> - 头部
<head> - 标题
<title> - 主体
<body>
- 整体
- 标签的构成、关系
- 双标签，由两部分组成，前部分：开始标签；后部分：结束标签；两部分之间包裹内容
- 单标签（少部分），自成一体，无法包裹内容 eg：
<br /><hr >换行、横线，不需要包裹内容 - 嵌套关系（一个包裹一个）
<head> <title>title</title> </head>- 并列关系
<head> </head> <head> </body>
标题标签
h系列，h1...h6，共六级标题，重要程度依次递减
文字自动加粗，且独占一行
段落标签
p标签
段落之间存在空行，独占一行
文本格式化标签
- 加粗
<strong>加粗</strong>
<b>加粗</b> - 下划线
<ins>下划线</ins>
<u>下划线</u> - 倾斜
<em>倾斜</em>
<i>倾斜</i> - 删除线
<del>删除线</del>
<del>删除线</del>
图片标签
<img src="a.jpg" alt="我是替换文本" height="200px" title="鼠标悬停时出现">
| 属性名 | 含义 |
|---|---|
| src | 图片的地址（相对地址、绝对地址） |
| alt | 替换文本（当图片无法显示时出现） |
| title | 鼠标悬停在图片上时显示出的文字 |
| width/height | 图片的宽度和高度，只设置一个时等比例缩放 |
| **绝对路径：可以直接到达目标位置，通常是从盘符开始的路径 | |
| **相对路径：从当前文件开始出发找目标文件；直接文件名字或./路径； | |
| **读取上层路径方法：../ |
音频、视频标签
<audio src="" controls="" autoplay="" loop=""></audio>
audio -> 音频 video ->视频
| 属性名 | 含义 |
|---|---|
| src | 音频路径 |
| controls | 显示播放条（进度条、暂停、播放等） |
| autoplay | 自动播放（有的浏览器不支持） |
| loop | 循环播放 |
| muted | 静音播放 |
音频标签目前支持 mp3 wav ogg 常用mp3 对于视频，谷歌浏览器autoplay 要配合muted 进行静音自动播放
超链接
<a href="https://www.csdn.net/">csdn</a>
双标签，内部可以包裹内容， 跳转到指定页面使用href属性
网页开发初期不知道跳转到哪里，可以href 写# 表示空链接
特殊属性：target 表示目标网页的打开方式，取值为_self（默认值）表示在当前窗口跳转，即，覆盖原来的网页；取值为_blank表示用新的网页打开链接。
