Fork me on github

前端之html

  • 认识标签
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本标签</title>
    </head>
    <body>
    正常文本
    <h1>咏鹅</h1>
    <p>若化成风,幻化成雨,守护与尔,无问西东</p>
    <s>199</s>现价99
    <hr>
    <br>
    <br>
    <u>下划线</u>
    <hr>
    <i>斜体</i>
    <b>加粗</b>
    
    
    </body>
    </html>
    

      

  • 特殊符号
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>特殊符号</title>
    </head>
    <body>
    <!--注释内容-->
    1&gt;a
    1&lt;b
    &amp;
    &yen;
    &copy;
    &reg;
    
    <p> 苍茫的&nbsp;&nbsp;天涯&nbsp;&nbsp;是我的爱</p>
    </body>
    </html>

     

  • 常用标签
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>常用标签</title>
    </head>
    <body>
    <div>div1
        <div>div2
            <div>div3
                <div>div4
                </div>
            </div>
        </div>
    </div>
    <span>span</span>
    <a href="http://www.baidu.com" target = "_blank">click me</a>
    <a href="" id ="a1">top</a>
    <div style = "height: 1000px;background: crimson"></div>
    <a href="#a1">bottom</a>
    <img src="2.jpg" alt="yuanyuan" title ="好看" width="100">
    </body>
    </html>
    

      

  • 列表标签
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表标签</title>
    </head>
    <body>
    <ul type ='disc'>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ul type = 'disc'>
        <li>watchwatch</li>
        <li>kankan</li>
        <li>looklook</li>
        <li>seesee</li>
    </ul>
    <ol type ='1'>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
    <ol type="1" >
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ol>
    <dl>
        <dt>段落1
            <dd>第一句</dd>
            <dd>第二句</dd>
            <dd>第三句</dd>
        </dt>
        <dt>段落2
            <dd>第一句</dd>
            <dd>第二句</dd>
        </dt>
    </dl>
    <dl>
        <dt>标题1
        </dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
        <dd>内容3</dd>
        <dt>
            标题2
        </dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
        <dd>内容3</dd>
    </dl>
    </body>
    </html

     

  • 表格标签
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>
    <body>
    <table border ="1">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>password</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>kan</td>
            <td>123</td>
        </tr>
        <tr>
            <td>2</td>
            <td>look</td>
            <td>123</td>
        </tr>
        <tr>
            <td>3</td>
            <td>watch</td>
            <td>123</td>
        </tr>
        </tbody>
    </table>
    <table border="10">
        <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>hobby</th>
        </tr>
        </thead>
        <thead>
        <tr>
            <td>jason</td>
            <td>18</td>
            <td>read</td>
        </tr>
        <tr>
            <td>owen</td>
            <td>19</td>
            <td>sing</td>
        </tr>
        <tr>
            <td>tank</td>
            <td>20</td>
            <td>study</td>
        </tr>
        </thead>
    </table>
    </body>
    </html>

     

  • form表单
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>
    <h2>用户注册</h2>
    <form action="http://127.0.0.1:8000/index/" method ="post" enctype="multipart/form-data">
        <p>username:
            <input type="text" name = 'username' value ='seesee'></p>
        <p>password:
            <input type="password" name = 'password'></p>
        <p>birth:
            <input type="date" name ="birthday"></p>
        <p>gender:
            <input type="radio" name ='gender' value ='0'></p>
        <p>hobby:
            <input type="checkbox" checked name ='hobby' value ='basketball'>篮球
            <input type="checkbox" checked name = 'hobby' value ='football'>足球
            <input type="checkbox"  name = 'hobby' value ="double_color_ball">双色球
        </p>
        <p>
            province默认单选
            <select name="province" id="">
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select>
        </p>
        <p>province2:
            <select name="province2" id="">
                <optgroup label = '北京'>
                    <option value="">朝阳区</option>
                    <option value="">海淀区</option>
                    <option value="">昌平区</option>
                </optgroup>
                <optgroup label = '上海'>
                    <option value="">浦东新区</option>
                    <option value="">静安区</option>
                    <option value="">徐汇区</option>
    
                </optgroup>
                <optgroup label ='深圳'>
                    <option value="">宝安区</option>
                    <option value="">南山区</option>
                    <option value="">徐汇区</option>
    
                </optgroup>
            </select>
    
        </p>
        <p>info:
            <textarea name="info" id="" cols="30" rows="10"></textarea>
        </p>
        <p>file:
            <input type="file" name = 'file'>
        </p>
        <p>
            <input type="submit" value ='注册'>
            <input type="button" value ='普通按钮'>
            <input type="reset" value ='重置'>
            <button>button按钮</button>
        </p>
    </form>
    </body>
    </html>
    

      

  • 遇见
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content = "5;https://www.12306.cn/index/">
        <title>遇见</title>
        <script src="04%20myjs.js"></script>
        <link rel="stylesheet" href="03%20mycss.css">
    </head>
    <body>
    <a href="2.jpg">美女</a>
    <img src="2.jpg">
    <h1>浪漫从遇见开始</h1>
    <h1>最美毕业季</h1>
    <h1>送你一张永远不回学校的车票</h1>
    </body>
    </html>
    

      

posted @ 2019-05-29 22:32  khan369  阅读(170)  评论(0编辑  收藏  举报