Html固定结构
<html>
<head>……</head>
<body>……</body>
</html>
<html></html>：根标签
<head></head>：头部标签
可包含以下标签
<title>...</title><meta><link><style>...</style><script>...</script>网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
<body></body>：主体标签
代码注释格式：<!--注释文字 -->
认识HTML网页标签
标签的用途和标签在浏览器中的默认样式！
<body> </body>下面:
<h1>一级标题</h1> 有h1、h2、h3、h4、h5、h6六个级别的挑剔；默认加粗；
<p>段落文本</p> 默认段前断后有空白，可用css样式删除；
<em>斜体强调</em>
<strong>粗体强调</strong>
<span> </span> 为部分文本设置样式
<style>
span{
color:blue;
}
</style>
<span>美国梦</span>
<q></q>：简短文本引用，重点在于引用语义；默认样式是双引号；
<blockquote></blockquote>：对长文本的引用；默认左右有缩进；
<address></address>：定义地址；默认样式是稍大斜体；还可以用于定义文章作者身份和签名；
<br/>：换行；
输入空格(要加分号)：
添加分割线：<hr/>
<code> </code> ：添加单行代码；默认小号；
<pre></pre>：添加多行代码段；
信息列表设置如下，默认在前面加黑色圆点：ul无序，ol自动添加序号
<ul>
<li>第一个列表信息</li>
<li>第二个列表信息</li>
</ul>
<div> </div> ：作为容器，确定逻辑部分；
<div id=”learning struct”></div> 给div模块命名；
创建表格
创建表格的四个元素：table、tbody、tr、th、td
1. 整个表格以<table> 标记开始、</table>标记结束；
2. 是表格内容全部下载完后同时显示，用<tbody></tdoby>
3. <tr></tr>表示行
4. <td></td>表格的一个单元格，每行有多少单元格就用多少个<td></td>表示，也可以表示列数；
5. <th></th>表格的头部的一个单元格，表格表头；
以上建立的表格默认无边框
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>认识table表标签</title>
</head>
<body>
<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>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>
加边框（用css为表格）
<style type="text/css">table tr td,th{border:1px solid #000;}</style>
一般我喜欢讲上面的style放入<head></head>里面，实现样式和内容的分离，在<body></body>只放内容的骨架；
为表格添加摘要和标题：
<table summary=”表格摘要部分”> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr>…</table>摘要部分不会显示在表格上，只是帮助搜索引擎更好的检索表格或者为特殊用户提供更好的帮助；
表格的标题名字才能显示出来；
实现超链接
语法：<a href=”目的网址” title=”鼠标滑过显示的文本”> 链接文本</a>
注意：不要把href错写成了herf，当年我也手贱烦了这个毛病；
如果链接需要在新的浏览器中打开，则把浏览器修改为如下格式：
<a href=”目的网址” title=”鼠标滑过显示的文本” target=”_blank”> 链接文本</a>
实现超链接发送邮件，即点击超链接时候，同时进入发送邮件功能，使用mailto写法，第一个参数后面用？后面的额参数都使用&链接：
<a href=”mailto:邮箱地址&subject=主题名称&body=邮件内容” > 链接文本</a>
为网页内容插入文本：
语法：<img src=”photo address” alt=”下载失败的替换文本” title=”提示文本”>
传送数据（form：get/post）
要实现网站与用户的交互，可使用表单form把输入的数据传送到服务器端
<form method="post/get" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /></form>所有要传送的表单控件内容要在<form></form>之间罗列出来；
表单传送数据get和post方法大比拼：
get方法：从服务器上获取数据；
把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到；
服务器端用Request.QueryString[]获取变量值；
传送数据量小，一般不超过2kb；
post方法：向服务器上传送数据；
将表单内各个字段和对应内容放置在html header内传送到action所指的url中；服务器端用Request.Form[]来获取提交数据；
传送数据量大，一般没有限制；
get方法效率高，安全性低；
post方法效率低，安全性高；
查询时候用get，增删改时用post;
如果服务器端得不到中文字符，试着就该一下web.config
<globalization requestEncoding=”GB2312” responseEncoding=”GB2312”/>
文本/密码输入框
输入控件要放在表单<form></form>中
<form> <input type="text/password" name="名称" value="文本" /></form>
多行文本输入框
语法：<textarea rows=”行数” cols=”列数”> 文本</textarea>
实例：
<form method="post" action="save.php"><label>详细情况：</label>
<textarea cols="100" rows="20" >输入……</textarea>
</form>
单选框、复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>实例：
<form method="post" action="save.php">
<label>性别:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
如果是单选框的话，需要注意将名字设置成相同的才起到单选的作用；
下拉列表框
语法：<optionvalue=’提交给服务器的值’> 显示文本值</option>
设置默认选项：
<option value=’提交给服务器的值’ Selected=”selected”> 显示文本值 </option>
下拉列表框实现多选：
主要是在下拉列表框标签里面添加 属性multiple=”mutiple”，在windows系统里面用Ctrl+单击实现多选，在mac系统里面使用command+单击：
<formaction="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
提交按钮
--提交数据
<input type=”submit” value=”提交”>
主要是上面的输入类型需要变化type=”submit”；
重置按钮—重置表单信息
<input type=”reset” value=”重置”>
主要是上面的输入类型需要变化type=”reset”
标签的使用
在点击标签的时候，同时将焦点聚集在标签所代表的选项或者输入框上；
语法：<labelfor=”空间id名称”>
实例：
<form> <label for="male">男</label> <input type="radio" name="gender" id="male" /><br/> <label for="female">女</label> <input type="radio" name="gender" id="female" /><br/> <label for="email">输入你的邮箱地址</label> <input type="email" id="email" placeholder="Enter email"></form>
扫一扫
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
