HTML常用标签(a,img,table,form,lable和一些之前没注意到的点)

jerry在掘金106276
552 阅读7分钟

a 标签的用法

初始语法：

<a href="https://example.com">Website</a>

href 属性可以代表要跳转到的网站地址， 这个地址不是必须写非常全， 也可以省略着写；比如：

<a href="//google.com"></a> # 会自动在最前面添加www，并且会自动匹配是http协议还是https协议
<a href="http：//google.com"></a>  # 这种情况就是指定了在http协议下进行网站的跳转
<a href="https://google.com"></a>  # 同上，指定了在https协议下进行网站的跳转

href 属性也可以代表要跳转的文件路径

<a href="a.html"></a> # 会跳转到服务器当前访问页面文件路径下的 a.html 文件， 此处是相对路径

<a href="/a.html"></a>
<a href="./a.html"></a>  # 这回就是绝对路径了，在服务器根目录下的 a.html 文件， 因为路径最
                         # 开始有个 / 符号， 第二个 ./ 符号也是代表 当前目录下的意思
    
<a href="../a.html"></a> # 这次代表的是跳到位于当前文件目录上一级别的 a.html 文件
                         
<a href="https://google.com"></a>  # 同上，指定了在https协议下进行网站的跳转

href 属性也可以执行伪协议、javascript代码

<a href="#"></a> # “ # ” 一看像是 id 的意思，但是这个只有一个#没有跟id，所以是回到页面最上
                   面的意思，类似于一个小箭头能回到页面最上面

<a href="#username_part"></a>  # #后面跟id了，这回就会页面跳转到定义了这个id的相应的地
                                 方，可以想像一个一个报错信息，你点那里就会自动跳转到相对应的代码块那里
      
<a href="mailto：abcd@hotmail.com">abcd@hotmail.com</a>  # 这里可以通过点击后启动本机默认邮箱软件然后
                                           自动填好收件人邮箱地址，就是我们定义好的这里这个


<a href="tel：110">110</a> #这次换成了电话号码，点击后自动手机端会进入到拨号页面，

<a href="javascript:void(0)"></a>
<a href="javascript:；"></a> 以上两个就是执行的javascript空代码，防止页面进行刷新，进而监听click事件

target 属性规定在何处打开链接文档(页面从哪里打开)，它的值可以为：

  • _self # 在当前浏览的窗口打开
  • _blank # 浏览器总在一个新打开、未命名的窗口中载入目标文档
  • _parent # 在父层级页面打开
  • _top # 在最顶层级页面打开

语法

<a target="_blank|_self|_parent|_top|framename">

自己之前没留意过的

download 属性

<a href="/images/myw3schoolimage.jpg" download="w3logo">

其中 download 属性后面接的名字就是下载后默认设置好的文件下载名称，对于这个值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

rel 属性

<a rel="nofollow" href="http://www.functravel.com/">Cheap Flights</a>

标签的 rel 属性用于指定当前文档与被链接文档的关系。 只有在使用了 href 属性才能使用 rel属性。

注意：尽管浏览器不会以任何方式使用该属性，不过搜索引擎可以利用该属性获得更多有关链接的信息。

值描述
alternate文档的可选版本（例如打印页、翻译页或镜像）。
stylesheet文档的外部样式表。
start集合中的第一个文档。
next集合中的下一个文档。
prev集合中的前一个文档。
contents文档目录。
index文档索引。
glossary文档中所用字词的术语表或解释。
copyright包含版权信息的文档。
chapter文档的章。
section文档的节。
subsection文档的子段。
appendix文档附录。
help帮助文档。
bookmark相关文档。
nofollowGoogle 使用 "nofollow"，用于指定 Google 搜索引擎不要跟踪链接。

img 标签的用法

语法：

<img src="https://developer.mozilla.org/static/img/favicon144.png"
     alt="MDN logo">

