HTML 学习笔记(上)

136 阅读1分钟

HTML 背景故事

1990年,Tim Berners Lee发明了万维网,同时还有URL、HTTP、HTML,也被人们称为互联网之父。

image.png

HTML起手部分包含哪些意思

<!DOCTYPE html> <!--文档类型-->
<html lang="en"> <!--文档语言-->

<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>Cat index Page</title>
</head>

常用章节标签

  • h1-h6: 标题,1最大6最小
  • section: 章节标签
  • article: 文章标签
  • p: 段落标签
  • header: 头部标签
  • footer: 底部标签
  • main: 主要内容部分的标签
  • aside: 边内容标签
  • div: 区块划分标签

全局属性

释义:是所有HTML标签共有的属性,可以用于所有元素

  • class: 类名

  • contenteditable: 表示可以被编辑

  • hidden: 隐藏,浏览器不回显示这类元素

  • id: 是指唯一标识符,但如果有两个同样的id也并不会报错,所以推荐尽量避免使用

  • style: 用于设置样式

  • tabindex: 通过tab键来定位页面,赋值-1表示不可选中,赋值0则表示最后选中

  • title: 鼠标移到title元素上会显示里面带有的内容

常用的内容标签

  • ol + li: 有序列表

  • ul + li: 无序列表

  • dl/dt/dd: 带有标题的列表

  • pre: 保留空格、tab、回车(你打出来什么样就保留什么样

  • hr: 分割线

  • br: 自动换行

  • a: 超链接

  • em: 表示语气强调,和斜体标签的区别在于,另一个是强调某个词语的重要性

  • strong: 加粗

  • code: 代码,表现为等宽

  • quote: 引用

  • blockquote: 块级的引用,内容会有缩进