01 初识：网页组成和本质
02 初识：浏览器
03 初识：web标准
1.为什么需要web标准？
不同浏览器的渲染引擎不同，对于相同代码的解析效果存在差异。目的是希望能让用户用不同的浏览器打开时看到相同的页面。
2.什么是web标准？
能让用户使用不同浏览器看到相同页面的标准。
①构成
简而言之，html负责内容，css负责美化，java负责行为交互。
3.web标准记忆方法：
04认知：html感知
1.概念：html（hyper text markup language，超文本标记语言）
2.案例：文字变粗案例
<strong>文本</strong>05认知：html感知
1.html页面固定结构
06认知：vscode的简介和使用
1.打开界面输入感叹号，再回车，会有完整的框架可以用
07认知：注释
1.作用：帮助理解
2.快捷键：光标放到该行，crtl+/。再按一次会取消。
3.格式<!-- -->
08认知：标签组成和关系
结构：
说明：
①标签中间的单词or字母叫做标签名。
②常见标签由两部分组成，开始标签和结束标签。
③少数标签由一部分组成，称之为单标签。<br> <hr>
2.标签的关系
①父子关系（嵌套关系）<html> <title></title> </html>
②兄弟关系（并列关系）<head></head>和<body></body>
09认知：标题和段落（排版标签）
1.h系列标题标签
特点：
①文字都有加粗
②独占一行
③逐级减小
Ps.快捷键 crtl+D 可以选中同一行的相同数字或字母进行删改
段落标签
<p> </p>作用：分段显示
特点：段落之间存在间隙
10认知：标题和段落（排版标签）
1.换行标签<br> 单标签，让文字强制换行
2.水平分割线<hr> 单标签
11认知：文本格式化标签
1.什么是文本格式化标签？
为文字增加加粗、颜色等效果的标签。
12认知：图片基本使用（媒体标签）
1.在网页中显示图片
<imgsrc =”图片路径” alt= “” title = “”>特点：单标签 img标签需要展示对应的效果，需要借助标签的属性进行设置
常见属性：
Alt是图片显示失败时才会显示的文本，图片加载成功是不会显示
Title是鼠标悬停是显示的文本
图片的weight和height属性
img<src = “” weight=“”>注意：
若只设置了weight或height中的一个，另一个没设置的会自动等比例缩放。而同时设置了两个，若设置不当，图片可能会变形。
13认知：绝对路径（媒体标签）
1.绝对路径：指目录下的绝对位置，通常从盘符开始。网址也叫做绝对路径
14认知：相对路径（媒体标签）
1.从当前文件出发去找目标文件。
2.同级目录：当前文件和目标文件在同一个文件夹中。
方法一：<img src = “目标图片.gif”>
方法二：<img src =”./目标图片.gif”>
3.下级目录：目标文件在下级文件中。
<img src = “下级文件夹/目标图片.gif”>
<img src = “images/cat.gif”>
4.上级目录
<img src = “../ cat.jpg”>
注意：两个点是返回上一级
17认知：音频标签（媒体标签）
在页面中插入音频
<audio src =”./music.mp3”controls></audio> 双标签
注意：有些一进浏览器不会自动播放，加上controls属性搞出一个音频插件手动播放。
3.音频标签目前支持三种格式 MP3、wav、ogg
18认知：视频标签（媒体标签）
在页面中插入视频
<video src="./video.mp4" controls></video> 双标签
19认知：链接标签（媒体标签）
点击之后，从一个页面跳转到另一个页面
<a herf="./目标网页.html">超链接</a> 双标签空连接
<a herf = “#”>这是一个空链接</a>4.herf的作用是跳转地址
5.连接标签的target属性
<a href =”www.baidu.com” target =“_blank” >百度一下</a>意思是点击百度一下会跳转至百度首页，并且保留当前页面，在新窗口打开百度。
20认知：综合案例-招聘
扫一扫
2356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
