a标签跳到另一个页面指定选项卡_HTML常用标签

最新推荐文章于 2024-03-05 09:04:22 发布

weixin_39528559

最新推荐文章于 2024-03-05 09:04:22 发布

阅读量3.9k

点赞数 1

一. a标签的用法

1. 属性

href :hyper reference 超链接 ★
target :在哪个窗口打开超链接 ★
download :下载网页，但很少用了，不用 ▲
rel=noopener :防止一个bug，在学到CSS时会涉及

<body>
  <a href ="https:xxx.com" target ="_blank" download >超链接</a>   // _blank在新空白页打开
</body>

两款小程序: 实现输入网址就可访问html

yarn global add http-server
yarn global add parcel

打开制作的网页的方式请注意，一定不要双击打开！！！

①http-server .-c-1 简写hs -c-1 （ .是有可无的）

点开后，在网址后加路径xxx.html

②parcel xxx.html

作用

1 跳转到外部页面

2 跳转到内部锚点

3 跳转到邮箱电话等

2. a的href的取值

网址

①https://google.com

②http://google.com

③//http://google.com ：无协议网址，最高级，自动选择http/https

eg: 打开开发者模式，network →点preserve log，在点击超链接，可以看到页面由

http://google.com→http:http://www.google.com→https://www.google.com

路径

④ /a/b/c （绝对路径）以及 a/b/c（相对路径）

开启http服务后，/a不是根目录，而是http服务的根目录

⑤ index.html 以及./index.html

伪协议

⑥javascript :代码; ：相当于执行js代码

<a href="javascript: ;"></a>

现在一般用来做点击后没有动作的空标签（只想要一个a标签，又想什么都不做）

href="javascript: ;
href=" "
href="#"

只有1满足需求，2会使页面刷新，3如果页面长或标签多，会直接跳到顶部

⑦id 跳转到指定标签

点击查看xxx，地址就会变为/#xxx ，并会自动跳转到第二句

⑧mailto :邮箱 tel:手机号

<a href="mailto:xxxxxx@xx.com">发送邮件给xx</a>
<a href="tel:110">拨打电话</a>

3. a的target的取值

1.内置名字

_blank ：在新页面打开
_self ：默认值，在当前页面打开
_top ：顶级窗口，在所有页面最上面打开
_parent ：父级窗口，在当前链接所在上一层打开

2.程序员命名

window的name
iframe的name

1.例：两个标签都会在同一个页面打开窗口

<body>
    <a href="http:/google.com" target="xxx">google</a>
    <a href="http:/baidu.com" target="xxx">baidu</a>
  </body>

2.例：两个链接在一个页面打开

<body>
 <a href="https:/google.com" target="xxx">google</a>
 <a href="https:/baidu.com" target="yyy">baidu</a>

 <hr />
 <iframe src="" name="xxx"></iframe>
 <hr />
 <iframe src="" name="yyy"></iframe>
 </body>

4.a的download

作用：下载页面
问题：不是所有浏览器都支持，尤其是手机

二. iframe标签

内嵌窗口，已经很少使用

例：3个文件，1.target-top.html ,2.target-iframe.html ,3.target-parent.html

 1
<body>
    <a href="https://google.com" target="_top">google</a>
    <div>
      <iframe
        width="800"
        height="800"
        src="a-target-iframe.html"
        frameborder="0"
      ></iframe>
    </div>
  </body>

2
<body style="background:red;">
    我是iframe 里面有一个a 标签
    <iframe src="a-target-parent.html" frameborder="0"></iframe>
  </body>

3
<body style="background-color: green;">
    我是parent
    <hr />
    里面有一个a 标签
    <a href="//google.com" target="_parent">parent</a>
  </body>

1为top最顶层，白底，2为红底，3为绿底

若点击parent则在红底中显示页面，2为3的父级parent

三. table 表格标签

1.相关的标签

thead 表头
tbody 表身，（必须有，表头表尾可以没有）
tfoot 表尾
tr table row ：table里的一行
td table data：数据
th table head：表头

例1

<body>
    <table>
      <thead>
        <tr>
          <th>英语</th>
          <th>翻译</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>hyper</td>
          <td>超级</td>
        </tr>
        <tr>
          <td>hyper</td>
          <td>超级</td>
        </tr>
        <tr>
          <td>hyper</td>
          <td>超级</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>尾部</td>
          <td>尾部</td>
        </tr>
      </tfoot>
    </table>
  </body>

列2

<body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
          <th>小颖</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>79</td>
          <td>82</td>
          <td>92</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>100</td>
          <td>82</td>
          <td>83</td>

2.相关的样式

table-layout：css属性，用于布局表格单元格，行列的算法

（1）auto：根据内容测应该有多宽

（2）fixed：尽量平均

border-collapse：控制表格是否合并
border-spacing：控制border与border之间的距离

 <head>
    <style>
      table{
          width: 600px;
          table-layout: auto
          border-spacing: 20px;
          border-collapse:collapse;
      }
      td,
      th {
         border: 1px  solid:blue

      }
    </style>
  </head>

四.img标签

1.作用

发出get请求，展示一张图片（开发者模式，network，method）

