HTML二识

最新推荐文章于 2024-10-04 06:11:34 发布

2301_80286359

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量1k

点赞数 7

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_80286359/article/details/136571842

版权

图片，音频，视频标签

标签	描述
`<img>`	定义图片
`<audio>`	定义音频
`<video>`	定义视频

定义图片：

src：规定显示图片的URL（统一资源定位符）
height：定义图像的高度单位：px 像素点或百分点
width：定义图像的宽度

定义音频：支持的音频格式：MP3,WAV,OGG

src：规定音频的URL
controls：显示播放控件

定义视频：支持的音频格式：MP4,WEBM,OGG

src：规定视频的URL
controls：显示播放控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 资源路径：
            绝对路径：完整路径
            相对路径：相对位置关系
                    1，xxx/html/03-图片音频视频 html
                      xxx/html/aa1.png
                      在当前目录下，就直接写文件名或 . 代表当前目录
                      ./aa1.png & aa1.png
                     2, xxx/html/03-图片音频视频 html
                          xxx/html/img/aa1.png
                          如果在当前目录下的子目录
                          ./img/aa1.png
                      3,  xxx/html/03-图片音频视频 html
                          xxx/img/aa1.png
                          如果在上一级目录
                          ../img/aa1.png

                         尺寸单位：px：像素点
                                百分比：%
    -->

    <img src="aa(1).png" width="299",height="88">

    <audio src="录音.mp3" controls = "controls">
    </audio>
`   <video src="ea639c26955526de853bf886b66fafcf.mp4" controls = controls width="250" height="207"></video>
</body>
</html>

超链接标签

本节学习资源

标签	描述
`<a>`	定义超链接，用于链接另一个资源

href：指定访问资源的URL
target:指定打开资源的方式。
- _self: 默认值，在当前页面打开
- _blank: 在空白页打开

学习资源

<a href="https://www.itcast.cn" target="_self">点我有惊喜</a>

列表标签

标签	描述
`<ol>` `order list`	定义有序列表
`<ul>` `unorder list`	定义无序列表
`<li>`	定义列表项

type: 设置项目符号不建议使用，后续使用css

表格标签

标签	描述
`<table>`	定义表格
`<tr>`	定义行
`<td>`	定义单元格
`<th>`	定义表头单元格

定义表格：
- border: 规定表格边框的宽度
- width: 规定表格的宽度
- cellspacing:规定单元格之间的空白
定义行：
- align: 定义表格行的内容对齐方式
定义单元格：
- rowspan: 规定单元格可横跨的行数
- colspan: 规定单元格可横跨的列数。

<table border="1" cellspacing="0" width="100%">
    <tr>
      <th>序号</th>
      <th>品牌logo</th>
      <th>品牌名称</th>
      <th>企业名称</th>
    </tr>
    <tr align="center">
      <td>010</td>
      <td><img src="../resource/三只松鼠.png" height="50",width="60"></td>
      <td>三只松鼠</td>
      <td>三只松鼠</td>
    </tr>
    <tr>
      <td>009</td>
      <td><img src="../resource/优衣库.jpg" height="50",width="60"></td>
      <td>优衣库</td>
      <td>优衣库</td>
    </tr>  <tr>
    <td>008</td>
    <td><img src="../resource/小米.jpg" height="50",width="60"></td>
    <td>小米</td>
    <td>小米科技有限公司</td>
  </tr>

  </table>

  <br>
  <hr>
  <br>
  <table border="1" cellspacing="0" width="100%">
    <tr>
      <th colspan="2">品牌logo</th>
      <th>品牌名称</th>
      <th>企业名称</th>
    </tr>
    <tr align="center">
      <td>010</td>
      <td><img src="../resource/三只松鼠.png" height="50",width="60"></td>
      <td>三只松鼠</td>
      <td>三只松鼠</td>
    </tr>
    <tr>
      <td rowspan="2">009</td>
      <td><img src="../resource/优衣库.jpg" height="50",width="60"></td>
      <td>优衣库</td>
      <td>优衣库</td>
    </tr>  <tr>
    <td>008</td>
    <td><img src="../resource/小米.jpg" height="50",width="60"></td>
    <td>小米</td>
  </tr>

  </table>