前端小白自学第三天

最新推荐文章于 2024-07-10 14:03:37 发布

桥北丶

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量137

点赞数 3

分类专栏：前端自学前端 html标签文章标签：前端 html5 学习 html

本文链接：https://blog.csdn.net/m0_59201314/article/details/125900457

版权

自学前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

html标签

12 篇文章 0 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

前两天学的都是基础知识，今天学的稍微多了一点

一、超级链接的应用

a标签 href是必备标签 href也有不同用法

<a href="">跳转到自己</a>
<a href="http://www.baidu.com">百度</a>
<a href="./百家号.html">当前路径下的百家号案例</a>

其中 target标签表示打开方式常用的有_blank、_self

 <a href="http://www.baidu.com" target="_blank">新标签页打开</a>
 <a href="http://www.baidu.com" target="_self">自身页面打开</a>

二、图片标签的应用

基础样式

<img src=“” alt=“” 可设置属性宽高等

alt用法图片加载失败时，显示文本

<img src="./img/11.jpeg" alt="图片丢失">

三、音频和视频标签

audio 音频标签
video 视频标签

src 音频或视频地址
controls 组件
autoplay 自动播放谷歌浏览器禁用

音频<audio controls src="链接"></audio>
视频<video width="300" controls src="链接"></video>可设置宽高

四、表格标签

table 外框
tr 表中行
th 表头单元格居中加粗
td 普通单元格
border 边框
cellpadding 单元格内补
cellspacing 单元格间距
table中可以没有th td自动平分table的宽度

<table border="" width="60%" align="center" style="text-align: center;">
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>Age</th>
        </tr>
        <tr>
            <td rowspan="2">10086</td>
            <td>移动</td>
            <td>20</td>
        </tr>
        <tr>
            <td colspan="2">联通</td>
        </tr>
        <tr>
            <td colspan="3">
            <table border="" width="100%">
                <tr>
                    <td>中国</td>
                    <td>河南</td>
                </tr>
            </table>
            </td>
        </tr>
    </table>

五、用table复刻百家号界面

图片整体可分为最上面的一块和下面的左右结构，其中左边是一个table表格，第二行又是一个table表格，用到了表格嵌套。右边是三个无序列表。代码如下：

<body>
    <table border="">
        <tr>
            <td>
                <img src="./img/1.jpeg" style="width: 240px; height:160px;">
                <table>
                    <tr>
                        <td>
                        <img src="./img/2.jpeg" style="width: 112px; height:84px ;margin-right :10px;">
                            <p style="margin: 0;"><a href="">Soul失去灵魂</a></p>
                        </td>
                        <td>
                            <img src="./img/3.jpeg" style="width: 112px; height:84px;">
                            <p style="margin: 0;"><a href="">良品铺子迷失高端化</a></p>
                        </td>
                    </tr>
                </table>
                <img src="./img/4.jpeg" style="width: 240px; height:160px;">
            </td>
            <td>
                <ul style="font-size: 20px; list-style: none; padding-left: 0%;">
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                </ul>
                <ul style="font-size: 20px; list-style: none; padding-left: 0%;">
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                </ul>
                <ul style="font-size: 20px; list-style: none; padding-left: 0%;">
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                    <li><a href="">腾讯云需要“转基因”</a></li>
                </ul>
            </td>
        </tr>
    </table>
</body>