HTML笔记（2）

1、图像与链接

URL：统一资源定位器，用来标识网络中的任何资源

文本、图片、音视频文件、段落，或其他超文本

即路径，指从当前位置到目标位置所经过的路线

路径在web页面主要有三种形式：

绝对路径：文件从最高级目录下开始的完整路径

  如： E:\LXD_silence\HTML5Basic\Day01\demo01.html。

完整的URL组成：协议（http://）；主机名或域名（www.baidu.com）；                              

                目录路径（img）；资源名称：音视频、图片、html（logo.gif）

            如： http://www.baidu.com/img/logo.gif

特点：无论当前资源路径是什么，使用绝对路径总能找到需要的资源。

相对路径：指文件的位置相对于当前文件的位置。它包括目录名，或指向一个可以从当前目录出发找到该 文件的路径。

平级用名字；子级进目录；父级向上返

根相对路径： /image/user.jpg

2、图像元素<img>

使用<img>元素将图像添加到页面；是一个空标记<img />

属性： src：指定显示图像的路径

   width：图像宽度

   height：图像高度

   title：鼠标移动到图片上所显示的文字

   alt：图片不显示的时候的文字

3、链接元素<a></a>

使用<a>元素创建一个超级链接，语法如下：

<a href=”  ” target=”  ”>文本</a>

属性： href：链接URL

   target：目标，可取值为_blank(新窗口中打开)、_self（在自身所在的页面打开网页）

  name：锚点名称

 

链接的各种表现形式：

①　下载资源：<a href=”bac.rar”>下载</a>

②　页面跳转：<a href=”abc.html”>网页</a>

③　电子邮件链接：<a href=”mailto:zhaoxu@tarena.com.cn”>联系我们 </a>

④　返回页面的空链接：<a href=”#”></a>

⑤　链接到JavaScript：<a href=”javascript”>JS</a>

锚点

通过a定义锚点：html中的锚点相当于是html文档中某个位置的记号

定义锚点： <a name=”锚点名（anchorname）”></a>

跳转到锚点：<a href=”#锚点名”></a>

跳转到其他锚点处：<a href=”页面的url#锚点名”></a>

4、表格元素<table></table>

表格的作用：具备固定格式的信息的布局。

定义表格用 <table>

定义行<tr>

定义列<td>（单元格）

所有放在table里的内容必须放在td里

<table></table>属性

边框属性：border 边框宽度

bordercolor 边框颜色

尺寸： width 宽     height 高   （可以是绝对的数值，也可以是百分比）

背景： bgcolor 背景色     background 背景图

细节： align  水平对齐方式

cellspacing  单元格与单元格之间的距离（单元格的外边距）

cellpadding  单元格内文本与单元格边框的距离（单元格的内边距）

<tr></tr>属性

height

align 内容在单元格的水平位置（left/center/right）

valign  内容在单元格的垂直位置（top/middle/bottom）

<td></td>属性

width 宽    height 高

bgcolor  背景颜色

align 水平位置对齐方式       valign 垂直位置对齐方式

colspan  跨列  

rowspan  跨行

<caption></caption>属性

<caption>表格的标题</caption>  标题默认将在表格上方居中显示。紧随table标签之后

<th></th>属性

列标题，与td是平级的（th是表头，默认居中、加粗）

行分组

表头行分组：<thead></thead>

表主体行分组：<tbody></tbody>

表尾行分组：<tfoot></tfoot>

 

5、结构标记

header  文档头部、页头（使用率较高，可以在同一个页面多次使用）

nav  导航   一般用于制作页面中的主导航

section  文档的节；文档的主体内容（使用率高，可多次使用）

aside  独立于主体内容之外的内容。如 边栏、侧导航...

article    文档中引用的一段文字。如文章、帖子、博客....

footer  页脚、文章结尾（使用率较高）

 

6、列表

有序列表：<ol></ol>

  <ol>属性：type: A / a / I / i / 1 定义序列的样式（a/A/I/i/1）

start  定义列表项是从几开始的

列表项：<li></li>

无序列表：<ul></ul>

   <ul>属性：type: disk/circle/square (实心圆、空心圆、方块) 列表项前的样式

列表项：<li></li>

定义列表：<dl></dl>

多数出现在图文混排的样式效果中

<dl>       定义列表

<dt></dt>    列表标题（可以插入图像）

<dd></dd>   列表内容（做文字描述 ）

</dl>

 

7、表单

①表单标签：<form></form>（不放在form中的数据是提交不到服务器上的）

属性：action动作（服务器处理数据的程序地址，由服务器端开发人员来提供，默认提交到本页。）

      method  表单将以什么样的方式将数据提交给服务器（是以明文还是密文的方式）， 默认值：get

取值：post 以密文的方式发送数据到服务器上，不限制传递数据的长度

      get 以明文的方式发送数据到服务器上，限制传递数据的长度2kb

  name  定义表单的名称

  enctype  表单数据的编码方式

②表单元素(控件)

作用：专门接受用户的数据

1.Input元素

type:类型

<input type=”text” /> 文本框。接受用户输入的普通数据

<input type=”password” /> 密码框。以密文的方式显示数据，密码的录入使用该控件

<input type=”checkbox” /> 复选框。注意：name属性要一致

<input type=”submit”  value=”按钮上显示的文字”/> 提交按钮。

功能：用于提交表单到服务器上

<input type=””> 重置按钮。

作用：将所有的表单元素恢复到默认值状态

2、textarea多行文本域

3、select和option

4、其他元素