Html基础知识(2)

1、关键字
<meta name = "keywords" content = "html基础知识">

2、网页描述
<meta name="description" content="秋铸就了叶子生命的华章,叶子才有面对死亡,平静如初。">

3、网页重定向
<meta http-equiv="refresh" content="5; http://www.baidu.com">

补充用法:
4、<meta name="Author" contect="你的姓名">
告诉搜索引擎你的站点的制作的作者

5、<meta name="Robots" contect="all/none/index/noindex/follow/nofollow">
对应属性说明:
(1)all:文件将被检索,且页面上的链接可以被查询;
(2)none:文件将不被检索,且页面上的链接不可以被查询;
(3)index:文件将被检索;
(4)noindex:文件将不被检索,但页面上的链接可以被查询;
(5)follow:页面上的链接可以被查询;
(6)nofollow:文件将不被检索,页面上的链接可以被查询。

5、link标签
调用外部样式表
<link rel=”stylesheet” href=”1.css”>

6、表格
用来存放数据,表格对网页重构(css+div)一个有益补充。
简单结构:
<table border="1" width="500px" height="300px" cellspacing="0" cellpadding="10" align="center" bgcolor="color">
<tr>
<td>人生如戏,全靠演技!</td>
<td>吃货都是善良的,只顾着吃,忘记算计他人了。</td> 
<td>有时候你不努力一下,都不知道什么叫绝望。</td> 
</tr>
</table>

属性详解:
<table></table>

<tr></tr>

<td></td>

边框:border=”1” 
宽度:width=”500”
高度:height=”300”
单元格间距:cellspacing=”2” 默认值为2
内容到边框的距离:cellpadding=”2” 
align left | center | right
注意:如果align放到tr或td里,内容的对齐方式,如果放到table里,表格的对齐方式。
背景颜色:bgcolor=”red”
表格标题:<th></th> 用法和td一样

<tr>
<th>只有谎言才需要拼命鼓吹,唯恐他人不相信。</th>
<th>做最艰难的事,才是进步最大的时候。</th>
<th>功利的背后,是它承认你的努力。</th>
</tr>

表头:<caption>你觉得为时已晚的时候,恰恰是最早的时候。</caption>

扫描二维码关注公众号,回复: 1514082 查看本文章

7、表格的标准结构
<table border="2" height="200" width="300">
<thead>
<tr>
<td>人生如戏,全靠演技!</td>
<td>吃货都是善良的,只顾着吃,忘记算计他人了。</td> 
<td>有时候你不努力一下,都不知道什么叫绝望。</td> 
</tr> 
</thead> 
<tbody>
<tr>
<td>慢一点没关系,只要在走,就是在进步。</td>
<td>总有一天会遇到让你束手无策的那个人。</td> 
<td>时间不会证明一切,只有自己才能证明。</td> 
</tr> 
</tbody> 
<tfoot>
<tr>
<td>人生为棋,我愿为卒,行动虽慢,可谁看我后退过一步。</td>
<td>如果你放弃的太早,你永远都不知道自己会错过些什么。</td> 
<td>再长的路一步步也能走完,再短的路不迈脚永远无法到达。</td> 
</tr> 
</tfoot> 
</table>

8、单元格合并
同一行单元格合并
<td colspan="2"> 人生,只是一阵风,一场雨,一次经历!</td>

同一列单元格合并
<td rowspan="2">对于改变不了的事情,你不接受事实就是愚蠢的行为。</td>

注意:
利用一个像素的单元格间距来实现,将表格背景和行背景设置为不一样的背景颜色,显示的是颜色为表格背景的一个像素的边框。
<table bgcolor="red" width="300px" height="400px" cellspacing="2">
<tr bgcolor="white">
......
......
......

9、表单:收集信息
<form action="2.php" method="post">
解释: action:处理信息(把文件提交给那个文件处理)
method:get/post 传递信息的方式

get:通过浏览器地址栏信息传递信息,安全性低;
post:通过action文件处理文件,安全性高。

(1)提示信息:昵称、密码......

(2)表单控件;

(3)单行文本输入框;<input type="text" name="username" value="jing" maxlength="8" readonly="readonly" disabled="disabled">
name:文本框的名字
value:文本框的值
maxlength:最多字符长度
readonly="redonly"输入框为只读状态
disabled="disable"输入框为未激活状态

(4)密码输入框; <input type="password" name="lja">
注意:单行文本输入框的所有属性对于密码输入框都适用。

(5)单选框 <input type="radio" name="lja" checked="checked">广州<input type="radio" name="lja">深圳
注意:单选框name值设置相同的时候,实现单选效果,checked="checked" 设置为默认选中项。

(6)下拉列表
<select>
<option selected="selected">河源</option>
<option>惠州</option>
<option>东莞</option>
<option>深圳</option> 
</select>
注意:selected="selected"设置下拉列表默认选中项;
multiple="multiple"设置下拉列表为多选项;
label="分组名称";
<optgroup></optgroup>对下拉列表进行分组。

<optgroup label="广州市">
<option>天河区</option>
<option>白云区</option>
<option>越秀区</option> 
<option>增城区</option>
</optgroup> 

(7)多选框 <input type="checkbox">
<input type="checkbox" checked="checked">吃饭
<input type="checkbox" checked="checked">喝茶
<input type="checkbox" checked="checked">午休

(8)多行文本框 <textarea></textarea>
Cols=”30” 输入字符的长度
Rows=”20” 输入字符的行数
<textarea cols="50" rows="20"></textarea>

(9)上传文件控件 图片...
<input type="file">

(10)提交按钮:实现表单提交
<input type="submit">

(11)普通按钮:不能实现表单信息提交,配合js使用
<input type="button" value="普通按钮"> 

(12)重置按钮:将表单信息初始化
<input type="reset" value="重置按钮">

(13)图片按钮:可实现表单信息提交
<input type="image" src="按钮.jpg">

(14)表单信息分组
<fieldset></fieldset> 对表单信息进行分组
<legend></legend> 分组名称

<form acdtion="2.php" method="post" name="first1">
<fieldset>
<legend>注册表单</legend>
<input type="text" name="username" value="用户名" maxlength="10"><br>
<input type="text1" name="password" maxlength="15"><br>
<input type="radio" name="jingan" checked="checked">VIP会员
<input type="radio" name="jingan">普通会员<br>
</fieldset>




猜你喜欢

转载自www.cnblogs.com/Automated-testing/p/9151150.html