一文入门HTML

学则不固_

已于 2024-04-01 20:22:29 修改

阅读量287

点赞数 13

文章标签： html 前端 javascript

于 2024-04-01 20:21:17 首次发布

本文链接：https://blog.csdn.net/weixin_54502475/article/details/137244024

版权

本文详细介绍了HTML中的各种基础标签，包括根标签、头标签、身体标签，以及常用的块、标题、段落、隔离、换行、列表、表格、媒体、框架、表单和语义化标签的用法，同时提及了标准属性如id、class、style和title的使用。

摘要由CSDN通过智能技术生成

一、常用HTML标签：

一、3个基础标签：

根标签：<html>；

头标签：<head>；

身体标签：<body>

二、6种标签：

块标签：<div>

标题标签：<h1-h6>

段落标签：<p>

隔离标签：<span>

强制换行标签：<br>

水平分割线标签：<hr>

例如：

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <span>这是普通文本，标题只有六级</span>
    <div>
        这是大块<br>
        <div>
            这是中块<br>强制换行啦
            <div>
                这是小块<hr>上面是水平分割线
                <p>段落嵌套分割符<br><span>这是分割符内<br><span>分割符内嵌套分割符<br></span></span></p>
            </div>
        </div>
    </div>
</body>

三、8个文本样式标签：

加粗：<b>/<strong>

斜体：<i>/<em>

下划线：<u>

删除线：<del>

上标：<sup>

下标：<sub>

例如：

<body>
    <div>
        <div>
            <h1>span显示普通文本</h1>
            <p><span>普通文本</span></p>
        </div>
        <div>
            <h1>b与strong显示粗体</h1>
            <b>粗体</b>
            <strong>也是粗体</strong>
        </div>
        <div>
            <h1>i与em显示斜体</h1>
            <i>斜体</i>
            <em>也是斜体</em>
        </div>
        <div>
            <h1>del删除线与u下划线</h1>
            <del>删除线</del>
            <u>下划线</u>
        </div>
        <div>
            <h1>sub下标与sup上标</h1>
            <sub>下标</sub><sup>上标</sup><span>H<sub>2</sub>CO<sub>3</sub>==2H<sup>+</sup> + CO<sub>3</sub><sup>2-</sup></span>
        </div>
    </div>
</body>

四、6种列表标签：

无序列表：<ul>

有序列表：<ol>

列表项目：<li>

自定义列表：<dl>

自定义列表项目：<dt>

自定义列表项目说明：<dd>

例如：

<body>
    <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ol>

    <hr>

    <ul>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul>

    <hr>
    <dl>
        <dt>html</dt>
        <dd>html是网页的骨架</dd>
        <dt>css</dt>
        <dd>css是网页的皮肤</dd>
        <dt>javascript</dt>
        <dd>javascript是网页的血液</dd>
    </dl>
    <hr>
</body>

五、4个表格标签

表外框：<table>

行标签：<tr>

表头单元格标签：<th>

普通单元格标签：<td>

table标签属性：border（边框）、cellspacing（单元格间距）、cellpadding（单元格内补）、width（宽度）、align（对齐）

td标签属性：colspan（合并列）、rowspan（合并行）

例如：

 <table border="5" cellspacing="3" cellpadding="5" width="50%" align="center">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
        <tr>
           <td>11</td>
           <td>雷娜</td>
           <td>20</td>
        </tr>
        <tr>
            <td>11</td>
            <td>雷娜</td>
            <td>20</td>
        </tr>
        <tr>
            <td>11</td>
            <td>雷娜</td>
            <td>20</td>
        </tr>
    </table>

六、4个媒体标签

超链接：<a>

图片：<img>

音频：<audio>

视频：<video>

src后跟图片音频视频地址

例如：

