文章: 阅读:

HTML 基础知识

HTMLHTML

前言

1、HTML


      

  • HTML 指的是超文本标记语言（英语：Hyper Text Markup Language，简称：HTML）是一种用来描述网页的标准标记语言，标记语言是一套标记标签 (markup tag)。

  • HTML 不是一种编程语言，而是一种标记语言，使用标记标签来描述网页。

  • HTML 文档包含了 HTML 标签及文本内容，HTML 文档也叫做 web 页面。

  • HTML 运行在浏览器上，由浏览器来解析。

  • HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

  • HTML5 中的一些有趣的新特性：

    • 用于绘画的 canvas 元素
    • 用于媒介回放的 video 和 audio 元素
    • 对本地离线存储的更好的支持
    • 新的特殊内容元素，比如 article、footer、header、nav、section
    • 新的表单控件，比如 calendar、date、time、email、url、search

2、版本

  • 从初期的网络诞生后，已经出现了许多 HTML 版本。
版本 时间 版本 时间
HTML 1991
HTML+ 1993年6月
HTML 2.0 1995年11月
HTML 3.2 1996年1月
HTML 4.0 1997年12月
HTML 4.01 1999年12月
XHTML 1.0 2000年1月
XHTML 1.1 2001年5月
HTML5 2012
XHTML5 2013

2.1 HTML5 改进

  • 新元素
  • 新属性

  • 完全支持 CSS3

    • 新选择器
    • 新属性
    • 动画
    • 2D/3D 转换
    • 圆角
    • 阴影效果
    • 可下载的字体

  • Video 和 Audio

  • 可以简单地开发 Web 应用
    • 本地数据存储
    • 访问本地文件
    • 本地 SQL 数据
    • 缓存引用
    • Javascript 工作者
    • XHTMLHttpRequest 2

3、文档后缀名

后缀名 描述
.htm 静态网页后缀名
.html 静态网页后缀名，html 与 htm 后缀可以互换，对网页完全没有影响，同时也没有区别
.shtm 可以在文件中写入 SSI 指令，当客户端访问这些文件时，服务器端会把这些文件进行读取和解释，把文件中包含的 SSI 指令解释出来
.shtml shtml 与 shtm 后缀可以互换，对网页完全没有影响，同时也没有区别
  • SSI：服务器端嵌入或者叫服务器端包含，是 Server Side Include 的简写。SSI 技术通过在文档中加入 SSI 指令，让服务器端在输出文档之前解析 SSI 指令，并把解析完的结果和文档一同输出给客户端。

4、页面结构

  • 下面是一个可视化的 HTML 页面结构，只有 <body> 区域 (白色部分) 才会在浏览器中显示。

4.1 实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>

    <html>

    <head>
        <meta charset="utf-8" />
        <title>Qian Chia 工作室</title>
    </head>

    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落</p>
    </body>

    </html>

  • 效果

  • 解析

标签 标签 描述 备注 🔗
<!DOCTYPE> 声明文档类型 🔗
<html> </html> 元素是 HTML 页面的根元素 🔗
<head> </head> 元素包含了文档的数据 🔗
<meta /> 元素定义文档的元数据 🔗
<title> </title> 元素描述了文档的标题 🔗
<body> </body> 元素包含了可见的页面内容 🔗
<h1> </h1> 元素定义一个大标题 🔗
<p> </p> 元素定义一个段落 🔗
  • 注：在浏览器的页面上使用键盘上的 F12 按键或者点击鼠标右键菜单中的检查（或检查元素）可开启调试模式，就可以看到页面组成标签。

5、声明

  • <!DOCTYPE> 声明有助于浏览器中正确显示网页。

  • 网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。

  • doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。

    1
    2
    3
    4
    5
    6
    7
    <!DOCTYPE html> 

    <!DOCTYPE HTML> 

    <!doctype html> 

    <!Doctype Html>

5.1 通用声明

  • HTML5

    1
    <!DOCTYPE html>
    • HTML5 不是基于 SGML，因此不要求引用 DTD。

  • HTML 4.01

    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    • 在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。

    • HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。

  • XHTML 1.0

    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

6、标签

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>。

  • HTML 标签通常是成对出现的，比如 <b> 和 </b>。

  • 标签对中的第一个标签是开始标签，第二个标签是结束标签。

  • 开始和结束标签也被称为开放标签和闭合标签。

    1
    <标签>内容</标签>

