HTML重点标签

wujilin
318 阅读5分钟

像用户一样打开自己的 html 页面

  1. 打开终端
  2. 输入 'hs -c-1'，或者输入'parcel 文件名'。

a 标签

a 标签的属性：

  • href，写网址。取值如下：
  1. 网址：//google.com（会自动适应 https 或 http）
  2. 路径
  • /a/b/c 以及 a/b/c。如果我们开启 http 服务，那么/a/b/c 的根目录就不是硬盘的根目录，你在哪里开的 http 服务哪里就是根目录。
  • index.html 以及./index.html。
  1. 伪协议
  • javascript:代码;（写一个点击后不刷新页面不跳转的 a 标签，就可以加 javascript:;）
  • mailto:邮箱（点击 a 标签后，直接跳转到发邮件的页面，并且自动补全此邮箱地址）
  • tel:手机号（点击此 a 标签，会弹出一个界面，可直接拨打此手机号。这个技巧可以用在简历上）
  1. id，href=#xxx。

a 标签的作用：跳转外部页面，跳转内部锚点，跳转到邮箱或电话等

table 标签，

相关的标签：

<table>
  <thead>
    <tr>
      <th></th>
      //table head
    </tr>
    //table row
  </thead>
  <tbody>
    <tr>
      <td></td>
      //table data
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>

table 里只能有这三个标签，可以只有 thead 和 tbody，或者只有 tbody。

table 相关的样式：

  • table-layout，取值有 auto、fixed，auto 是根据内容确定每一份所占宽度，fixed 是每一份等宽。
  • border-collapse，取值是 collapse，控制表格的 border 是否合并，默认不合并。
  • border-spacing，控制 border 和 border 之间的距离，取值是数值，一般写 0，因为我们一般不希望表格之间有空隙。
  • border-collapse 和 border-spacing 一般都在 reset.css 里写好。

img 标签

  • 作用：发出 get 请求，展示一张图片。

  • 属性：alt/height/width/src。图片加载失败，就会显示 alt 的文字内容，一般用来提示用户。height、width 的单位不用写，默认是 px，因为只支持 px，只写 height，width 会自适应，只写 width，height 会自适应，都写，图片会变形。

  • 事件：onload/onerror，监听图片是否加载成功。

xxx.onload = function() {
  console.log("图片加载成功");
};
xxx.onerror = function() {
  console.log("图片加载失败");
  xxx.src = "/404.png";
};
  • 响应式：max-width:100%

form 标签

  • 作用：发 get 或 post 请求，然后刷新页面
  • 属性：action/method/autocomplete/target
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
  <input name="username" type="text" />
  <input type="submit" />
</form>

action 里写什么，我们点击之后就会请求到那个页面。 method 是用来控制发送 get 请求还是 post 请求，默认是 get。 autocomplete 默认值是 off，写的话一般写 on，配合<input name="username"/>，可以达成下拉建议用户名的效果。 target,和 a 标签里的 target 用法一样，告诉浏览器我要提交到哪个页面，哪个页面应该刷新，取值有_blank、页面名字 xxx。

  • 事件：onsubmit <input type="submit" value="搞起"/>和<button type="submit">搞起<button/>的区别是，input 只支持纯文本，button 标签里还可以套标签，比如 strong、img。 form 表单里必须要有一个 type=submit 的按钮，才可以触发 submit。

input 标签

  • 作用：让用户输入内容
  • 属性： 类型 type；text/button/password/number/radio/checkbox/color/hidden/file/submit/email/search/tel type="hidden"是看不见的 input，是用来给 js 自动填 id 或字符串的。file 是点击后可上传文件，但只能上传一个文件，后面加 multiple 可同时上传多个。
  • 事件：onchange/onfocus/onblur
  • 验证器：在 input 后面加个 required，当你输入空白时就不能提交并会提示你。

textarea 标签

输入文本框，style="resize:none;width:50%;height:300px"，表示文本框不可拖动，宽度为窗口一半高度 300px。

select 标签

配合 option 使用。是一个可选择下拉列表。

<select>
  <option value="">-请选择-</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
</select>

注意事项

  • 一般不监听 input 的 click 事件
  • form 里面的 input 要有 name
  • form 里要放一个 type=submit 才能触发 submit 事件。
avatar
文章
阅读
粉丝