html基础知识集合

最新推荐文章于 2022-03-02 14:44:27 发布

努力努力再努力12138

最新推荐文章于 2022-03-02 14:44:27 发布

阅读量144

点赞数 1

分类专栏：前端文章标签： html web

本文链接：https://blog.csdn.net/weixin_43490111/article/details/108739665

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

html基础知识1

和我一起学习前端吧，后续将沿着前端学习路线不断更新博客，想了解此方面的朋友关注我吧！
废话不多说，直接上代码，跟着代码一起学习html的知识点吧
(ps：本人万茜粉丝，文中包含大量万茜，理性看代码，爱你们)
代码都可直接运行的！
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>我爱万茜</title>
        <script src="../js/index.js" type="text/javascript"></script><!--script引入脚本文件-->
        <link href="../css/1.css" rel="stylesheet" type="text/css"/>
        <!--文档与外部资源的链接-->
        <!--<base href="//www.runoob.com/images/" target="_blank">-->
        <!--base定义所有链接默认地址，覆盖下面的target-->
        <meta name="万茜的崽崽" content="html学习">
        <!--<meta http-equiv="refresh" content="30"><!--每30秒刷新当前页面-->
        <style type="text/css">
        body{background-color:rgb(96, 235, 228)}
        p{color:rgb(180, 202, 57)}
        </style><!--html内部引入css,以外部引入的css为主-->
    </head>
    <body>
        <p id="p1">我的第一段<br>javascript</p><!--p产生新段落，br分行-->
        <b>加粗字体</b><br>
        <i>斜体</i><br>
        这是<sub>下标</sub>和<sup>上标</sup><br>
        <em>着重字体</em><br>
        <small>小号字体</small><br>
        <strong>加重语气</strong><br>
        <ins>插入字</ins><del>删除字</del>
        <a href="http://www.w3school.com.cn" target="_blank" rel="noopener noopener">通往W3CSCHOOL的秘密通道</a>
        <!--target为_blank时总在新窗口打开，为view_windows时在同一页面-->
        <a id="tips">有用的提示部分</a>
        <p>图片链接</p>
        <a href="../html/first.html">
        <img border="10" src="../img/lanqian.jpg" alt="蓝的万崽崽" height="60" height="60"><br><!--alt属性：当图片无法加载时显示的字-->
        </a>
        <img loading="lazy"  src="../img/qianqian.jpg" height="200" width="140">
        <hr>
        <p>
            电子邮件链接：
            <a href="mailto:someone@example.com?Subject=hello%20again" target="_top">
            发送邮件</a>
            <!--单词之间空格用%20防乱码，_top跳出框架-->
        </p>
        <table border="1" cellpadding="10" cellspacing="10"><!--cellpadding:单元格边距cellspacing:单元格间距-->
            <caption>表格标题</caption>
            <tr><!--tr一行th为表头td为一格-->
                <th>Header 1</th>
                <th colspan="2">Header 2</th><!--colspan：跨两列-->
            </tr>
            <tr>
                <td>row1,cell1</td>
                <td>row1,cell2</td>
                <td>row1,cell3</td>
            </tr>
            <tr>
                <td>row2,cell1</td>
                <td>row2,cell2</td>
                <td>这个单元格包含一个列表
                    <ul style="list-style-type:circle"><!--ul无序列表--><!--list-style-type取值：disc:圆点，circle:圆圈，square:正方形-->
                        <li>万</li>
                        <li>茜</li>
                        <li>崽</li>
                        <li>崽</li>
                    </ul>
                    <ol type="a"><!--type取值a,A,i,1-->
                        <!--ol有序列表-->
                        <li>万</li>
                        <li>茜</li>
                        <li>崽</li>
                        <li>崽</li>
                    </ol>
                    <dl>自定义列表
                        <dt>自定义列表项</dt>
                        <dd>自定义列表项定义</dd>
                    </dl>
                </td>
            </tr>
        </table>
    </body>
    
</html>

first.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <img src="../img/lanqian.jpg">
    </body>
</html>

1.css

#p1{
    color: rgb(127, 146, 255);
    font-size: 14px;
    text-align: center;
}

文件结构
文件夹

(怕侵权，万茜姐姐的美照就不放了，自己随便找几张图片吧)

努力努力再努力12138

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录