html介绍
什么是HTML
- 超文本标记语言（Hyper Text Markup Language）
- 不是一种编程语言，而是一种标记语言
- html构成了网页的内容
什么是标记语言？
- 标记语言是一套标记标签
- html使用标记标签来描述网页（内容）
html标签
- 由尖括号包围的关键词，如： \<html>, \<body>, \<a>, \<q> 等
- 一般都是成对出现，如\<p>\</p>；也有特殊情况，如<br/>
- 成对标签的第一个叫开始（头）标签，第二个标签叫结束（尾）标签。也可以叫开放标签和闭合标签
网页
- 网页 = html文档
- html文档 = html文档 + 标签内的内容
DOCTYPE文档类型
<!DOCTYPE>文档类型
- 不是HTML标签，写在最前面
- 告诉浏览器关于页面使用哪个HTML版本进行编写的指令
- 浏览器根据使用html版本（规则）来正确地显示内容
常用<!DOCTYPE html>文档类型
- HTML 5：<!DOCTYPE html>
- HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"> - HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">html注释
HTML注释
- 语法：<!-- ... -->
- 对代码进行解释，不会显示在浏览器中
举例
<!-- 注释内容 -->html结构
HTML结构
由头部和身体构成
<html>
<head></head>
<body></body>
</html>头部head
- 包含网页标题、描述、关键词、引用的样式文件、引用的脚本文件等
身体body
- 包含网页所有显示的内容、引用的脚本文件等
title标签
<title><title/>
- 网页标题，会显示在浏览器的标题栏
- title是head标签中唯一要包含的东西
link标签
<link/>
- 必须置于head里
- 定义文档与外部资源的关系。比如：链接样式表，引入样式文件
<link/>属性
- href属性：被连接文档的地址
- rel属性：当前文档与被连接文档的关系
- type属性：规定被连接文档的类型
- media属性：被连接的文档显示在什么设备上
<html> <head> <title>test a page</title> <link rel="stylesheet" type="text/css" href="https://static5.51cto.com/51cto/cms/homepage/2015/css/layout.css"> </head> <body> this is a test page! </body> </html>
设置地址栏图片
方法1： favicon.ico放置在网站的根目录
方法2： 放在head内，使用link标签引入
<link rel="shortcut icon" href="http://e.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg" type="image/x-icon">base标签
<base/>
- 必须置于head里
- href属性：定义默认链接地址
-
target属性：定义默认打开链接的方式（当前页面打开还是新标签打开）
这个就好比设置物理路径 ，以方便使用相对路径。比如:<head> <base href="http://mystation/web/" /> <base target="_blank" /> </head>
<body>
<img src="1.gif" />
</body>
# meta标签
## <meta/>
1. 必须置于head里
2. 提供有关页面的元信息，其属性定义了与文档相关联的名称/值对
## <meta/>的属性
**名称（三选一）**
1. **http-equiv：** 把content属性关联到HTTP头部
2. **name：** 把content属性关联到一个名称
3. **scheme：** 定义用于翻译content属性值的格式
**值（必须）**
- **content**
## 举个例子<meta http-equiv="expires" content="31 Dec 2018">
就会看到返回的HTML http头部包含信息expires:31 Dec 2015
# meta标签中的http-equiv属性
## http-equiv属性
**常见的值：**
- **content-type** 内容类型
- expires 过期时间
- refresh 页面刷新
- set-cookie 设定cookie
- **X-UA-Compatible** 针对IE，设置浏览器优先使用什么模式来渲染页面
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Refresh" content="5;url=https://www.baidu.com" />