## HTML基本概念
HTML 全称为 HyperText Markup Language,译为超文本标记语言。
HTML 不是一种编程语言,是一种描述性的标记语言。
作用:HTML是负责描述文档语义的语言。
所谓的超文本,有两层含义:
(1)图片、音频、视频、动画、多媒体等内容,成为超文本,因为它们超出了文本的限制。
(2)不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件进行连接。即:超级链接文本。
HTML 不是一种编程语言,是一种描述性的标记语言。这主要有两层含义:
(1)标记语言是一套标记标签。比如:标签<a>
表示超链接、标签<img>
表示图片、标签<h1>
表示一级标题等等,它们都是属于 HTML 标签。
(2)编程语言是有编译过程的,而标记语言没有编译过程,HTML标签是直接由浏览器解析执行。
HTML 格式的文件是一个纯本文文件(就是用txt文件改名而成),用一些标签来描述语义,这些标签在浏览器页面上是无法直观看到的,所以称之为“超文本标记语言”。
比如,面试的时候问你,<h1>
标签有什么作用?
正确答案:给文本增加主标题的语义。
错误答案:给文字加粗、加黑、变大。
HTML专有名词
- 网页 :由各种标记组成的一个页面就叫网页。
- 主页(首页) : 一个网站的起始页面或者导航页面。
- 标记: 比如
<p>
称为开始标记 ,</p>
称为结束标记,也叫标签。每个标签都规定好了特殊的含义。 - 元素:比如
<p>
内容</p>
称为元素. - 属性:给每一个标签所做的辅助信息。
- XHTML:符合XML语法标准的HTML。
- DHTML:dynamic,动态的。javascript + css + html合起来的页面就是一个 DHTML。
- HTTP:超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP:邮件传输协议,FTP:文件传输协议。
最简单的网页
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>我是三级标题</h3>
<img scr="" alt="">
<a href="http://www.jd.com">我是超链接</a>
</body>
</html>
效果
确实很有成就感(啊这你是没写过代码吗)
HTML结构
一般标签为双边标记 例如<div>
和</div>
属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。
标签名 | 定义 | 说明 |
---|---|---|
<html></html> | HTML标签 | 页面中最大的标签 根标签 |
<head></head> | 文档的头部 | 设置title |
<title></title> | 文档的标题 | 页面标题 |
<body></body> | 主体 | 页面基本内容 |
文档声明头
第一行以<!DOCTYPE ……>
开头,即DTD,声明使用哪种HTML规范,大规范包括普通和XHTML两种,每种大规范里有Strict、Transitional、Frameset三种
在HTML5中,统一为<!DOCTYPE html>
下面的<html lang="en">
表示页面标准语言
头标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="厉害很厉害" />
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
<title>Document</title>
</head>
<body>
</body>
</html>
head标签里包含页面配置 即字符集 关键词 页面描述 页面标题 IE适配 视口 iphone小图标等等
常见标签有
<title>
网页标题
<base>
为页面上的所有连接规定默认地址或默认目标
<meta>
提供页面基本信息
<>
(1)字符集
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
用meta标签的charset定义,表明文档的编码方式
(2)视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这一行表明视口宽度等于屏幕宽度
(3)关键字
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
搜索引擎利用关键字进行搜索
(4)页面描述
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
还有一种meta标签比较重要:
<meta http-equiv="refresh" content="3;http://www.baidu.com">
指在3s之后跳转至某个网页
body标签
<body>
标签的属性包括:
- bgcolor 网页背景颜色
- background 网页背景图片
- text 文本颜色
- leftmargin 网页左边距
- topmargin 上边距
- rightmargin 右边距
- bottommargin 下边距
链接还有一些特殊属性
<body> link="red" alink="blue" vlink="green"
<a href="#">超链接</a>
<br>
呵呵
</body>
其中,link指显示的颜色,alink指鼠标点击并还未松开时的颜色,vlink指点击完成后显示的颜色