2.4.3 HTML5表格使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1">
<tr>
<td>表格1
</td>
<td>表格2
</td>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>我想吃了
</td>
</tr>
</table>
<br/>
<table border="1" cellpadding="10" bgcolor="aqua">
<tr>
<td>表格1
</td>
<td>表格2
</td>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>我想吃了
</td>
</tr>
</table>
</body>
</html>
2.5.1 HTML5列表的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ul type="square">
<li>ios</li>
<li>andriod</li>
<li>html5</li>
<li>swift</li>
</ul>
<br/>
<ol type="1" start="10">
<li>ios</li>
<li>andriod</li>
<li>html5</li>
<li>swift</li>
</ol>
<br/>
<ul>
<li>宠物</li>
<ul>
<li>猫</li>
<li>狗</li>
</ul>
<li>人类</li>
<ul>
<li>英国人</li>
<li>中国人</li>
</ul>
<li>植物</li>
</ul>
<br/>
<ol>
<li>宠物</li>
<ol>
<li>猫</li>
<li>狗</li>
</ol>
<li>人类</li>
<ol>
<li>英国人</li>
<li>中国人</li>
</ol>
<li>植物</li>
</ol>
<dl>
<dt>hello world</dt>
<dd>每一门新的语言都会打印一个hello world</dd>
<dt>hello world</dt>
<dd>每一门新的语言都会打印一个hello world</dd>
<dt>hello world</dt>
<dd>每一门新的语言都会打印一个hello world</dd>
</dl>
</body>
</html>2.5.2 HTML5块元素标签的使用
第一个文件： 14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
<style type="text/css">
span{
color: aqua;
}
</style>
</head>
<body>
<!-- 块 -->
<p>大家好</p>
<h1>大家好!!!</h1>
<b>这是一个加重标签</b>
<a>这是一个超链接标签</a>
<div id="divid">
<p>hello jikexueyuan</p>
<a>点击我啊~~~</a>
</div>
<div>
<p><span>这是一个测试效果</span>span是一个什么样子</p>
</div>
</body>
</html>第二个文件：mycss.css
#divid p{
color: red;
}
#divid a{
color: blue;
}效果图：
2.5.3 HTML5 布局的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: darkgray">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: aqua">这是头部</td>
</tr>
<td width="20%" height="80%" style="background-color: blue">
<ul>
<li>ios</li>
<li>android</li>
<li>html5</li>
</ul>
</td>
<td width="60%" height="80%" style="background-color: blueviolet">右菜单</td>
<td width="20%" height="80%" style="background-color: deeppink">右菜单</td>
<tr>
<td width="100%" height="10%" colspan="3" style="background-color: darkcyan">右菜单</td>
</tr>
</table>
</body>
</html>2.5.3 HTML5 表单的创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
用户名：
<input tyoe="text">
<br/>
密码：
<input type="password">
<br/>
你喜欢的水果有？
<br/>
苹果<input type="checkbox">
西红柿<input type="checkbox">
香蕉<input type="checkbox">
<br/>
请选择您的性别
男<input type="radio" name="sex">
女<input type="radio" name="sex">
<br/>
请选择您常用的网站
<select>
<option>www.jikexueyuan,com</option>
<option>www.google.com</option>
<option>www.baidu.com</option>
</select>
<input type="button" value="按钮">
<input type="submit" value="确定">
</form>
<textarea cols="30" rows="30">请在此填写个人信息</textarea>
</body>
</html>