前端学习--HTML1

.桃子摇摇冰

已于 2023-02-07 22:51:25 修改

阅读量101

点赞数 4

分类专栏： html 基本标签文章标签：前端 html 学习

于 2022-12-13 19:43:57 首次发布

本文链接：https://blog.csdn.net/weixin_48675760/article/details/128284185

版权

基本标签同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

一、HTML--超文本标记语言

1、HTML标签

（1）文档声明标签：<!DOCTYPE xxx>

（2）浏览器语言（搜索引擎优化和浏览器有帮助）：<html lang=”xxx”> “en”代表英文 “zh-CN”代表中文 “ja-jp”代表日文

（3）编码：<meta charset="UTF-8">

（4）文本标签

①标题标签（双标签h1----h6）：<h1>XXX</h1>

②段落标签（双标签）：<p>XXX</p>

③换行标签（单标签）：<br>

④水平线标签（单标签）：<hr>

⑤加粗标签有两个（双标签）：<b/strong>

⑥倾斜标签有两个（双标签）：<em/i>

⑦删除标签有两个（双标签）：<s/del>

（5）图片标签

单标签： <img src='' alt=''>

注意：

    <!-- 
        图片标签-单标签 
        属性要写在开始标签中 
        属性可以有多个
        属性之间通过空格分隔
        单引号更标准
        属性：
        src：图片的路径
            路径：相对路径/绝对路径
            相对路径：当面目录：./
                     上一层：../
                     上一层的上一层：../../
            绝对路径：从根目录开始一直写到文件的位置（不用）
    -->

①路径分类：绝对路径、相对路径

②图片标签的属性

（6）表格标签：table tr：代表行 td：代表列

     <table>
        <tr>
            <td></td>
        </tr>
     </table>

重点：table的属性：

border：边框，值是数字，单位像素（px）

cellspacing：单元格与单元格之间的间距

cellpadding：单元格与内容之间的间隙

style:样式

width：宽度

height：高度

其中：<th>XXXX</th>-----可以加粗表头文字

注意：tr：行必须放在table

td：列必须放在tr

可以将表格分为三个部分：thead:表头 tbody：内容 tfoot：表下部

----能够清楚的知道表格的布局而且方便添加样式

单元格的合并：（合并单元格的操作，属性都是加在td中的）

属性：colspan：合并列

rowspan：合并行

（7）超链接标签：<a href=""></a>

超链接标签

属性：

href:链接地址

target:（打开网页的地方）_blank（新窗口打开）

（8）列表

①有序列表

    <ol>
        <li>
            <a href="#">顿感力</a>
        </li>
        <li></li>
        <li></li>
    </ol>

②无序列表

    <ul>
        <li>
            <a href="#">顿感力</a>
        </li>
        <li></li>
        <li></li>
    </ul>

（9）标签的分类

标签的分类：

块元素：独占一行 h1---h6 p ul-li ol-li.....

可以设置宽高

特殊块标签：div---单纯的容器，没有任何的样式修饰

内联元素：a img.....

不能设置宽高

特殊内联标签：span---单纯的容器，没有任何的样式修饰

内联块

Display:inline-block

内联与块可以相互转换

使用样式：display:block----->块

display:inline ------>内联

使用标签类型的转换可以实现横向列表

    <ul style="background-color: #F6F6F1; height:40px">
        <li style="display:inline-block; width:80px"><a href="#" style="color:#614E3C">购书单</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#614E3C">电子图书</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#614E3C">豆瓣书店</a></li>
        <li style="display:inline-block; width:120px"><a href="#" style="color:#614E3C">2021年度榜单</a></li>
        <li style="display:inline-block; width:120px"><a href="#" style="color:#614E3C">2021书影音报告</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#614E3C">购物车</a></li>
    </ul>

（10）练习题

