HTML自学笔记

咕噜咕噜蛙

已于 2023-03-11 16:00:56 修改

阅读量90

点赞数

分类专栏：前端笔记文章标签： html css 前端

于 2023-02-25 23:34:54 首次发布

本文链接：https://blog.csdn.net/weixin_61010342/article/details/129210382

版权

笔记同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

组成部分：

<!-- 整体 -->
<html>
<!-- 头部 -->
<head>
<!-- 标题 -->
    <title></title>
</head>
<!-- 主体 -->
<body>
    
</body>
</html>

像<title></title>这类有头有尾的标签就是双标签，像<br>这种的就是单标签

重要标签&属性：

注：为节省空间，下面的代码均只写body部分

标题标签：<h1></h1>（一级标题），其中内容是标题，可以将标签中的‘1’替换成‘1’~‘6’任意数字，表示一级标签到六级标签，重要程度依次减小
分段标签：<p></p>，标签中的内容是一个单独的段落，用于段落与段落之间的分隔
换行标签：<br>，让文字强制换行显示
水平线标签：<hr>，显示一条水平线将不同内容分隔开
加粗标签：<b></b>，<strong></strong>，二者效果相同，但前者单纯加粗，若要突出重要性则采用后者
下划线标签：<u></u>，<ins></ins>，二者效果相同，但前者单纯加粗，若要突出重要性则采用后者
倾斜标签：<i></i>，<em></em>，二者效果相同，但前者单纯加粗，若要突出重要性则采用后者
删除线标签：<s></s>，<del></del>，二者效果相同，但前者单纯加粗，若要突出重要性则采用后者

图片标签：<img src="" alt="">，其中src属性填目标图片的路径，相对路径和绝对路径都可以，alt属性填目标图片的替换文本，以下代码当图片加载成功时替换文本不会显示，当图片加载失败时则会显示替换文本，如下图所示：

<!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>
    <img src="https://lmg.jj20.com/up/allimg/1114/062621110J7/210626110J7-10-1200.jpg" alt="一道彩虹">
</body>

</html>

音、视频标签：<audio src=""></audio>，<video src=""></video>插入音频或视频

<body>
    <!-- 音频标签 -->
    <audio src=""></audio>
    <!-- controls是播放控件，autoplay是自动播放，loop是循环播放 -->
    <audio src="" controls autoplay loop></audio>
    <!-- 视频标签 -->
    <video src=""></video>
    <!-- controls是播放控件，autoplay是自动播放，muted是静音播放，loop是循环播放，在谷歌浏览器中autoplay需要配上muted才有效 -->
    <video src="" controls autoplay muted loop></video>
</body>

链接标签：<a href=""></a>，点击后可跳转至目标网页

<a href="https://blog.csdn.net/weixin_61010342?type=lately">咕噜咕噜蛙的主页</a>

新建标签打开超链接：target="_blank"
```
<a href="" target="_blank"></a>
```

列表标签：列表分为无序列表、有序列表、自定义列表

<body>
    <!-- <ul></ul>无序列表整体，只能包含<li></li> -->
    <ul>
        <!-- <li></li>无序列表每一项，可包含任意标签 -->
        <li>菠萝蜜</li>
        <li>香蕉</li>
        <li>水蜜桃</li>
        <li>桃形李</li>
    </ul>

    <!-- <ol></ol>有序列表，同无序列表一样 -->
    <ol>
        <li>李明</li>
        <li>王芳</li>
        <li>俞刚</li>
        <li>张燕</li>
    </ol>

    <!-- <dl></dl>自定义列表整体，只能包裹<dt></dt>和<dd></dd> -->
    <dl>
        <!-- <dt></dt>自定义列表主题，可包裹任意标签 -->
        <dt>支付方式</dt>
        <!-- <dd></dd>关于该主题的每一项，可包裹任意标签 -->
        <dd>货到付款</dd>
        <dd>在线支付</dd>
        <dd>分期付款</dd>
        <dd>邮局汇款</dd>
    </dl>
</body>

表格标签：下方代码效果：

<body>
    <!-- <table></table>表格整体，包裹<tr></tr>，其中可设border属性，用于设置表格边框 -->
    <table border="1">
        <!-- <caption></caption>表格标题，写在<table></table>内的首行 -->
        <caption>成绩单</caption>
        <!-- <thead></thead>表格头部，目的是突出表格不同部分使语义更清晰，也可省去直接写<tr></tr> -->
        <thead>
            <tr>
                <!-- <th></th>表格的表头单元格，替换<td></td> -->
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <!-- <tbody></tbody>表格主体部分，目的是突出表格不同部分使语义更清晰，也可省去直接写<tr></tr> -->
        <tbody>
            <!-- <tr></tr>表格一行，包裹<td></td> -->
            <tr>
                <!-- <td></td>表格一行中的一个单元格，可包裹任意标签 -->
                <td>李一亮</td>
                <td>90</td>
            </tr>
            <tr>
                <td>杜洪</td>
                <td>92</td>
            </tr>
        </tbody>
        <!-- <tfoot></tfoot>表格尾部（此处就不写了），一般用于总结，目的是突出表格不同部分使语义更清晰，也可省去直接写<tr></tr> -->
    </table>
