HTML入门笔记

随风而却
121 阅读2分钟

HTML之父

HTML 的全名是“超文本标记语言”（HyperText Markup Language）， 李爵士编写了世界上第一个浏览器和服务器，发明了WWW（万维网）、URL、HTML、HTTP

HTML 起手式

<!DOCTYPE html>  // 文档类型
<html lang="en"> // HTML标签，可以改成zh-CN
<head> // 内容是用户看不见的元素
    <meta charset="UTF-8">  // 字符编码
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> // IE内核版本
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 禁用缩放，兼容手机
    <title>Document</title> // 网页标题
</head>
// 放置网页的主体内容
<body>
</body>
</html>

常用的表章节的标签

  • h1~h6 标题，数字越大，字体越缩小
  • section 章节
  • article 文章
  • p 段落
  • header 头部，比如文章置顶加广告
  • footer 脚部，比如在文章底部加声明，代码中输入<footer>&copy;谁版权所有</footer>,表示©谁版权所有
  • main 主要内容
  • aside 旁支内容，常用场景：参考资料，导航
  • div 仅仅用作样式化或者脚本化的标签

全局属性

  • class 给标签分类
  • contenteditable 可使任何一个元素被编辑，可用来做自己的编辑器，style也可以进行编辑。比如<div class="middle bordered"contenteditable>
  • hidden 隐藏内容，可以用CSS重新显示隐藏内容
  • id 功能类似class,同时JS可以获取id,不要用id,id相同不报错，会误导人，而且在JS中直接用与window有的全局属性名字相同获取元素方法，就不行，不要用id
  • style 实现样式编辑器，优先级比CSS高，可以用JS来设置，如果style,CSS，JS都写一样,最终效果以JS为准，内联样式优先。 优先级：!important > js > style > css
  • 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：超链接,target="-_blank"打开一个新的页面
  • em：强调内容，语气上的强调
  • strong：突出内容重要性，表示内容本身的重要性
  • quote：内联引用
  • blockquote：块级引用，行内引用
avatar
文章
阅读
粉丝