2023年6月20日发(作者：)
html让⽂本框左剧中对齐_HTML的部分知识1.标签常⽤的单标签< !— xx –>：注释标签 快捷键：ALT+/< br/>：换⾏标签注释：⾃动⽣成空⽩⾏< hr/> ：⽔平线标签常⽤的双标签段落< p>< /p> –段落标签标题h1-h6 –标题标签⽂本格式化标签 strong , b区别strong - 着重，强调标签，b – 加粗建议：⼯作中⼀般使⽤ strong⽂本倾斜标签：< em>< /em>、< i>< /i>区别：em 元素代表对其内容的强调i 元素代表在普通⽂本中具有不同语态或语⽓的⼀段⽂本，某种程度上表明⼀段不同特性的⽂本，⽐如⼀个分类学名称，⼀个技术术语，⼀个外语习语，⼀个⾳译，⼀个想法，或者西⽅⽂本中的⼀艘船名。建议：⼯作中⼀般使⽤ em删除线标签：< del>< /del> 、< s>< /s>建议：⼯作中⼀般使⽤del下划线标签：< ins>< /ins>、< u>< /u>建议：⼯作中⼀般使⽤ins提⽰：上诉建议的理由，⼀⽅⾯内容提⽰，另⼀⽅⾯语义化强。图⽚标签: img< img src=”/i/eg_” alt=”上海鲜花港 - 郁⾦⾹” width=”300” height=”360” />注意图⽚：width=100%可以让图⽚的宽随浏览器变动图⽚常⽤属性Src 图⽚的来源 必写属性Alt 替换⽂本 图⽚不显⽰的时候显⽰的⽂字Title 提⽰⽂本 ⿏标放到图⽚上显⽰的⽂字Width 图⽚宽度Height 图⽚⾼度超链接–常⽤属性：href 去往的路径（跳转的页⾯） 必写属性title 提⽰⽂本 ⿏标放到链接上显⽰的⽂字target=”_self” 默认值 在⾃⾝页⾯打开（关闭⾃⾝页⾯，打开链接页⾯）*target属性值*列表⽆序列表：< ul>< li>< /li>< li>< /li>< li>< /li>< /ul>常⽤属性：type=”square” ⼩⽅块Type=”disc” 实⼼⼩圆圈Type=”circle” 空⼼⼩圆圈有序列表< ol>< li>< /li>< li>< /li>< li>< /li>< /ol>常⽤属性：type=”1,a,A,i,I” type的值可以为1,a,A,i,Istart=”3” 决定了开始的位置。⾃定义列表< dl>< dt>< /dt> ⼩标题< dd>< /dd> 解释标题< dd>< /dd> 解释标题< /dl>⾳乐标签< embed> 标签是 HTML 5 中的新标签。< embed src=”” hidden=”true|false” />2.定位CSS 定位机制：CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除⾮专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下⼀个接⼀个地排列，框之间的垂直距离是由框的垂直外边距计算出来。⾏内框在⼀⾏中⽔平布置。可以使⽤⽔平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响⾏内框的⾼度。由⼀⾏形成的⽔平框称为⾏框（Line Box），⾏框的⾼度总是⾜以容纳它包含的所有⾏内框。不过，设置⾏⾼可以增加这个框的⾼度。1、静态定位（static）⼀般的标签元素不加任何定位属性都属于静态定位，对象遵循正常⽂档流。top、right、bottom、left等属性⽆效。2，相对定位与绝对定位relative：对象遵循正常⽂档流，相对于对象左上⾓位置（移动前）进⾏定位，移动后仍占据原空间，对象不可层叠。absolute：对象脱离正常⽂档流，其层叠可通过css z-index属性定义3、固定定位（fixed）对象脱离正常⽂档流，使⽤top、right、bottom、left等属性以窗⼝左上⾓为参考点进⾏定位，当出现滚动条时，对象不会随着滚动，其层叠通过z-index属性定义。（锚点定位）3.选择器1.标签选择器注意点：1. 标签选择器选中当前所有的标签，⽽不能单独选择某个标签2.标签选择器不⽆多深都能被选中3.只要是HTML中的标签就可以作为表亲啊选择器（h/a/img/ul/ol/）选择器注意点：1.每个HTML标签都有⼀个属性叫做id，也就是说每个标签都可以设置id2.在同⼀个界⾯中id的名称是不可以重复的3.在编写id选择器时⼀定要在id名称前加上＃的名称有⼀定的规范4.1名称不能以数字开头，只能以字母／数字／下划线组成4.2id不能以HTML标签名称命名4.3在开发中⼀般不会使⽤id，留给js使⽤3.类选择器4.属性选择器5.序选择器6.通配符选择器 *由于通配符选择器是设置界⾯上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界⾯上的标签⽐较多, 那么性能就会⽐较差,所以在企业开发中⼀般不会使⽤通配符选择器7.兄弟选择器作⽤：给指定选择器后⾯紧跟的那个选择器选中的标签设置属性注意点:1.相邻兄弟选择器必须通过＋连接2.相邻兄弟选择器职能选中紧跟其后的那个标签，不能选中被隔开的标签8.通⽤选择器作⽤:给指定选择器后⾯的选择器选中的所有标签设置属性注意：1.通⽤兄弟选择必须⽤～连接2.通⽤兄弟选择器选择后⾯某个选择器中的所有标签，⽆论有没有被隔开都可以选中加载顺序⽤户输⼊url地址，浏览器根据域名寻找IP地址浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求服务器端接受请求，处理请求⽣成html代码，返回给浏览器，这时的html页⾯代码可能是经过压缩的浏览器接收服务器响应结果，如果有压缩则⾸先进⾏解压处理，紧接着就是页⾯解析渲染 解析渲染该过程主要分为以下步骤：解析HTML构建DOM树DOM树与CSS样式进⾏附着构造呈现树布局绘制单位的种类和区别A ⽂字1 font-family:字体名称注意： 当指定多种字体时，⽤“，”分隔每种字体的名称当字体名称包含两个以上分开的单词是，⽤“”把该字体名称括起来。当样式规则外已经有“”时,⽤‘’代替“”。2 font-size:字号参数。3 font-style:斜体字的名称。normal正常状态、italic斜体字、oblique 斜体和正常状态之间。4 font-weight:字体粗细。取值是：number(100～900) 或者参数 lighter（细体） 和bold(粗体)bolder（特粗体） 参数 显⽰更细或更粗。5 text-transform:参数参数的范围： uppercase 所有⽂字⼤写显⽰lowercase:所有⽂字⼩写显⽰capitalize 每个单词的头字母⼤写none 不继承母体的⽂字变形参数。6 text-decoration:参数参数的范围： underline 为⽂字加下划线overline 为⽂字加上划线line-through 为⽂字加删除线blink 使⽂字闪烁none 不显⽰上叙任何效果。7 color:#rrggbb或者 #rgb原则(还可以参考资料有多种⽅式，但是只要掌握基本的⼀种⽅式)。8 可以⽤font 属性全部定位⽰例：p{font:italic bold 12pt;}B 背景1 background-color 背景颜⾊2 background-image 背景图⽚⽰例：{background-image:url('/')}3 background-repeat:参数参数的范围：repeat 表⽰图像从⽔平和垂直⾓度平铺no-repeat 不重复平铺背景图⽚repeat-x 使图⽚只在⽔平⽅向上平铺repeat-y 使图⽚只在垂直⽅向上平铺。4 background-attachment 参数fixed ⽹页滚动时，背景图⽚相对浏览器⽽⾔固定不动。scroll ⽹页滚动时，背景图⽚相对浏览器⽽⾔⼀起滚动。5 background-postion 参数 （背景定位）参数：top 相对前景对象顶对齐bottom 相对前景对象底对齐left 相对前景对象左对齐right 相对前景对象右对齐center 相对前景对象中⼼对齐说明：⼀般⽤坐标的⽅式来确定图⽚的位置。6 可以直接⽤ background 复合属性来确定式样⽰例：table{background:#001122 url() no-repeat bottom right}C ⽂本1 英⽂单词间距 word-spacing:取值可以是：normal或者是单位像素；2 英⽂字母间距 letter-spacing:间隔距离取值可以是：normal或者是单位像素；3 ⾏距 line-height:值可以是精确的值，也可以是百分⽐。4 ⽂本⽔平排列text-aglin:参数left: 左对齐 right：右对齐 center: 居中 justify:相对左右对齐。注意：text-aglin 是块级属性5 ⽂本垂直排列 vertical-align:参数top 顶对齐 bottom 底部对齐 text-top 相对⽂本顶对齐text-bottom相对⽂本底对齐 baseline:基准线对齐 middle 中⼼线对齐sub 以下标的形式对齐 sup 以上标的形式对齐,相对于元素⾏⾼属性的百分⽐。6 ⽂本缩进 text-indent 缩进距离说明：缩进距离必须是值或者%⽐7 white-space设置值：normal：合并连续的多个空格pre：保留原样式nowrap：不换⾏，直到遇到标签8 text-decoraition值：none :表⽰不对⽂本进⾏修饰，也是默认值，underline:表⽰对⽂字添加下划线overline:表⽰添加上划线line-through:表⽰对⽂本添加删除线blink:表⽰⽂字具有闪烁效果9：text-transform⽂本转换取值范围：none:表⽰原有值capitalize:使每个字的第⼀个字母⼤写uppercase:⼤写lowercase:⼩写D 定位是指指定元素的位置，他是CSS-P(cascading style sheets positioning)中的内容，CSS-P是CSS的⼀个扩展，它可以⽤来控制任何⽹页元素在浏览器⽂档窗⼝中的位置。1：postion设置值： 含义absolute 采⽤绝对定位（分别⽤四个边框来定位）relative 采⽤相对定位（也得⽤四个边框来设定位置）static 默认值2：left/top/width/height说明:设置值可以是3:z-index(也就是元素的堆叠,⼤的在上，⼩的在下。默认是按照先后顺序)说明：取值auto默认值，表⽰它遵循其⽗对象的定位属性；如果设置为数字,必须是⽆单位的正整数，可以取负值，但是⼀般为正数,⼀般数字为1时间是最底层。E 布局1 visibility 可视性设置值：inherit：表⽰对象继承⽗本的继承性。visible:表⽰对象可见hidden：表⽰对象隐藏2 display 设置或检索对象是否及如何显⽰设置值：block、inline、list-item、none3 clip 可视区域设置值：auto表⽰对象不裁剪rect(数值表⽰)(⼀般有四个设置值：⽅向定位于上右下左的顺序，⼀般以左上⾓(0,0)坐标计算4个偏移数值。其中 任何⼀个值都可以⽤auto代替)4 overflow 超出范围：设置值：isible 扩⼤浏览器hidden 裁剪掉多余的⽂本scroll 滚动条auto 当有多余的时候才显⽰滚动条5 float 浮动属性设置值：left表⽰⽂字浮在元素左侧right 表⽰⽂字浮在元素右侧none 默认值，表⽰不浮动。<该属性特别重要，⼀定要掌握>6 clear 表⽰指定⼀个元素周围是都允许有其他元素漂浮在它的周围。设置值：left ,right,none,both;指要清除本元素四周的浮动对象。7 page-break-before 设置值：always 是否强制分页8 page-break-after 设置值：always 打印后设置是否强制分页9 width和height 表⽰层的宽度与⾼度。设置值为 auto|数值F 边距与填充属性1 复合属性margin：与边距的距离(margin-top margin-left margin-bottom margin-left)取值可以是：auto默认%⽐或者具体的值：说明：取值可以是⼀个或者两个或者三个或者四个（每个都具有不同的含义）。2 复合属性填充（指⽤⽩值填充）：padding说明：和margin的⽤法⼀样。3 border-width边框宽度：border-top-width:上边框宽度border-right-width:右边框宽度border-bottom-width:底边框宽度border-left-width:左边框宽度取值为：medium 默认宽度；thin 细边框 thick 粗边框4 border-styleborder-top-style:上边框样式border-right-style:右边框样式border-bottom-style:底边框样式border-left-style:左边框样式取值： 含义none 不现实边框，为默认值dotted 点线（电线）dashed 虚线，也称短线solid 实线double 双实线groove 边框带有⽴体感的沟槽ridge 边框成脊形inset 使整个表框凹陷，即在边框内嵌⼊⼀个⽴体边框outset 使整个边框凸起，即在边框外嵌⼊⼀个⽴体边框5 border-color设置边框的颜⾊：⽤法同上margin6: border复合属性：border:边框宽度|样式|颜⾊那么还有：border-top|border—right|border—bottom|border-leftG 列表1:list-style-type 指显⽰于列表项前的标识符号取值： 含义none 表⽰不显⽰列表符号2：列表缩进 list-style-postion 列表位置描述列表在何处显⽰参数：inside 列表内容和列表标识符号处在不同垂直位置，在符号内测。outside 列表内容和列表标识符号处在同⼀垂直位置3： list-style-image说明：⽤图⽚符号作为链接标题取值 含义none 表⽰不指定图像url(⽹页地址) 指定图⽚位置4：复合属性：list-style实现以上三种属性H 光标属性1 cursor 当点击某个内容时，⿏标显⽰其他的图形style="cursor:hand" ⼿形style="cursor:crosshair" ⼗字形G 滤镜属性1 filter6.颜⾊1.单词表⽰法：英⽂单词表⽰法，这个还需要讲吗？如：red,yellow,blue2.16进制表⽰法16进制表⽰的⽅法分为两种：1. 以”0x“开头表⽰，这种表⽰⽅法才是标准的16进制的表⽰⽅法。例如“0x00ffffff”或"0xffffff"2.以“#”开头表⽰，例 如“#FFFFFF”或“#FFF”。区别：其实也没啥区别，都是16进制的，只是常见的是以“#”开头，”0x“开头多在电⼦这⽅⾯，不⽤太关注.需要注意的是：透明度设置，以"0x"开头的，如果后⾯是六位，那么就没有透明度，如果是⼋位，那么“0x”后⾯的两位就是透明度值，范围是：FF~00(不透明~透明)，以“#”开头的也是⼀样前⾯两位；关于透明度值的计算：透明度共有256阶，按百分⽐来计算，如30%透明度，计算⽅法为：255x30%，取整后转16进制即可。关于这两种详细的说明可以参考：Android之颜⾊表⽰法：#与0x的区别表⽰法1.使⽤rgb表⽰r：红；g：绿；b：蓝。就是光的三原⾊例如：rgb(0,0,0)，rgb可⼤写每个值的范围是0-2552.使⽤rgba表⽰仅仅⽐第⼀种多了⼀个a，a 表⽰的是alpha(阿尔法)，表⽰透明度，取值范围是0-1。例如：rgba(10,10,10，0.5)，也可写rgba(10,10,10，.5)，rgba可⼤写/*4.使⽤hsl表⽰1.使⽤hsl表⽰表⽰格式和rgb相似，不同的是数值不同。hsl分别表⽰的是⾊调,饱和度,亮度h：⾊调，取值0-360，颜⾊的底⾊调，表⽰⾊轮周围的⾓度s：饱和度，取值0%-100%，0是没有颜⾊显⽰为灰⾊，100%是全彩⾊l：亮度，取值0%-100%，0是⽆光显⽰为全⿊的，100%是充满光，表现为全⽩。例如：hsl(100,23%,50%)，hsl可⼤写2.使⽤hsla和rgba类似，⽐第⼀种多⼀个a(alpha)透明值，取值范围也是0-1例如：hsla(100,23%,50%，0.5)，也可写hsla(100,23%,50%，.5)，hsla可⼤写*/7.浮动⽅法⼀： 使⽤clear属性的空元素⽅法⼆：使⽤overflow属性给浮动的元素容器添加overflow:hidden/auto；在添加overflow属性后，浮动元素⼜回到了容器层，把容器层撑起来，达到清理浮动的效果另外在 IE6 中还需要触发 hasLayout ，例如为⽗元素设置容器宽⾼或设置 zoom:1。⽅法三：给浮动元素后边的元素添加clear元素⽅法四：使⽤css的:after伪元素.clearfix:after{content:'020';display:block;height:0;clear:both;visibility:hidden;}.clearfix{zoom:1;}8.A标签-target属性 标签的 target 属性规定在何处打开链接⽂档。如果在⼀个 标签内包含⼀个 target 属性，浏览器将会载⼊和显⽰⽤这个标签的 href 属性命名的、名称与这个⽬标吻合的框架或者窗⼝中的⽂档。如果这个指定名称或 id 的框架或者窗⼝不存在，浏览器将打开⼀个新的窗⼝，给这个窗⼝⼀个指定的标记，然后将新的⽂档载⼊那个窗⼝。从此以后，超链接⽂档就可以指向这个新的窗⼝。⽤打开⼀个完整的浏览器窗⼝，使⽤ target 更通常的⽅法是在⼀个
2023年6月20日发(作者：)
html让⽂本框左剧中对齐_HTML的部分知识1.标签常⽤的单标签< !— xx –>：注释标签 快捷键：ALT+/< br/>：换⾏标签注释：⾃动⽣成空⽩⾏< hr/> ：⽔平线标签常⽤的双标签段落< p>< /p> –段落标签标题h1-h6 –标题标签⽂本格式化标签 strong , b区别strong - 着重，强调标签，b – 加粗建议：⼯作中⼀般使⽤ strong⽂本倾斜标签：< em>< /em>、< i>< /i>区别：em 元素代表对其内容的强调i 元素代表在普通⽂本中具有不同语态或语⽓的⼀段⽂本，某种程度上表明⼀段不同特性的⽂本，⽐如⼀个分类学名称，⼀个技术术语，⼀个外语习语，⼀个⾳译，⼀个想法，或者西⽅⽂本中的⼀艘船名。建议：⼯作中⼀般使⽤ em删除线标签：< del>< /del> 、< s>< /s>建议：⼯作中⼀般使⽤del下划线标签：< ins>< /ins>、< u>< /u>建议：⼯作中⼀般使⽤ins提⽰：上诉建议的理由，⼀⽅⾯内容提⽰，另⼀⽅⾯语义化强。图⽚标签: img< img src=”/i/eg_” alt=”上海鲜花港 - 郁⾦⾹” width=”300” height=”360” />注意图⽚：width=100%可以让图⽚的宽随浏览器变动图⽚常⽤属性Src 图⽚的来源 必写属性Alt 替换⽂本 图⽚不显⽰的时候显⽰的⽂字Title 提⽰⽂本 ⿏标放到图⽚上显⽰的⽂字Width 图⽚宽度Height 图⽚⾼度超链接–常⽤属性：href 去往的路径（跳转的页⾯） 必写属性title 提⽰⽂本 ⿏标放到链接上显⽰的⽂字target=”_self” 默认值 在⾃⾝页⾯打开（关闭⾃⾝页⾯，打开链接页⾯）*target属性值*列表⽆序列表：< ul>< li>< /li>< li>< /li>< li>< /li>< /ul>常⽤属性：type=”square” ⼩⽅块Type=”disc” 实⼼⼩圆圈Type=”circle” 空⼼⼩圆圈有序列表< ol>< li>< /li>< li>< /li>< li>< /li>< /ol>常⽤属性：type=”1,a,A,i,I” type的值可以为1,a,A,i,Istart=”3” 决定了开始的位置。⾃定义列表< dl>< dt>< /dt> ⼩标题< dd>< /dd> 解释标题< dd>< /dd> 解释标题< /dl>⾳乐标签< embed> 标签是 HTML 5 中的新标签。< embed src=”” hidden=”true|false” />2.定位CSS 定位机制：CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除⾮专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下⼀个接⼀个地排列，框之间的垂直距离是由框的垂直外边距计算出来。⾏内框在⼀⾏中⽔平布置。可以使⽤⽔平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响⾏内框的⾼度。由⼀⾏形成的⽔平框称为⾏框（Line Box），⾏框的⾼度总是⾜以容纳它包含的所有⾏内框。不过，设置⾏⾼可以增加这个框的⾼度。1、静态定位（static）⼀般的标签元素不加任何定位属性都属于静态定位，对象遵循正常⽂档流。top、right、bottom、left等属性⽆效。2，相对定位与绝对定位relative：对象遵循正常⽂档流，相对于对象左上⾓位置（移动前）进⾏定位，移动后仍占据原空间，对象不可层叠。absolute：对象脱离正常⽂档流，其层叠可通过css z-index属性定义3、固定定位（fixed）对象脱离正常⽂档流，使⽤top、right、bottom、left等属性以窗⼝左上⾓为参考点进⾏定位，当出现滚动条时，对象不会随着滚动，其层叠通过z-index属性定义。（锚点定位）3.选择器1.标签选择器注意点：1. 标签选择器选中当前所有的标签，⽽不能单独选择某个标签2.标签选择器不⽆多深都能被选中3.只要是HTML中的标签就可以作为表亲啊选择器（h/a/img/ul/ol/）选择器注意点：1.每个HTML标签都有⼀个属性叫做id，也就是说每个标签都可以设置id2.在同⼀个界⾯中id的名称是不可以重复的3.在编写id选择器时⼀定要在id名称前加上＃的名称有⼀定的规范4.1名称不能以数字开头，只能以字母／数字／下划线组成4.2id不能以HTML标签名称命名4.3在开发中⼀般不会使⽤id，留给js使⽤3.类选择器4.属性选择器5.序选择器6.通配符选择器 *由于通配符选择器是设置界⾯上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界⾯上的标签⽐较多, 那么性能就会⽐较差,所以在企业开发中⼀般不会使⽤通配符选择器7.兄弟选择器作⽤：给指定选择器后⾯紧跟的那个选择器选中的标签设置属性注意点:1.相邻兄弟选择器必须通过＋连接2.相邻兄弟选择器职能选中紧跟其后的那个标签，不能选中被隔开的标签8.通⽤选择器作⽤:给指定选择器后⾯的选择器选中的所有标签设置属性注意：1.通⽤兄弟选择必须⽤～连接2.通⽤兄弟选择器选择后⾯某个选择器中的所有标签，⽆论有没有被隔开都可以选中加载顺序⽤户输⼊url地址，浏览器根据域名寻找IP地址浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求服务器端接受请求，处理请求⽣成html代码，返回给浏览器，这时的html页⾯代码可能是经过压缩的浏览器接收服务器响应结果，如果有压缩则⾸先进⾏解压处理，紧接着就是页⾯解析渲染 解析渲染该过程主要分为以下步骤：解析HTML构建DOM树DOM树与CSS样式进⾏附着构造呈现树布局绘制单位的种类和区别A ⽂字1 font-family:字体名称注意： 当指定多种字体时，⽤“，”分隔每种字体的名称当字体名称包含两个以上分开的单词是，⽤“”把该字体名称括起来。当样式规则外已经有“”时,⽤‘’代替“”。2 font-size:字号参数。3 font-style:斜体字的名称。normal正常状态、italic斜体字、oblique 斜体和正常状态之间。4 font-weight:字体粗细。取值是：number(100～900) 或者参数 lighter（细体） 和bold(粗体)bolder（特粗体） 参数 显⽰更细或更粗。5 text-transform:参数参数的范围： uppercase 所有⽂字⼤写显⽰lowercase:所有⽂字⼩写显⽰capitalize 每个单词的头字母⼤写none 不继承母体的⽂字变形参数。6 text-decoration:参数参数的范围： underline 为⽂字加下划线overline 为⽂字加上划线line-through 为⽂字加删除线blink 使⽂字闪烁none 不显⽰上叙任何效果。7 color:#rrggbb或者 #rgb原则(还可以参考资料有多种⽅式，但是只要掌握基本的⼀种⽅式)。8 可以⽤font 属性全部定位⽰例：p{font:italic bold 12pt;}B 背景1 background-color 背景颜⾊2 background-image 背景图⽚⽰例：{background-image:url('/')}3 background-repeat:参数参数的范围：repeat 表⽰图像从⽔平和垂直⾓度平铺no-repeat 不重复平铺背景图⽚repeat-x 使图⽚只在⽔平⽅向上平铺repeat-y 使图⽚只在垂直⽅向上平铺。4 background-attachment 参数fixed ⽹页滚动时，背景图⽚相对浏览器⽽⾔固定不动。scroll ⽹页滚动时，背景图⽚相对浏览器⽽⾔⼀起滚动。5 background-postion 参数 （背景定位）参数：top 相对前景对象顶对齐bottom 相对前景对象底对齐left 相对前景对象左对齐right 相对前景对象右对齐center 相对前景对象中⼼对齐说明：⼀般⽤坐标的⽅式来确定图⽚的位置。6 可以直接⽤ background 复合属性来确定式样⽰例：table{background:#001122 url() no-repeat bottom right}C ⽂本1 英⽂单词间距 word-spacing:取值可以是：normal或者是单位像素；2 英⽂字母间距 letter-spacing:间隔距离取值可以是：normal或者是单位像素；3 ⾏距 line-height:值可以是精确的值，也可以是百分⽐。4 ⽂本⽔平排列text-aglin:参数left: 左对齐 right：右对齐 center: 居中 justify:相对左右对齐。注意：text-aglin 是块级属性5 ⽂本垂直排列 vertical-align:参数top 顶对齐 bottom 底部对齐 text-top 相对⽂本顶对齐text-bottom相对⽂本底对齐 baseline:基准线对齐 middle 中⼼线对齐sub 以下标的形式对齐 sup 以上标的形式对齐,相对于元素⾏⾼属性的百分⽐。6 ⽂本缩进 text-indent 缩进距离说明：缩进距离必须是值或者%⽐7 white-space设置值：normal：合并连续的多个空格pre：保留原样式nowrap：不换⾏，直到遇到标签8 text-decoraition值：none :表⽰不对⽂本进⾏修饰，也是默认值，underline:表⽰对⽂字添加下划线overline:表⽰添加上划线line-through:表⽰对⽂本添加删除线blink:表⽰⽂字具有闪烁效果9：text-transform⽂本转换取值范围：none:表⽰原有值capitalize:使每个字的第⼀个字母⼤写uppercase:⼤写lowercase:⼩写D 定位是指指定元素的位置，他是CSS-P(cascading style sheets positioning)中的内容，CSS-P是CSS的⼀个扩展，它可以⽤来控制任何⽹页元素在浏览器⽂档窗⼝中的位置。1：postion设置值： 含义absolute 采⽤绝对定位（分别⽤四个边框来定位）relative 采⽤相对定位（也得⽤四个边框来设定位置）static 默认值2：left/top/width/height说明:设置值可以是3:z-index(也就是元素的堆叠,⼤的在上，⼩的在下。默认是按照先后顺序)说明：取值auto默认值，表⽰它遵循其⽗对象的定位属性；如果设置为数字,必须是⽆单位的正整数，可以取负值，但是⼀般为正数,⼀般数字为1时间是最底层。E 布局1 visibility 可视性设置值：inherit：表⽰对象继承⽗本的继承性。visible:表⽰对象可见hidden：表⽰对象隐藏2 display 设置或检索对象是否及如何显⽰设置值：block、inline、list-item、none3 clip 可视区域设置值：auto表⽰对象不裁剪rect(数值表⽰)(⼀般有四个设置值：⽅向定位于上右下左的顺序，⼀般以左上⾓(0,0)坐标计算4个偏移数值。其中 任何⼀个值都可以⽤auto代替)4 overflow 超出范围：设置值：isible 扩⼤浏览器hidden 裁剪掉多余的⽂本scroll 滚动条auto 当有多余的时候才显⽰滚动条5 float 浮动属性设置值：left表⽰⽂字浮在元素左侧right 表⽰⽂字浮在元素右侧none 默认值，表⽰不浮动。<该属性特别重要，⼀定要掌握>6 clear 表⽰指定⼀个元素周围是都允许有其他元素漂浮在它的周围。设置值：left ,right,none,both;指要清除本元素四周的浮动对象。7 page-break-before 设置值：always 是否强制分页8 page-break-after 设置值：always 打印后设置是否强制分页9 width和height 表⽰层的宽度与⾼度。设置值为 auto|数值F 边距与填充属性1 复合属性margin：与边距的距离(margin-top margin-left margin-bottom margin-left)取值可以是：auto默认%⽐或者具体的值：说明：取值可以是⼀个或者两个或者三个或者四个（每个都具有不同的含义）。2 复合属性填充（指⽤⽩值填充）：padding说明：和margin的⽤法⼀样。3 border-width边框宽度：border-top-width:上边框宽度border-right-width:右边框宽度border-bottom-width:底边框宽度border-left-width:左边框宽度取值为：medium 默认宽度；thin 细边框 thick 粗边框4 border-styleborder-top-style:上边框样式border-right-style:右边框样式border-bottom-style:底边框样式border-left-style:左边框样式取值： 含义none 不现实边框，为默认值dotted 点线（电线）dashed 虚线，也称短线solid 实线double 双实线groove 边框带有⽴体感的沟槽ridge 边框成脊形inset 使整个表框凹陷，即在边框内嵌⼊⼀个⽴体边框outset 使整个边框凸起，即在边框外嵌⼊⼀个⽴体边框5 border-color设置边框的颜⾊：⽤法同上margin6: border复合属性：border:边框宽度|样式|颜⾊那么还有：border-top|border—right|border—bottom|border-leftG 列表1:list-style-type 指显⽰于列表项前的标识符号取值： 含义none 表⽰不显⽰列表符号2：列表缩进 list-style-postion 列表位置描述列表在何处显⽰参数：inside 列表内容和列表标识符号处在不同垂直位置，在符号内测。outside 列表内容和列表标识符号处在同⼀垂直位置3： list-style-image说明：⽤图⽚符号作为链接标题取值 含义none 表⽰不指定图像url(⽹页地址) 指定图⽚位置4：复合属性：list-style实现以上三种属性H 光标属性1 cursor 当点击某个内容时，⿏标显⽰其他的图形style="cursor:hand" ⼿形style="cursor:crosshair" ⼗字形G 滤镜属性1 filter6.颜⾊1.单词表⽰法：英⽂单词表⽰法，这个还需要讲吗？如：red,yellow,blue2.16进制表⽰法16进制表⽰的⽅法分为两种：1. 以”0x“开头表⽰，这种表⽰⽅法才是标准的16进制的表⽰⽅法。例如“0x00ffffff”或"0xffffff"2.以“#”开头表⽰，例 如“#FFFFFF”或“#FFF”。区别：其实也没啥区别，都是16进制的，只是常见的是以“#”开头，”0x“开头多在电⼦这⽅⾯，不⽤太关注.需要注意的是：透明度设置，以"0x"开头的，如果后⾯是六位，那么就没有透明度，如果是⼋位，那么“0x”后⾯的两位就是透明度值，范围是：FF~00(不透明~透明)，以“#”开头的也是⼀样前⾯两位；关于透明度值的计算：透明度共有256阶，按百分⽐来计算，如30%透明度，计算⽅法为：255x30%，取整后转16进制即可。关于这两种详细的说明可以参考：Android之颜⾊表⽰法：#与0x的区别表⽰法1.使⽤rgb表⽰r：红；g：绿；b：蓝。就是光的三原⾊例如：rgb(0,0,0)，rgb可⼤写每个值的范围是0-2552.使⽤rgba表⽰仅仅⽐第⼀种多了⼀个a，a 表⽰的是alpha(阿尔法)，表⽰透明度，取值范围是0-1。例如：rgba(10,10,10，0.5)，也可写rgba(10,10,10，.5)，rgba可⼤写/*4.使⽤hsl表⽰1.使⽤hsl表⽰表⽰格式和rgb相似，不同的是数值不同。hsl分别表⽰的是⾊调,饱和度,亮度h：⾊调，取值0-360，颜⾊的底⾊调，表⽰⾊轮周围的⾓度s：饱和度，取值0%-100%，0是没有颜⾊显⽰为灰⾊，100%是全彩⾊l：亮度，取值0%-100%，0是⽆光显⽰为全⿊的，100%是充满光，表现为全⽩。例如：hsl(100,23%,50%)，hsl可⼤写2.使⽤hsla和rgba类似，⽐第⼀种多⼀个a(alpha)透明值，取值范围也是0-1例如：hsla(100,23%,50%，0.5)，也可写hsla(100,23%,50%，.5)，hsla可⼤写*/7.浮动⽅法⼀： 使⽤clear属性的空元素⽅法⼆：使⽤overflow属性给浮动的元素容器添加overflow:hidden/auto；在添加overflow属性后，浮动元素⼜回到了容器层，把容器层撑起来，达到清理浮动的效果另外在 IE6 中还需要触发 hasLayout ，例如为⽗元素设置容器宽⾼或设置 zoom:1。⽅法三：给浮动元素后边的元素添加clear元素⽅法四：使⽤css的:after伪元素.clearfix:after{content:'020';display:block;height:0;clear:both;visibility:hidden;}.clearfix{zoom:1;}8.A标签-target属性 标签的 target 属性规定在何处打开链接⽂档。如果在⼀个 标签内包含⼀个 target 属性，浏览器将会载⼊和显⽰⽤这个标签的 href 属性命名的、名称与这个⽬标吻合的框架或者窗⼝中的⽂档。如果这个指定名称或 id 的框架或者窗⼝不存在，浏览器将打开⼀个新的窗⼝，给这个窗⼝⼀个指定的标记，然后将新的⽂档载⼊那个窗⼝。从此以后，超链接⽂档就可以指向这个新的窗⼝。⽤打开⼀个完整的浏览器窗⼝，使⽤ target 更通常的⽅法是在⼀个
![html手写代码[整理版]](/uploads/image/0198.jpg)
发布评论