HTML笔记

最新推荐文章于 2023-01-01 21:40:30 发布

守护ZAQ

最新推荐文章于 2023-01-01 21:40:30 发布

阅读量235

点赞数

文章标签： html html5 css

本文链接：https://blog.youkuaiyun.com/qq_47896744/article/details/120441020

版权

这篇博客详细介绍了HTML的几个核心元素，包括a元素的href和target属性，如何实现固定锚点效果，列表元素（无序列表、有序列表、定义列表）的使用，table元素的结构和属性，以及iframe框架元素的特性及其属性设置。通过实例代码展示了这些元素的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.a元素

href:跳转的资源路径

target:代表打开资源的方式，默认值是_self，本窗口打开，其他值：_blank，新窗口打开，_parent,跳出父级框架打开,_top跳出顶级框架打开，结合框架之后，可以自定义值

2.固定锚点效果

3.列表元素

无序列表常用；有序列表不常用，且有序列表中ol里面只能包含li

<ol start="3" type="a">
    <li>sdaklgj</li>
    <li>sdaklgj</li>
    <li>sdaklgj</li>
</ol>

运行结果：

dl里只能包含dt,dd;dt后紧跟至少一个dd,dt是列表项，dd是列表项的详情说明

<dl>
    <dt>新闻1</dt>
    <dd>新闻1的摘要1</dd>
    <dd>新闻1的摘要2</dd>
    <dt>新闻2</dt>
    <dd>新闻2的摘要</dd>
</dl>

运行结果：

额外知识点：

①、引入css样式，需要使用link标签

相关属性：

rel : 代表引入的资源角色，stylesheet代表样式单【必要】

href : 代表引入的资源路径，可用相对路径和绝对路径【必要】

添加HTML的通用属性，比如：id,class

注意：

1、使用id属性，在书写css时，需要使用#前缀；使用class属性，在书写css时，需要使用.前缀;

2、使用id属性，属性值要求唯一的;使用class属性，属性值可以重复

html代码：

<!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>军训</title>
    <link rel="stylesheet" href="css/关羽.css">

</head>

<body>
    <div class="box">
        <div class="content">
            <h3><span>新闻动态</span>
                <a href="#">more+</a>
            </h3>
            <ul>
                <li>
                    <a href="#">
                        <img src="images/冰封战神.jpg" alt="">
                        <h4>关羽——冰封战神</h4>
                        <p>征服！以凛冬的名义！暴风雪的远征者，冰凌北地的灾厄之王！ 长夜与我同在！

                        </p>

                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/冰封战神.jpg" alt="">
                        <h4>关羽——冰封战神</h4>
                        <p>为我们的永生而战，为我们的不朽而战！不过丧失些许记忆，但我对此毫无留恋。
                        </p>

                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/冰封战神.jpg" alt="">
                        <h4>关羽——冰封战神</h4>
                        <p>践踏他们！奉上领地，或者化为冻腐的尘埃！ 我的大刀冰冷如雪。
                        </p>

                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/冰封战神.jpg" alt="">
                        <h4>关羽——冰封战神</h4>
                        <p>向那位顽抗的公主致敬！我想起...最后的...人性！</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

css代码：

* {
    margin: 0;
    padding: 0;
}

.box {
    margin-top: 100px;
    height: 500px;
    background-color: rgb(243, 243, 243);
}

.box .content {
    margin: auto;
    width: 80%;
}

.box .content h3 {
    height: 30px;
    border-bottom: 1px solid rgb(221, 221, 221);
    padding: 10px 0px;
}

.box .content h3 span {
    padding: 7px 0px;
    border-bottom: 2px solid rgb(217, 49, 36);
    float: left;
}

.box .content h3 a {
    padding-top: 7px;
    color: rgb(170, 170, 170);
    float: right;
    font-weight: 500;
    text-decoration: none;
}

.box .content ul {
    margin-top: 20px;
}

.box .content ul li {
    height: 340px;
    float: left;
    margin: 0 1%;
    width: 23%;
    list-style: none;
    background-color: white;
}

.box .content ul li a {
    text-decoration: none;
    display: block;
}

.box .content ul li a img {
    width: 100%;
}

