1. 给 div 命名, 使逻辑更加清晰
语法:<div id="版块名称"></div>
2. 创建表格的四个元素:
tabletbodytrthtd
(1) <table></table>: 整个表格以 < table > 标记开始</table > 标记结束
(2)<tbody></tbody>: 如果不加 < thead><tbody><tfooter> , table 表格加载完后才显示加上这些表格结构, tbody 包含行的内容下载完优先显示, 不必等待表格结束后在显示, 同时如果表格很长, 用 tbody 分段, 可以一部分一部分地显示(通俗理解 table 可以按结构一块块的显示, 不在等整个表格加载完后显示)
(3)<tr></tr>: 表格的一行, 所以有几对 tr 表格就有几行
(4)<td></td>: 表格的一个单元格, 一行中包含几对 < td>...</td>, 说明一行中就有几列
(5)<th></th>: 表格的头部的一个单元格, 表格表头
(6)表格中列的个数, 取决于一行中数据单元格的个数
3. 摘要: 摘要的内容是不会在浏览器中显示出来的它的作用是增加表格的可读性(语义化), 使搜索引擎更好的读懂表格内容, 还可以使屏幕阅读器更好的帮助特殊用户读取表格内容
语法:<table summary="表格简介文本">
4. 标题: 用以描述表格内容, 标题的显示位置: 表格上方
语法:
- <table>
- <caption > 标题文本</caption>
- <tr>
- <td></td>
- <td></td>
- </tr>
- </table>
5. 使用 < a > 标签, 链接到另一个页面, 使用 < a > 标签可实现超链接, 它在网页制作中可以说是无处不在, 只要有链接的地方, 就会有这个标签
语法:
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
6.title 属性的作用, 鼠标滑过链接文字时会显示这个属性的文本内容这个属性在实际网页开发中作用很大, 主要方便搜索引擎了解链接地址的内容(语义化更友好
7. 在新建浏览器窗口中打开链接
<a > 标签在默认情况下, 链接的网页是在当前浏览器窗口中打开, 有时我们需要在新的浏览器窗口中打开
如下代码:
<a href="目标网址" target="_blank">click here!</a>
8. 使用 mailto 在网页中链接 Email 地址,<a > 标签还有一个作用是可以链接 Email 地址, 使用 mailto 能让访问者便捷向网站管理者发送电子邮件注意: 如果 mailto 后面同时有多个参数的话, 第一个参数必须以? 开头, 后面的参数每一个都以 & 分隔
9. 认识 < img > 标签, 为网页插入图片, 在网页的制作中为使网页炫丽美观, 肯定是缺少不了图片, 可以使用 < img > 标签来插入图片
语法:
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
10.src: 标识图像的位置;
alt: 指定图像的描述性文本, 当图像不可见时(下载不成功时), 可看到该属性指定的文本;
title: 提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
图像可以是 GIF,PNG,JPEG 格式的图像文件
11. 使用 html 表单与用户交互网站与用户进行交互表单是可以把浏览者输入的数据传送到服务器端, 这样服务器端程序就可以处理表单传过来的数据
语法:
<form method="传送方式" action="服务器文件">
讲解:
<form> :<form > 标签是成对出现的, 以 < form > 开始, 以</form > 结束
action : 浏览者输入的数据被传送到的地方, 比如一个 PHP 页面(save.php)
method : 数据传送的方式(get/post)
- <form method="post" action="save.php">
- <label for="username">用户名:</label>
- <input type="text" name="username" />
- <label for="pass">密码:</label>
- <input type="password" name="pass" />
- </form>
注意:
1 所有表单控件 (文本框文本域按钮单选框复选框等) 都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)
2method : post/get 的区别这一部分内容属于后端程序
12. 文本输入框密码输入框
当用户要在表单中键入字母数字等内容时, 就会用到文本输入框文本框也可以转化为密码输入框
语法:
- <form>
- <input type="text/password" name="名称" value="文本" />
- </form>
- 1type:
当 type="text" 时, 输入框为文本输入框;
当 type="password" 时, 输入框为密码输入框
2name: 为文本框命名, 以备后台程序 ASP PHP 使用
3value: 为文本输入框设置默认值(一般起到提示作用
13. 文本域, 支持多行文本输入
当用户需要在表单中输入大段文字时, 需要用到文本输入域
语法:
<textarea rows="行数" cols="列数">文本</textarea>
1<textarea > 标签是成对出现的, 以 < textarea > 开始, 以</textarea > 结束
2cols : 多行输入域的列数
3rows : 多行输入域的行数
4 在 < textarea></textarea > 标签之间可以输入默认值
13. 使用单选框复选框, 让用户选择在使用表单设计调查表时, 为了减少用户的操作, 使用选择框是一个好主意, html 中有两种选择框, 即单选框和复选框, 两者的区别是单选框中的选项用户只能选择一项, 而复选框中用户可以任意选择多项, 甚至全选
语法:
- <input type="radioeckbox" value="值" name="名称" checked="checked"/>
- 1type:
当 type="radio" 时, 控件为单选框
当 type="checkbox" 时, 控件为复选框
2value: 提交数据到服务器的值(后台程序 PHP 使用)
3name: 为控件命名, 以备后台程序 ASPPHP 使用
4checked: 当设置 checked="checked" 时, 该选项被默认选中
来源: http://www.jianshu.com/p/bfe53737849c