HTML常用标签

晓梦迷蝴蝶_20
125 阅读4分钟

a标签

定义

a标签的文本定义是超链接，用于从一个页面连接到另一个页面,<a>中最重要的属性是 href 属性，这个属性用来指示连接的目标。

属性

几个重要的属性

属性值描述
hrefURL链接指向页面的URL
target_blank
_parent
_self
_top
framname		在新窗口打开
在父窗口打开
默认。在本窗口打开
在顶部窗口打开
在指定框架打开,（不想被白嫖，谷歌不支持框架打开）
downloadfilename下载链接的目标（只有Firefox 和 Chrome 支持）
reltext表示当前页面与链接目标的关系。rel=noopener阻止打开的页面获得对原始页面的任何访问

全部的属性可以查阅w3c a标签

href的取值

  • 网址的写法
    • https://gogole.com
    • http://gogole.com
    • //gogole.com 推荐使用第三种写法，让浏览器自动适配协议
  • 路径的写法
    • 绝对路径 /a/b/c和a/b/c
    • 相对路径 index.html以及./index.html 在测试网页的时候，要注意 /a/b/c 绝对路径的用法，从本地打开网页，是从硬盘的根目录开始，从服务器打开网页，是从服务器所在的位置开始。
  • 添加一个id，跳转到同名id标签的位置。
  • 伪协议

    • javascript:代码;

      • 执行一段js代码，基本不用；
      • 只留冒号和分号，创造一个点击没有反应的a标签

    • Mailto：邮箱

    • tel：手机号，在手机上可以直接进入拨号界面

img标签

定义

img 标签是向网页中嵌入一个图像，从技术上来说，img 标签并不会在网页中插入图像，而是从网页上了连接图像。img 标签创建的是图像的占位空间。

属性


img 有2个必选的属性：

  • src ：图像的URL
  • alt ：图像的替代文本


img有2个可选属性， width 和 height ，要注意的是，一个好的前端永远都不能让图片变形，因此在设置 width 和 height 的时候，只设置一个就行，另外一个会自动缩放。

事件

onload和onerror，用来监听图片是否加载成功。

响应式

使用max-width=100%，可以让图片适应在手机上浏览

table标签

定义

table 标签表示 HTML 表格。

相关标签


table 标签会配合 thead，tbody，tfoot，tr，td，th 来使用。

  • tr:table row 表示表格行
  • th:table head 表示表格头
  • td:table date 表示表格数据

实例

<table border="1">
 <thead>
   <tr>
     <th></th>
     <th>星期一</th>
     <th>星期三</th>
     <th>星期五</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th>上午</td>
     <td>力量训练</td>
     <td>力量训练</td>
     <td>力量训练</td>
   </tr>
   <tr>
     <th>下午</td>
     <td>有氧训练</td>
     <td>有氧训练</td>
     <td>有氧训练</td>
   </tr>
 </tbody>
 <tfoot>
   <tr>
     <th>完成请打勾</td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
 </tfoot>
</table>

运行效果

相关的样式设置

  • table-layout:表格样式，默认auto
  • boder-collapse：表格边线合并
  • boder-spacing：表格边线间隙

实例

table{
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

image.png

form标签

定义

form标签用于为用户于创建HTML表单，表单里面包含 input 等元素，用户在表单中输入信息，表单发送get或者post请求，向服务器传输这些信息数据，然后刷新页面。

属性

属性值描述
actionURL向何处发送表单数据
autocompleteon
off		是否启用表单的自动完成功能
methodget
post		传输表单数据的 HTTP 方法
target_blank
_self
_parent
_top
_framename		在何处打开 action URL

全部的属性可以查阅w3c form标签

input和button的区别

input只能支持纯文本，而button可以添加任何标签

get和post的区别

  • get方法适合发送数据大小不超过1kb的小表单，而且传输性能更好，而对于有很多字段或者很长文本域的表单来说，就应该采用post方法。
  • 如果考虑安全性，建议使用post方法。get方法会将表单数据直接放在URL上，还可以从浏览器的日志文件中进行摘录。而post方法没有安全方面的漏洞。
  • 如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面，使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容.

参考w3c上面的解释method 属性

avatar
文章
阅读
粉丝