超链接
超链接有三种形式:
1、外部链接:链接到外部文件。举例:
<a href="new.html">点击进入到新网页</a>
a是英语anchor
“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
href是英语hypertext reference
超文本地址的缩写。
当然,我们也可以直接点进链接,访问一个网址。举例如下;
<a href="http://www.baidu.com" target="_blank">进入百度</a>
2、锚链接:
指给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。
首先我们要创建一个锚点,也就是说,使用name
属性或者id
属性给那个特定的位置起个名字。效果如下:
上图中解释:
11行代码表示,顶部这个锚的名字叫做top。
然后在底部设置超链接,点击时将回到顶部(此时,网页中的url的末尾也出现了#top
)。注意上图中红框部分的#
号不要忘记了,表示跳到名为top的特定位置,这是规定。如果少了#
号,点击之后,就会跳到top这个文件或者top这个文件夹中去。
如果我们将上图中的第23行代码写成:
<a href="new.hhml#top">回到顶部</a>
就表示,点击之后,跳转到new.html
页面的top锚点
中去。
说明:name属性是HTML4.0以前使用的,id属性是HTML4.0后才开始使用。为了向前兼容,因此,name和id这两个属性都要写上,并且值是一样的。
3、邮件链接:
代码举例:
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
效果:点击之后,会弹出outlook,作用不大。
前提:计算机中必须安装邮件客户端,并且配置好了邮件相关信息
特殊几个链接:
返回页面顶部的位置
<a href="#">跳转到顶部</a>
与js有关:
<a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a>
- javascript:;表示什么都不执行,这样点击
<a>
时就没有任何反应 例如:<a href="javascrip:;">
内容</2 - javascript:是表示在触发
<a>
默认动作时,执行一段JavaScript代码。 例如:<ahref="javascript:alert()">内容</a>
超链接的属性
href
:目标URLtitle
:悬停文本。name
:主要用于设置一个锚点的名称。target
:告诉浏览器用什么方式来打开目标页面。target
属性有以下几个值:_self
:在同一个网页中显示(默认值)_blank
:在新的窗口中打开。_parent
:在父窗口中显示_top
:在顶级窗口中显示
blank就是“空白”的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,没啥好解释的。
也就是说,如果不写target=”_blank”
那么就是在相同的标签页打开,如果写了target=”_blank”
,就是在新的空白标签页中打开。
ps:a是一个文本级的标签
比如一个段落中的所有文字都能够被点击,那么应该是p包含a;
<p> <a href="">段落段落段落段落段落段落</a> </p>
而不是a包裹p:
<a href=""> <p> 段落段落段落段落段落段落 </p> </a>
a的语义要小于p,a就是可以当做文本来处理,所以p里面相当于放的就是纯文字。
总结:标签的使用
a:
(1)超链接
href 超链接的地址
target: _self 默认 在当前中打开链接地址
_blank 在空白的页面打开连接地址
(2)标签内部跳转
锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
img
src:连接的图片资源
alt:图片资源加载失败。显示的文本
ul: unordered list 无序列表 ul下的子元素只能是li
li
type='circle' 圆心
type='square' 方块
ol:
ordered list
只能是li
dl:定义列表
dt:定义标题
dd:定义描述
sublime的简单使用
ctrl+shift+p 搜package control
table border='1' style="border-collapse:collapse;"
tr 表格行
td 表格描述
form
HTTP协议
action:提交的服务器网址
method:get(默认)| post(应用:登录注册、上传文件)
页面中的a img link 默认是get请求
input
type:
text: 文本输入框
password:密码输入框
file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加 Enctype='multipart/form-data'
submit:提交按钮
button:普通按钮
name:提交到服务器端的key
value: 显示的文本内容,与服务器端的value
placeholder:文本代替
label
for:是与下面的某个表单控件的id属性进行关联
BS交互
1.form表单默认与服务器进行交互
2.ajax技术