第一周学习打卡

一. 创建一个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在新窗口跳转(保留原网页)

四.综合案例(根据已学知识写出案例“招聘页面”)

效果图:

 实现代码:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值