HTML重点标签

coolke
163 阅读6分钟

HTML重点标签

[概览]

  • a 标签
  • table 标签
  • img 标签
  • form 标签
  • input 标签

[ a标签 ]

1. 作用

  1. 跳转到外部页面
  2. 跳转到内部锚点
  3. 跳转到邮箱或者电话

2. 属性

2.1. href

  • ( hyper reference : 超级引用/超级链接 ) , 表示链接地址

  • a 的 herf 的取值

    推荐第三种无协议网址,浏览器会自动寻找对应网址 .
    eg: <a href="//baidu.com">baidu</a>

    • 路径
      • 绝对路径 : <a href="/a/b/c.html">c.html</a> ( 绝对路径所指向的不是文件根目录 , 而是http服务的根目录 . 因此在打开方式上要注意 , 一般不使用双击打开文件的方式预览网页,而在终端用"http-server -c-1"的方式(要在终端安装http-server)通过输入网址的方式打开 )
      • 相对路径 : <a href="a/b/c.html">c.html</a> , <a href="./index.html">index.html</a> , <a href="index.html">index.html</a>
    • 伪协议
      • <a href="javascript:alert(1);">查看</a> 这种写法被称为javascript伪协议写法 , 其中":"和";"不能少 . ( "alert(1)"是javascript代码 , 举例使用 ) , 这样可以直接执行javascript的代码 .
      • <a href="javascript:;">查看</a> ":"和";"中间什么都不写 , 表示 : 写一个a标签 , 但是这个a标签什么也不做 . 即点击页面"查看"是没有反应的
      • <a href=" ">查看</a> href=" " 中间留空格的话,点击"查看"后页面会刷新
      • <a href="#@%$*&">查看</a> href=" " 中间写除了"javascript"以外的所有字符/字母 , 点击后都会回到页面顶部
      • <a href="#xxx">查看</a> href=" "中间写 "#+id" 会跳转到指定的标签
      • <a href="mailto:666@qq.com">查看</a> 点击后会跳转到发邮件的界面
      • <a href="tel:12345678">查看</a> 点击后会跳转到拨打电话的界面(针对于手机)

2.2. target

  • 指定在哪个窗口打开
  • 内置名字

    • _blank : <a href="//baidu.com" target="_biank">baidu</a>(在空白页面打开)

    • _top : <a href="//baidu.com" target="_top">baidu</a> (在顶层/最上层页面打开)

    • _parent : <a href="//baidu.com" target="_parent">baidu</a> (在当前页面的上一层页面打开)

    • _self : <a href="//baidu.com" target="_self">baidu</a> (在当前页面打开)

  • 程序员命名

    • windows的name

      • 当target="xxx"也会正常打开baidu

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

      • 写一个baidu , 一个google , 同时两者target="xxx". 会发现点击页面链接"baidu", 回来再点击"google"则刚刚打开的页面从"baidu"跳转成了"google"页面 . 此时打开控制台Console , 输入"window.name" , 会显示"xxx" . 即"xxx"就是新窗口的名字 <a href="//baidu.com" target="xxx">baidu</a>

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

    • iframe的name

      • 如果引入一个iframe , 调整其大小为整个页面,这样就可以实现一个页面使用两种浏览器
<body>
    <a href="//baidu.com" target="xxx">baidu</a>
    <a href="//google.com" target="xxx">google</a>

    <hr>
    <iframe style="border: none; width: 100%; height: 800px;" src="" name="xxx"></iframe>
</body>

如图所示: 1657117433251.png (哎 , 现在baidu和google都不支持这样操作了)

2.3 download

  • 理论上是下载 , 实际没什么用

2.4 rel-noopener

  • 当使用target="_blank"打开一个新的标签页时 , 新页面的window对象上有一个属性"opener" , 它指向的是前一个页面的window对象 , 在新打开的页面中 , 通过"window.opener"可以获取到源页面的部分控制权 , 即使新打开的页面是跨域也可获取部分控制权 . 当a标签中加入了rel="noopener"属性 , 就使window.opener变为null . 用于解决可被恶意网站利用的安全漏洞 .
  • 针对的是JavaScript的一个BUG

[ table标签 ]

1.结构

  • table (表格标签)
    • thead (表示"头部")
      • tr (table row : 表示"一行")
        • th (table head : 表示"表头")
    • tbody (表示"身体")
      • tr
        • td (table data : 表示"数据")
    • tfoot (表示"尾部")
      • tr
        • td
  • "单表头表格"示例:
<body>
    <table>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>
                <td>超级</td>
            </tr>
            <tr>
                <td>target</td>
                <td>目标</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>无</td>
                <td>无</td>
            </tr>
        </tfoot>
    </table>
</body>

页面显示效果: 1657120002675.png

  • "双表头表格"示例:
<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>小红</th>
                <th>小明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>语文</th>
                <td>98</td>
                <td>96</td>
            </tr>
            <tr>
                <th>数学</th>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总和</th>
                <td>198</td>
                <td>196</td>
            </tr>
        </tfoot>
    </table>
</body>

页面显示效果: 1657120297522.png

  • thead , tbody , tfoot 在写代码时顺序无所谓
  • thead , tbody , tfoot 如果不写. 直接写 tr , 那默认所写的内容都在 tbody 里面 . 如果直接写 td , 浏览器默认会加上 tbody 和 tr

2.相关样式

  • table-layout: (调整列宽)
    • table-layout: auto (auto表示列的宽度根据该列内容长短来计算)
    • table-layout: fixed (fixed表示等宽，尽可能地让宽度平均)
  • border-collapse: (调整单元格间距)
    • 间距一般最好是0
  • border-spacing: (将分裂的单元格合并)
  • 代码样式 : (这里加上了width 和 td,th是为了使效果更明显)
