HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
温故而知新
html文本的内部基本结构
<!doctype html>:编写文档说明；
<html> 网页中的根标签
<head>
<meta charset="utf-8" />：设置页面的字符集
<title>title</title> #头部
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p> #身体
</boby>
</html>
HTML标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复习所有学过的知识</title>
</head>
<body>
<h1>h1段落标签</h1>
<h2>h2段落标签</h2>
<h3>h3段落标签</h3>
<h4>h4段落标签</h4>
<h5>h5段落标签</h5>
<h6>h6段落标签</h6>
<p>这是一个段落标签</p>
<em>斜体的强调标签</em>
<strong>加粗的强调标签</strong>
<mark>被颜色标记的强调标签</mark>
<q>加上双引号的引用标签</q>
<cite>斜体的引用标签</cite>
<blockquote>单独成一行的引用标签</blockquote>
<small>小字小字标签</small>
<del>删除标签被划掉了</del>
<ins>添加补充标签有下划线</ins>
<br/>换行
<big>大字大字标签</big>
<sub>下标的标签</sub>
<sup>上标的标签</sup>
<abbr title="teacher被缩写了">t</abbr>
<acronym title="web will">ww</acronym>
<pre>原样格式输出 字体小一点 输出</pre>
<bdo dir="rtl">文字反方向输出</bdo>
<hr>水平线
<p>title：设置标题的提示文本</p>
<p>style：设置元素的样式</p>
<p>id：设置元素的id</p>
<p>class：设置元素类名</p>
<p>插入图片<img src=1.jpg width="100" height="50"></p>
<p>设置普通链接<a href="http://www.baidu.com" target="_blank" style="text-decoration:none">baidu没有下划线</a></p>
<p>以图片作为链接<a href="http://www.baidu.com" target="_blank"><img src="1.jpg" width="100" height="50"></a></p>
<p>iframe属性</p>
<a href="http://www.baidu.com" target="abc">百度</a>
<br>换行
<iframe name="abc" width="100" height="50" src="http://www.baidu.com" frameborder="0"></iframe>
<p>热区链接</p>
<map name="linyu">
<img src="1.jpg" usemap="linyu" width="100" height="50" alt="">
<area shape="circle" coords="0,0,50" href="http://www.baidu.com" alt="" target="linyu">
<p>polygon多边形 rectangle矩形</p>
</map>
<hr>
<p>邮件链接</p>
<a href="mailto:[email protected]">youjian</a>
<h1>关于表格</h1>
<table border="1">
<caption>标题</caption>
<tr>
<th>表头</th>
<td>两行三列</td>
<td>两行三列</td>
</tr>
<tr>
<th>表头</th>
<td>两行三列</td>
<td>两行三列</td>
</tr>
</table>
<table border="1">
<tr>
<td colspan="2">跨列</td>
</tr>
<tr>
<td>111111111</td>
<td>111111111</td>
</tr>
</table>
<table border="1">
<tr>
<td rowspan="2">合并两个单元格</td>
<td>1111111</td>
</tr>
<tr>
<td>1111111</td>
</tr>
</table>
<p>cellpadding: 表示单元格(<td>)内边距到其内容之间的距离<br/>
cellspacing:表示单元格与单元格之间的距离:</P>
<table border="1" cellpadding="20" cellspacing="20">
<tr>
<td>1111111111</td>
<td>1111111111</td>
</tr>
<tr>
<td>1111111111</td>
<td>111111111</td>
</tr>
</table>
<p>表格的frame属性 void：没有外边框 above：外边框只有上边框 below：外边框只有下边框 hsides：显示上部和下部 vsides：显示左部和右部 lhs：显示左外边框 rhs：显示右外边框</p>
<p>表格的rules属性 none：没有内边框和线条 groups：组和烈之间的线条 rows：显示航线条 cols：显示裂线条 </p>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
</ul>
</body>
</html>
input标签里面type常用属性（注册登录表单常用元素）
text 文本
password 密码
button 按钮
file 文件
checkbox 复选框
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
radio 单选框
reset 重置
tel 手机号码
email 邮箱地址
number 数字
date 日期
email <input type="email> 输入邮箱格式
tel <input type=“tel”> 输入手机号码格式
url <input type=“url”> 输入url格式
number <input type=“number”> 输入数字格式
search <input type=“search”> 搜索框（体现语义化）
range <input type=“range”> 自由拖动滑块
time <input type=“time”> 小时分钟
date <input type=“date”> 年月日
datetime <input type=“datetime”> 时间
month <input type=“month”> 月年
week <input type=“week”> 星期 年
placeholder <input type=“text” placeholder=“请输入用户名”> 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus <input type=“text” autofocus> 规定当页面加载时 input 元素应该自动获得焦点
multiple <input type=“file” multiple> 多文件上传
autocomplete <input type=“text” autocomplete=“off”> 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮
2.这个表单您必须给他名字
required <input type=“text” required> 必填项 内容不能为空
accesskey <input type=“text” accesskey=“s”> 规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式
简单的html例子作为参考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--<table width="600" border="1px" cellpadding="0" cellspacing="0">
<caption><h4>青春不常在，抓紧谈恋爱</h4></caption>
</table>-->
<form action="">
<!--当一组表单元素放到fieldset标签内时，浏览器会以特殊的方式来显示它们，它们可能有特殊的
边界、3D效果，或者甚至可创建一个子表单来处理这些元素
-->
<fieldset>
<!--legend元素为fieldset元素定义的标题-->
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<form action="">
<fieldset>
<legend>学生档案思密达</legend>
<label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br />
<label>手机号: <input type="tel" /></label> <br /><br />
<label>邮箱: <input type="email" /></label> <br /><br />
<label>所属学院: <input type="text" placeholder="请选择学院" list="xueyuan"/>
<datalist id="xueyuan">
<option>java学院</option>
<option>前端学院</option>
<option>php学院</option>
<option>设计学院</option>
</datalist>
<br /><br />
<label>出生日期: <input type="date" /></label> <br /><br />
<label>成绩: <input type="number" /></label> <br /><br />
<label>毕业时间: <input type="date" /></label> <br /><br />
<input type="submit" /> <input type="reset" />
</fieldset>
</form>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>
</body>
</html>
参考文献
https://blog.csdn.net/dayexiaofan/article/details/86464386