2.属性

alt :可选的，替换的，图片加载失败显示文字提示用户

eg:
 <body>
    <img src="dog.npg" alt="一只狗" />
  </body>

height/width：高，宽，不用写像素px，因为只显示像素

（1）只写高度，宽度会自适应

（2）只写宽度，高度会自适应

（3）都写的话，图片会变形

src :source，图片地址，后面一般是图片地址（网络地址的，相对路径的，绝对路径的）

3.事件

JS中两个重要事件

onload/onerror：监听图片是否加载成功，加载失败可挽回替换成404.png（开发者模式console）

 <body>
    <img id="xxx" height="400" src="iframe.PNG" alt="一只狗" />
    <script>
      xxx.onload = function() {
        console.log("图片加载成功");
      };
      xxx.onerror = function() {
        console.log("图片加载失败");
        xxx.scr = "404.PNG";
      };
    </script>
  </body>

4.响应式

max-width:100% 无论在手机端看还是电脑端宽度永远满足100%

<style>
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
      }
 img {
 max-width: 100%;
      }
 </style>

五.form 标签

1.作用

发送get请求或post请求，然后刷新页面

2.属性

（1）action：action 属性表示请求页面的地址，相当于img的src

（2）autocomplete：表示是否自动填充，该属性值有 on/off 两个值，假如form 表单中有 <input name="username"type="text"> ，在给 form 表单设置 autocomplete 属性为 on 时，用户在输入时就会自动填充用户名，当然都是你个人用户名的记录。

（3）method form：表单的请求方法，如果不写该属性的话，默认是 GET 请求，如果是 POST 请求的话必须特别指定 method="POST"

（4）target：代表你想提交的页面，如果是_blank就会提交到一个新的页面，该属性和 a 标签的 target 类似

注意：一个表单必须要有一个类型为 submit 的按钮，可以是 type = "submit" 的 input 标签，也可以是 type = "submit" 的 button 标签（如果你写的是一个 button 没指定 type 的话，默认就是 submit 类型），但是如果没有一个为 submit 类型的按钮，则该表单就不能提交。

input 和 button 之间的区别是什么？，button 标签中间还可以加标签甚至是 img

例：

注意事项：一般不监听 input 的 click 事件，form 里面的 input 要有 name 属性，form 里要放一个 type=submit 按钮才能触发 submit 事件

五.input 标签

让用户输入内容。

1.属性

<input type = "text" required> 默认类型 + html5的验证器
<input type = "date"> 输入日期的控件
<input type = "button"> 按钮
<input type = "hidden"> 特殊使用的隐藏输入框
<input type = "submit"> 提交按钮
<input type = "color"> 用于指定颜色的控件
<input type = "radio"> 单选框，相同的name属性为一组
<input type = "checkbox"> 多选框，相同的name属性为一组

 <body> 
     <form>  
       <button>
          <hr />
          <input name="gender" type="radio"/>男                 //二选一
          <input name="gender" type="radio"/>女
          <hr />
          <input type="checkbox" name="hobby"/>唱               //多选
          <input type="checkbox" name="hobby"/>跳
          <input type="checkbox" name="hobby"/>rap
          <input type="checkbox" name="hobby"/>篮球
      </button>
    </form>
  </body>

<input type = "password"> 值被遮盖的单行文本字段，不展示具体内容
<input type = "e-mail"> 编辑 e-mail 的字段
<input type = "file"> 点击可上传文件，multiple多文件

  <input type="file"/> 
  <input type="file" multple />

<input type = "number"> 输入浮点数的控件
<input type = "img"> 图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。
<input name= "erha"> 表单内的input要有name属性
<input autofocus type = "text"> 自动聚焦
<input type="checkbox" checked> 表示已经选中状态
<input placeholder= "请输入"> 输入提示
<input value="123"> 输入框的值
<input type = "button" disabled> 禁用

给一个选项框，可选择星期一，星期二 
<select><option value="">-请选择-<option><option value="1">星期一</option><option value="2">星期二</option></select>
给用户一个输入框，可规定大小
<textarea style="resize:none;width:50%;height:300px"></textarea>

2.事件

onfocus() 当input 获取到焦点时触发
onblur() 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空
onchange() 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。
onclick() 主要是用于 input type=button，input 作为一个按钮使用时的鼠标点击事件
onselect() 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中
oninput() 当input的value值发生变化时就会触发，（与onchange的区别是不用等到失去焦点就可以触发了）
onkeydown() 按下按键时的事件触发
onkeyup() 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件--相当于一个按键，两个事件，没怎么用过

以上事件可以直接放到input的属性里，例如：<input type="text" οnfοcus="a();" οnblur="b()" οnchange="c();" οnkeydοwn="d();" />，

也可以通过js给input dom元素添加相应的事件，如：document.getElementByTagName('input').onfocus = function(){};

weixin_39528559

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
a标签跳到另一个页面指定选项卡_HTML常用标签

一. a标签的用法1. 属性href :hyper reference 超链接 ★ target :在哪个窗口打开超链接 ★download :下载网页，但很少用了，不用 ▲rel=noopener :防止...
复制链接

扫一扫