正式学习第一步,HTML中的注释:
<!--这里是被注释掉的内容 -->
在VScode中,注释的快捷键为Ctrl+S。选中行后使用快捷键便可加上注释,同时,如果想取消注释,在注释行再使用一遍相同的快捷键即可取消掉原来的注释。
HTML的标签 :标签由<、>、/、英文单词或字母组成。标签中的英文单词或字母叫做标签名;常见标签由两部分组成,称作双标签,前部分是开始标签,后部分是结束标签;少数标签是由一部分组成,称作单标签,它无法像双标签那样包裹内容。
例如:
<strong> 内容 </strong>(这就是双标签)
<br> <hr> (这是两个单标签)
标签的关系:1.嵌套关系(包含);2.并列关系(在逻辑上是同级的)。
标签的种类:1.标题标签:(双标签)
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
.
.
.
其中标题的重要程度依次递减(对应显示的字体也会逐渐缩小,加粗效果逐渐不明显)
各级标题独占一行
2.段落标签:(双标签)
<p></p>
<p></p>
.
.
.
由于每一段都是并列关系,所以不存在嵌套或不同级的
其次,段落标签是在每一段之间是存在间隙的,两段不是紧紧地贴贴
3.换行标签:(单标签)
<br>
加入以后强制换行
4.水平分割线标签:(单标签)
<hr>
在一行中加一条水平分割线
5.文本格式化标签:(双标签)
<b> 加粗 <strong>
<u> 下划线 <ins>
<i> 倾斜 <em>
<s> 删除线 <del>
左右两栏作用相同,但是为突出重要性的强调语境(语义),可选用右边一栏的标签
6.媒体标签
【图片标签】(单标签)
<img src=" " alt=" ">
其中,src,alt是属性名;
" "内的是属性值.
例:<img src="./1.gif">
(./是表示相对位置(当前目录),即现在这个HTML文件所在位置下的某图片,可以没有)
再有,alt是替换文本,图片加载失败时会显示alt文本.
例:<img src="./1.gif" alt="这是一只猫的图片">
第三,在该标签下可以加入title,当鼠标悬停时显示。
例:<img src="1.gif" alt="这是一只猫的图片" title="这是title文字,悬停时显示">
第四,可以设置图片标签的宽高属性。
用width和height可以调整,若只设置一者,则按比例调整图片.(图片不会变形)
例:<img src="1.gif" alt="..." title="..." width"200">
【媒体标签路径问题】
路径是寻找图片等媒体所在位置的关键。路径有绝对路径和相对路径:
绝对路径:从盘符开始,到最终位置 / 线上的网址从http开始到最终;
相对路径:从当前文件开始出发去找目标文件,找同级目录:
<img src="./1.gif" alt="这是其中的一种写法">
或
<img src="1.gif" alt="这两种写法是等价的">
下级目录
找当前images文件夹下的:
<img src="images/1.gif" alt="这是下级目录的写法">
和 上级目录
找当前文件夹上一级文件夹下的:
<img src="../1.gif" alt="...">
找当前文件夹上两节文件夹下的:
<img src="../../1.gif" alt="...">
【音频标签】(双标签)
<audio src="./music.mp3" contorls></audio>
但是,对于部分浏览器,有限制播放的情景出现,这时,就需要加一些常见如下的属性:
属性名 | 功能 |
controls | 显示播放的控制元件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
注:音频标签目前仅支持MP3、Wav、Ogg三种格式。
<!--再复习一下注释的写法哈哈哈哈-->
<!--具体实例,拥有上述三种介绍的实例-->
<audio src="./music.mp3" controls autoplay loop></audio>
【视频标签】
<!--完整实例-->
<video src="./video.mp4" controls autoplay muted loop>
解释其中的muted:谷歌浏览器中在autoplay后要加上muted实现静音(自动)播放。
其余属性和上面所介绍的音频一样。
注:视频标签目前支持的三种格式:MP4、WebM、Ogg。
7.链接标签(双标签)
对"百度"这两个字加上了超链接
<a href="http://www.baidu.com/">百度</a>
注:若无特殊说明,一般两个链接会放在同一行上,若想将两个链接分行放置,
则加上''<br>''换行标签即可。
再注:当开发网站的前期,不知道跳转界面的时候,"href"赋值为"#"就可,''#''叫做空链接。
仔细观察可以发现,以上写法的链接标签是直接跳转,当前界面会被覆盖,下面介绍一种属性,可以实现“在新窗口打开链接”。
属性:target.
赋值 | 显示效果 |
_self | 默认值,即当前窗口跳转,会覆盖 |
_blank | 新的窗口打开链接 |
在新建窗口打开标签如下:
<a href="http:www.baidu.com/" target="_blank">百度</a>
至此,超链接是唯一一个带颜色的标签,至于不想要紫色这个奇奇怪怪(误)的颜色,在之后的CSS学习中会学到修改颜色的功能。