根据今天所学知识绘制页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul style="background-color: #545652;">
        <li style="display:inline-block; width:50px"><a href="#" style="color:#D5D5D5">豆瓣</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#D5D5D5">读书</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#D5D5D5">电影</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#D5D5D5">音乐</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#D5D5D5">同城</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#D5D5D5">小组</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#D5D5D5">阅读</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#D5D5D5">FM</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#D5D5D5">时间</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#D5D5D5">豆品</a></li>
    </ul>
    <h3 style="background-color: #F6F6F1;height:60px; color: #5A4129">豆瓣读书</h3>
    <ul style="background-color: #F6F6F1; height:40px">
        <li style="display:inline-block; width:80px"><a href="#" style="color:#614E3C">购书单</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#614E3C">电子图书</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#614E3C">豆瓣书店</a></li>
        <li style="display:inline-block; width:120px"><a href="#" style="color:#614E3C">2021年度榜单</a></li>
        <li style="display:inline-block; width:120px"><a href="#" style="color:#614E3C">2021书影音报告</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#614E3C">购物车</a></li>
    </ul>
    <span style="color:#111111; font-size:larger;" >新书速递</span>
    <ul style="display:inline;">
        <li style="display:inline-block; width:50px"><a href="#" style="color:#111111">全部</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#9B9B9B">文学</a></li>
        <li style="display:inline-block; width:50px"><a href="#" style="color:#9B9B9B">小说</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#9B9B9B">历史文化</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#9B9B9B">社会纪实</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#9B9B9B">科学新知</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#9B9B9B">艺术设计</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#9B9B9B">商业经营</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#9B9B9B">绘本漫画</a></li>
        <li style="display:inline-block; width:80px"><a href="#" style="color:#111111"></a>更多</li>
    </ul>
    <hr>
    <table border="0" cellspacing="20" >
        <tr>
            <td>
                <img src="../../img/6.jpg" alt="图片未加载" width="200px" height="300px">
                <p><a href="#" style="color:#338CC8">我看见无数的她</a></p>
                <p>张莉</p>
            </td>
            <td>
                <img src="../../img/7.jpg" alt="图片未加载" width="200px" height="300px">
                <p><a href="#" style="color:#338CC8">新潮职业</a></p>
                <p>小红书的博主们</p>
            </td>
            <td>
                <img src="../../img/8.jpg" alt="图片未加载" width="200px" height="300px">
                <p><a href="#" style="color:#338CC8">和魂汉神</a></p>
                <p>吴伟明</p>
            </td>
            <td>
                <img src="../../img/9.jpg" alt="图片未加载" width="200px" height="300px">
                <p><a href="#" style="color:#338CC8">柠檬炸弹：梶井基次郎作品集</a></p>
                <p>[日] 梶井基次郎</p>
            </td>
            <td>
                <img src="../../img/10.jpg" alt="图片未加载" width="200px" height="300px">
                <p><a href="#" style="color:#338CC8">数字抑郁时代</a></p>
                <p>[德] 萨拉·迪芬巴</p>
            </td>
        </tr>
        <tr>
            <td>
                <img src="../../img/11.jpg" alt="图片未加载" width="200px" height="300px">
                <p><a href="#" style="color:#338CC8">难逃单调：当人遭遇经济浪潮</a></p>
                <p>[加] F. S. 迈克尔斯</p>
            </td>
            <td>
                <img src="../../img/12.jpg" alt="图片未加载" width="200px" height="300px">
                <p><a href="#" style="color:#338CC8">为了活下去的思想</a></p>
                <p>[日]上野千鹤子</p>
            </td>
            <td>
                <img src="../../img/13.jpg" alt="图片未加载" width="200px" height="300px">
                <p><a href="#" style="color:#338CC8">社会中的国家</a></p>
                <p>[美]乔尔·S·米格</p>
            </td>
            <td>
                <img src="../../img/14.jpg" alt="图片未加载" width="200px" height="300px">
                <p><a href="#" style="color:#338CC8">望花</a></p>
                <p>邓安庆</p>
            </td>
            <td >
                <img src="../../img/15.jpg" alt="图片未加载" width="200px" height="300px">
                <p><a href="#" style="color:#338CC8">鼠族</a></p>
                <p>[美] 阿特·斯皮格曼</p>
            </td>
        </tr>
    </table>
    <h3 style="color:#111111">畅销图书馆</h3>
    <hr>
    <ol>
        <li>
            <table>
                <tr>
                    <td style="width:200px;"><a href="#" style="color:#3377AA">顿感力</a></td>
                    <td rowspan="2"><a href="#" style="color:#999999">去购买</a></td>
                </tr>
                <tr>
                    <td>[日]渡边淳一</td>
                </tr>
            </table>
        </li>
        <li>
            <table>
                <tr>
                    <td style="width:200px;"><a href="#" style="color:#3377AA">尘埃落定</a></td>
                    <td rowspan="2"><a href="#" style="color:#999999">去购买</a></td>
                </tr>
                <tr>
                    <td>阿来</td>
                </tr>
            </table>
        </li>
        <li>
            <table>
                <tr>
                    <td style="width:200px;"><a href="#" style="color:#3377AA">生死疲劳</a></td>
                    <td rowspan="2"><a href="#" style="color:#999999">去购买</a></td>
                </tr>
                <tr>
                    <td>莫言</td>
                </tr>
            </table>
        </li>
        <li>
            <table>
                <tr>
                    <td style="width:200px;"><a href="#" style="color:#3377AA">恐龙小q-四季变化：科普认知绘本（套装全4册）</a></td>
                    <td rowspan="2"><a href="#" style="color:#999999">去购买</a></td>
                </tr>
                <tr>
                    <td>   </td>
                </tr>
            </table>
        </li>
        <li>
            <table>
                <tr>
                    <td style="width:200px;"><a href="#" style="color:#3377AA">小小聪明豆绘本系列</a></td>
                    <td rowspan="2"><a href="#" style="color:#999999">去购买</a></td>
                </tr>
                <tr>
                    <td>阿克塞尔·舍夫勒/绘</td>
                </tr>
            </table>
        </li>
        <li>
            <table>
                <tr>
                    <td style="width:200px;"><a href="#" style="color:#3377AA">张嘉骅少年读经典系列</a></td>
                    <td rowspan="2"><a href="#" style="color:#999999">去购买</a></td>
                </tr>
                <tr>
                    <td>张嘉骅 著/郑慧荷 绘</td>
                </tr>
            </table>
        </li>
        <li>
            <table>
                <tr>
                    <td style="width:200px;"><a href="#" style="color:#3377AA">苏东坡传</a></td>
                    <td rowspan="2"><a href="#" style="color:#999999">去购买</a></td>
                </tr>
                <tr>
                    <td>林语堂</td>
                </tr>
            </table>
        </li>
        <li>
            <table>
                <tr>
                    <td style="width:200px;"><a href="#" style="color:#3377AA">瓦尔登湖</a></td>
                    <td rowspan="2"><a href="#" style="color:#999999">去购买</a></td>
                </tr>
                <tr>
                    <td>王光林（译）</td>
                </tr>
            </table>
        </li>
        <li>
            <table>
                <tr>
                    <td style="width:200px;"><a href="#" style="color:#3377AA">活着</a></td>
                    <td rowspan="2"><a href="#" style="color:#999999">去购买</a></td>
                </tr>
                <tr>
                    <td>余华</td>
                </tr>
            </table>
        </li>
        <li>
            <table>
                <tr>
                    <td style="width:200px;"><a href="#" style="color:#3377AA">《宋朝的腔调》</a></td>
                    <td rowspan="2"><a href="#" style="color:#999999">去购买</a></td>
                </tr>
                <tr>
                    <td>石继航</td>
                </tr>
            </table>
        </li>
    </ol>
</body>
</html>