.box .content ul li a h4 {
    font-weight: 500;
    color: rgb(217, 49, 46);
    padding: 10px;
    padding-bottom: 0px;
}

.box .content ul li a p {
    color: #999;
    font-size: 15px;
    padding: 10px;
    line-height: 23px;
}

.box .content ul li a p:hover {
    color: rgb(217, 49, 36);
}

运行结果：

4.table元素

相关html元素：

tr:代表行

td:普通单元格

th:表头单元格，特征：内容居中，加粗

col:代表列，可以对指定列整体做样式、属性处理，span属性可以指定是哪些连续的列

代码片段：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>我是一个页面</title>
    <style>
        table {
            border-collapse: collapse;
            margin: auto;
        }
        
        th,
        td {
            width: 100px;
            height: 40px;
            border: 1px solid black;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <p style="text-align: center;">课程表</p>
        <tr>
            <th>语文</td>
                <td>7:00-7:40</td>
                <td>7:50-8:30</td>
        </tr>
        <tr>
            <th>数学</td>
                <td>7:00-7:40</td>
                <td>7:50-8:30</td>
        </tr>
        <tr>
            <th>英语</td>
                <td>7:00-7:40</td>
                <td>7:50-8:30</td>
        </tr>

    </table>
    <table>
        <tr>
            <th rowspan="3">01</th>
            <th>02</th>
            <th>03</th>
            <th>04</th>
            <th>05</th>
            <th>06</th>
        </tr>
        <tr>

            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
        </tr>
        <tr>

            <td colspan="2">02</td>

            <td colspan="3">04</td>

        </tr>

    </table>
    <table>
        <tr>
            <td class="boy">01</td>
            <td class="boy">02</td>
            <td class="boy">03</td>
            <td class="boy">04</td>
            <td class="girl">05</td>
            <td class="girl">06</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
        </tr>
    </table>
</body>

</html>

运行结果：

相关属性：cellspacing:代表单元格之间的间距，一般不使用，而是采用css处理 border-collapse:collapse;

cellpadding:代表单元格内内容与边框的间距，一般不使用，而是采用css处理padding:5px;

border:代表表格的表框，一般使用

width:代表表格的宽度，一般不使用，采用css处理

align:代表对齐的方式，默认是左对齐（left），可以设置居中对齐（center），一般不使用，采用css处理 text-align:center

5.框架元素iframe

该元素除了可指定 id、style、class等通用属性之外，还可指定如下属性。
src:该属性指定一个URL，指定该iframe将装载哪个页面。
name:设置该iframe的名字。
longdesc:该属性也是指定一个页面的URL，该页面包含了关于该iframe的长描述。scrolling:设置是否在 iframe中显示滚动条。该属性支持yes(显示滚动条）、no (不显示滚动条）和 auto (iframe大小不够显示时显示滚动条，否则不显示滚动条)。height:设置该iframe的高度。
width:设置该iframe的宽度。

代码示例：

<!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>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="box">
        <ul class="box_left">
            <li class="li_item">
                <a href="http://www.huya.com" target="ld" class="a_item">test1</a></li>
            <li class="li_item">
                <a href="http://www.hbu.cn" target="ld" class="a_item">test2</a></li>
            <li class="li_item">
                <a href="http://cet.neea.edu. " target="ld" class="a_item">test3</a></li>
        </ul>
        <div class="box_right">
            <iframe src="http://www.huya.com" name="ld" frameborder="0" class="iframe" ;></iframe>
        </div>
    </div>
</body>

</html>

css代码：

* {
    text-decoration: none;
    list-style: none;
}

.box {
    width: 80%;
    margin: auto;
    margin-top: 100px;
    border: 3px solid #910000;
    height: 500px;
    background-color: yellow;
}

.box_left {
    float: left;
    width: 10%;
    height: 500px;
}

.box_right {
    float: right;
    width: 85%;
    height: 500px;
}

.iframe {
    width: 100%;
    height: 500px;
}

.li_item {
    list-style: none;
}

.a_item {
    color: #fff;
    text-align: center;
    display: block;
    border: 1px solid #fff;
    margin-top: 100px;
    padding: 4px;
    border-radius: 3px;
    box-shadow: 2px 2px 4px #ccc;
}

运行结果：