一. 创建一个HTML文档:
1.新建一个文件夹,在文件夹中新建一个文本文档。
2.在文本文档中输入需要的文字。
3.将文档.txt格式转化为.html格式。
4.打开html文件就得到了第一个HTML文档。
ps:使用strong语句将文字加粗。
二.html骨架
HTML骨架结构:
三.html认知
1. !+Enter;快速新建
2. 注释:ctrl+/ ;再按一次取消;<!-- -->
3.结构
<html>
<head><title>标题</title>
</head>
<body></body>
</html>
4. 标题标签:<h1>一级标题</h1>;
1-6级标题,重要程度依次递减,写在<body>里
文字加粗,变大
5. 按住alt+标签里的字:整体删改标签
6. 段落标签:<p>文字</p>
段落之间存在空隙,空隙之间的大小用CSS改变
独占一行
7. vscode -> 查看 -> 自动换行:实现代码的长段字符自动换行
8. <br>让文字强制换行显示,单标签
9. 水平线:<hr>
10. 文本格式化标签:用右边的突出重要性的强调语境(语义化)
b:加粗 strong:加粗
u:下划线 ins:下划线
i:倾斜 em:倾斜
s:删除线 del:删除线
11. 图片标签:<img src="" alt="" title="">,单标签
对标签的属性进行设置:src和alt就是属性,
src是属性名,引号是属性值
./是当前,./img.jpg
一个标签可以存在多个属性,属性之间以空格隔开
属性有默认值
alt:替换文本,当图片加载失败,显示alt的文本
title:当鼠标悬停时显示的文本
width和height:只需要设置一个,另一个自动等比例缩放
12. 绝对路径、相对路径:绝对路径是从盘符开始的路径:D:/…
一般用相对路径:从当前文件出发找目标文件的过程:
同级目录<img src="目标图片.gif">或者<img src="./目标图片.gif">
下级目录<img src="images/目标图片.gif">
上级目录<img src="../目标图片.gif">;../回到上级目录
13. 音频标签:<audio src="./music.mp3" controls></audio>双标签
常见属性:src音频的路径,支持的格式:MP3、Wav、Ogg
controls显示播放的控件
autoplay自动播放(部分浏览器不支持)
loop循环播放
14. 视频标签:<video src="./video.mp4" controls></video>双标签:MP4、WebM、Ogg
src视频的路径
controls显示播放的控件
autoplays自动播放(谷歌需配合muted实现静音播放,即两个属性一起写)
loop循环播放
15. 链接标签:点击之后跳转到另一个页面<a href="./目标网页。html">超链接文本</a>
双标签,内部可以包裹内容
如果需要a标签点击之后去指定页面,需要设置a标签的href属性
当我们写了超链接,但还没有决定去处,在href里写#(空链接)
href=跳转地址,可以写自己的html、http网站、或者#
16. 如果要实现打开新的网页:
target属性,目标网页的打开形式;_self默认值,在当前窗口跳转(覆盖原网页)
_blank在新窗口跳转(保留原网页)
四.综合案例(根据已学知识写出案例“招聘页面”)
效果图:
实现代码: