表格
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<caption><b>我的书单</b></caption>
<tr>
<th>书名</th>
<th>作者</th>
</tr>
<tr>
<td>高等数学</td>
<td>线性代数</td>
</tr>
<tr>
<td>Java实用教程</td>
<td>Linux就该这么学</td>
</tr>
<tr>
<td rowspan="2">跨越两行的单元格</td>
<td>普通单元格</td>
</tr>
<tr>
<td>普通单元格</td>
</tr>
<tr>
<td colspan="2">跨越两列的单元格</td>
</tr>
<tr>
<td>普通单元格</td>
<td>普通单元格</td>
</tr>
</table>
</body>
</html>
test1.html:
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<caption>
<b>我的书单</b>
</caption>
<thead>
<tr>
<th> </th>
<th>书名</th>
<th>作者</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" style="text-align: right;">现总计:四本图书</td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="2">java体系</th>
<td>疯狂java讲义</td>
<td>李刚</td>
</tr>
<tr>
<td>轻量级java EE企业应用实战</td>
<td>李刚</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">ios体系</td>
<td>疯狂Swift讲义</td>
<td>李刚</td>
</tr>
<tr>
<td>疯狂ios讲义</td>
<td>李刚</td>
</tr>
</tbody>
</table>
</body>
</html>
第一行是thead部分,第二三行是第一个tbody部分,第四五行是第二个tbody部分,第六行是tfoot部分。
图片
test2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>这是一张图片</h4>
<img src="img/scene .JPG" alt="黄山松树" width="200"><br>
<h4>我在图片上添加了链接</h4>
<a href="test1.html" target="_blank"><img src="img/city.jpg" alt="这是一张城市的照片" width="200"></a><br>
</body>
</html>
点击城市照片后:
iframe
test3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="test1.html" width="400" height="200"></iframe><br>
主页面内容<br>
<iframe src="test1.html" width="400" height="200" srcdoc="<h3>HTML 5</h3><div>HTML 5是重要的标记语言</div>"></iframe><br>
<iframe src="test4.html" width="400" height="200" sandbox="allow-forms"></iframe><br>
<iframe src="test5.html" width="400" height="200" sandbox="allow-top-navigation"></iframe><br>
</body>
</html>
test4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="test1.html">
用户名:<input type="text" name="name"/><br>
密码:<input input="password" name="pass"/><br>
<input type="submit" value="提交"/><br>
</form>
</body>
</html>
title属性用于为HTML元素指定额外信息。通常来说,当用户把鼠标移动到该元素上时,浏览器将会显示title属性所指定的信息。
title属性常和<a…/>元素一起使用,以提供关于链接目标的信息。同时他也是<abbr…/>元素必需的属性
test5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com/?tn=40020637_5_oem_dg" alt="百度一下,你就知道" title="这是百度的网址" target="_top">点击使用百度</a>
</body>
</html>
accesskey属性
当HTML页面中有很多个元素时,可以通过该标签属性指定激活该元素的快捷键,这样用户通过键盘快捷键就可以激活对应的HTML元素。
Alt+相应按键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
用户名:<input type="text" name="name" accesskey="n"/><br>
密码:<input input="password" name="pass" accesskey="p"/><br>
<a href="test1.html" accesskey="x">第一个页面</a>
</form>
</body>
</html>