前言
本文为 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>