HTML5学习(一)
HTML5学习
HTML5的基本结构
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World!</title>
</head>
<body>
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
</body>
</html>
注释
<!--注释文字 -->
标签式样，语法为标题文本 ，x可取1到6
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
</body>
斜体与加粗
<em>需要斜体的文本</em>
<strong>需要加粗的文本</strong>
利用设置单独的样式
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
短文本引用（加双引号）
<q>引用文本</q>
长文本引用（加缩进）
<blockquote>引用文本</blockquote>
在html文本中想输入回车换行，输入
<br />
想输入空格，输入
加水平线，输入
<hr />
为网页加入地址或邮件信息
<address>联系地址信息</address>
加入代码
<code>代码语言</code>
加入大段代码
<pre>语言代码段</pre>
有序列表
<ol>
<li>我的第一个列表信息。</li>
<li>我的第一个列表信息。</li>
</ol>
无序列表
<ul>
<li>我的第一个列表信息。</li>
<li>我的第一个列表信息。</li>
</ul>
给网页的独立的版块添加“标记”
<div id="名称一">
<h2>标题</h2>
<ul>
<li>列表一 </li>
<li>列表二</li>
<li>列表三</li>
</ul>
</div>
创建表格
创建表格的四个元素：table、tbody、tr、th、td。
<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行
<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列
<th>…</th>：表格的头部的一个单元格，表格表头
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
</tbody>
</table>
在head中加入如下代码可以出现方框
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
为表格添加摘要
<table summary="摘要内容">
为表格添加标题
<caption>标题文本</caption>
因此，一个简单的表格代码为：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
</head>
<body>
<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
<caption>2012年到2013年库存记录</caption>
<tr>
<th>产品名称 </th>
<th>品牌 </th>
<th>库存量（个） </th>
<th>入库时间 </th>
</tr>
<tr>
<td>耳机 </td>
<td>联想 </td>
<td>500</td>
<td>2013-1-2</td>
</tr>
<tr>
<td>U盘 </td>
<td>金士顿 </td>
<td>120</td>
<td>2013-8-10</td>
</tr>
<tr>
<td>U盘 </td>
<td>爱国者 </td>
<td>133</td>
<td>2013-3-25</td>
</tr>
</table>
</body>
</html>
网页链接
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
但a标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开,则需要
<a href="目标网址" target="_blank">click here!</a>
加入图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
交互表格
语法为
<form>
<input type="text/password" name="名称" value="文本" />
</form>
当type="text"时，输入框为文本输入框;当type="password"时, 输入框为密码输入框。name：为文本框命名，以备后台程序ASP 、PHP使用。value：为文本输入框设置默认值。(一般起到提示作用)
多文本输入的语法：
<textarea rows="行数" cols="列数">文本</textarea>
单选框复选框语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
当 type="radio" 时，控件为单选框,当 type="checkbox" 时，控件为复选框.value：提交数据到服务器的值（后台程序PHP使用.name：为控件命名，以备后台程序 ASP、PHP 使用.checked：当设置 checked="checked" 时，该选项被默认选中.注意：同一组的单选按钮，name 取值一定要一致
下拉框语法：
<option value="向服务器提交的值">显示的值</option>
若设置默认值，则需要在option中添加
selected="selected"
若设置多选，则在select标签中设置multiple="multiple"属性，就可以实现多选功能。
提交和重置数据的语法:
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
因此，一个简单的统计表为：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单标签</title>
</head>
<body>
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="" /><br />
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" /> <br />
<label>性别:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" /><br />
<label>爱好:</label>
<select multilpe="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物" selected="selected">购物</option>
</select><br />
<label>你对什么运动感兴趣</label>
<br />
<lable for="run">慢跑</label>
<input type="checkbox" name="sparts" id="run" />
<br />
<lable for="rclimb">登山</label>
<input type="checkbox" name="sparts" id="climb" />
<br />
<lable for="basketball">篮球</label>
<input type="checkbox" name="sparts" id="rbasketball" />
<br />
<label>个人简介：</label><br />
<textarea cols="50" rows="10">在这里输入内容...</textarea><br />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
</html>
