HTML-----<a>、<table>、<form>解析

 

超链接

anchor 锚

<a href=”url”>内容</a>

Href

Hypertext reference 引用

URL(Uniform Resource Locator)

统一资源定位器,就是一个地址，网址,指定的资源内容具有唯一性。

 

http://www.baidu.com/img/bd_logo.png

协议：http://, ftp://, thunder:// , ed2k://

 

域名: www.baidu.com

目录：img

文件：bd_logo.png

 

 

a 不可嵌套

 

Target:打开的目标

1. _blank:在一个新的窗口打开网页
2. _self:在当前窗口打开网页(默认)
3. _top
4. _parent

 

超级链接

外部链接 :url是本网站外的链接

<a href="http://www.sina.com.cn" target="_blank" >新浪网</a>

友情链接：

 

采集，盗链

内部链接。

News/oct/2015-10-01.html

文本链接，

普通文本加上<a href=”url”>普通文本</a>

图片链接，

 

下载链接(广告图片)，

将提供下载的内容打包成*.rar, *.zip, *.iso, *.mp4,*.rmvb, *.flv

当用户点击时，会自动关联下载工具。

 

空链接

<a href=””>空链接</a>

<a href="#">我是空链接</a><br />

1. 单击后回到当前页面的顶部

<a href="javascript:void(0)">我是JavaScript空链接也叫死链接</a>

1. 单击后没有反应，可以配合JS程序

<a href="javascript:void(0)" οnclick="alert('点我呀')">我是JavaScript空链接也叫死链接</a>

电子邮件链接

<a href=”完整的email地址”>联系我们</a>

<a href=”mailto:ccjsjmail@aliyun.com”>联系我们</a>

自动关联电子邮箱工具：默认会打开outlook。href="mailto:ccjsjmail@aliyun.com?subject='hello'">ccjsjmail@aliyun.com</a>

？Subject:邮件主题信息

 

锚点链接

先定义锚点：

<a name=”top”></a>

使用的方法：

<a href=”#top”>回到TOP的位置</a>

 

 

 

图文混排

表格结构，

<table>属性 

width 表格宽度 单位像素

height 表格的高度：一般不设置，让表格中内容撑开

align ：对齐方式：值：left ,right center

border :表格的边框

bordercolor ：边框的颜色

background ：表格背景图 

单元格的td的宽度和高度一定和背景图片的宽和高相适应。

bgcolor ：表格背景色

cellpadding 单元格的填充：单元格中内容到边框的距离

cellspacing ：单元格的间距：单元格与单元格之间距离

rules ：边框的显示方式。

Rows 显示行边线

Cols 显示列边线

All 合并连线

None 不显示行列线，只有外边框线。

<tr>属性 valign：left ,center right, valign:top,

 

 

<td>属性

单元格的合并方式

colspan:向右合并，有合并就有删除

 

rowspan：向下合并, 有合并就有删除

 

 

<th>属性

列标题文字，自加粗并在单元各居中

<caption>

表格标题,双标记  

隐藏的tbody，浏览器自动生成,是表格的主体部分

Thead

Tfoot

都是针对于表格的行来说的

 

 

 

表单：表单的概念，表单的工作原理

 

 

表单的结构

表单的标签：<form> </form>

常用属性

Name , method(get,post), action(服务器的接收的页面如：reg.php), οnsubmit=”JS函数”，enctype=”multipart/form-data”

表单的元素

<input type=”text” name=”username” size=”20” maxlength=”30” />

<input type=”password” name=”pwdddd” size=”20” maxlength=”30” />

表单的提交

<input type=”submit” value=”提交” name=”submit” />

<input type=”reset” value=”重写”  />

 

 

Form 标记属性 GET方法，POST方法,

enctype= application/x-www-form-urlencoded,  multipart/form-data

表单元素

文本域 name value size maxlength readonly disabled

密码域

单选 checked

复选，

提交按钮

重置 reset

图片按钮 src

普通按钮 button

隐藏域 hidden

 

上传文件域 file

下拉列表，name multiple size

文本区域 textarea cols rows name

相关的元素分组filedset legend

 

转载于:https://www.cnblogs.com/Mangosy/p/8735473.html