7、元素

  • “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。

  • 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。

    1
    <p>这是一个段落</p>

  • 自 1999 年以后 HTML 4.01 已经改变了很多，今天在 HTML 4.01 中的几个已经被废弃，这些元素在 HTML5 中已经被删除或重新定义。

  • 为了更好地处理今天的互联网应用，HTML5 添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个 api 拖放元素，定位，包括网页应用程序缓存，存储，网络工作者等。

7.1 HTML5 新图形元素

  • 使用 HTML5 你可以简单的绘制图形:

标签 描述 备注 🔗
<canvas> </canvas> 定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API H5 新加 🔗
<svg> </svg> 定义可伸缩矢量图形，使用 XML 格式定义图形 H5 新加 🔗

7.2 HTML5 新多媒体元素

标签 描述 备注 🔗
<audio> </audio> 定义了声音内容 H5 新加 🔗
<video> </video> 定义一个视频或者影片 H5 新加 🔗
<source /> 定义了 media 元素的多媒体资源（<video> 和 <audio>) H5 新加 🔗
<track /> 规定 media 元素的字幕文件或其他包含文本的文件 (<video> 和 <audio>) H5 新加 🔗
<embed /> 定义内嵌对象。HTML4 中不赞成，HTML5 中允许 H5 新加 🔗

7.3 HTML5 新表单元素

标签 描述 备注 🔗
<datalist> </datalist> 规定了 input 元素可能的选项列表，来定义 input 可能的值 H5 新加 🔗
<keygen /> 规定用于表单的密钥对生成器字段 H5 新加 🔗
<output> </output> 定义不同类型的输出，比如脚本的输出 H5 新加 🔗

7.4 HTML5 新语义和结构元素

标签 描述 备注 🔗
<article> </article> 定义页面独立的内容区域，定义外部的内容 H5 新加 🔗
<aside> </aside> 定义页面的侧边栏内容 H5 新加 🔗
<bdi> </bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置 H5 新加 🔗
<command> </command> 定义命令按钮，比如单选按钮、复选框或按钮 H5 新加 🔗
<details> </details> 用于描述文档或文档某个部分的细节 H5 新加 🔗
<dialog> </dialog> 定义对话框，比如提示框 H5 新加 🔗
<summary> </summary> 标签包含 details 元素的标题 H5 新加 🔗
<figure> </figure> 规定独立的流内容（图像、图表、照片、代码等等） H5 新加 🔗
<figcaption> </figcaption> 定义 <figure> 元素的标题 H5 新加 🔗
<footer> </footer> 定义 section 或 document 的页脚 H5 新加 🔗
<header> </header> 定义了文档的头部区域 H5 新加 🔗
<mark> </mark> 定义带有记号的文本 H5 新加 🔗
<meter> </meter> 定义度量衡。仅用于已知最大和最小值的度量 H5 新加 🔗
<nav> </nav> 定义导航链接的部分 H5 新加 🔗
<progress> </progress> 定义任何类型的任务的进度 H5 新加 🔗
<ruby> </ruby> 定义 ruby 注释（中文注音或字符） H5 新加 🔗
<rt> </rt> 定义字符（中文注音或字符）的解释或发音 H5 新加 🔗
<rp> </rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容 H5 新加 🔗
<section> </section> 定义文档中的节（section、区段） H5 新加 🔗
<time> </time> 定义日期或时间 H5 新加 🔗
<wbr /> 规定在文本中的何处适合添加换行符 H5 新加 🔗

7.5 HTML5 已移除元素

  • 以下的 HTML 4.01 元素在 HTML5 中已经被删除:
标签 描述 备注 🔗
<acronym> </acronym> HTML5 不再支持。定义只取首字母的缩写 🔗
<applet> </applet> HTML5 不再支持。HTML 4.01 已废弃。定义嵌入的 applet 🔗
<basefont /> HTML5 不再支持。HTML 4.01 已废弃。定义页面中文本的默认字体、颜色或尺寸 🔗
<font> </font> HTML5 不再支持。HTML 4.01 已废弃。定义文本的字体、尺寸和颜色 🔗
<big> </big> HTML5 不再支持。定义大号文本 🔗
<center> </center> HTML5 不再支持。HTML 4.01 已废弃。定义居中文本 🔗
<dir> </dir> HTML5 不再支持。HTML 4.01 已废弃。定义目录列表 🔗
<frame /> HTML5 不再支持。定义框架集的窗口或框架 🔗
<frameset> </frameset> HTML5 不再支持。定义框架集 🔗
<noframes> </noframes> HTML5 不再支持。定义针对不支持框架的用户的替代内容 🔗
<strike> </strike> HTML5 不再支持。HTML 4.01 已废弃。定义加删除线的文本 🔗
<tt> </tt> HTML5 不再支持。定义打字机文本 🔗

