前端之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>

    　　

承蒙关照
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/guanlei/p/10946741.html