html学习之旅第三期

今天是博主写个人学习分享的第三期，话不多说开始今天的课程。

一.图片标签

图片标签是用来在页面中插入图片用的标签，在页面中也是最常见的在vscode中敲img就能出来图片标签的格式在插入图片时我们可以对其进行宽高的限制，width是指宽，而height是指高。不止是在图片中宽高在整个页面中的其他地方也有应用，图片标签中的src是用来输入图片的路径的，alt是在当图片无法加载出来时用来替代的文本。

1.1相对路径与绝对路径

如图所示图片中的路径分为绝对路径与相对路径，绝对路径是指将图片的位置信息全部囊括进去以根目录为主，而相对路径是以该图片所在文档位置为主。

二.音频标签

音频标签是用来将一段音频引入页面中进行播放，引入路径方法与图片引入无任何区别，需要注意的一点是图片的标签是单标签，音频标签是双标签<audio src=""></audio>。

在音频文件中除了有路径还要其他的属性：

2.1控制面板

constrols是控制面板属性，在书写时其属性值在路径后按一个空格进行书写，切记属性值要在开始标签里书写。

2.2循环播放

循环播放是loop 与控制面板属性一样，其属性值一定要在开始标签中进行书写。

2.3自动播放

autoplay是自动播放属性 当我们在看电视剧时就会自动播放，这个属性也是一样的，其属性值同样是在开始标签中书写。

三.视频标签

视频标签与音频标签相同，同样是一个双标签，视频标签是<video></video>。

视频标签与音频标签中的属性值无任何区别，视频标签比音频多了一个muted（静音）属性，属于功能性的属性，感兴趣的可以自己去试一试。

四、超链接

超链接属性是双标签<a href=""></a>,其作用就是通过点击文字或者图片进行跳转，heft属性同样是链接，但是与src属性不同的是herf属性是用来链接要跳转的页面。

target的属性是在超链接中我们可以选择新页面的打开方式，默认是在原页面打开也就是_self，我们可以通过这个属性将要跳转的页面变成独立的一个窗口打开也就是_blank。

五、列表标签

列表标签是指给一堆数据添加列表语义，也就是告诉搜索引擎/浏览器这一堆数据是一个整体。分为三种，有序列表、无需列表、自定义列表。

有序列表

有序列表是指给一堆数据将其进行有序排列，使其从混乱状态变成一个条理分明，有先后之分。

<ol>

      <li>    </li>


</ol>

 ol的特点： 每一项的前面是序号，ol属性中还要一个属性值为type意思是类型，就是可以更改有序列表的数字变化，比如1，A ，a，还要古罗马数字的12345，start属性值是指从第一个数字开始可以从任何一个数字开始进行排序。

注意：也可以通过有序列表的 属性来改变有序序列表的格式，如： <ol type="i">表明，序号是 i 和 ii 这种表示。但是一般没有人这么用，要想改变格式，通过css。

无序列表

<ul>
 
    <li>需要显示的条目内容</li>
 
</ul>
 
li：list litm的缩写：条目列表。list：列表；item:条目

无序列表就和有序列表不同了，无序列表不论数据的前后顺序只负责排序，无序列表一般应用在导航栏，新闻列表，商品列表等等。

自定义列表

<dl>


<dt></dt>
<dd></dd>


</dl>

自定义列表是指给一堆数据进行排列顺序，先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息。

自定义列表的应用是在做图文混排或者网站尾部相关信息时才会引用。

注意：和ul、ol一样，dl和dt/dd是一个整体，所以他们一般情况下不会单独出现，一般都是一起出现。和ul、ol一样，由于dl和dt/dd是一个组合标签，所以dl中建议只放dt和dd标签，一个dt可以没有对应的dd，也可以有多个对应的dd，但是无论有或者没有dd都不推荐使用。推荐使用一个dt对应一个dd，和li标签一样，当需要丰富界面时，我们可以在dt和dd标签中继续添加其他标签。但是不要直接在dl标签中添加其他的标签。

六、表格

<table>

     <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>11</td>
            <td>22</td>
            <td>33</td>
            <td>44</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>444</td>
        </tr>
     




     </table>

表格是用在当我们制作某些数据时所用的，比如成绩表单或者超市的采购清单等等。

表格的属性有：

border 边框的宽度  width 表格宽度  height 表格高度 tr行 td列。

width和height我在刚才的图片标签已经介绍过了不在这里赘述了，border属性：是一个用于设置各种单独的边界属性的简写属性。

表单属性也有比较快的书写方式table>tr>td当然后面乘以的数量就看实际情况了。

好了，写了这么多希望对小白的朋友有所帮助，也希望大佬能够谅解，我的文笔不是特别好，请勿喷。