- 认识标签
<!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>a 1<b & ¥ © ® <p> 苍茫的 天涯 是我的爱</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>