HTML入门笔记1

336 阅读3分钟

HTML之父

HTML是1990年由蒂姆·伯纳斯-李发明,2004年他被英国女皇颁发了大英帝国爵级司令勋章而被称为李爵士,更是在2017年获得了图灵奖。

为了上网冲浪,让每个人输入网址就能看到网页,李爵士编写了世界上第一个浏览器和服务器,发明了WWW,HTML、HTTP和URL。

HTML起手式

在VScode中新建index.html,英文符号下输入!,按tab键可以快速生成

   <!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
  </body>
  </html>
  • !DOCTYPE html :告诉浏览器写HTML,浏览器不只支持HTML
  • html lang="en":HTML标签,en是英语,可以改成zh-CN
  • head里面内容是用户看不见的元素
  • 第一行meta 绝对不能改,容易乱码。UTF-8代表文件字符编码,是支持全人类所有语言。
  • 第二行meta 告诉IE最新内核
  • 第三行meta 防止界面缩放,兼容手机
  • title是网页标题

常用的表章节标签

表示文章/书的层级

  • h1~h6 标题,数字越大,字体越缩小
  • section 专题性的内容,通常会带有标题,如果没有标题,那么就不推荐使用section。典型的应用场景有:文档大纲、文档章节、论文中有编号的部分。
  • p 段落
  • header 头部,比如文章置顶加广告
  • footer 脚部,比如在文章底部加声明,代码中输入<footer>&copy;谁版权所有</footer>,表示©谁版权所有
  • article 是一个特殊的 section 标签。当一段内容脱离了所在的语境之后,还是完整的、独立的,则应该用article典型的应用场景:论坛帖子,新闻或杂志的文章,博客文章,用户提交的评论。
  • main主要内容
  • aside旁支内容,常用场景:参考资料,导航
  • div仅仅用作样式化或者脚本化的标签

全局属性

所有标签都有的属性

  • class给标签分类,比如<div class="middle bordered">,在head标签中匹配class
<style>
   .middle{
      background: black;
      color:white;
   }
   .bordered{
      border:10px solid red;
   }
</style>
  • contenteditable可使任何一个元素被编辑,可用来做自己的编辑器。比如<div class="middle bordered"contenteditable>
  • hidden隐藏内容,可以用CSS重新显示隐藏内容
  • id功能类似class,同时JS可以获取id,不要用id,id相同不报错,会误导人,而且在JS中直接用与window有的全局属性名字相同获取元素方法,就不行,不要用id
  • style 实现样式编辑器,优先级比CSS高,可以用JS来设置,如果style,CSS,JS都写一样,最终效果以JS为准,内联样式优先
  • tabindex不用鼠标,用键盘操作,用数字来控制tab键选中的顺序。正表示顺序方向,0表示最后访问,-1表示永远找到不到我
  • title光标所在处显示完整内容 小技巧: 内容显示一部分,未显示用省略号代替
style{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

常用内容标签

  • ol+li:有序列表
  • ul+li:无序列表。
  • dl+dt+dd:描述列表。快捷键dl+tab。dl是列表,dt是被描述对象,dd是描述内容
  • pre:保留代码中空格、回车和tab。
  • code:变更字体格式,如果已经在VScode中设置字体,字体是等宽的。 小技巧: 用pre把code包裹起来,就单列出代码块
  • hr:水平分割线
  • br:换行
  • a:超链接,进行页面跳转
  • em:强调内容,语气上的强调
  • strong:突出内容重要性,表示内容本身的重要性
  • quote:内联引用
  • blockquote:块引用,有换行效果