html笔记（一）html4+css2.0、css基础和属性、盒模型

最新推荐文章于 2023-01-31 20:00:59 发布

Start2019

最新推荐文章于 2023-01-31 20:00:59 发布

阅读量520

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css基础笔记

本文链接：https://blog.youkuaiyun.com/Start2019/article/details/100155005

html+css基础笔记专栏收录该内容

8 篇文章

订阅专栏

本文深入讲解HTML基本语法、常用标签及盒模型，涵盖CSS基础、选择器、相关属性和盒模型等内容，助您快速掌握前端开发核心技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

w3c 官网这里是 html4 的内容

大标题	小节
一、关于HTML	1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径
二、css基础	1. 表单元素 2. 创建样式表 3. css语法 4. css选择器
三、css的相关属性	1. 列表 li 独有的属性`list-style` 2. 边框属性`border` 3. overflow 4. 浮动 float 遇到的坑 5. 文本相关属性 6. 数字单词自动换行 7. 背景相关属性`background` 8. 常用图片格式 9. 定位属性`position` 10. 透明属性
四、盒模型	1. padding 2. margin
五、锚点和热点	1. 锚点 2. 热点

一、关于HTML

1. 基本语法

（1）命名规则： 字母必须以英文开头，名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符，尽量不要使用大写字母；
（2）标签：

双标记： <标记属性=“属性值” 属性=“属性值”></标记>
单标记：<标记属性=“属性值” />

（3）注意点：

写在 <> 中的第一个单词叫做标记，标签，元素。
标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在 "" 号内。
一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
空标记没有结束标签，用 / 代替。

（4）基本写法

<!-- head标签里面可以放<title>, <style>,<meta>, <link>, <script>, <noscript>, and <base>  -->
<!doctype html> <!--- 声明。告诉浏览器这是html5版本的写法 ---->
<html>
  <head> <!---页头、也叫“站头”，网站头部 --->
    <meta charset="UTF-8" /> <!---- 翻译国际编码。识别中文，不加这个会乱码 ----->
    <title></title> <!---- 网站名，中文名不合适 ---->
  </head>
  <body></body> <!--- 主体部分 --->
</html>

2. HTML常用标签

HTML标签的种类：块元素、行元素、行内块元素

（1）块状元素：天生能换行的元素；

<h1>文本标题</h1> 文本标题标签(h1-h6)，h1标签常作为网站logo的父标签，h2是新闻页中的大标题。
<p>段落</p> 段落标签
<br/> 强制换行标签
  空格网页实体
<hr/>水平线标签
<ul><li>无序</li><li>无序</li><li>无序</li></ul> 无序列表
<ol><li>有序</li><li>有序</li><li>有序</li></ol> 有序列表
<dl><dt>标题</dt><dd>内容</dd><dd>内容</dd></dl> 自定义列表

注意：①p标签 不能放“天生的块元素”;
②h标签 内不能放其他的 h标签，否则会父子变兄弟。

（2）行内元素：天生不能换行的元素；

<b></b> 加粗的标签
<i></i> 倾斜的标签
<u></u> 下划线标签
<strong></strong> 加重语气的加粗标签，强调比 b标签更重要
<em></em> 加重语气的倾斜标签，强调比 i标签更重要
<s></s> 删除线
<span></span> 文本标签
<a></a> 超链接标签
<del></del>

<!-- a标签中的两个重要属性 --->
<!-- href超链接属性，target="_blank"新窗口打开 -->
<a href="#" target="_blank"></a> <!-- 空链接,不跳转页面，但是点击会刷新页面 -->
<a href="./b.html" target="_blank"></a> <!-- 相对路径 -->
<a href="www.baidu.com" target="_blank"></a> <!-- 绝对路径 -->

（3）行内块元素：天生不能换行但能设置宽高的元素；

img 图片元素
表单元素

<!-- img标签中的重要属性 --->
<!-- src="图片路径"，title="标题属性"鼠标放图标上回显示“标题属性”的文字属性 -->
<!-- alt="替换文本"如果无法显示图像，浏览器将显示“替换文本”的文字内容 -->
<img src="图片路径" title="标题属性" alt="替换文本" />

