目录
英语小课堂
| 英文 | 翻译 | 英文 | 翻译 |
|---|---|---|---|
| heading | 标题 | order | 顺序、秩序 |
| body | 身体、正文 | ordered | 有顺序的 |
| paragraph | 段落 | unordered | 无顺序的 |
| section | 章、节 | description | 描述 |
| article | 一篇文章 | term | 术语 |
| main | 主要 | data | 数据 |
| aside | 旁边的 | quote | 引用 |
| anchor | 锚、定点 | block | 块 |
| strong | 强壮、重要 | inline | 行内、内联 |
| emphasis | 强调、重读 | break | 打断 |
推荐书籍《网道HTML教程》
- 不要花钱买任何HTML书
- 因为HTML看书没用
- 主要靠练习
看书诀窍三上：马上、枕上、厕上
VSCode插件推荐
- Prettier更好地格式化工具
代码问题如何提问
代码BUG问题三要素
- 代码链接
- 期望效果
- 实际效果
提问前自检
- 是否使用过Border调试法和Console调试法
- 是否把标点写错了（包括空格）
- 是否把单词拼错了
- 是否把代码上传到GitHub或者 Codesandbox 了
- 截图是否是全屏的
- 问题是否很容易能Google到
- 是否能一句话说清你遇到的问题不需要铺垫
在线web编辑器
HTML起手式
- 感叹号 ! + tab
<!DOCTYPEhtml> 文档类型
html标签，可以改成zh-CN
章节标签
表示文章/书的层级
- 标题hl ~ h6
- 章节 section
- 文章 article
- 段落 p
- 头部 header
- 脚部 footer
- 主要内容 main
- 旁支内容 aside
- 划分 div
全局属性
所有标签都有的属性
- 给标签分一个类、标记 class
- 使内容可编辑 contenteditable
- 让内容不显示 hidden
- 标记 id
- 新手不到万不得已不要使用id
- JavaScript里面可以直接调用xxx.style
- 和window.里面的属性冲突，所以只有老司机敢用
- style
- CSS HTML JS 属性同时存在，以JS为最终效果
- JS会覆盖掉直接写在标签上的style
- tabindex
- 控制tab的顺序
- tabindex=0是最后一个
- tabindex=-1 让tab找不到
- title
- white-space:nowrap; 不要换行
- overflow:hidden;溢出就省略
- text-overflow:ellipsis;省略的部分用省略号表示
默认样式
-
为什么有默认样式
- 因为HTML被发明的时候，CSS还没出生
-
怎么看默认样式
- Chrome开发者工具
- Elements -> Styles -> user agent stylesheet
-
User Agent
- 就是浏览器
-
CSS reset
- 默认样式已经不符合我们的需求
常见 CSS reset
-
方大大经常用的代码
-
还可以抄大厂的代码
-
进入大厂首页
-
Chrome开发者工具，找到类似代码
-
复制到自己的项目
-
命名为 reset.css
-
*{
margin: 0;
padding: 0
} -
body,
button,
input,
select,
textarea {
font: inherit;
} -
table {
border-collapse: collapse;
border-spacing: 0
}
-
内容标签
ol + li
- ordered list 有顺序的列表
- list item 列表中的一项
ul + li
- unordered list 无序列表
- list item列表中的一项
dl + dt + dd
- description list 描述列表
- description term 描述的标题
- description data 描述的内容
pre
- preview 保留空格、回车
hr
- 分割线
br
- break 换行
a
- anchor 超链接
- target="_blank" 在新窗口打开
em
- emphasis 强调
- 默认样式是斜体
strong
- 重要
- 默认样式是加粗
code
- code标签里面 写的英文是等宽的
q
- quote
- 内联引用
blockquote
- 块的引用
「资料来源：饥人谷」