<style>
        table{
            width: 600px;
            table-layout: auto;
            border-spacing: 0;
            border-collapse: collapse;
        }
        td,th{
            border: 1px  solid red;
        }
    </style>

显示效果:

1657163254191.png

[ img 标签 ]

1.作用:

发出get请求 , 展示一张图片

2.属性

  • alt : 可替换的(当图片加载失败时 , 用来提示的)
  • height : 高度
  • width : 宽度
    • 只写高度或者宽度 , 那么宽度和高度会自适应
    • 注意 : 调整图片不能使图片变形,不确定可以只写高度或者宽度
  • src : 图片地址(可以使网络地址/相对路径/绝对路径)

3.事件

  • onload : 显示图片加载成功
  • onerror : 显示图片加载失败

代码示例:

(在目录里添加两张图片, 命名为"dog2.jpg" ,"/404dog.jpg" . 当"dog2.jpg"加载失败使自动加载"/404dog.jpg")

<body>
    <img  id="xxx" src="dog2.jpg" width="400" alt="狗狗图片">
    <script>
        xxx.onload = function() {
            console.log("图片加载成功");
        };
        xxx.onerror = function() {
            console.log("图片加载失败");
            xxx.src = "/404dog.jpg";
        };
    </script>
</body>

(如果去除xxx.src = "/404dog.jpg"; , 没有可替换图片,那么当图片加载失败时显示如下)

1657165582267.png

4.响应式

  • 非固定,根据不同的端口 ( 例如:手机,电脑,iPad等 ) 自适应响应
  • max-width: 100%
  • 在<head></head>里添加如下代码即可
<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        img{
            max-width: 100%;
        }
    </style>

[ form标签 ]

1.作用

  • 发送get请求或者post请求,然后刷新页面

2.属性

  • action : 控制请求哪个页面
  • autocomplete : 自动提供建议
  • method : 控制用get请求或者post请求
  • target : 控制提交到哪个页面,是哪个页面刷新

3.事件

  • onsubmit
  • 代码示例:
<body>
    <form action="/xxx" method="post" autocomplete="on" target="_blank">
        <input name="username" type="text">
        <input type="submit">
    </form>
</body>

页面显示:

1657198815486.png

  • form标签里的input type="submit"使得页面出现"提交"字样,即写了这句话后浏览器可根据使用的语言使之变成变成操作者可识别的字.
  • "提交"二字可被更改,方法有二:
    • 1 . <input type="submit" value="搞起">
    • 2 . <button type="submit">搞起</button>
    • 二者区别 : input里面不能有其他标签 ; button里面可以加任何内容
    • 代码示例:
<body>
    <form action="/xxx" method="post" autocomplete="on" target="_blank">
        <input name="username" type="text">
        <input type="submit" value="搞起">
        <button type="submit">
            <strong>搞起</strong>
            <img width="100" src="dog.jpg" alt="">
        </button>
    </form>
</body>

页面效果:

1657199279758.png

[ input标签 ]

1.作用

  • 让用户输入内容

2.属性

(记录部分常用属性,其他属性看笔记本相关部分或文档查找)

  • 输入文本 :
<input type="text">
<input type="submit">
  • 输入文本(必填) :
<input type="text" required>
<input type="submit">
  • 选择颜色 :
<input type="color">
  • 输入时不显示内容 :
<input type="password">
  • 二选一 :
<input type="radio" name="gender">man
<input type="radio" name="gender">woman
  • 多选 :
<input type="checkbox" name="nobby">唱
<input type="checkbox" name="nobby">跳
<input type="checkbox" name="nobby">篮球
  • 选择单个文件上传 :
<input type="file">
  • 选择多个文件上传 :
<input type="file" multiple>
  • 操作者看不见,给浏览器看,JS自动提交用的 :
<input type="hidden">
  • 多行内容输入(可自行调节大小) :
<textarea name="" id="" cols="30" rows="10"></textarea>
  • 多行内容输入(固定大小) :
<textarea style="resize: none; width: 100px; height: 100px;"></textarea>
  • 选择输入 :
<select>
            <option value="">-请选择-</option>
            <option value="1">星期一</option>
            <option value="2">星期二</option>
</select>

2.1 代码示例:

<body>
    <form action="/xxx" method="post" autocomplete="on" target="_blank">
        <input type="text">
        <input type="submit">
        <hr>
        <input type="color">
        <hr>
        <input type="password">
        <hr>
        <input type="radio" name="gender">man
        <input type="radio" name="gender">woman
        <hr>
        <input type="checkbox" name="nobby">唱
        <input type="checkbox" name="nobby">跳
        <input type="checkbox" name="nobby">篮球
        <hr>
        <input type="file">
        <hr>
        <input type="file" multiple>
        <hr>
        <input type="hidden">看不见的input标签
        <hr>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <hr>
        <textarea style="resize: none; width: 100px; height: 100px;"></textarea>
        <hr>
        <select>
            <option value="">-请选择-</option>
            <option value="1">星期一</option>
            <option value="2">星期二</option>
        </select>
        <hr>
        <input type="text" required>
        <input type="submit">
        (必填,不信点击提交试试)
    </form>
</body>

页面效果: 1657200601635.png

3.事件

  • onchange : 当用户触发时会触发此事件
  • onfocus : 当用户将鼠标集中在它身上时触发的事件
  • onblur : 当用户将鼠标离开时触发的事件

4.验证器

  • required
    • 此栏必填,不填写会有提示且无法提交
    • eg : <input type="text" required>

5.注意事项

  1. 一般不监听 input 的 click 事件
  2. form 里的 input 要有 name
  3. form 里必须有一个 "type=submit" 才能触发 submit 事件
「资料来源：饥人谷」
avatar
文章
阅读
粉丝