HTML常用代码（下）

9.列表

1.无序列表

<ul>无序列表
  <li></li> 列表项
  <li></li> 独占一行，块级元素
  <li></li>
</ul>

2 有序列表

<ol>有序列表
  <li></li> 列表项
  <li></li> 独占一行，块级元素
  <li></li>
</ol>

3 定义列表

<dl>dl标签定义列表
  <dt></dt>dt标签定义项目
  <dd></dd>dd标签定义内容
  <dd></dd>
  <dt></dt>
</dl>  

10.表格

<table> table标签定义表格
  <tr> tr标签定义行
     <td></td> td标签定义单元格
  </tr>
</table>
 
tr行
td列
th标题
caption标题标签

<table border="1"> table标签定义表格,边框为1
  <tr> tr标签定义行
     <th></th>自动加粗
     <th></th>
     <th></th>
  </tr>
</table>

<table border="1"> table标签定义表格,边框为1
  <tr> tr标签定义行
     <td rowspan="2"></td> //rowspan跨两行
     <td></td>
  </tr>
</table>

<table width="宽度" border="边框粗细" cellspacing="单元格间距" cellpadding="单元格填充">  
   <tr style=“行内样式” align="对齐方式：left、center、right">    
     <th colspan="跨列">表头，默认加粗和居中</th>    
     <th rowspan="跨行"></th>  </tr>  
   <tr> --- 行    
  <td>列</td>  
 </tr>  
</table>

 11.视频

<video src="视频路径" controls="controls"></video>
 
width 视频宽度 值为：px
height 视频长度 值为：px
src 视频播放路径 值为：URL
controls 显示控件：播放/暂停 值为：controls
autoplay 视频就绪后立马播放 值为：autoplay
loop 循环播放 值为：loop

1 视频兼容性 

视频播放兼容性
<video controls loop>
  <source src="video/video.wemb" type="video/wemb"/>
  <source src="video/video.mp4" type="video/mp4"/>
</video>
自上而下
第一个执行，其他不执行

 12.div

页面头部 header
页面中部 section
页面底部 footer
文章内容 article
侧边栏 aside
导航栏 nav

13. iframe 内联框架

语法 ：
<iframe src="路径" width="宽度" height="高度" name="名称" frameborder></iframe>
frameborder框架边框

内联框架和超链接标签的使用

<p><a href="https://www.ctrip.com/" target="myframe">猛击这里查看携程官网</a></p>
<p><a href="https://www.qunar.com/" target="myframe">猛击这里查看去哪官网</a></p>
<iframe id="myframe" name="myframe" width="500" height="500"></iframe>

 14.form表单标签

<form action="路径" method="提交方式" ></form>
action 指定路径
method 指定数据提交方式 
提交方式:get post
post:
1.不改变浏览器地址栏状态
2.安全性高
3.常用于保存，修改，删除
get:
1.会改变地址栏状态
2.安全性低
3.常用于查询

15.input标签

        

<input type="text" name="" value=""/>
type name value必须有
value是往后台发送的值
type元素类型
name元素名称
value初始值
maxlength最大字符数或最长长度
checked 是否被选中(默认选中)
size初始宽度
注:
1.form表单和input标签成对出现
2.type和name元素必须写

1 type常用值

text 单行输入框，默认20个字符
password 密码框，加密输入为*
radio 单选按钮
checkbox 复选框/多选框
button 点击按钮
sublimt 提交按钮
reset 重置按钮
file 文本上传按钮  methods="post" 文件提交方式必须是post
email 邮箱文本框
url 地址文本框
range 范围内数值文本框(滑块)
search 搜索文本框
number 数字类型

2 selected和checked

seleced用于单选，checked用于多选,
selected是选择很多项，但是只取当前的项，即最后一个选中的
checked是选中很多项，都选中。

16.列表框 下拉菜单(重点)

<form>
  <select name="city">
  <option value="0" selected="selected">--请选择--</option> //selected默认选择
  <option value="福州">福州</option>
  <option value="福清">福清</option>
  <option value="莆田">莆田</option>
  <option value="晋江">晋江</option>
  </select>
</form>
数据库中接收的是value的值
selected为默认选中
注意：
1.select option是成对出现的
2.option中必须有value属性

17.文本域

textarea
<textarea name="te" id="te" rol="宽度，按英文字符计算，1英文=2中文" rows="rol="宽度，按英文字符计算，1英文=2中文">
</textarea>

18.标注

单击标注文本内容，浏览器自动将焦点转移到相关表单元素上
如：
<label for="boy">
<input type="radio" id="boy" name="sex">
</label>
<label for="gril">
<input type="radio" id="gril" name="sex">
</label>
注意：label标签for属性的值需要与input标签中的id属性的值相匹配

hidden隐藏域：用于隐藏信息，给程序员看
readony 只读不写 
disabled禁用
（readony，disabled为Boolean不需要属性值）
 
placeholder定义提示信息，用户输入后自动消失（字体颜色为灰色）
required不可为空
pattern使用正则表达式验证表单
 
正则表达式：
^以......开始
$以......结束
^1[3456789]\d{9}$
1:第一位
3456789：第二位
\d从0~9之间
{9}匹配前一项9次