一、框架
html的结构很清晰，就跟人体的逻辑一样，人体分为头部和身体，所以每个html也要有head与body。
1.一般框架
由上图我们可以基本了解大致结构了，但是里面应该放些什么呢？
2.head框架
了解之前，我们先看一张图：
我们由图可知，<head>结构里可以放<meta>、<title>、<link>等等，那么这些又是什么呢？
常用框架如图：
2.1.1 meta
简单来说，meta就相当于浏览器的“操作说明书”，用来定义html的元数据（也就是页面本身信息），不会显示在页面中，只会被浏览器、其他WEB服务解析。
常用例子：字符编码（<meta charset="UTF-8" >）、网页自动刷新（<meta http-equiv="refresh" content="">）、网页语言（<meta http-equiv="content-language" content="zh-CN">）
2.1.2 title
title标签用来定义网页名，如图：
2.1.3 其他（style、link、script等）
- css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>登录</title> <style type="text/css"> #outside{ width: 95%; height:750px; border: 2px solid #1678BD; border-radius: 10px 10px 0px 0px; margin-left: 34px; margin-top: 20px; } #d1{ background-image: linear-gradient(to bottom right,#369AD6,#197BC0); border-radius: 8px 8px 0px 0px; height: 40px; padding-left: 30px; padding-top: 10px; font-size: 23px; color: #DAE2E9; } #d2 button{ background-color: #C86400; border-radius: 8px; color: white; width: 120px; height: 40px; border: 0px; font-size: 15px; margin-left: 170px; } .info{ margin-top: 50px; align-content: center; margin-left: 400px; } .info div{ margin-top: 20px; margin-left: 20px; } .info input{ height: 30px; width: 250px; } </style> </head>这一块我们后面再提，style标签表示样式，换句话说，就是给内容添加色彩，进行排版布局，以及添加动画（借助@keyframes）等操作
2.link
index.html：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>link示例</title> <!-- link：引入外部CSS，必须写在head里 --> <link rel="stylesheet" href="style.css"> </head> <body> <p>我是测试文字</p> </body> </html>style.css ：
p { color: blue; font-size: 20px; }也就是说，link可以将文件.css引入到我们需要的html中。
当然，link还有一个好玩的用法：
当link中rel=“icon”时，这时href地址指向图片时，会将此图片放进标签中。
3.script
跟link用法差不多，单独写则表示js脚本，能够完成一系列事件动作；如果后面接地址，则表示引入外部js文件：
