<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.text_out{ 200px; height: 100px; background-color: red; line-height: 100px; text-indent:2em; font-weight: bolder; float: right; display:inline-block}
.text{ 480px; height: 480px; background: url(img/banner1.jpg); }
.text_out1{background-color: red;}
</style>
</head>
<body>
<div class="text_out">罗马不是一日建成的</div>
<div class="text"></div>
<span style="text-indent:2em; font-weight: bolder; background-color: green; float: right; display:inline-block;">123456</span>
<b class="text_out1">songhao</b>
</body>
</html>
<!--
1.document--文档 。TYPE--类型 声明文档类型，是一个单标签
作用：浏览器打开的时候，告诉浏览器是什么文件
2.html 是一个根标签，双标签 超文本标记语言
3.head 是头标签，双标签
4.body 身体标签
5.title 标题标签
6.meta 设置标签 charset 用来设置编码格式 UTF-8 是汉语的意思
7.img 图像标签 用来引入图片 图片路径通过src来引入
8. background-image 通过 src引入图片， 图片路径 （Img/图片）
9. button 按键按钮
-->
<!--标签分类
1.块级元素 div ，默认占整行 宽度高度可设置，但是设置完还是占整行
2.行内块元素 img ,不默认占整行，宽度和高度由自身内容决定,但宽和高可设置
3.行内元素 b span 不默认占整行，宽度和高度由自身内容决定, 宽和高都不可设置
-->
<!--css样式引入
1.行内样式 就是把属性写进标签里面
2.内部样式 head标签引入 style
3.外部样式 CSS link rel="" href=""
-->
<!--属性（直接属性 ---间接属性）
1.width：宽度
2.weight:高度
3.background-color 背景色
4.font-size 字体大小
5.line-height:行高，一般值是1（容器大小）
6.text-indent:文本缩进
7.font-weight:bolder 字体加粗
8.float 浮动 left左 right 右
9.display 转换
10.color 字体颜色
11.class: 不唯一 .
id: 唯一 #
12.
-->