本文最后更新于621 天前，其中的信息可能已经过时，如有错误请发送邮件到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)
学习，感谢分享，赞