① 、html：超文本标记语言 标签
② 、<!DOCTYPE html> ：声明文件的类型是html的文档结构
③ 、<html></html>： 网页的开始和网页的结束
④ 、<head></head>： 网页的头部
⑤ 、<title></title>： 网页的名字
⑥ 、<meta charset="utf-8">：声明网页的字符编码是utf-8（国际通用字符编码） 翻译
⑦ 、<html lang="en">：指定html 语言种类
最常见的2个：
- en定义语言为英语
- zh-CN定义语言为中文
⑧ 、<body></body>：网页的主体部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标题</title>
</head>
<body>
</body>
</html>
h1-h6:标题标签
p：段落标签
strong：加粗标签
em：斜体标签
hr：水平线标签
br：换行标签
a：超链接标签
-
href：超链接的地址 -
href属性：用于指定链接目标的url地址 -
target属性：用于指定链接页面的打开方式 _blank _self - 锚点定位 :
<a href="#two"> - 语法：
<a href="http://www.baidu.com">点击我跳转到百度去</a>
img:图片标签
-
src：图片的地址 -
width：图片的宽度 -
height：图片的高度 - 语法：
<img src="img/2.jpg" width="200" height="400"/>
input：表单的控件
type：表单的类型text：文本框password：密码框语法：
姓名：<input type="text"/>
密码：<input type="password" />
button：按钮标签
- 语法：
<button>注册</button>
<input type="button"/>
一.css的写法：
html:超文本标记语言
css:层叠样式表
1.在head里面写一个style标签
<head>
<style>
</style>
</head>
style：风格样式
2.告诉style给谁装修，在style之间选中你要装修的标签
3.在大括号之间去进行装修
<style>
.top{
}
</style>
二.选择器
- 可以选中页面当中的标签来做样式的
1.直接拿标签的名字来当选择器，标签选择器
2.在开始标签里面写一个class="类名" 这种选择器叫做类选择器
font-size：字体大小 单位px 像素
color:字体颜色
font-size：字体大小
background-color:背景颜色
width：元素的宽
height：元素的高
font-family:字体的类型
text-align：center;元素的内容居中
font-weight：字体的粗细
bold：粗体normal：还原标准的字体text-decoration: none;去除超链接下划线
line-height:行高，元素多高，行高设多少里面的内容就会垂直居中
ul li
-
list-style: none;去除列表前面的小圆点
list-style-image:url(img/tb.gif);给列表前面的小圆点换成图片
伪类
- 当鼠标放上去以后所发生的效果
a:hover{
color: red;
font-size: 30px;
}
元素分组
在页面当中分为以下几种元素
1.块级元素 h1-h6 ul li p ....
-不管元素里面有多少内容，它都会独自占据一行
-宽高 有效
2.行内元素 a em strong input img....
-元素里面有多少内容，它就占据多大地方
-宽高无效
3.display：
inline：将元素转行成行内元素 宽高无效，不会占一行
block：将元素转行成块级元素 宽高有效，会占一行
inline-block：将元素转行成行内块元素 宽高有效，不会占一行
div：没有语义化的块级元素 盒子
--span：没有语义化的行内元素
边框：
border:5px solid blue; 同时设置四条边
border:边框的粗细 边框的类型 边框的颜色;
常用类型：solid(实线) dashed(虚线)dotted(点点) none(没有)`
left：左边
right：右边
top：上边
bottom：下边
center：中间
border-top : 5px solid blue; 设置某一条边
border: 5px solid red ;
border-right: 10px dashed blue;
border-left: none;
