第一个页面
一 概念
# 第一个页面
## 一、基础模板
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个页面</title>
</head>
<body>
</body>
</html>
```
## 二、模板解读
* DOCTYPE：指定文档类型，规定html标签语法
* html：文档根标签，标注着文档(页面)的开始与结束
* head：文档头标签，可以引用脚步文件、指定样式表、书写代码逻辑块、提供元信息
* body：文档主体标签，包含文档所有文本与超文本内容
* title：文档tag标题标签，设置文档tag的标题内容
###### v_hint：html标签的lang属性值 en | zh（zh-cn）
## 三、其他核心模板标签
#### 1、meta（元标签）
```html
字符编码
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
SEO
<meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
<meta name="description" content="80字以内的一段话，与网站内容相关">
移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
```
#### 2、link（链接标签）
```html
外联样式表
<link rel="stylesheet" type="text/css" href="style.css" />
文档tag图标
<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
```
#### 3、style（样式标签）
```html
内联样式表
<style></style>
```
#### 4、script（脚本标签）
```html
<script type="text/javascript"></script>
```
###### v_test：设置简单的新浪模板
二 代码示范
<!-- 文档类型; 标签语法为h5 -->
<!-- h5语法特点 -->
<!--
1.不区分大小写
2.有很多系统标签,一般都具有语义
3.可以随意定义自定义标签
4.h5内容不保留空白字符(制表符)
5.提倡小写
-->
<!doctype html>
<!-- html:文档根标签 -->
<html>
<!-- html只有一儿一女:head,body,所以可以省略缩减 -->
<!-- html语法中没有明确规定缩减规则,但从美观可读性出发,开发者要严格遵循缩减 -->
<head>
<!-- 包含内容:样式表,脚本,元信息,内嵌代码块 -->
<!-- 字符编码 -->
<meta charset="utf-8" />
<!-- <meta http-equiv="content-type" content="text/html;charset=utf-8" /> -->
<!-- SEO -->
<meta name="keywords" content="培训,Python培训,IT培训,peixun" />
<meta name="description" content="老男孩皇家培训机构" />
<!-- 移动适配 -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<!-- tag图片 -->
<!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> -->
<link rel="shortcut icon" type="image/x-icon" href="icon.png">
<title>第一个页面</title>
</head>
<body>
<!-- 包含内容:几乎一切内容 -->
</body>
</html>
<!-- 以上为最简易页面模块html>head+body -->
<!-- 一个页面只存在一个标准模板 -->
<!-- doctype必须出现在第一行 -->
<!-- 特殊:如果没有书写模块,浏览器解析会按"自己心情"帮你添加模板 -->