<!-- 图片超链接 -->
<a href="#">
  <img src="图片路径" />
</a>

（4）表格元素

<table></table> 表格
<tr></tr> 表格行
<td></td> 表格列

<!-- table标签中的属性 --->
<!-- width="500"表格宽度，height="300"表格高度，border="1"表格边框 -->
<!-- bgcolor="red"表格背景颜色，bordercolor=""表格边框颜色，包括table边框和td边框 -->
<!-- cellspacing="10"单元格与单元格之间的距离（默认2px），cellpadding="10"单元格与内容之间的距离（原表格内文字默认靠左上下居中） -->
<table border="1"></table>

<!-- tr标签中的属性 --->
<!-- align="left/center/right" 水平对齐方式 -->
<tr align="left"></tr>

<!-- td标签中的属性 --->
<!-- colspan="2"合并列，rowspan="2"合并行 -->
<td colspan="2"></td>

合并规则：
合并列：合并n列，当前tr中少 n-1 个td。
合并行：合并n行，该td所在tr下面的 n-1 个 tr 中都要少1个td。

（5）块元素、行元素、行内块元素的区别

3. 相对路径和绝对路径

绝对路径就是写死的路径,缺点是换设备会出现路径找不到问题
相对路径就是灵活的路径,优点是不会因为设备更换出现路径问题,

（1）绝对路径： 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。
例如：C:\xyz\test.txt 代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个URL绝对路径。

（2）相对路径： 相对于某个基准目录的路径。包含Web的相对路径（HTML中的相对目录）。
例如：在Servlet中，"/“代表Web应用的根目录。物理路径的相对表示，例如：”./" 代表当前目录，"…/"代表上级目录。这种类似的表示，也是属于相对路径。

/表示源文件的根目录
./表示当前文件所在的目录(可以省略)
../表示当前文件所在的目录的上一级目录

二、css基础

css 层叠样式表，web 标准中的表现语音，目前推荐遵循的是 w3c 发布的 css3.0。css 样式有两部分组成：选择符（选择器）+声明（{属性：属性值}）。

1. 表单

<form></form>

（1）form 标签的属性：

name=“定义表单名”
method=“get/post”
action=“请求地址/跳转地址”

（2）其他表单元素：

<textarea>文本内容</textarea> 多行文本输入框
<select><option>下拉框内容1</option><option>下拉内容2</option></select> 下拉框，其中 selected="selected"表示默认选中，写在"" 标签中；
<input type="表单元素类型" value="默认值" /> 表单元素

<!-- type的值可以是 -->
text 单行文本输入框，常与 placeholder 属性（提示信息）一起使用
password 面膜输入框
radio 单选框，checked="checked"默认选中，常于 name 属性一起使用
checkbod 复选框，checked="checked"默认选中
submit 提交按钮
reset 重置按钮
button 自定义按钮

<input type="radio" name="sex" value="传给后台的值" checked="checked" />男
<input type="radio" name="sex" value="传给后台的值"/>女
<input type="radio" name="sex" value="传给后台的值"/>保密

（3）form 中 name 的作用

name 属性用于对提交到服务器后的表单数据进行标识；
或者在客户端通过 JavaScript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

（4）form 中的 method = "get/post"
method,传输方式，默认 get，常用 get 的传输方式。两者的区别：

get 通过地址栏传输，会将信息拼接到地址栏上。而 post 不会讲信息拼接到地址栏上；
post 的传输方式比 get 安全；
post 能传输大量信息；
get 传输速度比 post 快；( get 没有加密 )。

2. 创建样式表

（1）内联样式表：<style type="text/css">css语法</style>，最好写在<head></head>中；

（2）外部样式表：<link rel="stylesheet" type="text/css" href="路径" /> 和 @import url(路径);；
顶部部小标签：<link rel="icon" href="<%= BASE_URL %>favicon.ico">；<%= BASE_URL %> 可以省略，主要作用是将图片编译成 base64；

