HTML常用标签简明教程

HTML常用标签

本文主要讲三个重点标签：

• a标签
• img标签
• form标签
  看之前一定要看！！一定要看！！一定要看！！
  怎么专业的预览HTML页面？

a标签

作用

• 跳转到外部页面
• 跳转到内部锚点
• 发邮箱，打电话

属性

• href
• target
• download
• rel=noopener

href

网址

<a href="https://google.com">google</a>
 <a href="//google.com">google</a>

首先问，那一种写法是规范的？第二种能不能跳转到google呢，如果跳转到了，那么它的原理是什么？
其实在实际开发中，跳转外部页面，规范写法是第二种,因为不确定这个外部链接是http和https的，如果写错,可能会导致无法跳转，所以优先选择第二种
第二种写法是可以跳转到google的，我们打开浏览器调试工具，点击Net。勾选
preserve log 可以看到内部做了多次重定向，一直到目标的网页中
//google.com-----www.google.com----http://google.com—https://google.com

路径

<a href="/a/b/c/c.html">c.html</a>
<a href="./target.html">target.html</a>

点击跳转到c.html页面,target.html页面

伪协议

<a href="javascript:alert('1');">点击</a>

点击链接，就会弹出一个输入框
实际开发中
如果href中留空，当你点击的时候，页面就会刷新，这样会造成不好的用户体验，
如果href="#"的确解决了刷新的问题，但是新的问题是，点击之后，它会回到顶部，这样的用户体验也非常不好。
最完美的解决办法是 href="javascript:;"

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

既不会刷新也不会跳到首页

ID

<a href="#xxx">点击</a>

点击就会跳转有id为xxx的可视区

发邮箱，打电话

<a href="mailto:邮箱地址">点击</a>
<a href="tel:电话号码">点击</a>

target

• _blank 在新的页面打开
• _self 在当前页面打开
• _parent在父级页面打开
• _top 在最顶层页面打开

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

一般国外的网页，用的是_self,国内的网页用的是_blank
要了解_parent _top
首先要介绍一个陈旧的技术
iframe内联框架，它可以在一个网页中展示另一个页面,如果在iframe的页面中
有一个链接，它的target设置为了_parent，跳转的页面就会在它的父框架页面中打开，如何设置为了_top就在顶级的页面打开，关于iframe技术大家了解即可，它在开发中很少用到，已经淘汰了

介绍一种极端的情况，target=“xxx”,页面会正常跳转，打开新的页面，但这个页面就会被认为是xxx,如何还有其他的链接target=“xxx”,点击就会忽略href内容，直接跳转到name为xxx的页面
原理是
window.name="xxx"

Table标签

介绍几个标签
tr = table row 表格行
th =table head 表格头
td =table data 表数据
table标签中只能有三个标签
thead tbody tfoot
表格规范的写法

 <table>
        <thead>
            <tr>
                <th>英文</th>
                <th>意思</th>
                <th>英文</th>
                <th>意思</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>file</td>
                <td>文件</td>
                <td>document</td>
                <td>文档</td>
            </tr>
            <tr>
                <td>change</td>
                <td>改变</td>
                <td>inner</td>
                <td>内部的</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>

相关的样式：

• table-layout auto | fixed auto会根据内容大小调整 ，fixed根据表格大小调整
• border-spacing
• border-collapse
  表格的默认样式比较丑陋，一般初始化样式为

 table{
             border-collapse: collapse;
            border-spacing: 0;
 }
 th,
 td {
            width: 50px;
            height: 25px;
            border: 1px solid #ccc;
     }

img标签

作用：

发出一个get请求，展示一张图片

属性：

alt/height/width/scr
只写宽度，高度会自适应
只写高度,宽度会自适应

永远不要使图片变形

事件：

• onload
• onerror

响应式：

max-wid:100%

可替换元素

资料参考 饥人谷