HTML假期学习计划第一天-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_53082290/article/details/131817514

作者通过观看b站上的黑马程序员公开课复习HTML基础知识，记录了包括HTML结构标签、文本格式化、图像和媒体元素、链接、表格以及表单的相关语法，并分享了学习过程，鼓励他人指正和交流。

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

假期准备系统梳理学习一下本科学过的知识，所以在b站中找了公开课学习，准备复习一下并记录过程，于是决定开blog并且把学习过程和学习笔记记录下来，也方便各位大神指正补充或者帮助有需要的同学。

第一天主要是html的一些基础知识，b站的公开课是黑马程序员的，链接如下：基础班导学-精讲与实战_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Kg411T7t9?p=1&vd_source=813025669b3482af3d382582301b13c7如果有需要的也可以去看，老师讲的很幽默，适合小白，下面的代码是我课上记录的一些笔记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>认知篇</title>
</head>
<body>
    <h1>一级标题</h1>
    <hr><!--hr是水平分隔符的意思-->
    <p>这是一段话<br>这里换行.</p>
    <p>下面这段话是会展示一些功能，比如<b>加粗文字</b>或者<strong>加粗文字</strong>，<u>下划线文字</u>或者<ins>下划线文字</ins>，<i>倾斜文字</i>或者<em>倾斜文字</em>，<s>文字上加上下划线</s>或者<del>文字上加上下划线</del></p>
    <img src="./wanye.jpg" alt="万叶的图片，显示出错" title="万叶" width="100" height="160">  
     <!--同路径：./  下级目录：下级文件名/ 上级文件名：../ -->
    <!--src是图片路径，要记得相对路径，alt是替换文字，当图片出问题时就会显示，title是悬停后显示的标题
        width是宽度hight是长度，单位是px（像素），二者给其一时另一个会自动等比例缩放-->
    <audio src="" controls autoplay loop></audio>
    <!-- src依旧是音频路径，controls是显示播放控件，autoplays是自动播放功能，但是很多浏览器出于安全与隐私不支持此功能。loop是循环播放 ，多用mp3格式-->
    <video src="" autoplay muted></video>
    <!--对于video，所有的控件与audio相同。autoplay在浏览器中可以配合muted实现静音播放,尽量使用MP4文件-->
    <br><hr>
    <a href="https://www.baidu.com" target="_blank">去往百度</a>
    <!--这里herf就是跳转地址  如果不知道跳转地址，可以写空链接. 
        targrt用来控制目标网页的打开形式，默认为_self(覆盖跳转)，还有_blank(保留网页新窗口跳转),_parent当前窗口打开连接，_top将链接显示在无框架窗口中-->
    <br><hr>
    <a href="practice.html" target="_self">新的页面</a>
    <br><hr>
    <a href="#">空链接</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础篇</title>
</head>
<body>
    <div>这是div标签，本身没有任何含义，好处是可以使此文本&nbsp;&nbsp;独占一行，实现自动换行</div>
    <!--&nbsp是字符实体，html不认识多个空格，使用nbsp添加空格-->
    <span>这是span标签，本身没有任何含义，也不能使文本独占一行</span>
    <!--上述两种标签都是去语义化标签，没有任何含义，后续可以通过css来添加样式，使用十分高频，是实现网页布局的重要标签-->
    <br><hr>
    <ul title="水果列表"><!--无序列表，嵌套li存在，每行之间没有顺序关系，ul里只允许有li标签-->
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>
    <br><hr>
    <ol title="成绩排行"><!--有序列表，嵌套li存在，每行之间有顺序关系，ol里只允许有li标签-->
        <li>03:100</li>
        <li>01:98</li>
        <li>02:97</li>
    </ol>
    <br><hr>
    <dl title="帮助中心"><!--自定义列表，嵌套dt、dd存在，每行之间没有顺序关系，dl里只允许有dt或者dd标签-->
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd><a href="https://www.baidu.com" target="_blank">购物指南</a></dd>
    </dl>
    <br><hr><hr>
    <table title="信息"  border="1">
        <!--表格，table用来嵌套tr；tr代表每行分割，用来嵌套td；td就是每个单元格的分割-->
        <!-- border用来添加边框线，width、hight同上，但是一般在css里设置 -->
        <!-- caption是表哥大标题，一般默认居中于表格上方，写在table和tr之间；th是表头单元格，用于替换td --> 
        <!-- 还有表格的结构标签，thead是表格头部，tbody是表格主题，tfoot是表格底部 -->
        <!-- 表格中可以使用rowspan(行垂直合并)和colspan（列水平合并），遵循左上原则，属性值是合并个数 -->
        <caption><b>学生信息</b></caption>
        <thead><tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年纪</th>
        </tr></thead>
        <tbody><tr>
            <td>张三</td>
            <td>男</td>
            <td colspan="2">19</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>20</td>
        </tr></tbody>
       <tfoot> <tr>
            <td>总结</td>
            <td rowspan="2">还行</td>
        </tr></tfoot>
    </table>
    <br><hr>
    <form action="">
    <!--form是表单预标签，可以用来将几个input合并为一个完整表单，是实现提交或者重置时的表单范围，也是实现前提
        action是表单提交的地址，用于和后短连接时使用-->
    <!-- input用于创建表单（一切需要用户输入的都可以理解为表单） ，依据type值的不同而产生不同的样式，默认为text-->
    文本框：<input type="text" placeholder="占位符"><br><!--placeholder可以实现文本框里有提示词，也称之为占位符-->
    密码框：<input type="password" placeholder="密码"><br>
    文本域：<textarea name="" id="" cols="30" rows="10"></textarea>
    <!--用来实现文本域（即大段的文本输入功能），其中cols和rows属性用来规定文本域的可见宽度和行数-->
    单选框： <input type="radio" name="sex" checked id="male"><label for="male">A</label>
            <!--lable标签用于使对应的文字也变为可选的，被选中的与其所在表单相同，而id值与for值的一致是实现二者都能被选中的关键-->
            <label for=""><input type="radio" name="sex">B</label><!--文字可选的另一种实现形式，这种方法更简单-->
            <br>
    <!-- name可以用来分组，同种类型的可以通过相同name标签放到同一组，以此实现单选功能；checked可以让按钮被默认选中 -->
    多选框：<input type="checkbox"><br>
    下拉菜单：<select ><!--select用于制作下拉菜单，内嵌套option作为选项，selected实现默认选择-->
        <option selected>北大</option>
        <option >清华</option>
            </select>
    文件上传：<input type="file" multiple><br>
    提交按钮：<input type="submit">    重置按钮：<input type="reset"><br>
    普通按钮：<input type="button" value="普通按钮"><!--普通按钮没有任何功能，通常配合后端js使用；value是更改按钮内部提示词的属性-->
    <!-- button也可以当做标签来用，type有submit、reset、button三种，且功能同上-->
    <!-- button为双标签，有头有尾，input是单标签按钮 -->
    </form><br><hr>
<!--在html5中提供了一些新的语义化标签，一般来说不会使用到，如果是做手机端开发会用到：
    header 网页头部    nav 网页导航   footer网页底部  aside 网页侧边栏  section 网页区块  article 网页文章-->
</body>
</html>

也欢迎各位大神和同学们在评论区或者私信对我批评指正或者共同探讨