HTML入门笔记

Bela
165 阅读3分钟

蒂姆·伯纳斯-李，英国计算机科学家，他是万维网的发明者，1990年12月25日，他成功利用互联网实现了超文本传输协议客户端与服务器的第一次通讯，由此产生了HTML、URL、HTTP。本文将简要介绍一下HTML，包括HTML起手内容、常用的表章节标签、全局属性、常用的内容标签。

1.HTML起手内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
</html>

HTML起手内容如上所示，其中<!DOCTYPE html>表示文档类型，目的是告诉浏览器当前的文档类型是html；html标签是HTML页面的根元素，lang="en"表示语言，en表示英语，我们一般可以改为"zh-CN"，表示简体中文；head标签中包含了网页中的一些元数据（meta），例如charset="UTF-8"定义了网页采用UTF-8的字符编码方式，同时也包含了定义文档标题的title标签；body标签中定义文档的主体内容。

2.常用的表章节标签

常用的表章节标签主要有h1~h6、header、main、article、section、aside、footer、p，它们表示的含义分别如下：

  • h1~h6：依次表示标题一、标题二、标题三、标题四、标题五、标题六。
  • header:可以定义文档或者文档的一部分区域的页眉，也可以作为介绍内容或者导航链接栏的容器
  • main：用于指定文档的主体内容，标签中的内容在文档中必须是唯一的，不应该包含在文档中重复出现的内容
  • article:定义的内容本身必须是有意义的且必须是独立于文档的其余部分，例如论坛帖子、新闻文章、用户提交的评论等
  • section:定义文档的某个区域，比如章节、头部、底部或者文档的其他区域
  • aside:表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
  • footer：定义文档或者文档的一部分区域的页脚，可以包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等
  • p:定义网页中的一个段落

3.全局属性

全局属性主要有class、contenteditable、hidden、id、style、tabindex、title，作用分别如下所示：

  • class：规定元素的类名
  • contenteditable:指定元素内容是否可编辑
  • hidden：指定元素内容是否可见
  • id：规定元素的id，id具有唯一性
  • style：规定元素的行内样式，里面的内容将覆盖任何全局的样式设定，例如在style标签或在外部样式表中规定的样式
  • tabindex:规定当使用 "tab" 键进行导航时元素的顺序
  • title:规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本

4.常用的内容标签

常用的内容标签主要有ol+li、ul+li、dl+dt+dd、a、em、strong、q、blockquote、code、pre、hr、br，它们表示的含义分别如下所示：

  • ol+li：ol标签与li标签一起使用，创建有序列表
  • ul+li：ul标签与li标签一起使用，创建无序列表
  • dl+dt+dd：dl标签定义一个描述列表，dl定义项目/名字，dd描述每一个项目/名字
  • a：定义超链接，用于从一个页面链接到另一个页面
  • em：一个短语标签，用来呈现为被强调的文本
  • strong：定义重要的文本
  • q：定义一个短的引用内容
  • blockquote：定义摘自另一个源的块引用
  • code：定义计算机代码文本
  • pre：定义预格式化的文本，被包围在pre标签元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体
  • hr：定义HTML页面中的主题变化，并显示为一条水平线，也可被用来分隔 HTML 页面中的内容
  • br：表示插入一个换行符
avatar
文章
阅读
粉丝