<body>
    <div>
        <span id="top">顶部</span>
        <span><a href="#middle">去中间</a></span>
    </div>
    
    <div>
        <h1>图片展示</h1>
        <img src="./img/bg2.jpg" alt="" width="300" height="200">
        <br>
        <img src="./img/IMG_9197(20240319-161341).JPG" alt="" width="300" height="200">
        <br>
        <!-- <img src="https://ossweb-img.qq.com/upload/adw/image/194/20240318/cf96dcef54360fa5962627370bca5484.jpeg" alt="图片飞走了" width="300" height="200"> -->
    </div>

    <div>
        <h1>视频展示</h1>
        <video src="./video/视频1.mp4" controls width="300" height="200"></video>
    </div>

    <div>
        <h1>声音展示</h1>
        <audio src="./audio/bgm.wav" controls></audio>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <ol id="middle">
        <li>
            <a href="http://www.baidu.com">百度</a>
        </li>
        <li>
            <a href="https://pvp.qq.com/">王者荣耀</a>
        </li>
        <li>
            <a href="https://val.qq.com/">无畏契约</a>
        </li>
        <li>
            <a href="./1.html与html5初始.html">第一个html</a>
        </li>
        <li>
            <a href="#top">跳转到顶部</a>
        </li>
        <li>
            <a href="#b">跳转到底部</a>
        </li>
    </ol>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <span id="b">底部</span>
    <span><a href="#middle">去中间</a></span>
</body>

七、1个框架标签

框架标签：<iframe>

<body>
    <div>
        <h1>使用iframe引入其他页面</h1>
        <iframe src="./1.html与html5初始.html" frameborder="0"></iframe>
    </div>
    <hr>
    <div>
        <h1>使用iframe引入其他页面</h1>
        <iframe width="100%" height="800" src="./6.4个媒体标签.html" frameborder="0"></iframe>
    </div>
</body>
</html>

八、1个表单标签

表单域：<form>

表单标签：<input>、<select>、<textarea>

    <form action="" method="get">
        <p>
            <label for="username">用户名</label>
            <input name="username" id="username" type="text">
        </p>
        <p>
            <label for="password">密码</label>
            <input name="pwd" id="password" type="password">
        </p>
        <p>
            <span>性别：</span>
            <label for="man">男</label> <input value="man" name="sex" id="man" type="radio">
            <label for="woman">女</label> <input value="woman" name="sex" id="woman" type="radio">
        </p>
        <p>
            <span>爱好：</span>
            <label for="lanqiu">篮球</label>
            <input value="lanqiu" name="hobby" id="lanqiu" type="checkbox">
            <label for="zuqiu">足球</label>
            <input value="zuqiu" name="hobby" id="zuqiu" type="checkbox">
            <label for="paiqiu">排球</label>
            <input value="paiqiu" name="hobby" id="paiqiu" type="checkbox">
        </p>
        <p>
            <label for="color">喜欢的颜色</label>
            <input type="color" name="color" id="color">
        </p>
        <p>
            <label for="file">上传文件</label>
            <input type="file" name="file" id="file">
        </p>
        <p>
            <label for="address">居住地</label>
            <select name="address" id="address">
                <option value="zhengzhou">郑州</option>
                <option value="luoyang">洛阳</option>
                <option value="kaifeng">开封</option>
            </select>
        </p>
        <p>
            <label for="info">评论区</label>
            <textarea name="info" id="info" cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="submit">
            <input type="reset">
        </p>

    </form>

九、语义化标签

头部：<header>

导航栏：<nav>

主体：<main>

区域：<section>

文章：<article>

侧边栏：<aside>

底部栏：<footer>

十、标准属性

id：单个HTML文件内部一定要唯一

class：一个标签可以有多个类名，多个类名之间可以使用空格隔开，一个类名可以用于多个标签

style：样式

title：鼠标划入提示信息

学则不固_

关注

13
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一文入门HTML

table标签属性：border（边框）、cellspacing（单元格间距）、cellpadding（单元格内补）、width（宽度）、align（对齐）表单标签：、、加粗：/src后跟图片音频视频地址。框架标签：标题标签：水平分割线标签：表头单元格标签：普通单元格标签：区域：文章：根标签：；头标签：；
复制链接

扫一扫