1.html超链接
(1)Html中用<a>来表示超链接
<!--文字链接,跳转到网页-->
<p><a href="http://www.baidu.com">百度</a></p>
<!--图片链接-->
<p><a href="http://www.baidu.com"><img src="C:/Users/xph/Desktop/baidu.jpg"></a></p>
<!--将target属性设置成_blank,在新窗口中打开链接文件-->
<p><a href="http://www.baidu.com" target="_blank">在新窗口中打开链接</a></p>
<!--设置title属性,可以在鼠标悬停在链接上是显示注释-->
<p><a href="http://www.baidu.com" title="百度,全球最大的中文搜索引擎">百度</a></p>
<!--如果希望注释多行显示,可以使用
字符实体进行换行-->
<p><a href="http://www.baidu.com" title="百度,
全球最大的中文搜索引擎">百度</a></p>
(2)可以使用name属性跳转到文件的指定位置。Name也是成对出现的,一个设置name的名称,一个设置href指向这个name。点击链接后,对应部分内容将出现在页面的最上方。如果浏览器找不到该name指向的内容,也不会报错,只是会仍然停留在原位置
<p><a href="#c1">这里设置herf跳转到对应name的位置</a></p>
<p><a name="c1">这里设置name的名称</a></p>
2.html绝对路径和相对路径
(1)相对路径
如果源文件和引用的文件位于同一个文件目录里,那么,就可以直接使用文件名来引用
../表示源文件所在的上级目录,../../表示上上级,以此类推
举例说明,要在A.html中插入B.html的超链接
(a)如果二者的绝对路径分别为:
A.html aa/bb/cc/A.html
B.html aa/bb/cc/B.html
那么,在A.html中写:
<a href=”B.html”>链接到B.html</a>
(b)如果二者的绝对路径分别为:
A.html aa/bb/cc/A.html
B.html aa/bb/B.html
那么,就写成
<a href=”../B.html”>链接到B.html</a>
(c)如果二者的绝对路径分别为:
A.html aa/bb/cc/A.html
B.html aa/B.html
那么,就写成
<a href=”../../B.html”>链接到B.html</a>
(d)如果二者的绝对路径分别为:
A.html aa/bb/cc/A.html
B.html aa/ee/ff/B.html
那么,就写成
<a href=”../ee/ff/B.html”>链接到B.html</a>
(e)如果二者的绝对路径分别为:
A.html aa/bb/cc/A.html
B.html aa/bb/cc/dd/ee/B.html
那么,就写成
<a href=”dd/ee/B.html”>链接到B.html</a>
(f)找当前路径的根路径
<a href="/B.html">链接到当前站点根路径下的B.html</a>
3.在html中创建表格
HTML表格用<table>表示。一个表格可以分成很多行(row),用<tr>表示;每行又可以分成很多单元格(cell),用<td>表示
(1)border=”1”; table的属性,设置表格边界,缺省或等于0时,不显示边界(即整个表格的外边框,数字越大,边框越粗)
(2)<th> 表示表格表头,字体为粗体。简单来说,它在表格中的用法和td完全一致,不同点仅在于,其中的内容字体被加粗了
(3)<caption> 在<cation></caption>间写表格的标题
(4)rowspan=”2” td的属性,合并两行
(5)colspan=”2” 类似于rowspan,合并两列
(6)cellpadding=”10” table的属性,设置表格中单元格内容和边界的距离
(7)cellspacing=”10” table的属性,设置表格中单元格之间的距离。缺省时默认为1
(8)bgcolor=”#00ff00” 设置表格或单元格的背景色
(9)background="baidu.jpg" 设置表格或单元格的背景图片,图片大小与表格无关
(10)align=”center” 设置对齐方式,作为table属性时,设置表格在页面中的位置,作为td的属性时,设置单元格中内容在单元格中的位置
4.html框架(Frame)
使用框架Frame,可以在浏览器窗口同时显示多个网页,每个Frame里设定一个网页,且相互独立。
(1)<frame src=”....html”> //标注某一个frame中网页的源文件
(2)<frameset cols=”50%,50%”> //表示接下来的两个frame框架按列分布,每列占窗口大小的百分之五十
(3)<frameset rows=”50%,50%”> //表示按行分布网页,各占50%
(4)<frame noresize=”nosize” src=”f1.html”> //nosize 属性:禁止调整框架窗口尺寸
(5)使用Frame制作html导航框架
http://www.cnblogs.com/JaneBlog/p/6131383.html
以下为一个简单的例子:
<html>
<frameset cols=”120,*”> //*为通配符,表示按列分布是,第一列占120(像素等单位),剩下的空间全为第二列所有
<frame scr=”index.html”> //第一列(左侧为导航栏,含有多个跳转链接)
<frame src=”f1.html” name=”content”> //第二列(名称为“content”,内容默认为f1.html中展示的内容,但会随着导航栏点击不同地址而变化)
</html>
//以下为导航栏index.html中的内容
<html>
<head></head>
<body>
<a href=”f1.html” target=”content”>f1</a> //target部分将导航部分指向的内容展现在content部分
<a href=”f2.html” target=”content”>f2</a>
</body>
</html>
(6)<iframe src=”f.html”> //在html中,使用iframe嵌入另一个网页
5.html列表(Lists)
(1)排序列表(各个列表项由一系列数字进行标记):由<ol> (order List)开始,其中的每一个列表项由<li>开始
(2)不排序列表(各个列表项使用小黑点进行标记):由<ul>开始,其中的每一个列表项由<li>开始
(3)定义列表由<dt>(definition list)开始,定义术语由<dt>(definition term)开始,术语的解释说明由<dd>开始,<dd></dd>中的内容缩进显示
(4)可以使用type来设置排序列表项/不排序列表项前面的标号类型
如图所示:
(5)列表可以进行嵌套
6.Html表单
Html表单(form)是html终止重要的一部分,主要用于采集和提交用户数据。
学习表单主要要注意的要素有三个,一是表单控件,如input=”text”,通过表单的各种控件,用户可以进行输入、选择、提交等各种操作。二是action,指示处理表单信息的文件。三是method,表示发送表单信息的方式。Method有两个值,get和post。get将表单name/value信息经过编码之后,通过url发送(在地址栏中可以看到),而post则是将信息通过http发送。二者的选择方式通常为:如果只是为了取得和显示数据,一般用get。如果涉及到对数据的保存和更新, 建议用post
(1)html表单常用控件
①注意,select既可以做单选,也可以做多选。
做单选时,
<select name=”s1”>
<option value=”1”>选1</option>
<option value=”2”>选2</option>
</select>
做多选时,属性加上multiple即可,用户使用ctrl进行多选操作
<select name=”s1” multiple>
<option value=”1”>选1</option>
<option value=”2”>选2</option>
</select>
②textarea多行文本输入框
<textarea name=”t1” rows=”2” cols=”3”></textarea>
高度为2,宽度为3的多行文本输入框
③密码输入框
<input type=”password” name=”p1”/>
用户输入时,显示的是黑点,而不是输入的内容
④提交
<input type=”submit” value=”提交”>
通过提交(submit)将表单(form)里的信息提交给表单action指向的文件
(这里显示的是一个名为提交的按钮,效果类似于button)
⑤图片提交
<input type=”image” src=”a.jpg” alt=”提交” name=”imgsubmit”/>
这里以图片代替按钮,点击图片进行提交。Src中是图片源文件的路径。Alt表示,如果浏览器没有加载图片的属性,则显示alt中的值