《HTML入门笔记1》

·  阅读 104
《HTML入门笔记1》

1.Tim Berners-Lee 发明了HTML (同时发明了WWW、HTTP和URL)

2.HTML的起手式

1591635940872-c0193de6-fab9-4a23-979e-985cc090755d.png

3.常用的表章节的标签

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

4.全局属性

  • 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="完整的内容" 当鼠标移动到省略的地方上时,可以浮动地显示完整内容

5.内容标签

  • <code></code> 代码
    如果需要写换行的代码,嵌套一个pre标签即可
    var aaa = 1;
    console.log(a)复制代码
  • hr水平分隔线
  • br 换行
  • ol li 有序列表
  • ul li 无序列表
  • dl + dt 要描述的对象 + dd 要描述的内容
  • <em><strong> 表示强调
    • em 表示语气上的强调
    • strong 表示内容本身很重要
  • quote 行内引用
  • blockquote 换行的引用

拓展:HTML 代码里的多处空格、回车、tab 等内容,默认会被转化为一个空格 如果想保留多处空格、回车、tab等,就要用pre <pre></pre> 保留空格、回车键; 其他标签会把多余的空格和回车键转换为一个空格

6.reset.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;
}
复制代码
本文为fjl的原创文章,著作权归本人和饥人谷所有,转载务必注明来源
分类:
前端
标签: