HTML标签

HTML起手式

写HTML首先应该写什么？

我们可以把语言改为中文

章节标签

标题 h1~h6

章节 section

文章 article

段落 p

头部 header

脚部 footer

主要内容 main

旁支内容 aside

划分 div

\

小tips:

©的写法： ©

\

全局属性：所有标签都有的属性

• class

• contenteditable 让用户可以直接编辑内容
• hidden

• • 隐藏标签

• id

• • 加上id以后可以调css
  • 加上id以后可以用js

• • • id.style.border = "1px solid red"
    • 但不提倡用这种写法， 因为这种写法对id的命名有要求，比如用parent, top, self等命名id就不行。因为window里有很多已经定义好的全局属性，不可以和这些属性同名。

• • • 所以不到万不得已不要用id，用class

• style

• • 设置内联样式
  • 对于style的优先级：

• • • JS > HTML的style标签 > CSS

• tabindex

• • 正数，如tabindex=1 / 2/ 3/，表示按顺序访问
  • 0， 表示最后访问

• • -1， 表示不要用tab访问

• title

• • 用来显示完整内容
  • 应用场景：文字超长变省略号

• • 单行文字溢出：

• • • 调整css
    • white-space: nowrap; 不要换行

• • • text-overflow: ellipsis 溢出的部分用....
    • overflow: hidden; 溢出的部分隐藏

• • 但我希望，当鼠标移动到省略的地方上时，可以浮动地显示完整内容，就可以在title="完整内容"，即可

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

把放在里面

然后设置 style {display: block}

js.jirengu.com/xevecakopu/…

\

什么时候用class或Id？

不到万不得已不用Id。

\

\

内容标签

潜规则：HTML 代码里的多处空格、回车、tab 等内容，默认会被转化为一个空格

如果想保留多处空格、回车、tab等，就要用pre

• 保留空格、回车键； 其他标签会把多余的空格和回车键转换为一个空格
• 代码

• • 如果需要写换行的代码，嵌套一个pre标签即可
  • <pre><code>var aaa = 1; console.log(a)</code></pre>

• ---

  水平分隔线
• 
  换行

• ol li 有序列表
• ul li 无序列表

• dl + dt 要描述的对象 + dd 要描述的内容
• 和 表示强调

* {
  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;
}