超文本标记语言HTML(Hypertext Marked Language)由Tim Berners-Lee在1993年发明,诞生于Tim Berners-Lee发布的HTML Tags这篇文章。
HTML最初的目的就是为了让文本在网页上显示的时候有层次有结构,更加清楚,它想让文本有两种表现形式,一种是专门给程序员看的,程序员看到的是满篇都是标记的样子。而另一种是让用户看的,用户看到的是没有标记的样子,而是有结构层次的文本。
HTML也有它的语法,在众多的HTML标签中,大致有以下几种类型:
1. <!DOCTYPE html> --声明文档类型是html
2. <tag attr=value>内容</tag> --这里的value可加引号也可不加引号
3. <tag attr>内容</tag> --示例:<input type="checkbox" checked>
4. <tag attr=value /> --最新版的HTML后面不用加“/”
5. <!-- 注释 -->
先来看看一个最简单的HTML文件和它的效果
<!DOCTYPE html>
下面是入门标签和一些全局属性,
标签:
- 标题:h1~h6
- 章节:section
- 文章:article
- 段落:p
- 头部:header
- 脚部:footer
- 主要内容:main
- 旁支内容:aside
- 划分:div
内容标签:
- ol + li :搭配使用是有序列表,其中"ol"是ordered lis简写
- ul + li :无序列表,“ul”是unordered list简写
- dl + dt + dd:描述列表“d”是description
- pre:在HTML中无论多少连续的空格、换行、Tab都会只算做一个空格,而有了pre标签,就会保留所有的空格、换行、Tab
- hr:分割线
- br:换行(break结束本行)
- a:链接
- em:斜体
- strong:加粗
- code:用来把代码抱起来
- q:引用,quote简写<q></q>内的内容会自动加引号
- blockquote:块引用,表现为把<blockquote>和</blockquote>中的内容换行
全局属性:
- class:类,将会在使用CSS时广泛用到
- contenteditable:可直接在网页内进行编辑
- hidden:隐藏
- id:注意不到万不得已不要写id,能写class就写class
- style:这里的style是一个属性,不是写css的<style></style>标签
- tabindex:在网页上使用Tab键切换“块”时的编号属性,tabindex="0"表示最后一个才切换到它,tabindex="-1"表示无论怎么切换都不会选中它,其他按1,2,3,4....的顺序切换
- title:鼠标移上去就会显示title的值
注:HTML的学习方法应该是遇到一个不会的标签,就去搜索引擎 “MDN + 标签”,而不是把一本HTML书从头看到尾。