网页编程之HTML常用知识点总结（二）

网页编程之HTML常用知识点总结（二）

1.4.2 超链接标签

超链接标签可以实现不同页面之间的跳转，也可以实现锚点功能

超链接标签中常用的属性有两个：

href：指定跳转到目标资源的位置

target：打开网页的方式。如：在当前页面打开或者在新标签打开等等。

注意：超链接标签不会自动换行。

//此为跳转到本地资源的方式，_blank表示在新标签中打开页面。
<a href="XXXX.html" target="_blank">超链接标签测试</a>
//此为跳转到网络位置的方式
<a href="http://www.baidu.com">百度一下</a>
//锚点功能：通常用于实现跳转到网页的顶部和底部
//#bottom和#top表示元素的id
<a href="#bottom" name="top">返回底部</a>
<a href="#top" name="bottom">返回顶部</a>

1.4.3 图片标签

图片标签用于向网页中插入图片。

图片标签常用的属性有以下几种：

src：引入图片的位置，可以是相对路径、绝对路径或网络地址

title：图片的标题信息

width：图片的宽

height：图片的高

border：图片的边框

alt：当图片无法正常显示的时候网页所显示的属性

aligh：图片的位置，也可以理解为对其方式，必须要有参照物。

<img src="img/pic.jpg" title="一张图片"  width="200px" height="200px" border="2px" alt="无法显示图片" align="right"/>

1.4.4 表格标签

//可以使用Emmet语法快速创建表格，如table>tr*3>td*3可快速创建三行三列的表格
<table cellpadding="" cellspacing="">	//表格标签，cellpadding:内容和单元个的距离
        								//cellspacing：单元格和单元格之间的距离
	<tr>	//行标签，可以为行指定height
		<th>姓名</th> //标题列标签，自动居中、加黑
		<th>年龄</th>
		<th>性别</th>
	</tr>
	<tr>
		<td>张三</td>//列标签，可以为列指定width
		<td>18</td>
		<td>男</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>18</td>
		<td>女</td>
	</tr>
</table>
//可以使用下列两种标签进行单元格的合并
<th colspan="2" bgcolor="blue">内容</th>	//合并两列
<th rowspan="2">内容</th>		//合并两行

1.4.5 表单标签

<form action="" method="">
			
</form>

action：表单提交的位置

method：表单的提交方法有两种get/post

使用get方法：

​ 参数会依附于url地址之后，在地址栏可见

​ 数据的长度有限制

​ 此种方法提交数据不安全

使用post方法：

​ 请求不会依附于地址

​ 处理参数长度不受限制

​ 此种方法提交数据比get方法安全

表单标签中常用的标签有以下几种：

//普通文本框
账号： <input type="text"  name="username" value="" />
//密码框
密码：<input type="password" name="pwd" value="" />
//单选框：实现单选name属性的值必须相同！ checked：默认选择
男：<input type="radio"  name="gender"  value="1" checked="checked"/>
女：<input type="radio"  name="gender" value="0"/> 
//多选框
抽烟:<input type="checkbox"  value="0" checked="checked"> 
喝酒:<input type="checkbox" value="1"/> 
烫头:<input type="checkbox" value="2"/>
//多行文本框
个人介绍： <textarea rows="15" cols="20" value="">在此输入个人介绍</textarea>
//文件选择框
<input type="file" name="file" />
//隐藏框
<input type="hidden" name="" value="" /> 
//下拉框
<select name="ch"> 
    <option value="1">中国</option> 
    <option value="2" selected="selected">美国</option> 
    <option value="3">日本</option> 
    <option value="4">新加坡</option> 
</select> 
//提交按钮
<input type="submit" value="提交" />
//普通按钮
<input type="button" value="普通按钮" />
//重置按钮，将会重置已输入的表单内容
<input type="reset" value="重置表单" />