HTML第三天学习笔记
昨天学的超链接,今天深入学习了下,发现了更多的知识点,而且关于初始新建网页时,由于是初学者,所以还是纯手写代码~
<html>
<head>
<title>超链接</title>
<meta http-equiv = "content-type" content = "text/html;charset = utf-8">
<script type = "text/javascript"></script>
</head>
<body>
<h2>绝对地址</h2>
<a href = "http://www.baidu.com" target = "_blank">百度</a><br>
<a href = "file:///D:\文档\视频同步\视频同步:作业02.html" target = "_blank">视频同步:作业02</a>
<hr>
<h2>相对地址</h2>
<a href = "视频同步:项目符号.html" target = "_blank">视频同步:项目符号</a>
<hr>
<h2>特殊链接</h2>
<a href = "Images\00.zip">下载图片</a><br>
<a href = "mailto:3148113255@qq.com">发送邮件</a><br>
<a href = "#" target = "_blank">空链接</a><br>
<a href = "javascript:window.close()">关闭窗口</a>
</body>
</html>
常用属性:
href:目标文件地址的URL,该URL是相对地址,也可以是绝对地址;
target:目标文件的显示窗口
_blank:在新窗口中打开目标文件
_self:在当前窗口打开目标文件,相当替换;
_parent:在父级窗口中打开目标文件;
_top:在最顶级窗口打开目标文件;
其中_parent和_top常用于框架网页中
name:定义锚点链接的名称;
绝对地址URL:
1、远程的绝对地址
访问远程的文件,总是以域名、主机名开头。
2、本地的绝对地址
访问本地的绝对地址,是以“file:///”开头的绝对地址。
相对地址URL:
1、当前文件和目标文件是同级文件;
链接地址直接写目标文件名;
2、当前文件与目标文件所在的文件夹同级;
先找文件夹名,再找文件名;
3、目标文件位于上一层目录中;
上一级文件使用"../"表示
上两级文件使用"../../"表示
以此类推;
特殊链接:
1、下载链接:网页不能直接打开的文件会提示下载;
2、邮箱链接:
mailto:(邮箱地址)
3、普通空链接:
4、js链接
在链接地址中写#号;
在火狐window.colse()用不了时使用如下代码;
<a href = "javascript:window.open('about:blank','_self').close()">关闭窗口</a>
或输入地址 about:config 然后再输入关键字 close_window 修改其布尔值;
============================================================================
第二个是关于锚点链接:
<html>
<head>
<title>视频同步:锚点链接</title>
<meta http-equiv = "content-type" content = "text/html;charset = utf-8">
<script type = "text/javascript"></script>
</head>
<body>
<h4>界面的跳转</h4>
<ul>
<li><a href = "视频同步:作业02.html#this">跳转界面</a></li>
</ul>
</body>
</html>
锚点链接:
含义:在一个网业的不同区域进行跳转。锚点定义为“定义记号”;
定义锚点:<a name = "锚点名称"></a>
锚点名称的命名规则:可以包含字母、数字、下划线,但只能以字母开头。
注意:<a>和</a>之间没有内容,换句话说,这个记号不是给我们看的,而是给链接看的。
例如: <a name = "Top_2"></a>
跳转到锚点:
语法: <a href = "文件名#锚点名称">内容</a>
文件名:可有可无,如果是同一网页的不同部分跳转,不用文件名,有则反之;
注意:<a>和</a>之间要有内容,否则会无法进行跳转。
========================================================================================
第三个知识点是关于meta标记
<html>
<head>
<title>meta标记</title>
<meta http-equiv = "content-type" content = "text/html" charset = "uft-8">
</head>
<body> </body>
</html>
meta的主要作用:
是提供网页的元信息。比如:指定网页的搜索关键字;
<meta>有两个属性:一个是http-equiv和name
1、http-equiv属性
功能:模拟http协议文件头信息,当信息从服务器端传到客户端时,告诉浏览器如何正确的显示网页内容。
http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。
(1)、设置网页的字符集;
<meta = http-equiv = "content-type" content = "text/html" charset = "uft-8">
(2)、网页自动刷新;
<meta = http-equiv = "refresh" content = "2">//每隔两秒钟刷新网页一次;
<meta = http-equiv = "refresh" contrnt = "2" url = "http://www.baidu.com">每隔两秒跳一次到百度。
2、name属性
name属性主要用于设置网页的搜索关键字、版权信息、作者等
(1)、设置网页关键字搜索;
<meta name = "keywords" content = "关键字">
(2)、设置网页描述信息
<meta name = "description"> content = "描述">
===================================================================================
第四个知识点是表格的制作
<html>
<head>
<title>Border</title>
<meta http-equiv = "content-type" content = "text/html; charset = tuf-8">
<head>
<body>
<table border = "1" width = "500">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<table>属性
width:表格宽度,单位可以是百分比也可以是固定值。
heigth:表格高度
align:表格水平对齐方式,取值:left、center、right
border:边框粗细
bordercolor:边框颜色
bgcolor:表格背景颜色
background:背景图片URL
cellpadding:单元格边线到内容间的距离(填充距离)
cellspacing:单元格与单元格之间的距离(间距)
rules:合并单元格边框线,取值:all
注意:rules兼容性不好,请用CSS取代;
<tr>属性——行标记
bgcolor:行的背景色
height:行的高度
align:行的文本水平居中
valign:垂直居中,取值:top,middle,bottom
<td>是普通单元格<th>是标题单元格,居中加粗显示
HTML第三天学习笔记的更多相关文章
- 《Linux内核分析》第三周学习笔记
<Linux内核分析>第三周学习笔记 构造一个简单的Linux系统MenuOS 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.stud ...
- Linux内核分析第三周学习笔记
linux内核分析第三周学习笔记 标签(空格分隔): 20135328陈都 陈都 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.co ...
- 20155303狄惟佳预备作业三Linux学习笔记
20155303狄惟佳预备作业三Linux学习笔记 初次接触Ubuntu系统以及Linux内核,了解了其产生的历史,从感性来讲,深深吸引我的是其中蕴含的珍贵的开源精神,以及Stallman等人对&qu ...
- 《Linux命令、编辑器与shell编程》第三版 学习笔记---002
<Linux命令.编辑器与shell编程>第三版 学习笔记---001 Linux命令.编辑器与shell编程 Shell准备 1.识别Shell类型 echo $0 echo $BAS ...
- python cookbook第三版学习笔记十:类和对象(一)
类和对象: 我们经常会对打印一个对象来得到对象的某些信息. class pair: def __init__(self,x,y): self.x=x self. ...
- 20165326 java第三周学习笔记
纸质学习笔记 代码托管
- JavaScript高级程序设计第三版学习笔记(一)之数据类型区分详谈
null.NaN.undefined三者的区别是什么? 在初次接触到JavaScript的时候,傻傻的分不清null.NaN.undefined三者到底区别何在,在实际的项目开发中也因为这个问题而困惑 ...
- Linux第三次学习笔记
#信息的表示和处理 三种重要的数字表示 1. 无符号数编码: 基于传统的二进制表示法,表示大于或者等于零的数字. 2. 补码编码: 表示有符号数整数的最常见的方式,有符号数就是只可 以为正或者为负的数 ...
- struts2框架之OGNL(参考第三天学习笔记)
ognl 1. 什么是ognl 对象图导航语言 Struts内置的表达式语言,它比EL要强大很多. ------------------ 2. 单独学习ognl * EL它操作的数据来自于:四大域:p ...
随机推荐
- Hive技术文档
Hive是什么? Hive是蜂房的意思,为什么hadoop上的这层数据仓库叫Hive? 因为生物学上蜂房是一个结构相当精良的建筑,取名Hive足见则个数据仓库在数据存储上也是堪称精良的.Hive是Fa ...
- 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境:4.安装Oracle RAC FAQ-4.1.系统界面报错Gnome
1.错误信息:登录系统后,屏幕弹出几个错误对话框,无菜单.无按钮 GConf error: Failed to contact configuration server; some possible ...
- jQuery 实现Bootstrap Chart 图表
很多时候我们制作报表的时候需要图表,如果你使用bootstrap开发你的网站,如果你需要使用图表,那么最简单的方法就是就是使用bootstrap 的chart.js来实现图表,下面介绍方法 1.引入c ...
- Http中Cookie与Set-Cookie头
[原文:http://hi.baidu.com/qinglvzhuye/item/6664a807bb8be3dd73e676d6] android 获取 cookies 有很多办法,但是记住了. h ...
- ubuntu 上更新安装 openoffice.org3的过程
方法一:手动安装1首先在“应用成程序--添加/删除”里卸载openoffice 2.4,可能openoffice.org 2.4 Draw因为关联而无法卸载,忽略,卸载其他几项.然后在中文官方网上下载 ...
- 常用的Oracle数据库语句 (待更新完毕)
一.常用的查询语句 1.1 常用查询 查表中有多少个字段 select count(*) from user_tab_columns where table_name=upper('表名') 或者 s ...
- Textbox像百度一下实现下拉显示 z
List<string> Data = new List<string>(); string Randomstr = "功夫撒黑胡椒hcbvf蜂窝qwertyuiop ...
- linux中ls命令详解 (转)
-a -- 全部(all).列举目录中的全部文件,包括隐藏文件(.filename).位于这个列表的起首处的 .. 和 . 依次是指父目录和你的当前目录. -l -- 长(long).列举目 ...
- 判断CString字符串中各位是数字,大小写字母,符号,汉字.xml
pre{ line-height:1; color:#1e1e1e; background-color:#e9e9ff; font-size:16px;}.sysFunc{color:#627cf6; ...
- IoC(控制反转)
在传统的编程中,我们通过内部代码来控制组件之间的关系,但是这种实现方式,容易造成组件之间的高耦合.IoC能够很好地解决这个问题,它将组件间的关系从程序内部上提到外部容器来管理.IoC的核心目标是通过简 ...