网页设计备课笔记20101201 - 副本.doc

网页设计备课教案一、制作一个网站的基本步骤注册域名购买空间设计网站发布网站域名可分为不同级别，包括顶级域名、二级域名等。顶级域名国际顶级域名：例如表示工商企业的 .com，表示网络提供商的.net，表示非盈利组织的.org等国家顶级域名：按照国家的不同分配不同后缀，例如中国是cn，美国是us，日本是jp等二、基础概念解释1、什么是超文本（hypertext）？名词解释：超越普通文本文件的文本文件。其最明显的特点是含有链接。历史由来：1965年TedNelson在计算机上处理文本文件时想了一种把文本中遇到的相关文本组织在一起的方法，让计算机能够响应人的思维以及能够方便地获取所需要的信息。他为这种方法杜撰了一个词，称为超文本(hypertext)。超文本应用：WWW上的每个网页都对应一个文件。我们浏览一个页面，要先把页面所对应的文件从提供这个文件的计算机里，通过Internet传送到我们自己的计算机中，再由WWW浏览器翻译成为我们见到的有文字、有图形甚至有声音的页面。这些页面对应的文件不再是普通的“文本文件”，文件中除包含文字信息外，还包括了一些具体的链接。这些包含链接的文件被称为超文本文件。和普通文本相比：普通文本是线性方式排布，超文本通过链接方式呈现非线性排布。超文本文件中多了一些对文件内容的注释，这些注释表明了当前文字显示的位置、颜色等信息，更重要的是，在有些注释中包含了对用户计算机应做出何种反应的说明，这些注释的内容经过浏览器的翻译后就成了不同的操作。HTML语言：为了使各种不同类型的WWW服务器都能正确地认识和执行，超文本文件要遵从一个严格的标准，这个标准就是超文本标识语言(HTML)。我们也可以利用这种语言来编写超文本文件，在Internet上制作自己的WWW的主页。l HTML 指超文本标签语言。 l HTML 文件是包含一些标签的文本文件。 l 这些标签告诉 WEB 浏览器如何显示页面。 l HTML 文件必须使用 htm 或者 html 作为文件扩展名。 l HTML 文件可以通过简单的文本编辑器来创建。 附加说明：超文本文件的概念出现在多媒体技术迅速发展之前，现在随着多媒体技术应用的日益广泛，超文本应该改叫“超多媒体”更加合适，链接的内容已经从原来文本中的一个词或词组，发展到现在一幅图象或是图象的一部分，通过链接得到的内容也更加广泛，可以是地球另一端的某台计算机上的图片、声音、音乐或者电影。但不管叫超文本还是叫做超多媒体，WWW上各网页都是通过链接来完成相互间的访问。而要使访问正常进行，必须使这些链接能够正确地指向所要访问的网页。这些工作是通过统一资源定位器(URL)来实现的。 URL：网页地址。n 统一资源命名方案主要是通过采用统一资源定位符（Uniform Resource Locator）的形式与外界进行联系的。 n URL用来表示网络资源的地址，所以俗称网址。其主要的组成部分（4部分）：网络协议、域地址、文件夹、网页名称。 how：/who/where/what 协议：/主机.域名（：端口）/路径/文件名 例：n Web专有的协议是超文本传输协议（http），凡是以“http：/www”开头的URL都可以认为是一个站点的网址。 2、什么是WEB？web本意是蜘蛛网和网的意思。万维网（亦作“Web”、“WWW”、“W3”，英文全称为“World Wide Web”），是一个由许多互相链接的超文本文档组成的系统，通过互联网访问。 在这个系统中，每个有用的事物，称为一样资源；并且由一个全域统一资源标识符（URI）标识；这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给使用者，而后者通过点击链接来获得资源。万维网联盟（World Wide Web Consortium，简称W3C），又称W3C理事会。1994年10月在麻省理工学院（MIT）计算机科学实验室成立。万维网联盟的建立者是万维网的发明者蒂姆伯纳斯-李。3、什么是HTTP协议？超文本传输协议（HTTP）Hypertext Transfer Protocol超文本在互联网上的传输协议。1990年，科学家制定了HTTP协议(HypertextTransferProtocol，超文本传输协议) ，HTTP协议是用于从WWW服务器传输超文本到本地浏览器的传送协议。HTTP在Web的客户程序和服务器程序中得以实现。运行在不同端系统上的客户程序和服务器程序通过交换HTTP消息彼此交流。HTTP定义这些消息的结构以及客户和服务器如何交换这些消息。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。网页设计HTMLCSSJavascript 三、HTML标记语言（超文本标记语言）定义：HTML的英文全称是Hyper Text Markup Language，中文通常称作超文本标签语言或超文本标记语言，HTML是Internet上用于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿多彩的超媒体文件，通过HTTP通讯协议，使得HTML文件可以在全球互联网（World Wide Web）上进行跨平台的文件交换。作用：制定了web语言交流标准，统一了页面表达风格特点：1. HTML 指的是超文本标记语言 (Hyper Text Markup Language) 2. HTML 不是一种编程语言，而是一种标记语言 (markup language) 3. 标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页4. 是静态解释语言（静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。） 5. 不区分大小写6. HTML 标签一般是成对出现的，比如 和 7. HTML 标签被 符号包围，比如 8. 始标签内可以含有属性,属性都写在起始标签内1、 静态基本结构 标识文档的开始。/html标识文档的结束，必须一块使用。htmlhead/headbody.文件内容./body/html上面的表示是一段最基本的HTML标识，任何HTML文档都是由一个开始和标记结尾的，然后包括和2个部分，其中部分是由标签开始和标签结尾，部分也是由标签开始和标签结尾。2、 文件头部内的标签HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。另外，搜索引擎如google,yahoo,baidu等也会查找你网页中的head信息。为了让搜索引擎能够收录你的网页，你也要填写适当的head信息。(网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。1.文件标题：title./title一对标签2.文件更新：meta标签【1】定义编辑工具【2】设定关键字【3】设定描述【4】设定作者【5】设定字符集【6】设定自动刷新【7】设定自动跳转【8】设定专场效果【9】设定禁用缓存【10】设定有效期限【11】设定建立网站的日期【12】说明 版权【13】记载联系人的邮箱【14】限制搜索方式案例：.10秒后自动更新一次.10秒後自动连结到另一文件-这是介绍html的网站.-关键字.-介绍作者6.-页面字体为楷体3、 链接：link标签用链接(link)可以建立和外部文件的链接。常用的是对CSS外部样式表(external style sheet)的链接。示例代码如下：4、 基底网址标记basebase href=放置文件的主机之URL5、 基底字体颜色大小： 6、 样式：style用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下： body background-color:white; color:black; h1 font: 18pt arial bold;7.脚本内容：script document,write(3+3); 7、 主体内的版面常用标签是Html文档的主体部分，在此标志对之间可包含、等等众多的标志，它们所定义的内容会显示出来。一、 body标签body指令的属性:【1】背景颜色:bgcolor body bgcolor=”#rrggbb”【2】背景图案:background body background=图形文件名【3】文件内容文字的颜色:text body text=”#rrggbb”【4】超连结文字颜色:link body link=”#rrggbb”【5】正被选取的超连结文字颜色:vlink body alink=”#rrggbb”【6】已连结过的超连结文字颜色:alink body vlink=”#rrggbb”二、 版面标签1. 标签可以把文档分割为独立的、不同的部分: welcome to you！和标签的区别2. 标题文字：h#./h# #=16；h1为最大字，h6为最小字这是一号标题这是二号标题这是三号标题这是四号标题这是五号标题这是六号标题文字居中标题有6种大小，显示黑体，能够自动换行，因此在一行中无法使用不同大小的字体3. 字体变化：font./font标签【1】字体大小 font size=#./font #=17；数字愈大字也愈大 【2】指定字型 font face=字型名称./font 【3】文字颜色 font color=#rrggbb./font rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码【4】. 显示小字体：small./small 【5】. 显示大字体：big./big【6】. 粗体字：b./b【7】. 斜体字：i./i 【8】. 打字机字体：tt./tt【9】. 下划线：u./u【10】. 删除线 ：strike./strike【11】.下标字：sub./sub【12】.上标字：sup./sup【13】.文字闪烁效果：blink./blink 不同的浏览器反应不一样【14】.换行：br【15】.分段：p 段落文字的对齐方向：p align=# #号可为left：表向左对齐（预设值）、center：表向中对齐、right：表向右对齐。设置p align=#之後的文字都会以所设的对齐方式显示，直到出现另一个p align=#改变其对齐方向，或遇到 hrh#标签时会自动设回预设的向左对齐。【16】.分隔线：hr 分隔线的粗细：hr size=点数 分隔线的宽度：hr width=点数或百分比 分隔线对齐方向：hr align=# #号可为left：表向左对齐（预设值）、center：表向中对齐、right：表向右对齐。 分隔线的颜色：hr color=#rrggbb 实心分隔线：hr noshade【17】.主题内容向中对齐：center./center【18】.依原始样式显示：pre./pre【19】. 块引用(Blockquote) .8、 关于注释注释：!-.-注释后的 内容在代码里可以看到，在页面里是看不到的!9、 关于特殊字符 显示结果 说明 表示法实体编号显示一个空格   大于 > & &符号 & 双引号 " 版权 © 注册商标 ® 乘号 × 除号 ÷ =10、 关于列表【1】 目录式清单：dir li项目1 li项目2 li项目3 /dir设置目录式清单每一个项目不能超过20个字元（即10个中文字）【2】. 无序号列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 标签；每个列表项始于 。 项目符号形式type：ul type=#或li type=#号可为 disc：实心圆点（预设值）circle：空心圆点square：实心方块【3】. 有序列表：有序号的清单 ol li项目1 li项目2 li项目3 /ol 序号形式type： ol type=#或li type=# #号可为 A：表以大写英文字母A、B、C、D.做为项目，a：表以小写英文字母a、b、c、d.做为项目编号，I：表以大写罗马数字做为项目编号，i：表以小写罗马数字做为项目编号，1：表以阿拉伯数字做为项目编号（预设值）。 起始数字start：ol start=”欲开始计数的序数” 【4】. 定义式列表：dldt项目1/dtdd项目1说明 dt项目2/dtdd项目2说明/dl 【1】紧密排列：compact dl compact设置，如此可使dt的内容与dd的内容在同一行，仅 以数格空白相隔而不换行，但若dt的文字超过一 定的长度后，compact的作用就消失了11、 关于图片【1】插入图片：img src= alt=” border=” height=” width=” vspace=”上下留空点数” hspace=”左右留空点数”【2】设定图框：border img src=图形文件名 border=点数【3】设定图形大小：width和height img src=图形文件名 width=宽度点数 height=高度点数【4】设定图形上下左右留空：vspace、hspaceimg src=图形文件名 vspace=上下留空点数 hspace=左右留空点数【5】图形附注：img src=图形文件名 alt=说明文字【6】影像地图Image Map：img src=图形文件名 usemap=#图的名称map name=图的名称area shape=形状 coords=区域座标列表 href=连结点之URLarea shape=形状 coords=区域座标列表 href=连结点之URLarea shape=形状 coords=区域座标列表 href=连结点之URL/map 定义形状：shapeshape=rect：矩形 shape=circle：圆形 shape=poly：多边形 定义区域：coordsa.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标例：area shape=rect coords=100,50,200,75 href=URLb.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度例：area shape=circle coords=85,155,30 href=URLc.任意图形（多边形）：将图形之每一转折点座标依序填入例：area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href=URL7. 我会动耶 12、 关于框架FRAME1. 分割视窗指令 frameset cols=” rows=” farmeborder=” bordercolor=” framespacing=” /frameset 【1】垂直（上下）分割:rowsframeset rows=# #号可为点数(1) 创建 3 行框架, 第一和最后一个框架被设为 150 像素高，第二行设置成 300 像素高。用窗口尺寸的百分比表示的框架行和列尺寸数据更加实际。(2) (3) 会生成一个宽为固定的 100 像素的列，然后再生成另一个框架列，该列会占据框架集中其余所有的空间。(4) 在框架集的中间生成一个 100 像素高的行，并在这行的上边和下边各生成一个相同尺寸的行。(5) 生成了 4 列：第一列占据整个框架集宽度的 10%。然后浏览器把其他空间的 3/5 分配给第二个框架，第三个和第四个框架各分配其余空间的 1/5。【2】水平（左右）分割:colsframeset cols=点数或百分比2. 指定视窗内容：frameframeset cols=30%,70% frame frame /frameset【1】指定视窗的文件名称：src frame src=HTML档名 【2】定义视窗的名称：name frame name=视窗名称 【3】设定文件与上下边框的距离：marginheight frame marginheight=点数 【4】设定文件与左右边框的距离：marginwidth frame marginwidth=点数 【5】设定分割视窗卷轴：scrolling frame scrolling=# #号可为 yes：固定出现卷轴no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）【6】锁住分割视窗的大小：noresize frame noresize 13、 关于链接链接：使用锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。l 通过使用 href 属性，创建指向另外一个文档的链接（或超链接） l 通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）【1】在新窗口打开链接的HTML文档最后一页【2】将图片作为超链接【3】链接到同一个页面的不同位置查看 Chapter 4。Chapter 1This chapter explains ba bla blaChapter 2This chapter explains ba bla blaChapter 3This chapter explains ba bla blaChapter 4This chapter explains ba bla bla【4】跳出框架请点击这里！【5】链接邮件发送邮件参数表示的含义语法CC抄送收件人链接文字Subject电子邮件主题链接文字BCC暗送收件人链接文字Body电子邮件内容链接文字【6】frame的超连结 (1)开启新的浏览器来显示连结文件：_blank a href=URL target=_blank(2)显示连结文件於目前的frame：_self a href=URL target=_self(3)以上一层的分割视窗显示连结文件：_parent a href=URL target=_parent(4)以全视窗显示连结文件：_top a href=URL target=_top (5)以特定视窗显示连结文件：a href=URL target=特定视窗名称14、 关于表格1. 定义表格 table./table 【1】设定边框的厚度：border table border=点数【2】设定单元格之间的空白：cellspacing table cellspacing=点数【3】设定单元边沿与其内容之间的空白：cellpadding table cellpadding=点数【4】调整表格宽度：width table width=点数或百分比【5】调整表格高度：height table height=点数或百分比【6】设定表格背景色彩：bgcolor table bgcolor=#rrggbb【7】设定表格边框色彩：bordercolor table bordercolor=#rrggbb2. 显示格线：table border3. 表格标题：caption./caption 【1】表格标题位置：aligncaption align=# #号可为 top：表标题置于表格上方（预设值）bottom：表标题置于表格下方4. 定义行tr5. 定义表格的页眉（表头单元格）：【1】水平位置：align th align=# #号可为 left：向左对齐、center：向中对齐、right：向右对齐【2】垂直位置：valign th align=# #号可为top：向上对齐、middle：向中对齐、bottom：向下对齐【3】栏位宽度：width th width=点数或百分比 【4】栏位垂直合并：rowspan th rowspan=欲合并栏位数 【5】栏位横向合并：colspan th colspan=欲合并栏位数6. 定义单元格7. 设置表格外侧边框的哪个部分是可见的frame：、15、 关于表单基本架构：form action=表单的处理程序 method=get或post /form 标签用于为用户输入创建 HTML 表单；表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等；表单还可以包含 menus、textarea、fieldset、legend 和 label 元素；表单用于向服务器传输数据。例如：1. 输入型表单：form action=URL method=post input input . . /form 【1】栏位类型type： input type=# #号可为 text：文字输入button：按钮 password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮 image：图形钮 file:上传文件 hidden：隐藏栏位 【2】栏位名称name： input name=资料栏名 P.S.若type为submitreset则name不必设定 【3】文件上的预设值value： input value=显示出来的字符 【4】设定栏位的宽度size： input size=” 字元数” 【5】限制最大输入字串的长度maxlength： input maxlength=字元数 【6】预设checkbox或radio的初值checked： input type=checkbox checked input type=radio checked 【7】指定图形的URL src： input type=image src=图档名 【8】图文对齐align： input type=image align=# #号可为 top：文字对齐图片之顶端 middle：文字对齐图片之中间 buttom：文字对齐图片之底部2. 选择式表单：form action=URL method=postselect size=”同时显示的个数” multiple name=” option selected value=”option . ./select/form A、select的属性 【1】栏位名称name ：select name=资料栏位名 【2】设定显示的选项数size： select size=个数 【3】多重选项multiple： select multiple B、option的属性 【1】定义选项的传回值value： option value=传回值 【2】预先选取的选项selected： option selected2. 多列输入文字区表单：form action=URL cols=” rows=”textarea name=” rows=” cols=” wrap=” ./textarea /form 【1】文字区的变数名称name： textarea name=变数名称 【2】设定文字输入区宽度cols： textarea cols=字元数 【3】设定文字输入区高度rows： textarea rows=列数 【4】输入区设定预设字串：textarea 预设文字 /textarea 【5】自动换行与否wrap： textarea wrap=# #号可为 off：表输入的文字超过栏宽时，不会自动换行（预设值） virtual：表输入的文字在超过栏宽时会自动换行三、 CSS样式表【CSS定义：】CSS（Cascading Style Sheets），中文翻译为“层叠样式表”，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。（表示语言）【代码：】选择器 属性：值; 属性：值; 1、CSS样式表的功能一般可以归纳为以下几点： 灵活控制网页中文字的字体、颜色、大小、间距、风格及位置。 随意设置一个文本块的行高、缩进，并可以为其加入三维效果的边框。 更方便地为网页中的任何元素设置不同的背景颜色和背景图片。 精确控制网页中各元素的位置。 可为网页中的元素设置各种过滤器，从而产生诸如阴影、光辉、模糊和透明等效果，而这些效果只有在一些图像处理软件中才能实现。 可以与脚本语言相结合，使网页中的元素产生各种动态效果。是样式信息与网页显示信息进行分离。2、添加CSS样式的方法？3、基本语法1. CSS的基本语法：选择符样式属性：取值；样式属性：取值；2. CSS样式中的选择符可以有如下几种：【1】标记选择符：标记名样式属性：取值；样式属性：取值；特点：多用于html自带的标签属性设置，如p、h1、body、a、 form、ol、title、 h1font-family:隶属;color:red;bgcolor:yellow【2】类选择符：标记名类选择符名样式属性：取值；样式属性：取值；（实际情况中标记名可以省略）特点：我们可以自定义设置选择器名称，该选择器可以单独使用，也可以与其他元素结合使用。 要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。注意：1.类选择器名字的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 2.区别大小写。如果值为若干单词，则要给值加引号：p font-family: sans serif; p.Redcolor: red/ .redcolor: redp.bluecolor: blue/ . bluecolor: blueh1.blackcolor: black/ .blackcolor: black 此段落为红色字体【3】ID选择符：标记名选择符名样式属性：取值；样式属性：取值；.特点：我们可以自定义设置选择器名称当页面中用到js或者要动态调用对象的时候，要用到id属性。注意：1.W3C标准规定的，在同一个页面内，不允许有相同名字的id对象出现属性，但是允许相同名字的class属性。所以id 属性只能在每个 HTML 文档中出现一次。 2.区别大小写。# examcolor:#FF0000 【4】组合选择符：类选择符，ID选择符，标签选择符，样式属性：取值；样式属性：取值；. P,.one,#usernamefont-size;”2cm”;color:”red”【5】伪元素选择符：a:link color: #FF0000/* 未访问的链接 */a:visited color: #00FF00/* 已访问的链接 */a:hover color: #FF00FF/* 鼠标移动到链接上 */a:active color: #0000FF/* 选定的链接 */提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。提示：伪类名称对大小写不敏感。3. CSS样式的继承：样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。bodycolor: red; font-size:9pt段落文字 中的内容会继承body定义的属性；但是在有些特殊的情况下，内部选择符不继承包含它的选择符的属性值。4. CSS样式的冲突：如果在同一个选择器上使用了几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。也就是最后定义的优先级高。5. CSS集体声明：标签，ID，类，标签样式属性：取值；样式属性：取值；h1,h2,h3,h4,h5,h6 color: green; 6. CSS文字样式设置字体font-family P font-family :方正姚体，”楷体_GB2312”,serif;设置字号font-size:（带单位） P font-size :large; P font-size :20pt;P font-size :larger;字体风格font-style:Normal,italic,obliqueP font- style :normal; /*普通*/P font- style : italic; /*斜体*/P font- style : oblique; /*倾斜*/设置加粗字体font-weight：normal,bold,100900 P font- weight :800; 小型的大写字母font-variant：normal,small-capsP font- variant : small-caps; 复合属性：字体font:P font:黑体,bold,90pt,italic; 单词间隔word-spacingP word-spacing:2cm; 字符间隔letter-spacingP letter-spacing:4em; 文字修饰text-decoration:underline,overline,line-throuth,blink,P text-decoration:none; /*没有下划线*/纵向排列vertical-align：baseline(与上级元素的基线对齐),middle（一半的中点）,sub（下标）,super（上标）,text-top（上对齐）,text-bottom（下对齐）,top（与行中最高向上对齐）,bottom（与行中最低向下对齐）P vertical-align:middle; 文本转换text-transform capitaliza(第一个字母大写)uppercase（所有大写）lowercase(每个字母)none(使用原始值)P text-transform: uppercase; 文本排列一text-align:center,left,rightP text-align: left; 文本缩进text-indent (单位)P text- indent: 5em; 文本行高line-height，数字或百分比（百分比的值是相对于元素字体大小而定）P text- height: 200%; 处理空白white-space：normal pre (换行和其他空白字符都将受到保护)nowrap(强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象)P white-space:pre; 文本反排unicode-bidi与directionnormal bidi-override(严格按照 direction 属性的值重排序) embed(对象打开附加的嵌入层， direction 属性的值指定嵌入层，在对象内部进行隐式重排序)7. 颜色与背景属性颜色属性设置color#336699 red rgb(255,255,0) 背景颜色background-colorbody background-color : #ccff00;背景图像background-image:url(图片名字)body background-image:url(XXX.gif);背景重复background-repeatrepeat-x（横向平铺）repeat-y（纵向平铺）repeat（满屏平铺）no-repeat（无任何方向平铺）body background-image:url(XXX.gif); background-repeat: repeat-y;背景附件background-attachment背景位置background-positionvalue(x%,y%),top,center,bottomSS,left,center,rightbody background-image:url(003.gif);background-repeat:no-repeat;background-position:right bottom;复合属性：背景backgroundbody background:url(003.gif) no-repeat right bottom8. 边距与填充属性顶端边距margin-top其他边距margin-bottom、margin-left、margin-righth1 padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%;复合属性：边距margin顶端填充padding-top其他填充padding-bottom、padding-right、padding-left复合属性：填充paddingh1 margin : 10px 0px 15px 5px; 上右下左p margin: