学习笔记

|表头1|表头2|表头3|表头4|表头5|
|:--|:--|:--|:--:|:--:|
|数据11|数据12|数据13|数据14|数据15|
|数据21|数据22|数据23|数据24|数据25|
|数据31|数据32|数据33|数据34|数据35|
<hr>
<table>
<tr><th>表头1</th><th>表头1</th><th>表头1</th></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>

给文本框增加输入提示，可以下拉也可以输入：

<label for="city">请选择城市:</label>
<input list="cityList" name="city" id="city">
<datalist id="cityList">
  <option value="石家庄Shijiazhuang">
  <option value="邯郸Handan">
  <option value="保定Baoding">
  <option value="邢台Xingtai">
  <option value="秦皇岛Qinhuangdao">
  <option value="唐山Tangshan">
  <option value="廊坊Langfang">
  <option value="沧州Cangzhou">
  <option value="衡水Hengshui">
  <option value="承德Chengde">
  <option value="张家口Zhangjiakou">
</datalist>

效果：

1. 平时和普通文本框一样：
   
2. 鼠标划过时在右边出现倒三角▼：
   
3. 鼠标点击时出现下拉项目列表：
   
4. 可以点击选择项目，也可以输入部分内容进行筛选：
   

CSS代码：

 width:794px; height:1122px;
 width:21cm; height:29.7cm;