首页 > Web开发 > 详细

HTML标签

时间:2020-04-06 21:29:47      阅读:59      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta http-equiv="Refresh" content="2;URL=http://www.baidu.com">-->

    <link rel="icon" href="https://www.w3school.com.cn/ui2019/logo-48-red.png"> <!--浏览器打开头的小图标-->

    <title>这是第一个html文件</title>
    <style>
        span{
            color:red;}
        #div1{
            color: red;
            background: yellow;
            width:200px;
            height: 200px;
        }
        #div2{
        color: red;
        background: chartreuse;
        width:200px;
        height: 200px;
        }
        #div3{
        color: blue;
        background: brown;
        width:200px;
        height: 200px;
        }
    </style>
</head>
<body>
    <h1>nihaozhongguoren</h1>
    <hr/>  <!--分割线-->
    <p>拆功能键前</p><br>  <!--块级标签-->
    <div style="color:red">鸡毛非上瘾</div>  <!--块级标签,后面会换行-->
    <span>这是span标签</span>fdbfdb            <!--内联标签,不会换行-->

    <em>这是em便斜字体</em>
    <strike>划除标签</strike>
    <del>这是del化成</del>
    2<sub>这是sub标签</sub>
    <sup>这是sup标签</sup>3
    hellow &copy;<!--版权符号-->
    &lt; <!--小于符号<  -->
    &gt; <!--大于号>  -->
    <img src="520.jpg" width="400" height="840" alt="图片地址错误" title="大美女哦"> <!--如果没有找到图片就报错alt-->
    <br/>
    <b>这是b标签</b>
    <a href="http://www.baidu.com">baidu.com</a> <!--a标签的两个功能,超链接标签-->
    <a href="http://www.baidu.com" target="_blank" title="会在新的页码跳转">baidu.com</a>
    <br/>
    <div id="div4">首页</div>
    <a href="#div1">这是第一章</a> <!--锚功能,用来引用下面的div块-->
    <a href="#div2">这是第二章</a>
    <a href="#div3">这是第三章</a>

    <div id="div1">第一章</div><a href="#div4">返回</a>
    <div id="div2">第二章</div><a href="#div4">返回</a>  <!--div块的内容添加在head的style里面-->
    <div id="div3">第三章</div><a href="#div4">返回</a>
    <!--非排序列表-->
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
    <!--有序列表-->
    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
    <dl>   <!--定义列表-->
        <dt>第一张</dt>
        <dd>数据1</dd>
        <dd>数据2</dd>
        <dd>数据3</dd>
    </dl>
    <form action="url地址" method="get">
        <div>用户:<input type="text" name="username"></div>
        <div>密码:<input type="password" name="password"></div>

        <p>爱好:篮球<input type="checkbox" name="hobby" value="100"></p>
        <p>爱好:足球<input type="checkbox" name="hobby" value="101"></p>
        <p><input type="radio" name="sex1" value="0"></p>
        <p><input type="radio" name="sex1" value="1"></p>
        <p><input type="file"></p> <!--上传文件-->
        <p><input type="reset" value="清空内容"></p>

        <select name="city" size="2">
            <optgroup label="中国">
            <option value="beijing">北京</option>
            <option value="tianjing">天津</option>
            <option value="tianjing">天津1</option>
                </optgroup>
        </select>
        <textarea rows="5">自我简介</textarea>
        <label for="www">姓名</label> <!--鼠标点击姓名会把光标放在下面text文本中-->
        <input id="www" type="checkbox">

        <table border="1" cellspacing="10%" cellpadding="10%">  <!--画表格-->
            <tr>
                <th>年份</th>
                <th>月份</th>
                <th>每天</th>
                <td>dss</td>
            </tr>
            <tr>
                <td>2020年</td>
                <td>4月</td>
                <td>5号</td>
            </tr>
        </table>

        <p><input type="submit" value="点击提交"></p>
    </form>



</body>
</html>

 

HTML标签

原文:https://www.cnblogs.com/TKOPython/p/12644223.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!