HTML入门笔记1

人生没有什么过不去的
129 阅读2分钟

HTML是谁发明的

  • 诞生时间：1990年左右
  • 发明人：Tim Berners-Lee
  • 事迹：写了第一个浏览器，写了第一个服务器，用自己写的浏览器访问了自己写的服务器，发明了www,同时发明了HTML、HTTP和URL

HTML 起手应该写什么

  • 在vscode中输入一个感叹号回车就能写出 4.PNG

章节标签

  • 表示文章/书的层级标签

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

全局属性

  • 所有标签都有的属性

    • class 类标签选择器

      • 整体写法
        • [class="选择器1 选择器2"]
      • 简写方式
        • .选择器

    • contenteditable

      • 可以使任何一个元素被编辑 可做编辑器
      • style显示 一个很好的调试技巧 
         1.首先将style放到body中
 2.然后style的中间添加 `style {display: block;}`
 3.最后在style中添加contenteditable

    • hidden

      • 隐藏
      • 可用css修改

    • id

      • 用来表示全局唯一的标签
      • id的全局唯一性没有保障，就算有两个重复的id,HTML也不糊提示我们写错了，建议少用id
      • 可在js中直接引用，不到万不得已不要用，因为当id命名为保留字时无效

    • style

      • 写法与<style>一样，但是这是个属性
      • 优先级：js > style属性> <style>标签

    • tabindex

      • 页面上所有的可交互的东西都能用tab移动，类似鼠标
      • tabindex就是用来控制tab移动的顺序的
      • 在能访问的地方按顺序循环访问
      • 语法为：tabindex = n
        tabindex=0 表示最后访问
  tabindex=-1 表示不要访问
  tabindex> 0 表示顺序

    • title

      • 将鼠标浮上去，显示完整的内容
      • 省略如何写 
        white-space:nowrap;//不要换行
text-overflow:ellipsis;//将省略部分换成...,提示用户有隐藏
overflow:hidden;//溢出部分隐藏

内容标签

  1. ol+li

    • 有序列表

  2. ul+li

    • 无序列表

  3. dl+dt+dd

    • 描述列表
    • dt: 描述对象(description term)
    • dd: 描述内容（description data）

  4. pre

    • vscode默认把多个连续的空格和多个连续的换行缩成一个空格
    • pre标签用来保留空格
    • 一般放其它标签里面

  5. code

    • 一般只在写代码的时候用
    • code里面的字是等宽的，便于对齐
    • code是一个内联元素，可用pre包住

  6. hr

    • 用于作分割线

  7. br

    • break用于换行

  8. a

    • 超链接
    • <a href = "" target ="" >
    • href输入网址
    • target打开一个新的宽口,最好不用，特别是对于国外用户来说

  9. em

    • 表示强调
    • 语气很重要

  10. strong

    • 本身很重要

  11. quote

    • 和正常代码没什么明显的差异
    • 行内引用

  12. blockquote

    • 块内引用
avatar
文章
阅读
粉丝