2020-12-01 HTML常用标签 + 实践 + 调试部署

1. HTML 重点标签

---

1.1 a 标签

A. 属性

(1) href = hyper reference 超链接

• 适用网址：http, https, 无协议（继承当前文件的协议）

跳转demo.png

• 适用路径，如跳转页面 绝对目录/a/b/c.html 或 相对目录a/b/c.html，index.html或./index.html
  ps. 这里的/a 是指http服务的目录，不再是文件目录，所以双击打开再跳转链接会跳转到文件目录，失去意义
• JS伪协议 javascript:代码;，直接执行js代码，现在比较少用
  什么都不做的a标签:
  点击后会刷新页面
  点击后不会刷新页面，但会回到页面顶部
• 适用元素id，如: ，页面将跳转至id为'xxx'的元素位置
• 发邮件mailto: + email，跳转到发邮件页面，并把email地址输入到收件人框
• 打电话tel: + 电话号码，手机上点击直接跳转到打电话界面，电话号码直接输入完毕

(2) target 在哪一个窗口打开超链接

• '_self' 表示在当前页面打开
• '_blank' 表示在空白页打开
• '_top' 表示在最上级页面打开
  【补充知识】iframe 引用其他页面
  
  【重要】如果主页面包含iframe，在iframe中有一个a标签：
  -> 点击后将在主页面打开链接页面
  -> 点击后将在iframe页面打开链接页面
• '_parent' 表示在父级页面打开
  如：有3个iframe嵌套，第三的iframe的链接如果设置父级页面打开将在第二个iframe打开，如果设置'_top'将在主页面打开
• '窗口名' 表示在名为指定名称的窗口（window.name）打开，如果没有则创建
• 'iframe名' 表示在名为指定名称的iframe打开
  
• 【补充知识】打开页面的方式 -> 把本机作为服务器在端口部署网址:
  手机同在一个wifi也可以访问
  a. http-server
  step1: cd 到网页文件路径
  step2: 命令: http-server . -c-1 缩写为 hs . -c-1
  step3: 浏览器打开URL后接文件名，如：192.168.56.1:8080/index.html
  b. parcel
  step1: cd 到网页文件路径
  step2: 命令: parcel index.html
  step3: 浏览器打开URL

(3) download 下载网页，但大部分情况不支持

(4) rel=noopener 用于防止特殊bug

---

1.2 iframe 标签

不需要深入学习，目前前端已使用其他方法实现

---

1.3 table

A. 属性

• tr: table row
• th: table header会加粗
• td: table data

(1) thead

常用 thread > tr > th：

  
     Type1 
     Type2 
  

(2) tbody

常用 tbody > tr > td：

  
     data1 
     data2 
  
   
     data3 
     data4 
  

(3) tfoot

常用 tfoot > tr > td：

B. 常用格式

(1) 横纵双表头

在tbody和tfoot中将横向表头位置改成即可

  
     Math 
     data1 
     data2 
  
   
     English 
     data3 
     data4 
  

ps.
a. 如果在table中不写thead、tbody、tfoot，html将自动把等格式放入tbody中
b. thead、tbody、tfoot不一定要按照顺序写，html会自动调换位置

(2) 相关样式

• table-layout 布局
  auto: 自动布局，按内容计算宽度
  fixed: 等宽
• border-spacing 单元格间距
• border-collapse: collapse 合并单元格间隔
  

  ---

1.4 img

A. 作用

• 发出get请求，展示图片

B. 属性

(1) Alt - alternative 请求失败时用一段文字代替图片

(2) width 宽，height 高

ps. 如果只写宽度，高度会自适应；只写高度，宽度会自适应；两个一起写，图片会按照指定宽高展示，可能会变形！
永远不要让图片变形！

(3) src 图片地址（可以为绝对地址、相对地址、URL）

C. 事件

• 监听图片是否加载成功

(1) onload 图片加载成功触发

(2) onerror 图片加载失败触发

D. 响应式

• 设置max-width: 100%，实现图片永远填满屏幕且不会变形
• 手机上浏览: F12 左上角第二个按钮

手机预览按钮

---

1.5 form

• 一个form表单必须包含一个type="submit"的input或button，表单才能提交！
• form里面的input都要有name

A. 作用

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

B. 属性

(1) action

• 表单数据路径，即向何处发请求 返回form-data response

(2) 一般表单含输入框和提交按钮

ps. 系统会自动识别使用的语言替换submit按钮的文字，如果要改变可写成
【重要】 和 区别

• input中不能带其他标签
• button中可以含其他标签，如:

  
    here!
  

(3) method 指定请求方法

• 发送post请求

(4) autocomplete 自动推荐输入

将自动填充开启autocomplete="on"，并在指定输入框设定推荐输入name="username"，会在输入框推荐输入项

(5) target 要提交到哪个页面，在哪个页面刷新

• 用法如a标签的target

C. 事件 - onsubmit

---

1.6 input

A. 作用

• 让用户输入内容

B. Type

• text 让用户输入文本的输入框
• color 颜色铺满输入框
• password 不显示输入的文字，用点表示
• radio 单选框（圆形）
  注意名字要一致才能实现多选1

male
female

• checkbox 多选框（方形）
  用法同radio一致，名字相同才会被认为是一组

Video Game
Cycling
Chessing

• file 选择文件
  ps. 选择多个文件，加上multiple:
• hidden 看不见的input，不是给人填的，给JS自动填入

C. 事件

一般不监听用户click事件

• onchange 当用户输入改变时触发
• onfocus 当用户把鼠标移动到元素上时触发
• onblur 当用户把鼠标离开元素时触发

D. 验证器

• 要求用户必须填写，加入required:

E. 其他输入标签

(1) textarea 多行输入

锁死输入区域大小（不允许用户拖动）

(2) select 下拉选单

option中的value是真正选择的值，文本值是展示的值

  - 请选择 -
  星期一
  星期二

---

2. HTML 实践 in VSCode

(1) 多行wrap in list

选中内容 -> ctrl + shift + p -> emmet wrap-> ul>li*

(2) 使用正则表达式删除

ctrl + H -> Use Regular Expression -> \[\d+\] 表示中括号中多个数字 -> 替换为空 -> 再点击Use Regular Expression 取消正则表达式回到原始replace界面

(3) 表格编辑按住alt选择多个位置同时编辑

编辑完成后如下:

表格编辑

（注意关闭自动格式化）再选中内容 -> ctrl + shift + p -> emmet wrap-> tr*：

tr包裹后.png

最后 ctrl + shift + p -> emmet wrap使用缩写包围-> table

(4) 图片style设置max-width: 100%

• 图片最好不超过300kb，否则需要压缩

(5) TOC 目录， 设置id跳转

(6) 单击图片新窗口打开-> 看高清图

---

3. 调试

(1) 响应式页面 Settings

• meta:vp 内容与设备宽度一致，初始缩放1倍，最大1倍，最小1倍，不允许用户缩放

• img最大宽度100%

(2) 调试方法

• 手机调试:
  a. 方法1：使手机和电脑同一wifi，打开hs，访问ip:端口/页面
  b. 方法2：hs在chrome上打开，开发者工具左上第二个按钮
  border调试法
• chrome远程调试（需要usb连接）
  

  ---

4. 部署到GitHub Pages

• (1) 新建github repo 并上传html
• (2) repo settings -> GitHub Pages -> 选择正确的分支 -> 生成URL -> 点击后别忘记在后面加/index.html
• (3) 在About里设置Description，把网站地址放入'Website'中

Description.png