HTML 概论

H5 页面是手机页面

HTML5 技术集合

新标签、新属性
新的通信技术：WebSockets、WebRTC 等
离线存储技术：LocalStorage、断网检测
多媒体技术：视频、音频
图像技术：Canvas、SVG、WebGL
Web 增强技术：History API、全屏
设备相关技术：摄像头、触摸屏
新的样式技术：CSS3 新的 Flex、Grid 布局方式

HTML 标签

基础

注意事项：

checked 属性，加上了就是选中，不论设为 true 还是 false
id 可以加""，可以加''，也可以啥都不加
link 标签只支持自闭合，而且规范写法为

<link rel="stylesheet" href="xxx.css" />

</>这种是旧的 xml 写法，包括类似的属性

起手式

章节标签
- 标题 h1-hn
- 章节 section
- 文章 artical
- 段落 p
- 头部 header
- 脚部 footer
- 主要内容 main
- 旁支内容 aside
- 划分 div
全局属性
- class
  - 一开始是[class="aaa xxx"]，这种方式选中 class 时等于的必须为整个 class 整体（即[class=aaa xxx]），不方便，所以改为.className（.aaa,.xxx）
- contenteditable，可编辑
  - 任何一个元素可以被编辑
- hidden
  - 加上就没了，可以设置 display 显示
- id
  - 不到万不得已不用 id，因为重复不报错
  - [id==xxx] #xxx
  - js 中可以直接取用
```
xxx.style.boder = "1px solid green";
```
  - id为关键词不行，如果非要取就得用 document.getElementById('xxx');
- style 可以实时调试
  - 把 style 标签放在 body 里设置一下代码，style 标签里的内容就可以显示出来，再加上 contenteditable，那么表示样式可被编辑
```
<body>
  <style contenteditable>
    style {
      display: block;
    }
    .aaa {
    }
    .xxx {
    }
  </style>
</body>
```
- style 优先级
  - JS 可以覆盖 HTML 设置的属性
- tabindex
  - 可以设置按下 tab 键会到哪里，按顺序切换，正数时
```
<div tabinex="1"></div>
<div tabinex="2"></div>
```
  - 特殊的值 0，0 是最后一个
  - 特殊值-1，表示不要到这里，别访问我
- title
  - 鼠标悬停会出现设置的字符串
HTML 的默认样式
- user agent stylesheet 浏览器自己加的样式，默认样式
- CSS reset
内容标签
- ol+li
- ul+li
- dl+dt+dd dt 描述对象 dd 描述内容
- pre
  - 保留空格、回车、tab 就使用 pre
- hr
- br
- a
  - href="//a.png"不加 https 表示在当前域名下查找
- em
  - 语气的强调
- strong
  - 内容上的强调
- code
  - 使字符宽度相同，汉字同宽度，英文字符同宽度，数字同宽度
- quote
  - 内联引用，就是不换行
- blockquote
  - 块级引用

重难点标签

a 标签

href
target
download，下载这个网页，实际上没啥用，很多都不支持
rel=noopener
不要双击打开一个 html 文件，通过使用 http-server 工具来打开
http-server . -c-1 缩写 hs
打开网址后后面加上文件名
或使用 parcel 工具打开

href
- 无协议网址，继承当前的
- //baidu.com=>baidu.com=>http://www.baidu.…
- 使用双引号（？还是//）会自动识别使用 http 还是 https
- 双击打开网址会显示文件，此时 a 标签如果链接的是相对路径就会出错
- JavaScript:;想做一个 a 标签，点击什么也不做
- #id 跳转到指定标签锚点
- mailto 发邮件
- tel 打电话
target
- _self
- _blank
- _top，需要有框架的嵌套 iframe，会清除所有被包含的框架并打开链接会在所有 iframe 最上面那个打开
- _parent，会在父窗口或者包含超链接引用的框架中集中打开链接会在当前链接所在 iframe 的上一层打开
- xxx，如果有一个叫 xxx 的窗口就打开，如果没有就新建，那么如果有两个链接指向同一个 xxx，那么就是指向了同一个窗口
- 还可以写 iframe 的名字，可以在指定框架中打开网址

iframe 标签

table

table 只有三个标签 thead\tbody\tfoot，直接写 tr 或 td、th，最后浏览器上呈现的一定都是在 tbody 中，浏览器会自动补全
table-layout
border-spacing
border-collapse

thead
tbody
tfoot
tr table row
th
td table data

img

发出 get 请求，展示一张图片
属性：
1. alt
2. height
3. width
4. src
事件
1. onload
2. onerror
响应式
- max-width:100%

form 表单

发送 get/post 请求，刷新页面
属性

<form action="/yyy" autocomplete="on" target="_blank">
  <input type="text" name="username" id="" />
  <button>
    <strong>xxx</strong>
  </button>
</form>

action
autocomplete
- 是否给出自动建议，如下，name 为 username，浏览器会给出 username 的取值
method
target
- 把哪个页面变成 yyy

事件
- onsubmit
button 和 input 的区别，button 标签里可以加标签，input 不可以
form 必须有一个 type=submit 的按钮，我觉得这就是按理来说，因为表单必然是要提交的

input 标签

作用
属性
1. 类型 type：text、password、radio、checkbox、button、email、hidden...
  - hidden 可以用来让 JS 自动填入 id 等信息
  - textarea
  - select > option 下拉列表
  - label
2. 其他：name、checked、autofocus、multiple
事件
1. onchange
2. onfocus
3. onblur
验证器
- required 等
注意事项：
- input 里要有 name
- 一般不监听 input 的 click 事件
- form 要有 submit 才会提交
其他标签
- video
- audio
- canvas
- svg

兼容手机

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  img {
    max-width: 100%;
  }
</style>

全部的 viewport 是由好几句话的，不止这两句
使用真机来调试页面
- border 调试法
```
  border: 1px solid #FFFFFF;
```

复习HTML笔记

HTML 概论

HTML5 技术集合

HTML 标签

基础

注意事项：

起手式

重难点标签

a 标签

iframe 标签

table

img

form 表单

input 标签

兼容手机