html
hypertext mark-up language
超文本标记语言
<!DOCTYPE html>
这是一个声明
doc 文件
type 类型
文件类型--html
<html lang="zh-CN>
</html>
成对出现
语言-中文zh-CN
<meta charset="utf-8"/>
这种是单行的标签
直接是< />
嵌套关系
<ul>
<li>
<a />
</li>
<li>
<a />
</li>
</ul>
这里就是一种ul嵌套li,里面再嵌套a标签的嵌套关系
开始开始开始
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
解释一下
head是用来设置html文档的相关属性
还有相关文件的导入
这些都放在head里面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
这里的meta标签是用来设置文档属性的
charset是设置编码格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是Alice</title>
</head>
<body>
</body>
</html>
这里的title是用来设置页面的标题的
还有body标签就是来放置页面的显示内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是Alice</title>
</head>
<body>
<p>My name is Alice</p>
</body>
</html>
p标签就是文本
这样就是一个基本的html文档了
其实我们可以快速创建基本代码
比如在WebStorm中
叹号!然后加tab键
就可以生成基本代码
!+tab
<!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>Document</title>
</head>
<body>
</body>
</html>
我们看一下
<meta name="viewport" //视窗的意思
content=" //内容
width=device-width, //宽度为设备屏幕宽度
user-scalable=no, //允许用户缩放=NO
initial-scale=1.0, //初始缩放值=1
maximum-scale=1.0, //最多缩放值=1
minimum-scale=1.0 //最小缩放值=1
">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
这条主要是针对IE浏览器的
因为ie浏览器bug很多
就有了这条设置
然后所有浏览器访问我们这个html页面的时候
都以最新版ie的效果来渲染