wangjie-fourth 的个人博客

记录精彩的程序人生

目录
HTML常用得标签
/    

HTML常用得标签

a标签

该标签用来跳转到位置。这里需要注意俩个点:可以跳转到哪?新的页面在哪里显示?
其中,可以跳转到:

  • 跳转到其他页面;
  • 跳转到页面内部锚点;比如某个标签
  • 跳转到其他伪协议;比如邮箱或电话等;

新的页面也可以显示在:

  • 新得页面;
  • 页面得某个内部、外部标签;比如iframe标签。

相关属性

  • href:【hyper + reference】:超级链接
  • target:在哪个窗口打开链接
  • download
  • rel=noopener
1、href

要跳转链接地址;可以是网址、路径、伪协议。
(1)网址

  <body>  
    <a href="http://google.com">http协议跳转</a>  
    <a href="https://google.com">https协议跳转</a>  
    <a href="//google.com">自动选择适配的协议来跳转到链接</a>  
  </body>  

//google.com会自动选择适配的httphttps协议,来跳转。比上面俩个网址都好。

(2)路径

  <body>  
    <a href="/a/b/c.html">项目根目录下的文件</a>  
  
    <a href="a/b/c.html">相对文件所在位置的相对位置</a>  
    <a href="index.html">相对文件所在位置的相对位置</a>  
    <a href="./index.html">相对文件所在位置的相对位置</a>  
  </body>  

(3)伪协议

  • javascript:代码:会执行这个代码
  • mailto:邮箱
  • tel:手机号
  <body>  
    <a href="javascript:;">点击不做任何事情</a>  
    <a href="#xxx">跳转到id为xxx标签所在的位置</a>  
    <a href="mailto:wangjie_fourth.163.com">给该邮箱发送邮件</a>  
    <a href="tel:18888888888">给该电话号码拨打电话</a>  
  </body>  

听说那个不做任何事情的用法,很有用处?

(4)#标签id
跳转到当前页面 指定id的标签

  <body>  
    <h1 id="xxx">标签一</h1>  
  
    <a href="#xxx">跳转到id为xxx标签所在的位置</a>  
  </body>  
2、target

用于表示新打开的链接,在哪里展示。其值有:

  • _blank:表示在新窗口打开链接
  • _self:默认值,在当前窗口打开链接;
  • _top:当这个界面有多个界面时,当前里面界面使用_top属性值的时候,就会让这个标签在外面层级的刷新
  • _parent:如果有多层嵌套窗口的话,就指的是在父级窗口打开超链接。

  <body>

    <input type="text" value="外层界面" />

    <iframe src="/a_target_iframe.html"></iframe>

  </body>

  

  <body style="background: red;">

    这是一个 iframe 标签,里面有一个 a 标签

    <a href="//google.com" target="_top">top</a>

  </body>

这个时候嵌套里面的超链接,就会在整个外层界面跳到到新标签;如果里面的a标签的target属性不是_top的话,就只会在里面这个界面进行跳转。

新的命名方式

  • windowname

  • iframename

(1)如果其值为xxx的时候,就会在这个窗口打开链接


    <a href="//baidu.com" target="xxx">百度</a>

    <a href="//google.com" target="xxx">谷歌</a>

(2)在指定的iframe标签中显示新打开的链接
image.png

3、download

表示下载这个链接得页面;但不是所有游览器都支持,尤其是手机游览器

4、rel=noopener

table标签

table标签是用来描述一个表格。其中分为3大部分:

  • thead:表格头

  • tbody:表格体

  • tfoot:表格尾部

上面三个标签还可以使用下面三个标签:

  • tr:代表一行

  • th:代表加粗得单元格

  • td:代表普通的单元格

image.png

代码是:

image.png

为什么要规范的写这个呢?因为如果你不写的话,游览器会自动为你补齐;
image.png

相关的样式

  • table-layout:调整每列值得排列

  • border-collapse:边框是否合并

  • border-spacing:每个单元格得距离


img标签

用于使用get请求,展示一张图片。相关属性有:

  • alt:替换得选择,如果加载不了图片,会显示这个文字;

  • src:

  • width:

  • height:

事件

  • onload:图片加载成功,会调用这个事件;

  • onerror:图片加载失败,会调用这个事件;

响应式

  • max-width:100%:设置宽度自适应所有宽度

image.png


form标签

用于发送getpost请求,然后刷新页面。相关属性有:

  • action:要发送得后端地址

  • autocompleteonoff;是否自动填充,会为下面得输入框给出自动建议

  • methodgetpost

  • target:与a标签得target属性一直;会将这个目标页面刷新

事件有:

  • onsubmit

3、问题

inputsubmitbuttonsubmit有什么区别?

  • button里面可以在输入一些内容;而input不可以
    image.png

input标签

用于接收用户输入得内容;其事件有:

  • onchange:该标签内容发生改变时

  • onfocus:光标进入该标签时

  • onblur:光标移出该标签时

评论