lable标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签</title> </head> <body> <form action="xxxxx"> <!-- 文本输入框--> <label for="zhanghu">账户: </label> <input id="zhanghu" type="text" name="account" value="" maxlength="10"><br> <!-- 密码输入框--> <label>密码： <input type="password" name="pwd" value="123" maxlength="6"> </label> <button>确认</button><br> <!-- 单选按钮--> 性别： <input id="nan" type="radio" name="gender" value="male"> <label for="nan">男</label> <label> <input type="radio" name="gender" value="female" checked> 女</label> <br> <button>确认</button><br> 爱好： <label> <input type="checkbox" name="hobby" value="eat">吃饭 </label> <label> <input type="checkbox" name="hobby" value="sing">唱歌 </label> <label> <input type="checkbox" name="=hobby" value="love" checked>喜欢大美女<br> </label> <label for="qita" >其他：</label> <textarea id="qita" name="other" cols="20" rows="3"></textarea><br> <label> 籍贯： <select name="like"> <option value="eat">爱吃饭</option> <option value="sleep">爱睡觉</option> <option value="love" SELECTED>爱大美女</option> <option value="NO!!!!">不爱学习</option> </select></label> <button>确认</button> <button type="reset">重置</button> <button type="button">检测账户是否被注册</button> </form> </form> </body> </html> 列表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!--无序列表--> <ul> <li>yjj</li> <li>fzc</li> <li><span>于菁菁要修改的错误 </span> <ul><li>不对大美女同学乱发脾气</li> <li>要换位思考</li> <li>要包容大美女同学</li> <li>要好好学习</li> </ul> </li> </ul> <!--有序列表--> <ol> <li>yjj</li> <li>fzc</li> </ol> <!--自定义列表--> <dl> <dt>做好笔记</dt> <dd>对做好笔记的解释</dd> <dd>dd里面是对dt的解释</dd> <dt>1</dt> <dd>bcd</dd> </dl> </body> </html> 字符实体 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符实体</title> </head> <body> <div>我 爱 大美女</div> <div>我们学习过很多标题标签，其中<h>>是最厉害的一个</div> <div>我们今天学习了一个可以表达空格的字符实体，它是：&nbsp</div> <div>我们今天学习了一个可以表达&的字符实体，它是：&amp</div> <div>©版权所有</div> <div>©版权所有</div> <div>2*2=4</div> <div>2×2=4</div> <div>2/2=1</div> <div>2÷2=1</div> </body> </html> 格式化 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>yjj</title> </head> <!--bgcolor可以用来改变背景颜色--> <body bgcolor="#e6e6fa"> <h1>我的第一个标题</h1> <a id="yjj">跳转的链接</a> <br><a href="https://www.baidu.com" target="_blank">这是一个百度的链接</a> <!--target="_blank点击链接跳转到一个新的页面--> <p>这是我的第一个段落 <br> br可以把两句话分开</p> <h1 align="center">居中对齐</h1><!--align定义文本的对齐方式--> <font face="黑体" color="purple">定义HTML字体</font><br> <img src="../../img/123.png" width="200" height="150"/><!--..表示上一级--> <img src="../../img/456.png" width="800"/> <p>文本格式化<br> <b>粗体</b> <i>斜体</i> <del>删除字</del> </p> <q>这是引号</q> <a href="#yjj">跳转的链接</a> <!--可以跳到上面的文字部分，yjj可以自定义--> 1 23 <img src="../../img/表格.png" width="800" /> <!--div--> <div style="margin: 100px ;background: #888888"> 123 </div> <div style="background: purple"> 456 </div> <iframe src="test.html" width="100" height="100"></iframe> <!--在这个页面里在加一个页面--> <!-- 定义文档或节的页眉--> <header> <h1>City Gallery</h1> </header> <!--定义导航链接的容器--> <nav> London<br> Paris<br> Tokyo<br> </nav> <!--定义文档中的节--> <section> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </section> <!-- 定义文档或节的页脚--> <footer> Copyright W3School.com.cn </footer> <input type="number" > <!--输入框，passward只能输入密码，number只能是数字，text啥都行--> <img src="../../img/块级，行内元素.png" width="400"> <!--着重阅读的内容--> <p> 我爱<em>大美女</em> </p> <p> 我爱<strong>大美女</strong> </p> <!--分割线--> <div>第一章</div> <p>xxxxxxx,就这样王子和公主就在一起了</p> <hr> <div>第二章</div> <p>一个月黑风高的晚上，xxxx</p> <!--按原文显示--> <pre> I Love You I Love You Love </pre> </body> </html> 框架标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>框架标签</title> </head> <body> <!--利用iframe嵌入一个普通网页--> <iframe src="https://www.toutiao.com" width="900" height="500" frameborder="0"></iframe> <!--利用iframe嵌入一个广告网页--> <!--利用iframe嵌入其他东西--> <!--与超链接的target属性配合使用--> <a href="https://www.toutiao.com" target="tt">点我看新闻</a><br> <iframe name="tt" frameborder="0" width="900" height="300"></iframe> <!--表单的target属性配合使用--> <form action="https://so.toutiao.com/search" target="container"> <input type="text" name="keyword"> <input type="submit" value="搜索"> </form> </body> </html> 表单 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form action="https://www.baidu.com/s"> <input type="text" name="wd"> <button>去百度搜索</button> </form> <form action="https://search.jd.com/search" target="_blank" method="get "> <input type="text" name="keyword"> <button>去京东搜索</button> <br> <form action="xxxxx"> <!-- 文本输入框--> 账户：<input type="text" name="account" value="张三" maxlength="10"><br> <!-- 密码输入框--> 密码：<input type="password" name="pwd" value="123" maxlength="6"> <button>确认</button><br> <!-- 单选按钮--> 性别：<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female" checked>女<br> <button>确认</button><br> 爱好： <input type="checkbox" name="hobby" value="eat">吃饭 <input type="checkbox" name="hobby" value="sing">唱歌 <input type="checkbox" name="=hobby" value="love" checked>喜欢大美女<br> 其他： <textarea name="other" cols="20" rows="3"></textarea><br> 籍贯： <select name="like"> <option value="eat">爱吃饭</option> <option value="sleep">爱睡觉</option> <option value="love" SELECTED>爱大美女</option> <option value="NO!!!!">不爱学习</option> </select> <!-- 隐藏域--> <input type="hidden" name="1" value="2"><br> <!-- 确认按钮 第一种写法--> <button>确认</button> <!-- 确认按钮 第二种写法--> <input type="submit" value="确认"> <!--重置按钮第一种写法--> <button type="reset">重置</button> <!--重置按钮第二种写法--> <input type="reset" value="重置"> <!-- 普通按钮 第一种写法--> <button type="button">检测账户是否被注册</button> <!-- 普通按钮 第二种写法--> <input type="button" value="检测用户是否被重置"><br> <!--禁用表单 disabled--> <input type="text"name="account" value="张三" maxlength="10" disabled><br> <input type="checkbox" name="=hobby" value="love" checked disabled>喜欢大美女<br> </form> </form> </body> </html> 表单_fieldest与legend 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="xxxxx"> <fieldset> <legend>主要信息</legend> 账户：<input type="text" name="account" value="张三" maxlength="10"><br> <!-- 密码输入框--> 密码：<input type="password" name="pwd" value="123" maxlength="6"> <button>确认</button> <br> <!-- 单选按钮--> 性别：<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female" checked>女<br> <button>确认</button> <br> </fieldset> <fieldset> <legend>附加信息</legend> 爱好： <input type="checkbox" name="hobby" value="eat">吃饭 <input type="checkbox" name="hobby" value="sing">唱歌 <input type="checkbox" name="=hobby" value="love" checked>喜欢大美女<br> 其他： <textarea name="other" cols="20" rows="3"></textarea><br> 籍贯： <select name="like"> <option value="eat">爱吃饭</option> <option value="sleep">爱睡觉</option> <option value="love" SELECTED>爱大美女</option> <option value="NO!!!!">不爱学习</option> </select> </fieldset> <!-- 确认按钮 第一种写法--> <button>确认</button> <!--重置按钮第一种写法--> <button type="reset">重置</button> <button type="button">检测账户是否被注册</button> </form> </body> </html> 表格 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <img src="../../img/表格2.png" width="800"> <img src="../../img/单元格.png" width="800"> <!--用boder加边框--> <table border="1"width="400" height="100" cellspacing="0"> <!-- 表格标题--> <caption> 学生信息 </caption> <!-- 表格头部--> <!-- align为水平对齐，有三种对齐方式，左对齐：left，右对齐：right居中对齐：center --> <!-- valign为垂直对齐，上对齐：top，中间对齐：middle，底部对齐：bottom--> <thead height="50" align="left" valign="top"> <tr> <th width="50 height=150" align="right" valign="bottom">姓名</th> <th>性别</th> <th>年龄</th> <th>民族</th> <th>政治面貌</th> </tr> </thead> <!-- 表格主体--> <!-- 主体和脚注里面的单元格不用th用td--> <tbody height="200" align="left" valign="top" > <tr heighr="50" align="left" valign="bottom"> <td >张三</td> <td>男</td> <td>18</td> <td>汉族</td> <td>团员</td> </tr> <tr> <td >李四</td> <td>男</td> <td>20</td> <td>满族</td> <td>群众</td> </tr> <tr> <td>王五</td> <td>男</td> <td>19</td> <td>回族</td> <td>党员</td> </tr> <tr> <td>赵六</td> <td>女</td> <td>21</td> <td>壮族</td> <td>团员</td> </tr> </tbody> <!-- 表格脚注--> <tfoot height="50" align="left" valign="top"> <tr> <td></td> <td></td> <td></td> <td></td> <td>共计：4人</td> </tr> </tfoot> </table> <!--跨行与跨列--> <table border="1" cellspacing="0"> <caption>课程表</caption> <thead> <tr> <th>项目</th> <th colspan="5">上课</th> <th colspan="2">活动与休息</th> </tr> </thead> <tbody> <tr> <td>星期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> <td>星期日</td> </tr> <tr> <td rowspan="4">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>数学竞赛</td> <td rowspan="4">休息</td> </tr> <tr> <td>数学</td> <td>语文</td> <td>化学</td> <td>物理</td> <td>英语</td> <td>篮球比赛</td> </tr> <tr> <td>化学</td> <td>语文</td> <td>体育</td> <td>历史</td> <td>地理</td> <td>每周一考</td> </tr> <tr> <td>体育</td> <td>化学</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>社会实践</td> </tr> <tr> <td rowspan="2">下午</td> <td>语文</td> <td>英语</td> <td>数学</td> <td>物理</td> <td>数学</td> <td>英语角</td> <td rowspan="2">休息</td> </tr> <tr> <td>化学</td> <td>物理</td> <td>地理</td> <td>生物</td> <td>体育</td> <td>自由活动</td> </tr> </tbody> </table> </body> </html>