</body>

合并单元格：在<td></td>中添加属性，跨行合并为rowspan，跨列合并为colspan，留最左最上，其余<td></td>删去，要合并几行（或几列）就让属性等于几

<body>
    <!-- 合并前的表格 -->
    <table border="1">
        <caption>部门销量表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>销量</th>
                <th>部门</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>黄希</td>
                <td>475</td>
                <td>销售一部</td>
            </tr>
            <tr>
                <td>高鸣远</td>
                <td>372</td>
                <td>销售一部</td>
            </tr>
            <tr>
                <td>何云</td>
                <td>199</td>
                <td>销售一部</td>
            </tr>
            <tr>
                <td>陈波</td>
                <td>244</td>
                <td>销售二部</td>
            </tr>
            <tr>
                <td>邓芸芸</td>
                <td>330</td>
                <td>销售二部</td>
            </tr>
            <tr>
                <td>罗山壑</td>
                <td>187</td>
                <td>销售三部</td>
            </tr>
            <tr>
                <td>姜浩</td>
                <td>315</td>
                <td>销售三部</td>
            </tr>
        </tbody>
    </table>

    <!-- 合并后的表格 -->
    <table border="1">
        <caption>部门销量表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>销量</th>
                <th>部门</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>黄希</td>
                <td>475</td>
                <td rowspan="3">销售一部</td>
            </tr>
            <tr>
                <td>高鸣远</td>
                <td>372</td>
                <!-- <td>销售一部</td> -->
            </tr>
            <tr>
                <td>何云</td>
                <td>199</td>
                <!-- <td>销售一部</td> -->
            </tr>
            <tr>
                <td>陈波</td>
                <td>244</td>
                <td rowspan="2">销售二部</td>
            </tr>
            <tr>
                <td>邓芸芸</td>
                <td>330</td>
                <!-- <td>销售二部</td> -->
            </tr>
            <tr>
                <td>罗山壑</td>
                <td>187</td>
                <td rowspan="2">销售三部</td>
            </tr>
            <tr>
                <td>姜浩</td>
                <td>315</td>
                <!-- <td>销售三部</td> -->
            </tr>
        </tbody>
    </table>
</body>

表单标签：常用在登录注册页面

<body>
    <!-- 属性action填上传地址，后面学先不管 -->
    <form action="">
        <!-- &nbsp表示一个空格，属性placeholder填占位字符串 -->
        用户名&nbsp&nbsp<input type="text" placeholder="请输入用户名">
        <br>
        <br>
        密&nbsp&nbsp&nbsp码&nbsp&nbsp<input type="password" placeholder="请输入密码">
        <br>
        <br>
        <!-- 单选 -->
        性&nbsp&nbsp&nbsp别&nbsp&nbsp<input type="radio" name="gender" id="male"><label for="male">男</label>
        <input type="radio" name="gender" id="female" checked><label for="female">女</label>
        <br>
        <br>
        出生年份
        <!-- 下拉菜单，<select></select>表示下拉菜单整体，<option></option>表示下拉菜单中的每一个选项 -->
        <select>
            <option>1999</option>
            <!-- selected表示默认选中 -->
            <option selected>2000</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
            <option>2004</option>
            <option>2005</option>
            <option>2006</option>
            <option>2007</option>
            <option>2008</option>
            <option>2009</option>
            <option>2010</option>
        </select>
        <br>
        <br>
        <!-- 多选 -->
        爱&nbsp&nbsp&nbsp好&nbsp&nbsp<input type="checkbox" name="hobbies" id="code"><label for="code">敲代码</label>
        <input type="checkbox" name="hobbies" id="late"><label for="late">开夜车</label>
        <input type="checkbox" name="hobbies" id="culvities"><label for="culvities">掉头发</label>
        <br>
        <br>
        自我介绍
        <!-- <textarea></textarea>文本域，cols和rows属性一般不像下面这样写而是用CSS实现样式，此处样式设置了解即可 -->
        <textarea cols="30" rows="10">请输入自我介绍</textarea>
        <br>
        <br>
        <!-- 上传文件,加上multiple可上传多个文件 -->
        头&nbsp&nbsp&nbsp像&nbsp&nbsp<input type="file" multiple>
        <br>
        <br>
        <!-- <input></input>中的按钮 -->
        <input type="reset" value="重&nbsp&nbsp&nbsp&nbsp置">&nbsp
        <input type="submit" value="注&nbsp&nbsp&nbsp&nbsp册">&nbsp
        <input type="button" value="一个普通按钮">
        <br>
        <br>
        <!-- <button></button>中的按钮，基本同<input></input>，区别在于不限于文字 -->
        <button>另一个按钮</button>
        <button type="button">又另一个按钮</button>
        <button type="reset">重置按钮</button>
        <button type="submit">提交按钮</button>
    </form>
</body>