2020-11-30 HTML基础

1. HTML 5 先导

(1) Guide

• https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

(2) CRM 学习法

• copy 抄
• run 在机器上运行成功
• modify 按自己的需求修改

(3) 标签基本格式

• 文档类型为html，请按html的格式解析
• 基本格式: contents 和
  注意某些属性即使赋值了也不会改变，如:

(4) 注释格式

(5) 如何调试

• 看VSCode颜色
• 看webstorm颜色
• W3C 在线验证
• 使用node-w3c-validator验证: node-w3c-validator index.html

(6) 查询标签用法

• 谷歌搜索: + MDN

(7) 入门教材

• 网道HTML教程

(8) VSCode格式化插件

• Prettier + format on save

(9) 在线html编辑

• JS Bin
• codesandbox.io

---

2. HTML 5 标签

(1) HTML 起手式

• 语句顺序没关系

  
  
  HTML 起手式

(2) 章节标签

• h1~h6
• 章节: section
• 文章: article
• 段落: p
• 头部: header
• 脚部: footer -> 版权表示 ©: ©
• 主要内容: main
• 旁支内容: aside
• 划分: div

(3) 全局属性

A. class

可用style给某类所有成员配置风格，如:

a. 只要class中含"middle"都应用此风格

b. class为"middle"的元素应用此风格

B. 使任何一个元素可编辑: contenteditable

可把style 放入body中，让用户自己编辑页面样式

C. 隐藏元素: hidden

D. 元素全页面唯一用: id

不到万不得已不用id，除非确认全页面唯一

a. 只要id中含"middle"都应用此风格

b. id为"middle"的元素应用此风格

c. 可在JS中直接调用id修改元素
如为id为xxx的元素修改边框样式

xxx.style.border = '1px solid green';

PS. window.attribute 中的属性不能通过上面的语句找到元素，只能用document.getElementById()来找到元素

E. 样式: style

等价于（但优先级高于）：

JS修改style会覆盖原效果

F. 用Tab控制页面: tabindex

• -1 不能访问
• >0 顺序访问
• 0 最后访问

G. 查看完整内容: title

• 鼠标浮动到元素上可查看元素title内容
• 常用省略 css写法：

#xxx{
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*省略内容用省略号表示*/
  overflow: hidden; /*溢出内容省略*/
}

(4) 默认样式

默认样式可能不符合css写法

• 查看默认样式: 选中元素 -> 右键检查 -> Style -> user agent stylesheet
• 清除默认样式: css reset
  -> 方方老师常用的css reset

(5) 内容标签

• ol + li 有序列表 + 列表项
  ps. ol不能含li以外的子元素
• ul + li 无序列表 + 列表项
• dl + dt + dd 描述列表 + term + 描述内容
• pre 保留空格、回车、tag（一般内容tag包裹pre）
  ps. html把连续的空格、回车、tab全部转化为一个空格，所以多个空格、换行、tab没有用
• code 等宽字体（pre包code显示换行和缩进）
• hr 水平分割线
• br 换行
• a 链接
  ps. 新窗口打开: target = "_blank"
• em 强调（斜体）：语气强调
• strong 强调（加粗）：内容重要
• quote 内联引用（无明显样式）
• blockquote 块引用（换行缩进）