HTML的起手式

Emmet感叹号

常用的章节标签

表示文章/书的层级

• h1~h6 标题
• section 章节
• article 文章
• p 段落
• header 头部
• footer 脚部
• main 主要内容
• aside 旁支内容
• div 划分

小tips： ©的写法：&copy；

全局属性

所有标签都有的属性

• class

<div class="middle bordered"></div>

这里class "middle bordered"是作为一个整体的，不能由[class=middle]和[class=bordered]分开定义，但是可以用.middle{}和.dordered{}分开定义

• contenteditable 让用户直接编辑内容

• hidden 隐藏标签，可以用CSS挽回

• id
  • 加上id后可以用CSS调
  • 加上id后可以用JS调
  • 能用class最好不用id
    • Windos中有许多已经定义好的全局属性，是关键字，如：parent，top，self等，id命名不能与其重复。如果非要重复，也可用JS解决，但麻烦
    • 如果两个id命名重复，html不会报错，检查困难

• style
  • 设置内联样式
  • HTML，CSS,JS均可调整，优先级不同；JS>HTML>CSS

• tabindex 实现按Tab键访问
  • 正数，如 tabindex=1/2/3,表示按数字顺序访问
  • 0，表示最后访问
  • -1，表示不要访问
• title 实现鼠标移动到省略的地方时，可以浮动显示完整内容
  • 单行文字溢出省略

white-space: nowrap;不要换行
text-overflow: ellipsis;溢出部分用省略号代替
overflow: hidden;溢出部分隐藏

如何让style标签显示在页面上

一般style标签在head里面，页面上是看不见的，但将style标签放在body里面，然后设置 style {display: block}，就可以显示在页面上了。

内容标签

• ol + li (ordered list + list item) 有序列表
• ul + li (unordered list + list item) 无序列表
• dl + dt + dd (description list + term + data) 描述列表 + 描述对象 + 描述内容
• pre 潜规则：HTML 代码里的多处空格、回车、tab 等内容，默认会被转化为一个空格如果想保留多处空格、回车、tab等，就要用pre
• hr 水平分隔线
• br 换行
• a 链接
• code 代码，可配合pre使用
• em和strong 表示强调
• • em 表示语气上的强调
• • strong 表示内容本身很重要
• quote 行内引用
• blockquote 换行引用

以上演示 http://js.jirengu.com/rekaxigede/3/edit

resst.css修改HTML默认样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

[资料来源：饥人谷]