区别	link	import
1. 从属关系	link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。	@import是 CSS 提供的语法规则，只有导入样式表（加载CSS）的作用。
2. 加载顺序	当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载。	而@import引用的CSS 会等到页面全部被下载完再被加载，所以有时候浏览@import加载CSS的页面时开始会没有样式。
3. 兼容性的差别	link标签作为 HTML 元素，不存在兼容性问题。	@import是CSS2.1提出的，所以老的浏览器不支持，@import只t在IE5以上的才能识别。
4. 使用dom控制样式时的差别	当使用javascript控制dom去改变样式的时候，只能使用link标签。	@import不是 dom 可以控制的。
5. 权重区别	link引入的样式权重大于@import引入的样式。

（3）内联样式表（嵌入式、行间、行内）：<div style=“height:100px;background:red;” ></div>

内联样式表的优先级别（权重）最高；
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。

3. css语法

选择符(或选择器){属性:属性值;属性:属性值;} 例如：div{width:200px;height:100px;background:red; }
（1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
（2）属性必须放在花括号中，属性与属性值用冒号连接。
（3）每条声明用分号结束。
（4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序；
（5）在书写样式过程中，空格、换行等操作不影响属性显示。

注释 html 代码： 
注释 css 代码： /*注释内容*/

4. css选择器的优先级（权重）

选择器就是运用不同手段来选择特定元素的方法。
内联样式表的权重最高：1000 ，继承样式的权重为：0000。
（1）id 选择符 0100
（2）class 选择符 0010
（3）伪类选择符 0010
（4）元素选择符（类型选择符）0001
（5）后代选择符后代选择符的权重之和
（6）群组选择符
（7）通配符
选择符叠加写法：div.box.red。
例如：#box .list.list li{} 权重121，div#box .list li 权重112。

/* 可以缺少，但是不能改变位置，因为:hover和:active是同时触发的，后书写的会覆盖前面写的css*/
  a:link{}/*初始状态，没有点击过的状态,只有 a 标签有该伪类选择符*/
  a:visited{}/*被访问过后的状态,只有 a 标签有该伪类选择符*/
  a:hover{}/*鼠标滑过时的状态*/
  a:active{}/*鼠标按下不放的状态*/

三、css的相关属性

1. 列表 li 独有的属性 `list-style`

复合写法：list-style:square inside url('/i/arrow.gif');，可以不设置其中的某个值。
list-style: none 表示没有列表符号。

（1） list-style-type 设置列表符号。属性值： disc(实心圆) 、 circle(空心圆) 、 square(实心方块) 、 none(去掉列表符号)；

（2）list-style-image:url(路径)；自定义图片列表符号；

（3）list-style-position 定义符号所在位置。outside(默认外边) 、 inside(里边)
常用 list-style-type:none; 因为列表符号在各浏览器显示无法统一，并且无法随心所欲的控制符号与文本内容之间的距离。

2. 边框属性 `border`

复合写法： border:1px solid #000;

（1）边框线型：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）；
点线的大小总是 1px ,而且各个浏览器大小都不一样

（2）单边框设置：border-left、border-right、border-top、border-bottom；

（3）单边框其他属性：border-方向-width 设置单边边框宽度、border-方向-style 设置单边边框线型、border-方向-color 设置单边边框颜色；

（4）用边框属性写出下三角形：

哪个方向的三角形，就将哪个方向的边框设置 border-方向: 大小 solid 颜色，相邻的边框颜色设置成白色（消失色），对边的边框设置为 0；

<style>
  div{
	width:0; /*块元素不设置宽度=父元素宽度*/
	height:0; /*可省略*/
	border-top:20px solid #00f;
	border-left:20px solid #fff;
	border-right:20px solid #fff;
	border-bottom: 0;
  }
</style>

补充：outline:1px solid #000; 书写input的外框；

3. overflow

（1）overflow 的属性：

overflow:visible;/*默认值*/
overflow:hidden;/*溢出隐藏*/
overflow：scroll;/*滚动*/
overflow:auto;/*自动出现滚动条*/

