• html二


    超链接

    超链接有三种形式:

    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>
    1. javascript:;表示什么都不执行,这样点击<a>时就没有任何反应 例如:<a href="javascrip:;">内容</2
    2. javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码。 例如:<ahref="javascript:alert()">内容</a>

    超链接的属性

    • href:目标URL
    • title:悬停文本。
    • 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技术
  • 相关阅读:
    HttpWebRequest 改为 HttpClient 踩坑记-请求头设置
    [k8s]docker calico网络&docker cluster-store
    [k8s]jenkins部署在k8s集群
    [k8s]zookeeper集群在k8s的搭建(statefulset模式)-pod的调度
    [svc]cisco ipsec使用证书认证
    [svc]数字证书基础知识
    [svc]logstash和filebeat之间ssl加密
    [svc]cfssl模拟https站点-探究浏览器如何校验证书
    [svc] cisco router as ca server
    [svc]对称加密/非对称加密细枝末节-如何做到数据传输的authentication/data integrity/confidentiality(私密)
  • 原文地址:https://www.cnblogs.com/zwq-/p/9664160.html
Copyright © 2020-2023  润新知