陕西省建设工程安全协会网站,网站怎么优化关键词,wordpress同分类文章,服务器搭建网站域名配置1 这是自己学习html时候做的一些记录#xff0c;供大家参考 !--2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义#xff0c;就是一个纯粹的快元素6 就是为了方便布局7 … 1 这是自己学习html时候做的一些记录供大家参考 !--
2 块和内联
3 块元素:独占一行的元素
4 div p h ul
5 div没有任何语义就是一个纯粹的快元素
6 就是为了方便布局
7
8 span是内联元素行内元素只会占用自身大小的元素不会占用一行
9 常见的内联元素a img iframe span
10 span没有任何意义可以设置样式
11 块元素主要用来实现页面布局内联元素主要选中文本设置样式
12 一般情况下只是用块元素去包含内联元素内联元素不去包含块元素
13 a元素可以包含任何元素除去本身
14 p元素中不能放任何块元素
15 --
16 !--
17 类选择器idclassid不能重复class可以重复
18 class能赋多个值使用空格隔开
19 class用.
20 id用#
21
22 选择器分组
23 - 通过选择器可以同时选中多个元素
24 - 语法选择器1选择器2。。。
25 通配选择器*{}
26 选中页面中所有元素
27
28 复合选择器
29 - 作用:
30 同时满足多个条件
31 选择器1选择器2.。 选择器中间没有间隔
32
33 伪类选择器必须顺序使用如下但他们的优先级是一样的
34 伪类选择器:link,:visited, :hover:active, :focus, ::selection,
35 伪元素(用来设置元素中的一些特殊位置):first-letter :first-line
36 :before, :after
37 before和after一般结合content使用通过content添加内容
38 例如
39 p{
40 content:sdfsfdd;
41 }
42
43
44
45
46 --
47 !-- --
48 !-- 属性选择器 --
49 !-- --
50 !--
51
52 title属性这个属性可以用于任何标签指定提示文字
53 例如p title 这是一个title提示十分士大夫的/p
54
55 属性选择器选取拥有特定属性的标签。
56 语法 [属性名] [属性名属性值]
57 [属性名^属性值](选取以属性值开头的属性元素)
58 [属性名$属性值](选取以指定内容结尾的属性标签)
59 [属性名属性值](选取包含指定内容的属性标签)
60 例如p[title]{}p[title属性值]
61
62
63 子元素选择器 first-child(选中第一个元素并且自身是子元素):last-child
64 :nth-child(子元素的位置)选定子元素任意位置。even表示偶数位的子元素odd表示奇数位的子元素[IE8以下的浏览器是不支持的]
65 :first-of-type,:last-of-type[同一类中的第一个]
66 父 子类型 IE6不支持
67
68 兄弟选择器
69 p 后一个兄弟元素{}
70 p ~后面所有类型的兄弟元素
71
72
73 否定伪类可以从已经选中的元素中剔除某些元素
74 p:not(选择器){}
75 样式的继承后代会继承祖先的样式,但是并不是所有的样式都会被子继承例如背景是不会被继承的
76
77
78
79
80 使用不同的选择器选中同一个元素设置相同的样式时、
81 这时候样式之间产生了冲突
82 优先级内联样式idclass元素选择器通配
83 如果优先级相同会选择靠后的一个
84 可以在样式的最后添加一个important将会获得最高优先级。但在开发中尽量避免使用
85 --
86
87 !--
88 这两个都表示强调的内容
89 em 强调着重点表示语气上的强调em在浏览器中默认使用斜体显示
90 strong 表示强调比em更强列默认使用粗体显示
91 --
92
93 !--
94 i标签没有任何语义没有着重的意义
95 b只是丹村的加粗
96 --
97
98 !--
99 small标签的内容文字较小
100 可以用于版权声明合同
101 --
102
103 !--
104 cite用于加书名号的内容表示参考的内容
105 --
106
107 !--
108
109 q标签表示一个引用会自动加上引号
110
111 blockquote 表示长引用表示一个块元素
112
113 sub,sup下标和上标
114
115 pre标签是一个预格式标签保留格式空格不会删除空格显示
116
117 --
118
119 !--
120
121 列表有三种
122 1.有序列表 ol li
123 2.无序列表 ul li
124 3.定义列表 dl 包含dt(被定义的内容) dd对定义内容的描述
125
126 --
127
128 !-- --
129 !-- 长度单位 --
130 !-- --
131 !--
132 长度单位
133 px 像素
134 百分比% 占父元素的比例
135 em 和百分比相似
136 根据当前的字体大小来计算的
137 1em 1font-size 当字体大小发生变化时em也会变化
138 设置字体相关的样式时会使用
139
140 --
141
142 !-- --
143 !-- 字体样式 --
144 !-- --
145 !--
146
147 line-height 表示行高 可以继承
148 px时
149 、行间距 行高 - 字体大小
150 定义一个百分数相对于字体大小来说
151 直接指定行高传入数值行高会设置字体大小的倍数
152
153 使用font定义字体时如果不在font中指定都会采用默认值所以要么在font后定义单独样式要么不指定
154 font-family
155 font-variant
156 font-size
157 font-weight
158 font-style
159 color
160 line-height
161 --
162
163 !--
164
165 关于文本的一些常用的样式
166
167 text-transform(文字变形): 可以继承
168 值none默认, capitalize(首字母大写)uppercase(全部大写)lowercase(小写)inherent
169 text-decoration(定义文本的修饰)不可继承
170 可选值none不加任何修饰
171 underline加下划线
172 、 overline 加上划线
173 line-through 为文本添加删除线
174
175 超链接会默认添加下划线可以设置text-decoration 为none去除下划线
176 letter-spacing字符之间的间距【中英文都有效】
177 word-spacing 单词之间的距离【中文改变空格的大小英文是词与词之间】
178 text-align文本的对齐 left right center justify两端对齐
179
180 text-indent首行缩进 em单位表示一个单词 如果是负值字体就会隐藏
181 --
182
183 !--
184 盒子
185 width和height来设置盒子内容区的宽度和高度
186 设置边框必须设置三个样式缺一不可 但是他们都有默认值 border-weight上 右 下 左 上 左右 下 上下 左右border-color上 右 下 左 上 左右 下 上下 左右border-style
187 可以设定border设置三个样式没有顺序要求例如 border:10px red solid border-right:none
188
189 margin外边距 padding(内边距)
190 margin可以设置为auto能设置多大就设置多大 一般只是设定水平方向的left和right同时设置为auto会一边一半经常会使用这样来使盒子居中
191 垂直方向设置auto外边距默认为0不起作用
192 垂直外边距的折叠
193 在网页中垂直方向的相邻外边距会重叠
194 外边距重叠指的是兄弟元素相邻外边距会取最大值
195 如果父子元素的垂直外边距相邻了则子元素的外边距会设置给父元素
196 解决方案把父子元素的外边距给隔离可以设置顶部border或者设置padding内边距
197
198
199 浏览器设置了默认样式为很多元素设置了padding和margin为了在没有样式时也有一个好的显示效果
200 所以我们需要将浏览器默认设置的样式去掉由于通配选择器是最低优先级所以在通配选择器中设置margin和padding为0
201 *{
202 margin0
203 padding0
204 }
205 --
206
207 !-- --
208 !-- 内联元素和块元素 --
209 !-- --
210 !--
211
212 内联元素和块元素的区别
213 内联元素
214 内容块
215 不能设置width和height没有用
216 内边距
217 可以设置padding水平垂直都可以但是垂直方向不会影响布局。
218 边框
219 可以设置边框但是垂直方向不会影响布局
220 外边距
221 水平方向的外边距不会重叠而是求和
222 不支持垂直方向的外边距
223
224
225 display:会改变元素的类型 inline-block block none不显示且不占空间
226 visibility是否显示visible hidden隐藏但是占用空间
227 overflow对溢出的部分进行处理【注在父元素中进行设置】
228 visible 默认值在父元素以外的位置显示
229 hidden 溢出的内容会被修剪不会显示
230 scroll 产生滚动条使用滚动条查看溢出的内容
231 - 无论内容是否溢出都会显示滚动条
232 auto根据需要来决定是否需要添加滚动条
233 --
234
235 !-- --
236 !-- 文档流和浮动 --
237 !-- --
238 !--
239 一旦脱离文档流元素不在区分块元素和内联元素只是互补。如果是块元素则会在快元素的基础上拥有内联元素的特性反之亦然
240
241 一旦脱离文档流可以去往任何位置。拥有所有特性可以这么说 就是高层次的inline-block内联和块元素的结合
242
243 文档流
244
245
246 文档流处在网页的底部他表示的是一个页面中的位置
247 我们所创建的元素默认都在文档流里面
248
249 元素在文档流中的特点
250 块元素
251 1.在文档流中独占一行
252 内联元素
253 1。只占用自身的大小从左到右排列
254
255
256 把块元素水平排列把块元素从文档流中剔除出来可以用float实行
257
258 元素与元素之间一般情况下都是换行显示所以中间会有个空格可使用float消除空格。
259 float只要元素浮动下面的元素会顶上去被浮动的元素覆盖。只有下面的元素也设置浮动才会浮动到同一水平位置上
260 none
261 left 从文档流中脱离出来向页面左侧浮动
262 right从文档流中脱离出来向页面右侧侧浮动
263
264 一旦浮动都会脱离文档流可以设置宽高和块元素一样
265 一旦脱离文档流会相当于从当前布局脱离出去就当不存在一样剩余的布局从新界定
266 1.高度塌陷问题父元素不设定高度子元素浮动之后父元素会塌陷没有高度。可以将父元素的高度写死避免这种问题出现但是一旦写死父元素将不能自适应布局不推荐使用
267 --
268
269 !-- --
270 !-- 解决浮动问题产生的高度塌陷 --
271 !-- --
272
273 !--
274 、
275 根据w3c标准在页面中元素都包含一个隐含的属性BFCblcok formatting context
276 默认是关闭的
277 开启BFC主要解决浮动的问题
278 当开启BFC时候元素将会由如下特性
279 .父元素的垂直外边距不会和子元素重叠
280 .开启BFC的元素不会被浮动元素所覆盖
281 .开启BFC的元素可以包含浮动的子元素
282 如何开启BFC
283 .设置元素浮动不建议使用 会导致布局混乱父元素宽度丢失
284 .设置inlineblock父元素宽度丢失不推荐使用
285 .设置绝对定位一样的效果和第一个
286 .将元素的overflow设置为非visible的值一般使用auto和hidden
287 推荐使用第四种方式
288 但在IE及以下版本不支持BFC所以使用这种方式不能兼容IE6
289 但是有另一个属性叫 Has Layout
290 该属性的作用和BFC类似在IE6中可以开启这个属性来设置塌陷问题
291 开启方式很多我们直接使用一种副作用最小的
292 直接将元素的zoom设置为1就行zoom表示放大的意思后边跟着一个数值就是将我么的元素放大几倍。 zoom只在IE中支持
293
294 如果希望清除其他浮动元素对当前元素的影响对当前元素应用clear属性
295 可选值
296 none
297 left 清除左边浮动元素对当前元素的影响
298 right
299 both 清除对当前元素影响最大的
300
301
302
303 解决塌陷方案一
304 1.1在父子中使用 overflow zoom消除外边距重叠影响
305 1.2在兄弟中使用clear清除浮动影响
306 解决塌陷方案二、、
307 2.1在父子中在浮动元素下方添加一个div 在这个div中使用clear
308 2.2在兄弟中直接使用clear
309 w3c推荐使用
310 解决塌陷问题方案三
311 3.1通过after伪类选中父元素的后面添加一个空元素
312 div:after{
313 content:;
314 display:block;
315 clear:both;
316 }
317 在IE6中不兼容需要使用
318 div{
319 zoom:1;
320 }
321 3.2在兄弟中直接使用clear
322 最推荐的一种方式
323 同时解决父元素外边距和子元素相邻 高度塌陷问题
324 使用空的table标签可以做到这一点
325 div:after,div:before{
326 content:;
327 display:table;
328 clear:both;
329 }
330
331 在IE里面块元素和内联元素都是看作块元素这个要注意
332 --
333 !-- --
334 !-- 关于定位 --
335 !-- --
336 !--
337 定位
338 定位指的是将指定的元素放到任意的位置
339 position
340 可选值
341 static
342 relative
343 absolute
344 fixed
345
346
347 relative:
348 1. 相对自身位置在文档流中的原来位置进行定位通过left righttop , bottom来设置、
349 2. 相对定位不会脱离文档流原来的位置仍然占用
350 3. 相对定位会使元素提升一个层级如果发生重叠会覆盖别的元素
351 4. 相对定位不会改变元素的性质块元素还是块元素内联元素还是内联元素
352
353 absolute设置绝对定位
354 1. 会使元素脱离文档流
355 2. 开启绝对定位不设置偏移量位置不发生变化
356 3.绝对定位是相当于离他最近的开启定位的祖先元素定位的一般情况下开启了子元素的绝对定位父元素会开启相对定位
357 如果所有祖先元素没有开启定位就会相对于浏览器进行定位
358 4.绝对定位会提升一个层级
359 5. 绝对定位会改变元素的性质
360 内联元素变成块元素
361 块元素的高度和宽度默认都被内容撑开
362 fixed定位绝对定位的一种
363 1. 元素会脱离文档流
364 不同的是
365 固定定位永远都是根据浏览器窗口进行定位的
366 固定定位不会随滚动条滚动
367 IE6不支持这个固定定位
368
369 关于层级
370 如果元素都提升了等级在布局上谁在下面就会盖住上面的元素
371 通过z-index属性可以用来设置元素的层级为z-index指定一个值数值越高越优先显示
372 对于没有开启定位的元素z-index没有用
373 父元素的层级再高也不会遮挡子元素
374 --
375
376 !-- --
377 !-- 透明 --
378 !-- --
379 !--
380
381 opacity用于设置透明度
382
383 在IE8及以下
384 需要使用filteralphaopacity 在IE tester中不行是个bug
385
386 --
387
388 !-- --
389 !-- 背景图片 --
390 !-- --
391 !--
392 所有的背景可以用background一个属性来设置属性之间没有顺序
393 background-img来设置背景图片
394 语法background-img:url()
395 - 背景元素大于当前大小会显示左上角
396 - 背景元素小于当前大小则会默认平铺用图片不断填充
397 - 背景颜色一定实在背景图片的后边
398
399
400 background-repeat 设置背景图片的重复方式
401 可选值
402 repeat 双向重复
403 no-repeat 不重复,有多大就显示多大
404 repeat-x 横着重复竖着不重复
405 repeat-y 竖着不重复横着重复
406
407
408 background-position 设定图片的显示位置
409 可选值 top left center bottmo right
410 也可以使用偏移量 一个水平 一个垂直 。 可以指定正值和负值
411
412
413 background-attachment用来设置背景图片是否随页面一起滚动
414 scroll 默认值 滚动
415 fixed 固定在某一位置 不随页面滚动 背景图片永远相对于浏览器窗口进行布置这个属性值一般只会设置个body元素其他的基本不用
416 --
417
418
419 !-- --
420 !-- 表格 --
421 !-- --
422 !--
423
424 table表格 colspan 横向合并单元格
425 rowspan 列合并
426 border-spacing 表格和单元格之间的距离
427 border-collapse 设置表格边框合并 如果设置了这个边框合并border-spacing不起作用
428 th 表头
429 提供了三个子标签来设置长标签 thead tbody tfoot 表示不同的主题这三个是固定位置显示可以不顺序写
430 如果没有写tbody会自动把tr放到tbody中
431 --
432
433
434
435 !-- --
436 !-- 表单 --
437 !-- --
438 !--
439 使用fieldset来为表单项进行分组使用legend来指定组名
440 fieldset
441 legend
442
443 /legend
444 /fieldset
445
446 input类型 【输入框是通过name来提价数据到服务器端的name是必不可少的】
447 注意
448 1.像不需要用户去填的但是用户去选择的必须写上value值提交到服务器
449 2.如果在单选或者多选希望选中默认值可以使用checked“checked”来设置选中
450 3.在select中的option中添加selected”selected“
451 4.input 的placeholder提示文字IE8及以下不支持需要用js代码设置
452 5.在IE6中input的背景图片会滚动在IE6中单独使用attachmentfixed其他浏览器不用这么设置
453
454 text
455 password
456 radio 单选按钮 name必须相同实现单选
457 checkbox 多选框 name必须相同 value必须指定
458 select
459 下拉列表 使用option来设置列表项在select中添加一个multiple可以设置多选。 name属性需要指定给select value指定给option
460 在select中可以使用optgroup对选项进行分组label设置组名
461 textarea 多行文本框
462 button
463 submit
464 reset
465 button类型
466 submit
467 reset
468 button
469 label标签 选中提示名 需要一个for属性指定一个表单项的id
470 例如 label formyIdusername/label
471 input idmyId typetext nameusername /
472
473 --
474
475 !-- --
476 !-- 框架集 --
477 !-- --
478 !--
479
480 框架集和内联框架的作用相似都是作用于一个页面中引入其他的外部的页面
481 框架集可以引入多个页面而内联框架只能引入一个
482
483 使用一个frameset来创建一个框架集 frameset和body不能同时使用
484 属性
485 rows 指定框架集中的所有的框架一行一行的排列
486 cols 列排列
487 这连个属性必须选择一个指定框架占的比例
488 框架集中也可以嵌套框架集
489 他里卖的内容是不会被搜索引擎检索的整个页面只能引用别的页面
490 引入一个页面就会发送一个请求用户体验较差
491 如果非要使用建议使用frameset 不建议使用iframe
492 frameset
493 frame srcurl/
494 /frameset
495
496 --
497
498 !-- --
499 !-- 实现有选择性的执行css和js代码 --
500 !-- --
501 !--
502 使用这个代码可以选择性的在IE中执行IE10及以上版本不支持这个代码
503 条件hack
504 !--[if IE]
505
506 ![endif]--
507 !--可以这样设置
508 if lt IE 8 表示小于IE8版本的都会执行
509 if IE 8 不是IE8的都会执行
510 if IE 8 等于
511 if ht IE 8大于
512
513 [if IE 6]
514
515 在body最后写js代码
516 解决IE6不支持png24修复图片--
517
518 script typetext/javascript srcjs/DD_belatedPNG_0.0.8a-min.js/script
519 script typetext/javascript
520 DD_belatedPNG.fix(要修复的元素选择器另一个选择器);
521 /script
522 --
523
524
525
526
527
528
529
530
531
532 !--属性hack
533 在属性前面添加符号可以在IE版本中有选择性的执行
534 _ 下划线 只有在IE6及版本以下才执行
535 * 星号 只在IE7及以下执行
536 在选择器前加 *html 只有IE才能识别
537 --
538
539 !-- --
540 !-- 实战经验 --
541 !-- --
542 !--
543 一
544 设置按钮效果使用背景图片设置按钮设置背景的位置时表示按钮的状态
545 图片整合技术css-sprite把多张图片整合成一张图片然后设置图片的位置显示其中的不同图片
546 优点
547 1. 浏览器只需要发送一次请求加载多个图片。
548 提高用户体验
549 2. 图片整合为一张图片提高了请求的速度 减小了图片大小
550
551 IE6中队png24支持度不高
552 如果使用的图片格式是png24会导致透明效果消失
553 解决方案
554 1.可以把png24改为png8
555 2.使用js代码来解决该问题
556 script typetext/javascript srcjs/DD_belatedPNG_0.0.8a-min.js/script
557 script typetext/javascript
558 DD_belatedPNG.fix(要修复的元素选择器另一个选择器);
559 /script
560 二
561 每个浏览器设置空格的效果不大一样这个需要注意
562 三
563 设置pointer-eventsnone可以让本元素丧失掉焦点。下级元素不会被遮挡事件处理
564 --
565 本文转载于:猿2048➮https://www.mk2048.com/blog/blog.php?id0ika1kjtitlehtmlcss基础知识
