HTML标签

章节标签

• 作用：用来表示文章，书籍的层级，使得结构清晰

常见的章节标签

• h1-h6 （标题标签
• p（段落
• div （划分块
• header （用来表示网站的头部
• main （表示主要内容
• section （表示章节
• aside （旁支内容
• article （文章
• footer （脚部

全局属性

• class id +contenteditable （内容可以编辑
• hidden （表示是否可以隐藏
• style
• tabindex （注意：0是表示最后访问，-1是表示永远不访问，设置数字的时候可以不连起来
• title （鼠标放在上面，显示的内容

内容属性

• ol + li
• ul + li
• dl + dt + dd
• pre
• code （可以写代码

你还在双击打开页面吗？

• 我们应该通过http打开页面，这样才知道用户的真实体验
• 打开方式：

1. 用yarn 安装http-server yarn global add http-server http-server . -c-1 （运行服务，可以简写为hs，-c-1代表不要缓存

2. 用yarn安装parcel yarn global add parcel

a标签

1. herf属性
   • 网址： https://baidu.com | http://baidu.com |//baidu.com
   • 路径：/a/b/c | index.html| ./index.html (这个路径是相对于https协议打开的地址
   • 伪协议：Javascript:; | mailto:邮箱 | tel:手机号码
   • 锚点链接：首先id = xxx ，然后 href = #xxx
2. target属性
   • _blank （新页面打开
   • _top （如果iframe里的标签设置了这个，则在iframe所在页面中的顶级页面打开
   • _parent （如果iframe里的标签设置了这个，则在当前iframe的父级页面中打开
   • _self （在当前页面打开
   • 自定义 （如果自定义的页面不存在就新建一个，如果存在，则在那个页面中打开，可通过window.name查看

table标签

• table标签中包含三个标签 <thead></thead> | <tbody></tbody> | <tfooter></tfooter>
• <tr></tr> | <th></th> | <td></td>
• border-collapse:collapse | border-spacing:0

img标签

• 作用：发出get请求，展示一张图片
• 属性：alt | height | width | src
• 事件：onload | onerror
• 响应式：max-width: 100%

form标签

• 作用：发get或post请求，然后刷新页面
• 属性： 1.action: 提交到哪个页面 2. method：post | get 用什么方式提交

tips：form标签中必须有一个submit，如果没有submit则无法提交，如果没有submit，但是有一个没有类型的button，则会把其默认当作submit

input标签

类型：

• button
• checkbox
• radio
• submit
• email
• file
• text
• password
• hidden （用于机器提交

事件：

• onchange
• onfocus
• onblur

注意事项：

• 一般不监听input的click事件
• form里面input要设置name
• form里面要有submit