html各种标签

我的第一个html
</head>
<body>
    <a name="first"></a>
    <p>Hello World</p>
    <p><a href="https://baidu.com">百度</a><br/></p>

    <abbr title="World Wide Web">WWW</abbr><br/><br/>
    <b>粗体文字</b><br/>

    <!-- <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
    <map name="planetmap" id="planetmap">
        <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
        <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
        <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
    </map> -->
    
    <article>
        <h1>对话</h1>
        <p>80后的付巧妹,来自中国科学院古脊椎动物与古人类研究所。现场,有人生动形容她的发言是“最年轻的科学家讲一个最古老的研究课题”。</p>
    </article>

    <!-- <p>Me and my family visited The Epcot center this summer.</p>
    <aside>
        <h4>Epcot Center</h4>
        The Epcot Center is a theme park in Disney World, Florida.
    </aside> -->

    <audio src="someaudio.wav">yinpin</audio>
    <p>文本 <b>粗体文本</b> </p>

    <img src = "eg_smile.gif" /> <br/>

    <!--bdo 元素可覆盖默认的文本方向。-->
    <bdo dir="ltr">正向输出</bdo><br/>
    <bdo dir="rtl">反向输出</bdo><br/>

    <p>
        --------------- <br/>
        这是一段段落
        <br/><br/>
        <big>放大1次</big><br/>
        <big> <big>放大2次</big> </big><br/>
        <big><big><big>放大3次</big></big></big><br/>
        <p style="color: aqua;"><big><big><big><big><big><big><big>放大7次</big></big></big></big></big></big></big></big></p>
    </p>
    
    <p>
        <b>Here is a long quotation</b>
        <blockquote>
            Here is a long quotation<br/>
            Here is a long quotation
        </blockquote>
    </p>

    <p style="font-size: 20px;">Copyright &copy; 2020&nbsp;&nbsp;&nbsp;号码:XXXXXXXXX&nbsp;&nbsp;</p><br/>
    <h1 align="center"> 一级标题 </h1>
    <h2 align="center"> 二级标题 </h2>

    <p align="center">
        80后的付巧妹,来自中国科学院古脊椎动物与古人类研究所。现场,有人生动形容她的发言是“最年轻的科学家讲一个最古老的研究课题”。
    </p>
    
    <p>
        <hr align="center" size="10px" color="#00ffff" />
        <p align="center"><b>QWQ</b></p>
        <br/>
    </p>

    <p>
        <hr style="height:15px;border-0;color:blue;background-color: blue"/>
        <hr />
    </p>

    <!--无序列表-->
    <ul type="disc">
        <h1>支付方式</h1>
        <li type="circle">网银支付</li>
        <li>支付宝</li>
        <li type="square">微信</li>
    </ul>

    <!--有序列表-->
    <ol type="I">
        <h1>步骤</h1>
        <li>选择</li>
        <li>显示</li>
        <li>确定</li>
        <li>输入</li>
        <li>支付</li>
    </ol>

    <!--有序列表和无序列表嵌套  -->
    <p>
        <h1>服务中心</h1>
        <ul>
            <li>支付方式</li>
            <ul type="disc">
                <li type="circle">网银支付</li>
                <li>支付宝</li>
                <li type="square">微信</li>
            </ul>
            <hr/>
            <li>步骤</li>
            <ol>
                <li>选择</li>
                <li>显示</li>
                <li>确定</li>
                <li>输入</li>
                <li>支付</li>
            </ol>
        </ul>
    </p>

    <!--表格-->
    <table align="center" border="5px" width="5px" height="5px" cellspacin="5px" cellpadding="5px">
        <caption aligh="left">标题</caption>
        <!--第一行-->
        <tr>
            <td>1r1c</td>
            <td>1r2c</td>
        </tr>
        <tr>
            <td>2r1c</td>
            <td>2r2c</td>
        </tr>
    </table>    
    
    <!--嵌套表格-->
    <table width="300" border="2">
        <tr>
            <td rowspan="4">商务鞋</td>
            <td>正装</td>
            <td>2358</td>
        </tr>
        <tr>
            <td>休闲类型</td>
            <td>2358</td>
        </tr>
        <tr>
            <th rowspan="2">其他</th>
            <td>登山</td>
            <td>1000</td>
            <tr>
                <td>下海</td>
                <td>2000</td>
            </tr>
        </tr>
    </table>

    <table align="center" width="500">
        <thead style="background-color:cadetblue;">
            <tr>                    
                <th>季度</th>
                <th>销量</th>
            </tr>
        </thead>

        <tbody style="background: coral;">
            <tr>
                <td>一季度</td>
                <td>10000</td>
            </tr>
            <tr>
                <td>二季度</td>
                <td>20000</td>
            </tr>
        </tbody>

        <tfoot style="background: chartreuse;">
            <tr>
                <td>季度平均销量</td>
                <td>15000</td>
            </tr>
            <tr>
                <td>总计</td>
                <td>30000</td>
            </tr>
        </tfoot>
    </table>
    
    <!--表单-->
    <form name="登陆" action="www.cnblogs.com" method="POST">

    </form>

    <!--分区标签-->
    <div align="center" style=" 1px; height: 1px; background:cornsilk">
        <img width = "100" height = "100" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""/>
    </div>
    <br/>

    <div>
        <a href="https://baidu.com" target="_parent">套娃1</a><br/>
        <a href="https://baidu.com" target="_blank">套娃2</a><br/>
        <a href="https://baidu.com" target="_self">套娃3</a><br/>
    </div>

    <!--这两个效果一样-->
    <a href="#first">[点击回到开头]</a><br/>
    <a href="#">[登陆]</a><br/>

    <a href="info.html#name" target="_blank">[了解更多]</a>
    
    <a href="https://www.baidu.com" target="_blank"><img width = "100" height = "100" src="https://bkimg.cdn.bcebos.com/pic/1c950a7b02087bf49212ea50f1d3572c10dfcf89?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5"/></a>
    
    <!--表单元素-->
    <br><br>
    <!--文字框-->
    <input type="text" name="username" size="18" value="王XX" /><br/>
    <!--密码框-->
    <input type="password" name="password" size="18" value="" /> <br/>
    <!--按钮-->
    <!--重置按钮-->
    <input type="reset" value="重置"><br>
    <!--提交按钮-->
    <input type="submit" value="提交"><br>
    <!--普通按钮-->
    <input type="button" value="普通按钮"><br>
    <!--图片按钮-->
    <input type="image" src="https://acm.hunnu.edu.cn/img/lastlogin.9ab95631.svg"><br>
    <!--复选框-->
    <form>
        competition:
        <input type="checkbox" name="复选框名称" value="s_1" checked="checked">CCF
        <input type="checkbox" name="复选框名称" value="s_2" >NOI
        <input type="checkbox" name="复选框名称" value="s_3" checked="checked">ACM
    </form>
    <!--单选框-->
    <form>
        最弱选手:
        <input type="radio" name="单选框" value="s_1">HEX
        <input type="radio" name="单选框" value="s_2" checked="checked">LLD
        <input type="radio" name="单选框" value="s_3">ZXY
    </form>
    <!--隐藏域网页表面不会显示,但可以通过查看html代码看到-->
    <form>
        <input type="hidden" name="userid" value="u01">
    </form>
    <!--文件域,选择一个文件-->
    <form action="" method="POST" enctype="multipart/form-data">
        <p>
            <input type="file" name="files"><br>
            <input type="submit" name="upload" value="上传">
        </p>
    </form>
    <!--选择栏-->
    调查者年龄:
    <select name="age" size="2">
        <option value="15岁以下">15岁以下</option>
        <option value="15--19岁">15--19岁</option>
        <option value="20--35岁">20--35岁</option>
        <option value="36--50岁" selected="selected">36-50岁</option>
        <option value="50岁以上">50岁以上</option>
    </select>
    <br>
    <!--多行文本域-->
    <textarea name="文本域名" rows="10" cols="50" >在此输入信息</textarea>
    <!--表单高级-->
    <h2>阅读协议</h2>
    <form>
        <textarea name="content" cols="50" rows="5" readonly="readonly">
        欢迎阅读服务协议。。。。
        </textarea><br><br>
        同意以上协议<input type="checkbox" name="check_1">
        <input name="register" type="submit" value="注册" disabled="disabled">
    </form>

    <!--范围标签:用于标识行内的某个内容,以实现行内某个部分的特殊设置以区分其他内容-->
    <span style="color: darkmagenta;">&yen;299</span>
    <p>
        你好啊,我很<span style="color:red">喜欢</span>你呢!<br>
    </p>
    <!--span和div的区别:span只是行级元素,不会换行,div是块级元素,会换行-->
    <span style="color: red;">QWQ</span>
    <span style="color: red;">QWQ</span>
    <span style="color: red;">QWQ</span>
    <div style="color: royalblue;">QWQ</div>
    <div style="color: royalblue;">QWQ</div>
    <div style="color: royalblue;">QWQ</div>
    
</body>
你将不再是道具,而是成为人如其名的人
原文地址:https://www.cnblogs.com/wsl-lld/p/13665628.html