学习笔记3

最新推荐文章于 2025-05-29 10:17:42 发布
weixin_43750236
最新推荐文章于 2025-05-29 10:17:42 发布
阅读量112
点赞数
分类专栏： html 基础学习文章标签：前端
本文链接：https://blog.youkuaiyun.com/weixin_43750236/article/details/84493576
版权
基础学习同时被 2 个专栏收录
10 篇文章
订阅专栏
html
1 篇文章
订阅专栏
本文深入探讨HTML的各种元素及其属性，包括视频、音频、图片、超链接、锚点链接、列表、表格等，同时讲解了如何使用这些元素来增强网页功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
pppppp
111
<video src="./视频1.mp4" controls></video><audio src="./song.ogg" controls></audio>
<!-- video和audio有两个必要属性：src和controls -->
<img src="" art="图片加载中" title="这是一张图片" />


<a href="http:/www.badu.com/" targer=_blank>百度</a>
<a href="./001(6).jpg" download="下载图片命名的名字">下载图片</a>

<!-- 超链接标签有一个必要属性：href（超链接的地址），target表示连接打开的方式。在超链接图片时，加上download属性，属性值为下载后图片的名字，可以实现图片下载 -->
<div class="just">
    <a href="#base">基本情况</a>
    <a href="#work">工作情况</a>
    <a href="#life">生活情况 </a>
    <a href="./001(2).jpg" download="rrtt.jpg">图片下载 </a> -->
</div>
<div>
    <section id="base">
        <h1>基本情况</h1>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
    </section>
    <section id="work">
        <h1>work情况</h1>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
    </section>
    <section id="life">
        <h1>life情况</h1>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
        <p>（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用</p>
    </section>
</div>
<pre>











            <a href="#top">回到顶部 </a>
        </pre>
<!-- href="#top"这是一个默认的设定，仅当文档中id没有top这个属性值时有效。 -->

<!-- a超链接标签还可以实现锚点链接，将href属性值设置为#+想要跳转的元素的id值即可实现跳转（当前页面显示不完才有跳转的效果），百科里面就有这样的设置。 -->

<a href="https://www.baidu.com/" target="_blank">href为正常百度地址 </a> <br />

<a>没有href，如同一个span标签，表示普通文本 </a>
<br />
<a href="#"> #号(描点链接相关) </a>
<br />
<a href=""> 空格(会刷新) </a>
<br />
<a href="javascript:void()"> void(会执行js代码，返回空，什么都不做) </a>
<br />
<a href="javascript:alert(666)"> alert(666),(会执行js代码，弹框) </a>
<!-- alert弹框的意思 -->
<br />

<iframe src="https://www.baidu.com/" width="500px" height="500px" scrolling="no" frameborder="1px"></iframe>
<!-- 规定是否在 iframe 中显示滚动条。 -->

<iframe name="ifr" width="500px" height="500px"></iframe>
<a href="http://www.baidu.com/" target="ifr">百度一下</a>
<a href="https://www.hao123.com/" target="ifr">hao123</a>
<a href="http://www.blogzl.com/" target="ifr"> blogzl</a>
<!-- 1.通过将a标签的target属性设为页面中一个嵌入式框架iframe的“name"属性的值，使文件内容在这个iframe内打开。
2.通过iframe标签引入一个html文件，文件中含有一个a标签，链接百度地址。如果此a标签的target属性值为" _parent 表示在框架的父级打开页面或文件，_top 在框架的最顶层打开新的页面或文件（若包含多个框架的嵌套）（未进行实例） -->
<br />
<br />
<br />


<ul type="disc">
    <li>水果
        <ul>
            <li>苹果</li>
            <li>橘子</li>
        </ul>
    </li>

    <li>肉类
        <ul>
            <li>牛肉</li>
            <li>猪肉</li>
        </ul>
    </li>
</ul>
<!-- 列表可以嵌套；无序列表可以通过属性type来进行列表前面小圆点的类型：默认disc小黑点，circle小圆圈，square黑方块； -->

<ol type="A" start="5" reversed>
    <li>猪</li>
    <li>马</li>
    <!-- 有序列表type设置序号的类型，有1阿拉伯数字，A大写数字，a小写数字，I大写罗马数字，i小写罗马数字，start规定开始序号，值为阿拉伯数字。 reversed是倒叙的意思 -->
    <!-- 有序列表无序列表都可以嵌套。 -->
</ol>
<dl>
    <dt>html</dt>
    <!-- dt可以理解为dtitle ，定义的标题 -->
    <dd>超文本标记语言</dd>
    <!-- dd可以理解为d description（描述）的意思，对dt进行描述 。dt和dd是同级的，显示类型都为块级元素（block）-->
</dl>




<table border="1">
    <thead>
        <th>表格示范</th>
    </thead>
    <tbody>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
        </tr>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>表脚第一列</td>
            <td>表脚第二列</td>

        </tr>
    </tfoot>

</table>


<form action="http://www.baidu.com/" autocomplete="on" novalidate>
    <!-- 自动完成关闭 autocomplete="off"    novalidate：不进行验证，(写在form里面)比如要求输入邮箱时，html会要求有@，有了novalidate后就不需要@也能提交了-->

    <input list="hello">
    <datalist id="hello">
        <option value="1">请选择</option>
        <option value="2">教育</option>
        <option value="3">化工</option>
        <option value="4">IT</option>
        <option value="5">其他</option>
        <!-- option最好有一个value值，若没有浏览器在运行时也会默认给你加上一个 -->
    </datalist>

    <!-- <ouput></ouput>是一个双标签，缺少结束标签会导致很严重的bug -->


</form>
<form>
    <label>下载中</label>
    <progress></progress>
    <label>下载进度...</label>

    <progress max="100" value="47"></progress> -->
    <!-- 有一个最大的max值，有一个当前value值 -->
</form>

<video controls autoplay loop>
    <source src="./视频1.mp4" type="video/mp4" />
</video>


<meter min="0" low="30" high="70" max="100" value="50" optimumu="50"></mete>
    <!-- meter里面被 min low high max 四个值分成三个区间，当当前值value和最佳值optimum在同一个区间时，进度条显示位绿色；当两者在相邻区间时，进度条显示位黄色；当两者中间隔了一个区间时，进度条显示位红色 -->