src： 表示图片地址或者链接 alt： 用于screen reader朗读给阅读障碍人士，同时若图片加载错误，可以显示这行字，告诉用户这图片原本应该是什么 tr

之前未留意的点：

<body>
    <img id="a_photo" src="a.jpg" alt="">
    <script>
        a_photo.onload = function() {
            console.log('图片加载成功！');
        };
        a_photo.onerror = function() {
            console.log('图片加载成功！');
            a_photo.src = "/404.jpg";
        };
    </script>
</body>

对应 img 标签有这两个加载的方法，如果加载不成功可以将未加载成功的图片进行替换，显示404图片，提高产品易用性

<style lang="css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        img {
            max-width: 100%;
        }
    </style>

对于移动端的适配，可以在 css 文件中， 为img 标签设置一个最大宽度为100%的设置，这样左右就不会超屏，也不会影响正常的显示，更加的用户友好化

table 标签的用法

语法：

<table border="1" summary="Monthly savings for the Flintstones family">
       
       <thead>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
        </thead>
        
        <tbody>

            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
        </tfoot>
    </table>

css属性：

table-layout属性

table { 
	table-layout: fixed / auto / inherit
}

auto表示单元格的大小由内容决定。 fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。

为了加快表格显示，最好事先就在CSS（或者table标签的width和height属性）中指定表格的宽度和高度。

table表格中的内容如果是中文，一般情况下都会自动换行。但如果内容是英文或数字，内容过长时文字会飘到单元格之外，也就是内容不会自动换行，这时候需要配合属性word-wrap:break-word;和word-break:break-all;一起使用。

如果文字过多在一行，想让其显示省略号那种可以追加：

td {
 border: 1px solid blue;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

overflow 和 text-overflow 这两个属性来调节

之前未留意的点：

  1. thead和tfoot在一张表中都只能有一个，而tbody可以有多个。
  2. tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要。
  3. border-spacing 代表边框的间距
  4. border-collapse: collapse 代表边框合并

form 标签的用法

语法：

<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>
属性值描述
actionURL规定当提交表单时向何处发送表单数据。
autocompleteon / off规定是否启用表单的自动完成功能。。
enctypeapplication/x-www-form-urlencoded multipart/form-data text/plain规定当提交表单时向何处发送表单数据。
methodget / post规定用于发送表单数据的 HTTP 方法。
nametext规定表单的名称。
novalidatenovalidate如果使用该属性，则提交表单时不进行验证。。
actionURL规定当提交表单时向何处发送表单数据。

event 有 onsubmit 事件

action： autocomplete:

input 标签的用法

语法：

<form action="demo_form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

属性： 用法非常多，重点提几个： type="checkbox" 或者 radio 时， 一组几个 input 的 name 要统一， 这样才能起到单选或者多选的效果，并且在form表格提交的时候能连同名字键值对形式一起提交上去，否则只有单独的value，

当 type="file" 的时候，有一个multiple属性，添加上之后就可以同时选多个文件上传了

当 type="color" 会有一个选色板出现，

具体全部属性请参照此链接：HTML <input> 标签

扩展：

button 标签同样能实现 input作为 type="submit" 时的功能，那么两者的具体区别呢， button标签内可以添加span标签，img标签等多种方式，更加灵活，而input标签很受限， button可以有更多种方式的按钮形式，

另外如果在 HTML 表单中使用 button 元素，不设置type的情况下，不同的浏览器会提交不同的值。 IE将提交 与 之间的文本； 其他浏览器将提交 value 属性的内容。

此外要记得时刻为type设置好合适的值，因为不同的浏览器对 <button> 元素的 type 属性使用不同的默认值；因此请尽可能使用 在 HTML 表单中创建按钮

具体更详细解答请参考链接： HTML-button和input的区别

lable 标签的用法

语法：

  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">

label标签 for 属性对应 input 标签里面的 id 值 点这个标签就会自动把input对应的项选上 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。 <form>标签内使用一般

avatar
文章
阅读
粉丝