HTML5+CSS3 html01-认知

vscode 使用

shift+1,回车补全代码

ctrl+/注释

h1回车自动补全

先选中数字2 ctrl+D 按一次多一个光标在闪多按几次一起改 h1~h6

保存代码后去刷新网页

文本格式化标签后面表格强调性更大

 <b>加粗</b> <strong>加粗</strong>
    <u>下划线</u> <ins>下划线</ins> underline
    <i>倾斜</i> <em>倾斜</em>
    <s>删除</s> <del>删除</del>

图片属性

1、alt 当图片不显示，显示alt里的内容

2、title 鼠标悬停几秒时显示的文本内容可用于其他标签

3、width=200 height

<img src="cat.gif" alt="小猫咪" title="鼠标悬停一会显示文本" width="200">

只用写其中一个值，另一个等比例缩放，作用：防止图片变形

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径盘符开头：D:\day01\images\1.jpg 别人没有D盘，就找不到

1、在个人电脑中，带有盘符的路径 2、外部链接，以https://开头的路径

相对路径：从当前文件开始出发找目标文件的过程

相对路径有三种情况： • 同级目录：直接写：目标文件名字！<img src="cat.gif" alt="小猫咪" >或<img src="./cat.gif" alt=""> ./ 表示当前

• 下级目录：直接写：文件夹名/目标文件名字！ <img src="images/dog.gif" alt="">

• 上级目录：直接下：../目标文件名字！<img src="../目标图片.gif" alt="">

➢ VSCode中路径的快捷操作？ • 同级和下级目录：./ 之后选择即可

• 上级目录：../ 之后选择即可

3.3 音频标签音频格式mp3

要在网页中插入音频使用什么标签？ • audio标签

音频标签有哪些常见属性？

• src：音频路径

• controls：音频控件

• autoplay：自动播放（部分浏览器支持）

• loop：循环播放

<audio src="images/music.mp3" controls autoplay loop></audio>

3.4 要在网页中插入视频使用什么标签？ • video标签

➢ 视频标签有哪些常见属性？

• src：视频路径

• controls：视频控件

• autoplay：自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放

• loop：循环播放

<video src="images/video.mp4" controls autoplay muted loop></video>

4.1超链接

从一个页面跳转到另一个页面，需要使用 • 链接标签：a标签

➢ 通过什么属性可以设置a标签的到底跳转去哪里？ • href属性

➢ 通过什么属性可以设置a标签的跳转方式？取值有哪些？

• target属性

• 取值1：_self：在当前窗口中跳转

• 取值2：_blank：在新窗口中跳转

空链接#

功能： • 点击之后回到网页顶部

• 开发中不确定该链接最终跳转位置，用空链接占个位置

<a href="https://www.baidu.com" target="_self">跳转到百度</a>
<a href="./html骨架.html" target="_blank">跳转骨架html</a>
<a href="#">暂定</a>
 
总结 1. 排版标签：
• 标题h系列、段落p、换行br、水平线hr
2. 文本格式化标签：
• 加粗strong、下划线ins、倾斜em、删除线del
3. 图片标签：
• img标签 + src属性 + alt属性 + title属性 + width属性 + height属性
4. 路径：
• 相对路径：同级目录 + 下级目录 + 上级目录
5. 音频标签、视频标签：
• audio标签、 video标签 + src属性 + controls属性
6. 链接标签：
• a标签 + href属性 + target属性
 
代码太长：选中代码 查看 自动换行