前端学习之HTML-1

一、HTML页面固定结构

快捷键:英文叹号+回车

<html>
    <head>
        <title>网页标题</title> 
    </head>
    <body>
        网页主体
    </body>
</html>

快捷键保存:ctrl+s

快捷键注释:ctrl+/

<!--这是注释-->

二、排版标签

1.标题标签

<h1>......</h1>
<h2>......</h2>
<h3>......</h3>
<h4>......</h4>
<h5>......</h5>
<h6>......</h6>

特点:

        文字都有加粗

        文字都有变大,从h1到h6文字逐渐减小

        独占一行

2.段落标签

<p>......</p>

特点:

        段落间存在间隙

        独占一行 

3.换行标签

<br>

特点:

        单标签

        让文字强制换行

4.水平线标签

<hr>

特点:

        单标签、

        在页面中显示一条水平线

三、文本格式化标签

通用代码

标签说明
b加粗
u下划线
i倾斜
s

删除线

用于突出重要性的强调语境

标签说明

strong

加粗
ins下划线
em倾斜
del删除线

四、媒体标签 

1.图片标签

<img src="" alt="" title="" width="" height="">

src:图片路径

alt:替换文本

        当图片加载失败时显示alt文本

title:提示文本

        当鼠标悬停是偶显示title文本

width和height:宽度和高度 (给定一个值时另一个等比例放缩)

2.路径

绝对路径

相对路径 

 同级目录
<img src="目标图片.gif">
<img src="./目标图片.gif">
下级目录
<img src="文件夹/目标图片.gif">
上级目录
<img src="../目标图片.gif">

3.音频标签 

支持格式:MP3  Wav  Ogg

 

<audio src="" controls autoplay loop></audio>

controls:显示播放的控件

autoplay:自动播放(部分浏览器不支持)

loop:循环播放

4.视频标签 

 

<video src="" controls autoplay loop></video>

controls:显示播放的控件

autoplay:自动播放(谷歌中需配合muted实现静音播放)

loop:循环播放

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值