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次