本文最后更新于 735 天前，其中的信息可能已经过时，如有错误请发送邮件到 echobydq@gmail.com
前言
本文为 HTML 基础标签笔记
HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
文本格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- b加粗 u下划线 i倾斜 s删除线 --> <h1>腾讯科技高级web前端开发岗位</h1><hr> <h3>职位描述</h3> <u>负责重点项目的前端技术方案和架构的研发和维护工作</u>； <h2>岗位要求</h2> <p>5年以上前端开发经验，<b>精通html5/css3/javascript</b>等web开发技术;</p> <p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；</p> <p>代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；</p> <p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p> <p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p> <p><s>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</s></p> <h2>工作地址</h2> <p> <i>上海市-徐汇区-腾云大厦</i></p <!-- alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本 --> <img src="image/map.jpg" alt=""> <!-- 空格   --> HTML文档，学习字符实体，如文字间多三个      空格 </body> </html>
列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表</title> </head> <body> <!-- 无序列表 unordered lists --> <ul> <!-- list item --> <li>榴莲</li> <li>苹果</li> <li>香蕉</li> <li>草莓</li> <li>哈密瓜</li> </ul> <!-- 有序列表 ordered lists --> <ol> <!-- list item --> <li>你：100分</li> <li>我：90分</li> <li>他：60分</li> </ol> <!-- 自定义列表 definition lists--> <dl> <!-- 自定义列表组 definition term--> <dt>帮助中心</dt> <!-- 自定义列表描述 definition description --> <dd>账户管理</dd> <dd>购物指南</dd> <dd>订单操作</dd> <dt>服务支持</dt> <dd>售后政策</dd> <dd>自助服务</dd> <dd>相关下载</dd> </dl> </body> </html>
表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格</title> </head> <body> <!-- 表格 包含 tr(行) 包含td(数据) --> <!-- css 设置宽高 --> <table border="1"> <!-- caption 表格大标题 --> <caption><strong>学生成绩表</strong></caption> <!-- 结构标签 thead tbody tfoot 包含th/td --> <thead> <tr> <!-- 表头信息 th --> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> </thead> <tbody> <!-- 只有同一个结构标签单元格才能合并 --> <tr> <td>你</td> <!-- 跨行合并 rowspan --> <td rowspan="2">100分</td> <td>牛的</td> </tr> <tr> <td>我</td> <!-- <td>90分</td> --> <td>还行</td> </tr> <tr> <td>他</td> <td>60分</td> <td>不错呦</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <!-- 跨列合并 colspan --> <td colspan="2">还不错呦</td> <!-- <td>very good</td> --> </tr> </tfoot> </table> </body> </html>
表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> </head> <body> <form action="#"> <!-- text 文本框 --> <!-- placeholder 提示 --> 邮箱：<input type="text" placeholder="邮箱/手机号"> <br><br> <!-- password 密码框 --> 密码：<input type="password" placeholder="请输入六位密码"> <br><br> <!-- radio 单选框 --> <!-- checked 默认选中 --> 性别：<input type="radio" name="sex" checked>中性 <!-- label 表单标签(点击文字选中) --> <input type="radio" name="sex" id="nan"><label for="nan">男</label> <label><input type="radio" name="sex">女</label> <br><br> <!-- checkbox 多选框 --> 爱好：<input type="checkbox"> <br><br> <!-- file 文件 --> <!-- multiple 多文件选择 --> 文件：<input type="file" multiple> <br><br> 协议：<input type="checkbox" checked>默认勾选 <br><br> <!-- button 按钮 --> <input type="submit"> <input type="reset"> <input type="button" value="普通按钮"> <br><br> <button>按钮</button> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">button按钮，js添加功能</button> <br><br> <!-- select 下拉菜单 --> <select> <option>北京</option> <option selected>上海</option> <option>深圳</option> <option>杭州</option> </select> <br><br> <!-- textarea 文本域 --> <!-- CSS 禁用掉右下角拖拽 --> <textarea name="#" id="#" cols="30" rows="10"></textarea> </form> </body> </html>
综合案例
学生信息表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学生信息表</title> </head> <body> <table border="1" width="500" height="300"> <caption><strong>优秀学生信息表</strong></caption> <thead> <tr> <th>年级</th> <th>姓名</th> <th>学号</th> <th>班级</th> </tr> </thead> <tbody> <tr> <td rowspan="2">高三</td> <td>张三</td> <td>110</td> <td>三年三班</td> </tr> <tr> <td>赵四</td> <td>120</td> <td>三年三班</td> </tr> </tbody> <tfoot> <td>评语</td> <td colspan="3">你们都很优秀</td> </tfoot> </table> </body> </html>
表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> </head> <body> <h1>青春不常在，抓紧谈恋</h1> <hr> <form action=""> 昵称：<input type="text" placeholder="请输入昵称"> <br><br> 性别： <label><input type="radio" name="sex">男</label> <label><input type="radio" name="sex">女</label> <br><br> 所在城市： <select> <option value="shanghai">上海</option> <option value="beijing">北京</option> <option value="nanjing" selected>南京</option> <option value="shenzhne">深圳</option> </select> <br><br> 擅长语言： <label><input type="checkbox">C</label> <label><input type="checkbox">C++</label> <label><input type="checkbox">Java</label> <label><input type="checkbox">Python</label> <br><br> 个人介绍：<br> <textarea name="#" id="#" cols="60" rows="10"></textarea> <br><br> <h3>我声明</h3> <ul> <li>C/C++是最好的语言</li> <li>Java是最好的语言</li> <li>Python是最好的语言</li> </ul> <br><br> <input type="checkbox">我同意以上条款 <br><br> <input type="submit" value="免费注册"> <button type="button">登录</button> <button type="reset">重置</button> </form> </html>
跋文
下一篇笔记为：CSS 基础 – Echo (liveout.cn)
学习，感谢分享，赞