01段落标签 <p> 段落标签 </p> <h2>粗体标签</h2> <!--b标签 只是物理加粗 strong 不仅加粗 还利于seo搜索--> <b>5555</b> <strong>6666</strong> <h2>斜体文字</h2> <!--i标签 只是斜体 em 不仅斜体 还利于seo搜索--> <em>77777</em> <h2>a标签</h2> <a href="http://www.baidu.com" target="_blank">去百度</a> <h2>特殊符号</h2> <p> 大于号：-- ><br> 小于号：-- <<br> 空格符号:-- 12 34<br> 空白位:-- 12 34<br> 版权符号:-- ©<br> </p>
图片标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="https://res.shiguangkey.com/file/201811/03/20181103195526322109920.jpg!mall_course_c" alt=""> <img src="img/01.jpg" alt="python图标" width="100" height="80" title="我是python图标"> <!-- src 定义图片路径 相对、绝对 alt 图片描述，用于seo搜索 当图片路径错误的时候 会显示在页面上 width 定义图片宽度 height 定义图片高度 title 鼠标划入 有提示 当width/height只给一个值的时候，另一个值等比例缩放，然后不给默认图片大小 --> </body> </html>
列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<ul>--> <!--<li>1</li>--> <!--<li>2</li>--> <!--<li>3</li>--> <!--</ul>--> <!--ul>li{$}*4 tab--> <h2>无序列表</h2> <ul type="circle"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <!-- type disc 默认 小黑圆点 circle 空心圆 square 小方框 --> <h2>有序列表</h2> <ol type="A"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <!-- 1 1 2 3 4 默认 a a b c d A A B C D I i --> <h2>自定义列表</h2> <dl> <!--<dt>前端</dt>--> <dd>html</dd> <dd>css</dd> <dd>javaScript</dd> </dl> </body> </html>
表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse: collapse; /* collapse 边框合并，如果相邻的话，共用一个框 separate 默认值，边框分开，不合并 */ /*水平居中*/ text-align: center; } </style> </head> <body> <table border="1"> <caption><b>学生信息表</b></caption> <thead> <tr> <th>班级</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td rowspan="3">35</td> <td>谢昊</td> <td>男</td> <td>20</td> </tr> <tr> <!--<td>35</td>--> <td>陈春博</td> <td>男</td> <td>18</td> </tr> <tr> <!--<td>35</td>--> <td>秋秋</td> <td colspan="2">保密</td> <!--<td>18</td>--> </tr> </tbody> <tfoot> </tfoot> </table> </body> </html>
form表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> textarea{ width: 300px; height: 200px; /*禁止拉伸*/ /*resize: none;*/ /*水平方向可以拉伸*/ /*resize: horizontal;*/ /*垂直方向可以拉伸*/ resize: vertical; } </style> </head> <body> <!--?gender=on&hobby=on&hobby=on&xz=2&wby=1111111111111111111--> <!--?user=qwert&psd=asdfg&gender=woman&hobby=read&hobby=eating&hobby=on&xz=1&wby=我想你啦--> <!--?name=value&name=value&name=value&name=value....--> <form action="" method="get" autocomplete="off"> <!--action 规定当前提交表单向何处发送表单数据--> <!--method 默认get post--> <!--autocomplete自动完成，on输入框会提示 off输入框不会提示--> 账号：<input type="text" placeholder="请输入你的账号" name="user"><br> 密码：<input type="password" placeholder="请输入你的密码" name="psd" required><br> <!--required 必填字段--> 单选框： <input type="radio" name="gender" value="man">男 <input type="radio" name="gender" id="woman" value="woman"> <label for="woman">女</label> <input type="radio" name="gender" disabled >保密<br> <input type="file"> <!--checked 默认选中--> <!--disabled 禁止选中--> 多选框： <input type="checkbox" name="hobby" checked value="read">看书 <input type="checkbox" name="hobby" id="shopping" value="shopping"> <label for="shopping">逛街</label> <input type="checkbox" name="hobby" value="eating">吃东西 <input type="checkbox" name="hobby">追剧 <input type="checkbox" name="hobby">打人<br> 下拉框： <select name="xz" size="2"> <!--selected 规定在option里面默认展示第几项--> <!--size规定下拉列表中可见选项的数目--> <option value="1">长沙</option> <option value="2">武汉</option> <option value="3">深圳</option> <option value="4" selected>天津</option> </select><br> 文本域： <textarea name="wby"></textarea><br> 提交：<input type="submit" value="我是提交"><br> 重置：<input type="reset" value="我是重置按钮"><br> <!--给javascript用的--> 按钮：<input type="button" value="按钮"> </form> </body> </html>