黑马程序员技术交流社区
标题: html和css的总结 [打印本页]
作者: alittlelit 时间: 2018-9-13 21:36
标题: html和css的总结
Web标准：
目的是展示统一内容，有三层：结构（html） 表现（css） 行为（js）
在HTML中语义化十分重要，我们需要理解HTML语义化
1、什么是HTML语义化？
<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2、为什么要语义化？
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
总而言之，语义化就是在合适的地方用合适的标签
3、写HTML代码时应注意什么？
尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
常用快捷键
命名的规范总结
unicode 编码
容易忘的伪类
a:link{属性:值;} 链接默认状态 a{属性:值;}是一样的
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放上去显示的状态
a:active{属性:值;} 链接激活的状态
:focus{属性:值;} 获取焦点
CSS初始化总结
腾讯：
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
新浪：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
淘宝：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
emmet快捷键：emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
html:１.1 生成结构的快捷键：！+ tab,可以生成html5的结构代码。
１.2 生成id名和类名标签名.类名#id名+tab
没有标签名.类名+tab ==>div
１.3 生成同级元素：标签名+标签名+标签名 “+”tab
１.4 生成子类标签标签名>子标签名>子标签名>子标签名+tab
标签名>子标签名>子标签名>子标签名^^子标签名+tab
１.5 带固定数量的标签: ul>li*5+tab１.6 带有序号名称 ul>li.abc$*3 + tab
１.7 生成带有内容的标签：ul>li>a{item}*5
css width:30px==>w30+tab
Height:30px==>h30+tab
Margin:30px==>mg30+tab
Padding:30px==> pd30+tab
Line-height:12px==>lh12px+tab
Background==>bg+tab
一些常见问题以及解决方法
块级盒子的水平居中(block)
条件：有宽度 左右外边距位auto
写法： margin: 0 auto;
让盒子里的文字居中
写法： text-align：center; (适用于行内元素和行内块元素)
插入图片和背景图片区别
一般用插入图片，小图片用背景图
产品类图片用插入图
背景图用background-position移动位置
插入图用padding和margin移动位置
外边距合并
左右边距无问题
垂直相邻的两盒子外边距会合并，会按照大的margin显示
解决方法：只设置一个盒子的margin
嵌套块元素外边距合并（塌陷）
当子元素设置垂直方向margin，父元素会随子元素一起移动
解决办法： 为父元素设置上边框
为父元素设置上padding
为父元素加overflow:hidden
注：子盒子浮动了，不会外边距塌陷
盒子布局稳定性
Width > padding > margin
图片与下面盒子间有默认距离
解决办法： 把图片转化为块元素 （display: inline-block;）
给图片样式加上 vertical-align:middle;
给下面盒子定义高
父盒子未设置高度，子盒子浮动，父盒子下面盒子会升到父盒子下面
（父盒子无高度，子盒子浮动了，影响了下面布局）
解决方法 给父盒子清除浮动
清除浮动的方法：
额外标签法(隔墙法) 在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
父级添加overflow属性方法 可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
使用after伪元素清除浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {*zoom: 1;} /* IE6、7 专有 */
使用双伪元素清除浮动
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
一个父盒子里的几个子盒子需要垂直居中
解决方法：给父盒子设置height和line-height,让两者相等
li的竖直排列：
布局时，给li设置行高和高度相等，行高自己量
-
1.png
(101.91 KB, 下载次数: 21)
unicode编码
-
2.png
(95.2 KB, 下载次数: 18)
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
