《HTML常用标签》

知有
214 阅读4分钟

a标签

属性作用
href即hyper reference，使用该属性可以实现超链接
target指定在哪个窗口打开超链接。
rel=noopener为了防止bug
download下载超链接网页 (已不支持，不建议用)
  • a标签的作用 跳转外部页面
    跳转内部锚点
    跳转到邮箱或者电话等等
  • a 的href的取值
  1. 网址
    https://google.com
    http://google.com
    //google.com
    “//”最高级，自动选择适用http/https
  2. 路径
    /a/b/c 以及a/b/c
    Index.html以及./index.html
  3. 伪协议

    4. javascript:代码;
    eg： <a href=“javascript:;”>查看</a>

    mailto:邮箱

    eg: <a href=“mailto:easar.liu@outlook.com”>发邮件给Easar</a>

    tel:手机号码

    eg: <a href=“tel：132xxxxxxxx”>打电话给xx</a>

    id

    href=#xxx

    • a 的target的取值
    1. 内置名字 _blank在空白页面打开
      _self 默认值，在当前页面打开
      _top在(多内嵌页面)最顶层页面打开
      _parent 在当前链接所在的iframe的上一层打开

    2.程序员的命名

    Windows的name
    若已有命名windows.name>xxx，则在xxx窗口打开页面。若没有命名为xxx页面，则windows.name新建xxx页面后，再在此页面打开。 （可以重复的利用同一个窗口打开不同的页面）在页面的控制台 输入window.name可以查看窗口的名字

    iframe 的name

    iframe标签

    在网页里内嵌网页，只有很少的老系统在使用

    table标签

    • table标签里只能有三种标签：
      <thead>表头区域； <tbody>表的主体区域； <tfoot>表的尾部区域（可以不需要按顺序写，浏览器会自动排序）
      <th>table head 一列的表头 字体加粗 <tr>table row 表里的一行 <td>table data 表里的数据

    eg：

    用jsbin写的表单演示

    • 相关的样式 table-layout 用于布局表格单元格，行和列的算法

    (table-layout：auto大多数浏览器采用自动表格布局算法对表格布局，表格及单元格的宽度取决于其包含的内容)
    (table-layout：fixed 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格绝定，在当前列中，该单元格所在行之后的行并不会影响列宽）

    border-collapse 表格边距合并，控制单元格与边框的距离

    border-spacing 表格边距,控制单元格与单元格之间的距离，通常值是0

    img标签

    • 作用 发出get请求，展示一张图片（开发者工具network中查看）
    • 属性 alt（在图片加载失败时显示替代文本信息）
      height/width 设置图片的大小比例，只写高度或者宽度，另外一个会自适应（前端的底线：不能让图片变形）
      src source的简写，后接图片源地址，可以是网络地址，相对路径和绝对路径。
    • 事件 (用来监听图片是否加载成功) onload（加载成功）

    onerror（加载失败）

    图片.png

    • 响应式 max-width:100%

    图片.png

    form标签

    • 作用 发get或者post请求，然后刷新页面
    • 属性 action 控制请求哪个页面

    method 控制用get/post来请求

    form标签后面默认会加action，相当于img后面的scr，作用是问“请求往哪里发送”
    form标签里一般会有输入框input和提交按钮submit

    <form action="/xxx" method="POST"> action 里面写什么，点击之后就会请求到哪个页面
<input type="text"/>
<input type="submit"/>

    图片.png autocomplete 是否自动填充 on/off
    (在form中加入 autocomplete="on" ，input中加name=username 那么在页面输入框中会自动给出建议)

    <form action="/xxx" method="POST" autocomplete="on">
<input name=username type="text"/>
<input type="submit"/>

    target （和在a标签中的用法相同）告诉浏览器，把结果提交到哪个页面，哪个页面应该刷新

    • 事件 onsubmit 当用户点击提交就会触发

    如果写了input=submit，浏览器会根据当前使用的语言自动变成对应的文字

    方法一：可以使用 value 来更改。

    <input type="submit" value="搞起"/>

    效果：

    图片.png

    图片.png

    方法二：可以使用 button 来更改

    <input type="submit" value="搞起"/>
<button type="submit">搞起</button>

    ⚠️使用input type="submit"和button type="submit"的区别：
    input里面不能再有其他标签，只能纯文本, button里面可以含有其他任何标签
    （form里面必须含有一个type=submit才能触发submit事件，不写type的情况下，也会默认submit，如果写的是type=其他内容，则不能实现提交效果。）

    <button type="submit"><strong>搞起</strong></button>

    图片.png

    <button type="submit"><strong>搞起</strong><img width="50" src=/1.png></button>

    图片.png

    input标签

    • 作用：让用户输入内容

    • 属性 类型type：button/checkbox/file/hidden/password/radio/submit/text/search/number/email

    其他 name/autofocus/checked/disabled/maxlength/pattern/value/placeholder

    图片.png

    图片.png

    • 事件： onchange (当用户输入改变的时候触发);

    onfocus(当用户把鼠标集中时触发);

    onblur (当鼠标移出，失焦时触发)

    • 验证器 HTML5自带验证器

    eg:

    <input type="text" required />

    required 为必填，如果用户没有填写此项，则不能提交。

    • 其他输入标签 select+option可选项
      textarea文本区域
      label

    其他知识

    不要双击打开html，使用http server（可缩写hs）或者parcel预览，避免bug。

    Yarn global add http-server

    http-sverver . -c-1(不要缓存)

    Yarn global add parcel

    Parcel+地址 （eg：a-href.html）

    其他感想

    html要记忆的标签太多，练习加理解才能深刻印象。

    ©转载声明

    MDN参考资料：HTML5标签列表

avatar
文章
阅读
粉丝