HTML入门笔记1

116 阅读2分钟

1. HTML的发明者

  • TIM Berners-Lee
  • 2004年,被英国女皇颁发大英帝国爵级司令勋章,故又称为李爵士
  • 2007年,被颁发图灵奖

2. HTML的起手式

HTML起手应该搭建基本页面结构,可以用Emmet语法,感叹号+tab键创建页面基本结构,主流的代码编辑器都支持Emmet语法。

3. 常用的标签

3.1 标题标签

单词缩写: head 头部. 标题 title 文档标题

为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即

标题标签语义: 作为标题使用,并且依据重要性递减

其基本语法格式如下:

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

3.2 章节语义标签

标签作用描述
<header>页眉介绍性的内容
<footer>页脚通常包含有关作者的信息、版权或文件链接
<nav>导航链接可以是当前文档内的,也可以是到其他文档的。常见例子是菜单、目录和索引
<main>文档主内容中心主题直接相关或扩展的内容
<article>文章自成一体,独立分发,可重复使用
<section>文档中的节没有一个更具体的语义元素来代表
<aside>页面内容以外的内容其内容与文档的主要内容只有间接的关系。经常以边栏或呼出框的形式出现

3.3 内容标签

在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

  • a标签:超链接,用于跳转
  • strong:表示强调
  • em:表示强调
  • code:用于展示代码

3.4 预格式化文本pre标签

标签可定义预格式化的文本

被包围在 pre标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>
​
  此例演示如何使用 pre 标签
​
  对空行和 空格
​
  进行控制
​
</pre>

4. 全局属性

所有标签都有的属性

  • class
  • contenteditable
  • hidden
  • id
  • style
  • tabindex
  • title