8、中文编码

  • 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
中文编码 声明 描述
UTF-8 <meta charset="utf-8" />
GBK <meta charset="gbk" /> 有些浏览器（如 360 浏览器）会设置 GBK 为默认编码

9、显示

  • Web 浏览器（如 Chrome，Internet Explorer，Microsoft Edge，Firefox，Safari 等）是用于读取 HTML 文件，并将其作为网页显示。

  • 浏览器并不是直接显示的 HTML 标签，但可以使用标签来决定如何展现 HTML 页面的内容给用户。

  • 你是否看过一些网页然后惊叹它是如何实现的，如果您想找到其中的奥秘，只需要单击右键，然后选择”查看源文件”（IE）或”查看页面源代码”（Firefox），其他浏览器的做法也是类似的，这么做会打开一个包含页面 HTML 代码的窗口。

  • 现代的浏览器都支持 HTML5。

  • 此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理，正因为如此，你可以 “教会” 浏览器处理 “未知” 的 HTML 元素。

9.1 将 HTML5 元素定义为块元素

  • HTML5 定义了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。

  • 为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block。

    1
    2
    3
    header, section, footer, aside, nav, main, article, figure {
        display: block; 
    }

9.2 为 HTML 添加新元素

  • 可以为 HTML 添加新的元素。

  • 向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero>。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>

    <html>
    <head>
        <meta charset="utf-8" />
        <title>Qian Chia 工作室</title>
        
        <script>
    		document.createElement("myHero")
        </script>
        <style>
            myHero {
                display: block;
    	    background-color: #ddd;
                padding: 50px;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落</p>
        <myHero>我的第一个新元素</myHero>
    </body>
    </html>

  • JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。

9.3 Internet Explorer 浏览器问题

  • 你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，但是 Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

  • 我们可以使用 Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, “ shiv” 来解决该问题:

    1
    2
    3
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  • 以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

  • 注意：国内用户请使用静态资源库（Google 资源库在国内不稳定）：

    1
    2
    3
    <!--[if lt IE 9]>
        <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

  • 针对 IE 浏览器 html5shiv 是比较好的解决方案。html5shiv 主要解决 HTML5 提出的新的元素不被 IE6-8 识别，这些新元素不能作为父节点包裹子元素，并且不能应用 CSS 样式。

  • html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>

    <html>
    <head>
        <meta charset="utf-8" />
        <title>Qian Chia 工作室</title>
        
        <!--[if lt IE 9]>
    	<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>我的第一篇文章</h1>
        <article>
            Qian Chia 工作室
        </article>
    </body>
    </html>

10、输出

  • 我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

  • 对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

  • 当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。

11、编辑工具

  • 可以使用专业的 HTML 编辑器来编辑 HTML，推荐几款常用的编辑器，可以从以下软件的官网中下载对应的软件，按步骤安装即可。
软件 描述
VS Code Microsoft 在开发者大会上正式宣布一个运行于 Mac OS X、Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器
Sublime Text 可以配合 Emmet 插件来提高编码速度
Notepad++ 可以配合 Emmet 插件来提高编码速度
HTML/CSS/JS 在线工具 可以在线编辑 HTML、CSS、JS 代码，并实时查看效果，你也可以将优质代码保存分享

12、HTML 测验

12.1 HTML 测验

12.2 HTML5 测验

13、HTML 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-09-26 23:30


评论


文章目录
  1. 1. 前言
  2. 2. 1、HTML
  3. 3. 2、版本
    1. 3.1. 2.1 HTML5 改进
  4. 4. 3、文档后缀名
  5. 5. 4、页面结构
    1. 5.1. 4.1 实例
  6. 6. 5、声明
    1. 6.1. 5.1 通用声明
  7. 7. 6、标签
  8. 8. 7、元素
    1. 8.1. 7.1 HTML5 新图形元素
    2. 8.2. 7.2 HTML5 新多媒体元素
    3. 8.3. 7.3 HTML5 新表单元素
    4. 8.4. 7.4 HTML5 新语义和结构元素
    5. 8.5. 7.5 HTML5 已移除元素
  9. 9. 8、中文编码
  10. 10. 9、显示
    1. 10.1. 9.1 将 HTML5 元素定义为块元素
    2. 10.2. 9.2 为 HTML 添加新元素
    3. 10.3. 9.3 Internet Explorer 浏览器问题
  11. 11. 10、输出
  12. 12. 11、编辑工具
  13. 13. 12、HTML 测验
    1. 13.1. 12.1 HTML 测验
    2. 13.2. 12.2 HTML5 测验
  14. 14. 13、HTML 实例
隐藏目录