html基础标签

引言

HTML(HyperText Markup Language)是构建网页和网页应用的标准标记语言。它由一系列的元素(elements)组成,这些元素通过标签(tags)来定义。下面是一些HTML的基础标签,它们对于创建网页至关重要:

第一批标签:div、p、h、span、hr、br

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- div 块元素 单独一块  内部嵌套任何标签 -->
    <div>
        <!-- h  标题标签 -->
        <h1>第一块的一级标题</h1>
        <hr>
        <h2>第一块的二级</h2>
        <!-- hr  分割线 -->
        <hr>
        <h3>第一块的三级</h3>
        <!-- p  段落标签 内部一般为文本 -->
        <p>我是段落1<span>标签</span></p>
        <p>段落2,<span>你好</span><br>我是段落2</p>
        <br>
        <p>段落3,<span>你好</span>我是段落3</p>
        <div>
            <h1>第二块的一级标题</h1>
            <p><span style="position: relative;">你好</span>,我是第二块的段落标签</p>
        </div>
        </div>
</body>
</html>

第二批标签:b、strong、i、em、u、del、sup、sub

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>字体相关标签</h1>
        <span>普通文本</span>
        <b>加粗字体</b>
        <strong>加粗字体</strong>
        <i>斜体</i>
        <em>斜体</em>
        <u>下划线</u>
        <del>删除线</del>
        <sup>2</sup>
        <sub>3</sub>
        <!-- sub  下标  sup  上标 -->
        H<sub>2</sub>Co<sub>3</sub> = 2H<sup>+</sup>Co3<sup>2-</sup>
    </div>
</body>
</html>

第三批标签:li、ol、ul、dl

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>无序列表</h1>
            <ul>
                <li>我是1</li>
                <li>我是2</li>
                <li>我是3</li>
            </ul>
    </div>
    <div>
        <h1>有序列表</h1>
        <ol>
            <li>有序1</li>
            <li>有序2</li>
            <li>有序3</li>
            <li>有序4</li>
            <li>有序5</li>
        </ol>
    </div>
    <div>
        <h1>自定义列表</h1>
        <dl>
            <dt>标签头</dt>
            <dd>自定义1</dd>
            <dt>标签头</dt>
            <dd>自定义2</dd>
            <dt>标签头</dt>
            <dd>自定义3</dd>
        </dl>
    </div>
    <div>
        <h1>段落1</h1>
        <p></p>
        <p></p>
        <p></p>
        段落1
        <div>
            结尾
            <div>
                <h1>隔离</h1>
            </div>
        </div>
    </div>
    <span>span1</span><span>span2</span><span>span3</span><span>span4</span><span>span5</span>
</body>
</html>

第四批标签:table、tr、th、td

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <table border="10" width="70%" align="center">
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
                <th>表头单元格3</th>
            </tr>
            <tr>
                <td colspan="2">普通单元格1</td>
                <td>普通单元格2</td>
            </tr>
            <tr>
                <!-- rowspan属性可以合并同行 -->
                <!-- colspan属性可以合并同列 -->
                <td>普通单元格1</td>
                <td rowspan="2" colspan="2">
                    <table border="1" width="100%">
                        <tr>
                            <td>列1</td>
                            <td>列2</td>
                        </tr>
                        <tr>
                            <td>列1</td>
                            <td>列2</td>
                        </tr>
                    </table>
                </td>

            </tr>
            <tr>
                <td>普通单元格1</td>

            </tr>
        </table>
    </div>
</body>
</html>

第五批标签:src、video、audio、img、a、href

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr>
    <hr>
    <hr>
    <hr>
    <span id="666">666</span>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <span id="888">888</span>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <span class="999">999</span>
    <div>
        <h1>声音</h1>
        <audio src="./audio/bg.mp3" controls></audio>
    </div>
    <div>
        <h1>视频</h1>
        <video src="./video/你的名字-2016_BD日粤双语中字.mp4" controls></video>
    </div>
    <div>
        <h1>图片</h1>
        <img src="./image/悟空.png" alt="",width="400">
        <img src="https://i-blog.csdnimg.cn/direct/6abced731e9c4d359dea0de8d72dfa79.jpeg" alt="加载失败">
        <img src="./image/悟空.png" alt="",width="400">
        
    </div>
    <div>
        <h1>超链接</h1>
        <a href="./2.第一批标签.html">hello</a>
        <a href="www.qq.com">qq</a>
        <a href="#666">锚点666</a>
        <a href="#888">锚点888</a>
        <a href="#999">锚点999</a>
    </div>
</body>
</html>

第六批标签:iframe src

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>框架嵌套标签</h1>
        <iframe src="2.第一批标签.html" frameborder="0" width="50%" height="300"></iframe>
        <iframe src="3.第二批标签.html" frameborder="0" width="50%" height="300"></iframe>
        <iframe src="https://blog.csdn.net/dudnf?spm=1010.2135.3001.5343" frameborder="0" width="50%" height="300"></iframe>
        <iframe src="https://im.qq.com/index/" frameborder="0" width="50%" height="300"></iframe>
    </div>
</body>
</html>

第七批标签:from input select textarea

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://httpbin.org/post" method="post">
        <div>
            <label for="inp">用户名</label><input name="username" required placeholder="请输入名字" id="inp"  type="text">
        </div>
        <div>
            <label for="pwd">密码</label><input name="password" id="pwd" required placeholder="请输入密码" type="password">
        </div>
        <div>
           <span name="sex">性别</span>
           男<input value="man" type="radio" checked name="sex">
           女<input value="women" type="radio" name="sex">
        </div>
        <div>
            <span name="hobby">爱好</span>
            篮球<input type="checkbox" checked  value="basketball">
            足球<input type="checkbox" value="football">
            台球<input type="checkbox" value="taiball">
        </div>
        <div>
            <span>年纪</span>
            <input name="age" type="range" min="0" max="100" step="1">
        </div>
        <div>
            <span>颜色</span>
            <input name="color" type="color">
        </div>
        <div>
            <span>上传文件</span>
            <input name="file" type="file">
        </div>
        <!-- <div>
            <span>按钮</span>
            <input type="button" value="播放" href="./audio/bg.mp3">
        </div> -->
        <div>
            <span>邮件</span>
            <input type="email" value="2241354684@qq.com">
        </div>
        <div>
            <span>时间</span>
            <input name="time" type="datetime-local">
        </div>
        <div>
            <span name="adress">居住地址</span>
            <select>
                <option value="henan">河南</option>
                <option value="shangqiu">商丘</option>
                <option value="zhengzhou" selected>郑州</option>
            </select>
        </div>
        <div>
            <span name="langue">学习语言</span>
            <select multiple>
                <option value="python" selected value="">python</option>
                <option value="java">java</option>
                <option value="c">c</option>
            </select>
        </div>
        <div>
            <span>留言</span>
            <textarea name="text" id="" cols="100" rows="10"></textarea>
        </div>
        <div>
            <input type="submit" value="注册">
            <input type="reset" value="重置">
        </div>
    </form>
</body>
</html>

以上七个就是html基本的标签了!感谢大家观看!

相关推荐
也无晴也无风雨28 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
懒惰的bit2 小时前
基础网络安全知识
学习·web安全·1024程序员节
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
Natural_yz4 小时前
大数据学习09之Hive基础
大数据·hive·学习
龙中舞王4 小时前
Unity学习笔记(2):场景绘制
笔记·学习·unity
Natural_yz4 小时前
大数据学习10之Hive高级
大数据·hive·学习