（2）隐藏滚动条：div::-webkit-scrollbar { display: none; }，兼容所有浏览器的超出部分滚动不显示滚动条，div 为出现滚动条的元素。

（3）单行文本溢出隐藏显示省略号：

width: 200px; //文本超出多少隐藏
white-space: nowrap; //强制不换行
overflow: hidden; //溢出隐藏
text-overflow: ellipsis; //文本溢出隐藏时出现省略号

4. 浮动 float 遇到的坑

（1）float 浮动属性：

float: none; //默认不浮动
float: left; //左浮动
float: right; //右浮动

（2）浮动的坑（特点）：

通常情况下，如两个兄弟元素设置左右浮动，我们需要设置父框高度，如果不设置，就会造成“高度塌陷”

高度塌陷：父元素撑不开子元素内容；
不占文档流；
父元素高度不够时，浮动的子元素会影响下面的元素；
当浮动元素的父元素高度不够时，会影响到与该父元素相邻元素中的浮动元素；
浮动元素不能与文本元素重合在一起，它会把文字挤出去；
浮动元素会把所有的元素变成一类元素，即浮动元素，可以设置宽、高、背景色等；

（3）预防浮动出现：

要浮动一窝都浮动（兄弟元素都浮动）；
父元素必须设置足够的高度；

5. 文本相关属性

文本相关的属性会被继承，a标签 除外，因为 a标签 有一个默认的伪类效果。

网页字体大小通常为： 12px 或 14px ；
单位：px 像素，pt 点， em 倍距； 3pt = 4px；
em 是根据父元素的字体大小来决定多小像素；
字体大小默认 16px，1em=16px（文字的一倍大小，一倍距就是一个文字的大小）

复合写法： font:700 italik 12px/2 "华文琥珀"; 最简： font:字体大小 "字体类型";如果没有设置到的视为缺省值还原默认。
（1）font-size: 数字px; 设置文本大小；

（2）font-style: normal（正常）/italik（斜体）; 设置文本斜体；

（3）font-weight: normal（正常100-500）/bold（加粗600-900） 设置文本粗体；

（4）font-family: "字体1","字体2" 可以设置多个字体，如果浏览器不支持第一个字体，则会尝试下一个。自定义字体通常默认为“宋体”；

（5）text-align: left/center/right 水平位置；

（6）vertical-align: top/middle/bottom 针对图片使用，常写在图片上；

（7）line-height: 数字px; 行高；

（8）letter-spacing: value; 字间距：控制英文字母和汉字的字距；

（9）work-spacing: value; 词间距：控制英文单词词距；（只对单词生效）

（10）text-decoration: none（没有修饰）/underline（添加下划线）/overline（上划线）/line-through（删除线） 文本修饰；

（11）text-indent: 2em ：首行缩进；

6. 数字单词自动换行

一般字母和数字没有空格不会换行，但中文会以文字为单位自动换行。
word-wrap: normal; 默认；
word-wrap: break-word; 让字母和数字没有空格的情况下自动换行；
white-space: nowrap; 文本强制不换行；

7. 背景相关属性`background`

复合写法： background:#000 url(图片路径) no-repeat top center;
可以不设置其中的某个值，比如：background: #f00;。

（1）background-color : 背景色
（2）background-image : url(图片路径) 背景图片
（3）background-repeat : 背景图片平铺属性 repeat（默认平铺）、repeat-x（横向平铺）、repeat-y（纵向平铺）、no-repeat（不平铺）
（4）background-position : left/right/center(水平) top/bottom/center(垂直)

注意：如果只写一个值，另外一个值会默认为居中，还可以书写数值，数值可以为负值。
background-position: 1px -2px; 表示往下平移1px，像左平移2px；

8. 常用图片格式

常用格式	.jpg	.png	.gif
区别	图片有损质量，但肉眼难分辨，用来减小图片大小，图片非镂空使用。	图片有损质量，但肉眼分辨不出，用来减小图片大小，图片镂空使用。（ps：打开图片，去除背景，虚框选中delete，png-24格式，保存）	图片有损质量严重，肉眼容易分辨，常用做动图。（ps截图：ctrl+c复制 — ctrl+n新建 — 回车— ctrl+v粘贴 — ctrl+alt+shift+s保存）

