HTML入门1(常用标签)

331 阅读3分钟

html常用标签

H标题标签:

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

h标签一共6个级别。文字的大小依次减小,权重也依次减小

默认加粗,独自占一行

01、h1标签一个页面建议只使用一次,而且里面主要放网站的标志或者logo;

02、h2标签一个页面建议最多使用2次,主要放一些重要的标题内容;

03、h3-h6可以随便使用的,可以多次重复使用;

P段落标签

<p></p>
独占一行, 段落上下自带间隙

br换行标签(单标签)

<br>

hr水平线标签

<hr>

文本格式化标签

特点:一行可以放多个;行内元素
建议用长单词的那个(语义化)
<b>加粗</b>
<strong>加粗</strong>
<i>倾斜</i>
<em>倾斜</em>
<u>下划线</u>
<ins>下划线</ins>
<s>删除线</s>
<del>删除线</del>

img图片标签(单标签)

<img src="" alt="">
src属性:是原则性属性,必须要书写,主要是查找图片的路径;

alt属性:原则性属性,必须要书写,有利于网站的SEO优化;替换文本的功能,当图片加载错误或者找不到图片路径的时候,替换位置提示用户;

title属性:提示文本,鼠标移入图片后悬停的时候出现的提示性文字; title属性不光可以设置给img标签,其他标签也可以使用。比如a标签;

宽width和高height属性:设置图片的宽度和高度大小。实际开发中,如果需要给图片设置宽高,建议只设置一个宽或者高,这样图片就会等比例缩放,如果两个都设置了可能会导致图片拉伸变形;

相对路径 同级或下级 ./ 上级../

image.png

绝对路径 网络路径经常用

image.png

audio音频标签

<audio src=""></audio>
当属性=值 可以只写一个。 例如loop=“loop"可以写loop
注意事项和视频标签一样,插入的音频格式建议使用mp3几乎所有浏览器都支持;
常用属性:
src属性:查找音频的路径
autoplay属性:自动播放属性,高版本浏览器一般都是禁止自动播放的;
controls属性:播放控件,不同的浏览器可能得到样式不一致,后期用js控制;
loop属性:循环播放,可以实现一致循环播放视频;

video视频标签

<video src="视频路径"></video>
如果想视频自动播放autoplay生效,必须加静音muted
属性和值相同也是可以只写一个,建议用mp4格式
常用属性:
src属性:查找视频的路径
autoplay属性:自动播放属性,高版本浏览器一般都是禁止自动播放的;
muted属性:静音播放,用来解决高版本浏览器不支持自动播放的问题;
controls属性:播放控件,不同的浏览器可能得到样式不一致,后期用js控制;
loop属性:循环播放,可以实现一直循环播放视频;

视频充满盒子: 如果视频设置宽高以后也没充满盒子,可以在css里加
object-fit: fill; 或者其他属性值试一下

a超链接标签

<a href=""></a>
作用:实现页面之间的相互跳转;
href属性:设置要跳转的目标位置,一般建议里面书写相对路径;

href属性是a的原则性属性,必须要的,如果不写就会失去超链接的功能;

target属性:设置打开超链接a的方式,默认为self在当前页面打开。一般使用blank取值,实现新窗口打开链接;target=" blank"

image.png

注意:#空链接副作用:点击时会自动跳转到界面顶部。
如果不想有副作用,用 javascript:; 代替 #

锚点链接:

会跳转到id上
a标签的href里以#号开头

div span 没语意的标签
<div></div>
<span></span>
div 独占一行
span 一行多个

特殊字符标签

空格:牛逼视频 nbsp
一个中文字符的空格: &emsp; 要几个字写几个

注意加 分号

image.png