html基础（一）

发表于 更新于 本文字数： 11k 阅读时长 ≈ 10 分钟

img

HTML基础

HTML简介

​ HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
自1990年以来，HTML就一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。
万维网（world wide web，简称www）上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

HTML版本

​ HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由CERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。 [5]
HTML历史上有如下版本： [5]
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

迎接新的Web时代

​ HTML5并不是革命性的改变，而只是发展性的。而且对于之前HTML4的很多标准都是兼容的，所有通过最新HTML5标准制作的Web应用也可以轻松的在老版本的浏览器上运行。HTML5标准中的确是集成了很多实用的功能比如：音视频、本地存储、Socket通信、动画等都是之前应用开发中确实感觉到Web端的鸡肋才得到重视和升级的。
HTML5的目标是：它通过一些新标签，新功能为开发更加简、独立、标准的通用Web应用提供了标准。新的标准解决了三大问题：浏览器兼容问题，解决了文档结构不明确的问题，解决了Web应用程序功能受限等问题。
号称“CSS之父”的Hakon Wium Lie认为，HTML5与CSS3将是全球互联网发展的未来趋势。
自从2010年HTML5正式推出以来，它就以一种惊人的速度被迅速推广使用，微软也因此在IE上做了关于HTML5的标准改进，使其能够支持HTML5，google Chrome，Safari，Opera，Mozilla等主要Web浏览器也针对HTML5制定了相应的支持措施。
目前主流的浏览器厂商也纷纷在研发HTML5相关产品，从目前这些浏览器对HTML5的支持来看，Web的未来属于HTML5

HTML的开发环境和运行环境

​ HTML本质上就是一个文档，市面上常见的一些简单的文本编辑器都是可以用来开发HTML，编辑之后只需将后缀修改为”.html”即可 如：记事本，EditPlus等
前端开发也有众多专业的开发软件，如：Webstrom，Sublime Text，Dreamweaver，HBuilder等，本书主要以 webstrom为主要开发软件
HTML运行环境即各种浏览器，如:IE，edge，Chrome，Firefox，Safari等均可作为HTML的运行环境

HTML文档结构

​ HTML文档有明确的文档结构，包含三个部分：<HTML>中包含<head>…</head>部分和<body>…</body>部分

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

注：

  1. 第1行，HTML5的文档声明，声明开发版本

  2. 第2行，<html>表示HTML的文档起点，”lang=en”表示开发语言为英语，与之对应的在文档的最后一行</html>表示文档的结束位置

  3. 第3，6行，表示文档的头部信息，该部分中的内容不在浏览器的主体中显示，文档头部中主要用来做一些辅助功能。

  4. 第4行，<meta>是<head>中的一个辅助性标签，不包含任何内容，它的属性定义了与文档相关联的名称/值，它提供了相关页面的元信息如：针对搜索引擎和更新频度的描述和关键词， 详见下节<meta>标签

  5. 第5行，<title>用来添加网页的标题，网页标题显示在浏览器的标题栏中

    ​

<meta>标签

  • <meta>标签位于<head>标签区域内提供了HTML的文档元数据（注：元数据是数据的数据信息且元数据不会显示在客户端，但是会被浏览器解析）
  • <meta>标签提供了文档的字符集，使用语言，作者等基本信息，此外还涉及关键词和网页等级设定
  • <meta>标签常用属性表
属性 值 描述
charset character_set 定义文档的字符编码。
content text 定义与 http-equiv 或 name 属性相关的元信息。
http-equiv content-typedefault-stylerefresh 把 content 属性关联到 HTTP 头部。
name application-nameauthordescriptiongeneratorkeywords 把 content 属性关联到一个名称。
scheme format/URI HTML5不支持。定义用于翻译 content 属性值的格式。 
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
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <!--声明文档的字符编码，中文常用的还有GBK，gb2312-->
    <meta charset="UTF-8">
    <!--页面关键词-->
　　<meta name="keywords" content="软件咨询，软件开发，影视后期"/>
　　<!--页面描述-->
　　<meta name="description" content="软件开发，影视后期，我们可以快速的帮你提升职业技能水平">
　　<!--网页作者-->
　　<meta name="author" content="Mr.cai">
　　<!--搜索引擎抓取robots是一组使用逗号（，）分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。-->
　　<meta name="robots" content="noindex"/>
    <!--上面示例定义了此网页不被搜索引擎索引进数据库，但搜索引擎可以通过此网页的链接继续索引其它网页-->
    <meta name="robots" content="nofollow"/>
    <!--上面示例定义此网页被搜索引擎索引进数据库，但搜索引擎不可以通过此网页的链接继续索引其它网页-->
    <meta name="robots" content="none"/>
    <!--上面示例定义了此网页不被搜索引擎索引进数据库，且搜索引擎不可以通过此网页的链接继续索引其它网页-->
    <!--针对谷歌GOOGLEBOT使用robots-->
    <!--可以将name的属性只定义为GOOGLEBOT标识为谷歌搜索引擎。 使用元标记拦截或删除网页-->
    <meta name="googlebot" content="noindex, nofollow"/>
    <!--针对百度baiduspider使用robots-->
    <!--可以将name的属性只定义为baiduspider标识为百度搜索引擎。禁止搜索引擎收录的方法-->
    <meta name="baiduspider" content="noarchive"/>
　　<!--页面重定向和刷新-->
　　<meta http-equiv="refresh" content="0;url=http://www.baidu.com"/>
　　<!--禁止Chrome浏览器中自动提示翻译-->
　　<meta name="google" value="notranslate">
　　<!--禁止百度转码-->
　　<meta http-equiv="Cache-Control" content="no-siteapp">
　　<!--自定义标签：app版本号说明-->
　　<meta name="app-version"content="1.13.3">
    <title>meta</title>
</head>
<body>

</body>
</html>

元素

HTML文档由HTML元素定义，一个基本元素由“开始标签”，“元素内容”，“结束标签”构成

<开始标签> 元素内容 </结束标签>
HTML元素以开始标签起始 元素内容即开始标签和结束标签之间的内容 HTML元素以结束标签终结

块级标签和行级标签

HTML中，所有标签都是预定义的，也就是说所有的标签都有各自的特点属性，根据这些特点可将标签分为块级标签和行级标签两类

块级标签

块级标签编译后在浏览器中默认没有高度，其高度由其添加的内容决定，其宽度默认为屏幕宽度，也就是说块级标签默认占一行

行级标签

行级标签编译后在浏览器中默认没有宽度和高度，其宽高均有添加的内容决定，也就是说行级标签在其内容不满一行时不会换行

HTML常用标签

常用的块级标签