9. 定位属性`position`

（1）position 的属性值：

position：只有定位元素可以使用 left、right、top、bottom、z-index；

static：默认值。所有元素默认的定位属性就是是 static ，一般不用；
absolute：绝对定位（完全脱离文档流）。
relative : 相对定位（占文档流）。
fixed : 固定定位（完全脱离文档流）。

定位属性`position`属性值	`static`	`relative`	`absolute`	`fixed`
称呼	默认不定位	相对定位	绝对定位	固定定位
区别	没有定位，元素出现在正常的流中.	根据自身初始所在位置来定位；不破坏原有元素的特性。	自动向上检索，根据最近的定位元素作为父元素，如果检索不到就以 html 来定位。	始终根据 html 来定位；
是否占文档流	占文档流	占文档流	不占文档流，完全脱离文档流	不占文档流，完全脱离文档流
特点或用法		特点：因为相对定位占文档流，在没有设置 `left`、`top` 属性下的效果和`static` 默认是一样的。	用法：①向上检索定位的元素作为父框； ②多个定位元素使用 `z-index` 来定义层级。	特点：位置不随着滚动条滚动而发生变化。
适用场合		微调距离时可以用此属性。可以使用`left`，`top`，`right`，`bottom`等。	通常用于做重叠效果。	网页遮罩。

（2）z-index 层级

只有设置定位元素才能设置 z-index（默认值为 auto，几乎和 0 差不多）。在兄弟关系中，z-index 值越大的显示在上面。

z-index: auto; 只有在子元素也有定位的情况下出现。
在这里插入图片描述

