html
html
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由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开发,本质上就是编写一个.html格式的文档,最终通过浏览器执行该文档,一个html文档中包含三部分:
- HTML部分 HTML:
- hyper text markup language
hyper text:超文本,是指写在html文档中,并在网络上传输的 文字、图片、视频、音频
markup language:标记语言 。所谓标记:就是指由一对尖括号扩起来,当中具有特定英文单词的标识。标记的其他叫法:标签 元素
element。- html文档中只有两种类型的标记
- 单标记 :不能存放内容,多是一些功能性的标记
- 双标记 : 有开始有结束,主要功能是存放内容,可以是超文本, 也可以是其他标记
- CSS部分 CSS:cascading style sheet 层叠样式表,
用来对文档中的标签设置样式,从而改变超文本在浏览器上的渲染效果
- JS部分 JS:javaScript,
运行在浏览器端的脚本语言。平时我们看到网页,除了可以看以外,还可以处理一些用 户的交互行为,例如:鼠标的点击,键盘的控制等等。这些功能需要通过JS来完成
HTML文件结构
文档类型声明
- 写在html文档的第一行是文档中唯一个非标签字符,起文档说明作用,用来告知浏览器,当前文档是一 个支持html5标准的文档,不可省略,其中最重要的就是当前HTML文档遵循的语法标准。
html5文档声明
<!DOCTYPE html>
html4.01文档声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
根标签
- html标签,是html文档的根标签,所有的html文档都必须以html标签作为根标签,html标签中包含了 head标签和body标签
头部- head标签,是html文档的头部,用来存放文档的元信息,例如:文档的标题,文档的关键字,文档的描述,文档的作者,文档的样式表,文档的脚本等等
主体- body标签,是html文档的主体,用来存放文档的主要内容,例如:文档的标题,文档的段落,文档的图片,文档的表格,文档的链接等等
注释- 注释是一种特殊的标记,用来对文档中的内容进行说明,注释不会被浏览器解析,注释的内容不会被显示在浏览器中
HTML语法基本规则
- 根标签有且只能有一个
- 标签可以嵌套但不能交叉嵌套
- 注释不能嵌套
- 属性必须有值,值必须加引号,单引号或双引号均可
- 标签名不区分大小写但建议使用小写
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<!-- 这是注释 不会显示在页面上 -->
<h1>Hello World</h1>
<div class="box"></div>
</body>
</html>
.box {
width: 100px;
height: 100px;
background: #0f4224;
}