1. HTML 5 先导
(1) Guide
(2) CRM 学习法
- copy 抄
- run 在机器上运行成功
- modify 按自己的需求修改
(3) 标签基本格式
-
<!DOCTYPE html>文档类型为html，请按html的格式解析 - 基本格式:
<tag attr=value> contents </tag>和<tag attr=value>
注意某些属性即使赋值了也不会改变，如:<input type="checkbox" checked="false">
(4) 注释格式
<! -- -->
(5) 如何调试
- 看VSCode颜色
- 看webstorm颜色
- W3C 在线验证
- 使用node-w3c-validator验证:
node-w3c-validator index.html
(6) 查询标签用法
- 谷歌搜索: <tag> + MDN
(7) 入门教材
(8) VSCode格式化插件
- Prettier + format on save
(9) 在线html编辑
2. HTML 5 标签
(1) HTML 起手式
-
语句顺序没关系
HTML 起手式
(2) 章节标签
- h1~h6
- 章节: section
- 文章: article
- 段落: p
- 头部: header
- 脚部: footer -> 版权表示 ©:
© - 主要内容: main
- 旁支内容: aside
- 划分: div
(3) 全局属性
A. class
可用style给某类所有成员配置风格，如:
a. 只要class中含"middle"都应用此风格
<style>
.middle{
background: black;
color: white;
}
</style>
b. class为"middle"的元素应用此风格
<style>
[class="middle"]{
background: black;
color: white;
}
</style>
B. 使任何一个元素可编辑: contenteditable
可把style 放入body中，让用户自己编辑页面样式
<style contenteditale>
style{display:block;}
.middle{
background: black;
color: white;
}
</style>
C. 隐藏元素: hidden
D. 元素全页面唯一用: id
不到万不得已不用id，除非确认全页面唯一
a. 只要id中含"middle"都应用此风格
<style>
#middle{
background: black;
color: white;
}
</style>
b. id为"middle"的元素应用此风格
<style>
[id="middle"]{
background: black;
color: white;
}
</style>
c. 可在JS中直接调用id修改元素
如为id为xxx的元素修改边框样式
xxx.style.border = '1px solid green';
PS. window.attribute 中的属性不能通过上面的语句找到元素，只能用document.getElementById()来找到元素
E. 样式: style
<div id="xxx" style="border: 1px solid green;" />
等价于（但优先级高于）：
<style>
#xxx{
border: 1px solid green;
}
</style>
JS修改style会覆盖原效果
F. 用Tab控制页面: tabindex
<div tabindex = 1 />
- -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 块引用（换行缩进）
