html常用标签

书推荐

《网道HTML教程》

看书技巧

三上：马上 枕上 厕上

工具

代码链接
jsbin
饥人谷jsbin

[代码沙盒](codesandbox.io)

http-serve
yarn global add http-server
使用 http-server -c-1

或者
yarn global add parcel
使用 parcel xxx.html

章节标签

• h1~h6
• section 章节
• article 文章
• p
• header 头部
• footer 脚部
• main 主要内容
• aside 旁支内容
• div 划分

全局属性

所有标签都有的属性

• class
• contenteditable (元素可以被编辑)
• hidden （让标签看不见） 顶部
• id 不到万不得已不要用id,id不能是windows里的全局属性
• style
• tabindex 响应tab键,-1代表tab不访问，0代表最后访问
• title 鼠标浮上这个元素，会显示title的内容

默认样式

reset.css

经常使用的内容标签

• ol 有序列表

  <ol>
    <li></li>
    <li></li>
  </ol>
  

• ul 无序列表

  <ul>
    <li></li>
    <li></li>
  </ul>
  

• dl+dt+dd 自定义列表

  <dl>
    <dt>11</dt>
    <dd>22</dd>
  </dl>
  

• pre 保留空格，tab，回车，这样连续空格就不会压缩成一个

<pre>
第一章：        工作内容
</pre>

• code (可以使用pre保留空格), 可以用来包裹代码片段
• em 语气上的强调
• strong 内容本身的重要性
• quote 行内
• blockquote 块级

a标签

• 属性

  • href 超链接

    超链接

    c.html

    JavaScript伪协议

    一般什么都不做的a标签

    xxx为id,跳转到指定id

    发邮件

    打电话手机上会自动呼起拨号键

  • target 指定在哪个窗口打开超链接 一般使用 _blank

    内置名字：

    _blank

    _top

    _parent

    _self

  • download 一般不使用

  • rel=noopener 暂时不用了解

• 作用

  • 跳转外部页面
  • 跳转内部锚点
  • 跳转到邮箱或电话等

table标签

table标签里有三个标签

行row 表头 行row 行row

空

相关样式

table-layout
border-collapse border和border之间是否合并
border-spacing  控制border之间的间距

img标签

<img src="">

• 作用

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

• 属性

  alt/height/width/src

• 事件

  onload/onerro 加载成功onload,加载失败noerrro

  html
  <img src="" id="xxx">
  
  js
  xxx.onload = function(){
      console.log("图片加载失败")
  }
  xxx.onerror = function(){
      console.log("图片加载失败")
  }
  

• 响应式

  max-width:100%

• 可替换元素

form标签

• 作用

发get或post请求，然后刷新页面

• 属性

action/autocomplete/method/target autocomplete 自动填充

• 事件

onsubmit

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

input标签

• 作用

让用户输入内容

• 属性

  • 类型type button/checkbox/email/file/hidden/number/password/radio/search/submit/tel/text
  • 其他 name/autofocus/checked/disabled/maxlength/pattern/value/placeholder

• 事件 onchange/onfocus/onblur

• 验证器 require HTML5新增功能

其他输入标签

• 标签
  • select+option
  • textarea
  • label
• 注意事项
  • 一般不监听input的click事件
  • form里面的input要有name
  • form里要放一个type=submit才能触发submit事件

其他标签

• 标签
  • video
  • audio
  • canvas
  • svg(矢量)
• 注意事项
  • 这些标签的兼容性一定要查看文档