**************三种列表************************************
unorder list，order list，defined list 无序列表，有序列表，自定义列表
<ul style="list-style: none"> <!--用样式修改序列符号-->
<li>11</li> <!--数据 list-->
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
<ol type="1" start="3"><!--从3开始计数，如果type='a',就从abcdef的c开始-->
<li style="height:50px">
<img src="" alt="">
<span>美国</span>
<span>34</span>
</li>
<li>121</li>
<li>121</li>
<li>121</li>
<li>121</li>
</ol>
<dl>
<dt style="height: 50px;text-indent: 44px" ><b>配送方式</b></dt> <!-- title-->
<dd>走路送</dd> <!--data-->
<dd>导弹送</dd>
<dd>坦克送</dd>
<dd>无人机</dd>
</dl>
****************表格 table***************************************************************
cellpadding 单元格内容与边框的距离
cellspacing 单元格与单元格的距离
跨行：从上到下 rowspan="跨越的行数"
跨列 左-》右 colspan="'
table包含caption，thead，tbody
thead，tbody包含tr
tr包含td
就这样从上里到外，从上到下，从左到右填充表格
<!--表格设置，在网页中的对齐，表格线条粗细，表格内容和格子的距离，格子与格子的距离-->
<table align="center" border="2" cellpadding="20" cellspacing="10">
<!--标题-->
<caption style="font-size: 30px;color: blue">产品信息表</caption>
<!--表格头部-->
<thead>
<!--行 tr table row-->
<tr style="height: 50px">
<!--th 作为字段 内容自动居中-->
<th>序号</th>
<th>名称</th>
<th>生产日期</th>
<th>描述</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr style="height: 40px">
<!--td 单元格-->
<td >1001</td>
<td colspan="2">合并单元格，横向合并，合并几列数据</td>
<td >数据</td>
<td rowspan="3">竖向合并，合并几行</td>
</tr>
<tr style="height: 40px">
<td>1001</td>
<td>澡花</td>
<td>2018-02-31</td>
<td>特别细腻</td>
</tr>
<tr style="height: 40px">
<td>1001</td>
<td>澡花</td>
<td>2018-02-31</td>
<td>特别细腻</td>
</tr>
</tbody>
</table>
************链接*******************************************************************
<head>
<!--base 专门用于修改a链接的打开方式-->
<base target="_blank">
</head>
<body>
<!--anchor 锚点 a-->
<a name="poetry" style="color: #000000;">《咏鹅》</a>
<a id="diary" style="color: black">what I've done today</a>
<a href="#poetry">点击我，去看诗</a> <a href="#diary">点击我，去看我今天干了什么</a>
<!--href 跳转目标地址 热点内容 默认在本页打开 修改打开方式 target = " _blank" _blank 新建页方式打开 _self 默认打开方式 --> <a href="http://baidu.com" target="_self">百度</a> </body>
**************表单*****************************************************************
action: 数据的提交地址，和后天协商 method 提交方式，get和post get :是默认提交方式，会显示到地址栏上，不安全。 作用：请求一个界面，用于数据量很小的情况 post：安全 提交的数据在请求头里。用于传递数据量大情况 autofocus 自动. 聚焦
placeholder拥有占位符文本的输入字段。在用户输入值之前，占位文本提示性的显示在输入字段中。
placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。
required 必须要填，填了才会提交到后台。
<form action="01.java" method="get" style="width: 600px">
<fieldset style="border: 2px solid red">
<!--标题-->
<legend>学生档案</legend>
姓名: <input type="text" name="username" placeholder="请输入姓名" autofocus><br> <!--文本框 -->
密码: <input type="password" name="userpasswd" maxlength="10"><br>
电话号: <input type="tel" maxlength="11" name="usertel" required><br>
邮箱: <input type="email" name="useremail" ><br>
<!--省市区 下拉列表 h5 配合一个文本输入框 list属性 = 'datalist里的id值'-->
<input type="text" list="mylist">
<datalist id="mylist">
<option value="北京" name="city">北京</option>
<option value="天津" name="city">天津</option>
<option value="北京" name="city">重庆</option>
<option value="北京" name="city">上海</option>
</datalist>
<!--文本输入框 cols 列 rows行
禁止用户拖拽 resize:none
-->
<textarea name="" id="" cols="30" rows="10" ></textarea>
</fieldset>
</form>
*******************************************************************************
三种元素
“块级元素”译为 block level element， 如div
“内联元素”译为 inline element。如span
介于之间的 incline-block
通过 display: inline-block; 改变元素类型
*******************************************************************************
文字垂直居中：文字的行高 == 盒子高度*/
*******************************************************************************
伪类选择器 :hover 鼠标移入，则背景变金色
span:hover {
background-color: gold;
}