HTML 常用标签 (一)
1. <a>标签
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>链接元素</title> </head> <body> <!-- 网页地址；http协议需要写上 --> <a href="https://www.php.cn/">php中文网</a> <br /> <br /> <!-- 文件下载链接； 如果文件时浏览器能够解析的类型，浏览器会优先尝试显示文件内容； download属性为对文件的描述； --> <a href="0403.zip" download="html教案.md.zip">html教程</a> <br /> <br /> <!-- 电话 --> <a href="tel:1391234567">举报电话</a> <br /><br /> <!-- 邮箱 --> <a href="mailto:1234567@qq.com">联系我们</a> <br /><br /> <!-- 锚点；链接通过锚点的id属性跳转到该锚点 --> <a href="#abc">跳转到当前页的锚点</a> <h1 id="abc" style="margin-top: 1000px;">我就是锚点</h1> </body></html>
2. 列表
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>列表</title> </head> <body> <!-- 无序列表 --> <h3>兴趣爱好</h3> <ul> <li>旅游</li> <li>摄影</li> <li>赛车</li> </ul> <hr /> <!-- 有序列表 --> <h3>采购清单</h3> <!-- 通过start属性来定义列表的初始序号 --> <ol start="3"> <li>鸡蛋3斤</li> <li>大米10斤</li> <li>白菜2颗</li> </ol> <hr /> <!-- 自定义列表 --> <dl> <dt>编程语言</dt> <dd>javascript</dd> <dd>php</dd> <dd>python</dd> <dt>直辖市</dt> <dd>北京</dd> <dd>天津</dd> <dd>上海</dd> <dt>家用电器</dt> <dd>电视</dd> <dd>冰箱</dd> <dd>洗衣机</dd> </dl> </body></html>
3. 表格
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表格</title> </head> <body> <table border="1" width="500" height="300" cellpadding="10" cellspacing="0" align="center" > <colgroup bgcolor="pink"> <col bgcolor="lightgreen" /> <col /> <col bgcolor="yellow" span="2" /> </colgroup> <caption style="font-size: 1.5rem; margin-bottom: 20px;"> 职员信息表 </caption> <thead bgcolor="skyblue"> <tr> <th>员工号</th> <th>姓名</th> <th>职位</th> <th>部门</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>唐三藏</td> <td>师傅</td> <td rowspan="4">取经小队</td> </tr> <tr> <td>002</td> <td>孙悟空</td> <td>大师兄</td> </tr> <tr> <td>003</td> <td>猪悟能</td> <td>二师兄</td> </tr> <tr> <td>004</td> <td>沙悟净</td> <td>三师弟</td> </tr> </tbody> <tfoot> <tr bgcolor="gray"> <td>注意</td> <td colspan="3">如遇女妖精，师傅先上</td> </tr> </tfoot> </table> </body></html>
4. 表单元素
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单</title> <style></style> </head> <body> <h3>用户注册</h3> <form action=""> <!-- 文本框 --> <section> <label for="username">用户名:</label> <input type="text" id="username" name="username" maxlength="20" placeholder="不少于6位" autofocus required /> </section> <!-- 密码框 --> <section> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="不少于8位" autofocus required /> </section> <!-- 单选框 --> <section> <label for="性别：">性别:</label> <div class="box"> <input type="radio" name="gender" id="male" value="male" /> <label for="male">男</label> <input type="radio" name="gender" id="female" value="female" /> <label for="female">女</label> <input type="radio" name="gender" id="secret" value="secret" checked /> <label for="secret">保密</label> </div> </section> <!-- 复选框 --> <section> <label for="program">兴趣：</label> <div class="box"> <input type="checkbox" name="hobby[]" id="game" value="game" checked /> <label for="game">游戏</label> <input type="checkbox" name="hobby[]" id="travel" value="travel" /> <label for="travel">旅行</label> <input type="checkbox" name="hobby[]" id="shoot" value="shoot" /> <label for="shoot">摄影</label> <input type="checkbox" name="hobby[]" id="program" value="program" /> <label for="program">编程</label> </div> </section> </form> </body></html>