<style>
  p{width: 40px;height:40px;background: #ff9;position:absolute;}
  .auto4{background: #999; position:absolute;left: 20px;top: 20px;z-index: 9;}
  
  .auto1{background: #f99;position:absolute;}
  .auto2{background: #f99;position:absolute; z-index:10}   
  .auto3{background: #f99; position:absolute;z-index: auto;/*这里的z-index可省略*/}
  .p3{position:absolute;z-index: 20;}
<style>
<body>
<!-- 第一种情况 -->
  <div class="box">
    <div class="auto1">
      <p>ppp</p>
    </div>
    <div class="auto4">auto4</div>
  </div>
  
  <!-- 第二种情况 -->
  <div class="box">
    <div class="auto2">
      <p class="p2">ppp</p>
    </div>
    <div class="auto4">auto4</div>
  </div>

  <!-- 第三种情况 -->
  <div class="box">
    <div class="auto3"> <!-- z-index:auto; -->
      <p class="p3">ppp</p> <!--定位元素中的子元素也出现定位情况 -->
    </div>
    <div class="auto4">auto4</div>
  </div>
</body>

10. 透明属性

opacity:0.5; 值0-1，从透明-不。0.5表示半透明，ie9以下版本无效。
filter:alpha(opacity=50); 值0-100，非ie浏览器无效，兼容ie678。

（1）缺点：给父元素设置透明子元素也会变透明。

（2）解决方法（想背景透明，子元素不透明）：

①做2个层叠关系的定位元素，将父子元素变成兄弟元素；
②给父元素设置透明的背景图。

四、盒模型

盒模型的组成分为：外边距、边框、内边距、内容区；
盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）；

在这里插入图片描述

1. padding：

（1）说明：

用来调整子元素在父元素中的位置关系；padding 属性需要添加在 父元素 上。
padding值 是额外加在元素原有大小之上的，若想保证元素大小不变，需从元素宽或高上减掉添加的 padding 属性值；

（2）padding 属性值

{padding: 10px 20px 30px 50px;} 4个值，表示：上右下左；
{padding: 10px 20px 30px;} 3个值，表示：上左右下；
{padding: 10px 20px;} 2个值，表示：上下左右；
{padding: 20px;} 1个值，表示：4个方向都是 20px；

（3）可单独设置某一个方向的 padding，类似 border。

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

2. margin：

margin 是用来调整兄弟元素之间的距离； 它的属性值和单边设置写法与padding相同。
margin 的坑：
（1）margin 上下会重叠（左右没事）；

<style >
  .box1{width: 100px;height:100px;background:pink;margin-bottom:30px;}
  .box2{width: 100px;height:100px;background:green;margin-top:50px;}
</style>
    
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

在这里插入图片描述
解决办法 ：设置单边就行。

（2）第一个块的子元素设置 margin-top 会无限向父元素传递，直到不是第一个子元素。

<style >
  .fruits{width: 150px;height:150px;background:pink; }
  .fruits .apple{width: 50px; height: 50px; background: red;margin-top:40px;}
  .fruits .banana{width: 50px; height: 50px; background: yellow;margin-top:20px;}  
  
  .foods{width: 150px;height:150px;background:green;margin-top:30px;} </style>
<body>
  <div class="fruits">
    <div class="apple">苹果</div>
    <div class="banana">香蕉</div>
  </div>
  <div class="foods">
    <div class="oil"></div>
    <div class="salt"></div>
  </div>
</body>

在这里插入图片描述 解决办法 ：

① 给父元素设置 border-top：1px; 或者 padding-top: 1px; 或者 float: left; 或者 overflow: hidden; ；
② 给子元素设置 float:left; ；
③ 给父元素添加伪类元素：父元素:before{content:""; display: table;}。
因为 :before 相当于给第一个子元素之前添加一个类似 span标签 ，所以这个块元素就变成了第二个子元素。

overflow:hidden; 可以解决高度塌陷问题，可以解决 margin-top 向父元素传递效果的问题。

（3）给行元素设置上下盒模型，会穿过其他物体，左右没事。

<style>
  .box1{width: 200px;height:200px;background:#ff0;}
  span{background:#f99;padding:20px;margin:40px}
  .box2{width: 200px;height:200px;background:#000;}
</style>
<body>
  <div class="box1"></div>
  <span>1234342</span>
  <div class="box2"></div>
</body>

在这里插入图片描述
解决办法 ：

① 不要给行元素设置上下盒模型；
② 给这个行元素转换成块元素：display: block;

五、热点和锚点

1. 锚点

锚点是网页制作中超级链接的一种，在网页内部进行跳转。

（1）语法：

<style>
  P{position:fixed;设置高;right:10px;top:0;bottom:0;margin:auto;}
  P a{display:block;}
</style>

<a href="#id名"></a>
<div id="id名"></div>

<!-- 或者 -->
<a href=".class名"></a>
<div class="class名"></div>

（2）示例：
点击锚点链接进行跳转时，地址栏也会有所改变。如果想要跳转到页面的某个内容区域，可以在地址上加上锚点。

<style>
  *{margin:0; padding:0;}
  div{height: 500px;}
  #box1{background: #99f;}
  #box2{background: #9f9;}
  #box3{background: #f99;}
  #box4{background: #f9f;}
  #box5{background: #ff9;}
  #box6{background: #9ff;}
  #box7{background: #f80;}
  #box8{background: #90f;}

  p{ position: fixed; height: 150px; left:10px; top:0; bottom:0; right: 0;margin: auto;}
  a{display: block; height: 16px; width: 16px; color:#fff;padding: 10px;margin-top: 2px;background:#000;}
</style>
<body>
  <p>
    <a href="#box1">F1</a>
    <a href="#box2">F2</a>
    <a href="#box3">F3</a>
    <a href="#box4">F4</a>
    <a href="#box5">F5</a>
    <a href="#box6">F6</a>
    <a href="#box7">F7</a>
    <a href="#box8">F8</a>
  </p>

  <div id="box1">奢侈品</div>
  <div id="box2">精品店</div>
  <div id="box3">卖女鞋</div>
  <div id="box4">卖女装</div>
  <div id="box5">卖童装</div>
  <div id="box6">卖男装</div>
  <div id="box7">美食城</div>
  <div id="box8">电影院</div>
</body>