html和css简介;

html => 超文本标记语言;由一组标签来盛放各种数据的一个盒子;
　　首先认识标签,分两种,
　　　　一种为单独出现的自封闭标签;
　　　　input, => 输入框和按钮,java常用的为<input type="hidden"/>创建一个隐藏域来存储信息,剩下的为<input type="text" value ="输入框"/>,<input type="file" 　　　　　　value="上传控件"/>,<input type="submit" value ="提交按钮"/>,<input type="button" value="普通按钮"/>;value内为这个输入框的介绍;

　　　　link => 引入css文件使用; 一般为<link rel="stylesheet" href="此处为相对or绝对路径"/>
　　　　img; => 引入图片时使用; <img src="此处为相对or绝对路径" alt="说明文字">;
　　　　一种为成对出现的一个开始标签和一个封闭标签,分为:
　　　　标题：h1-h6;一般一个view中只有一个h1,其余看语义使用;h后面跟的数字越大重要性越低;
　　　　段落:p;段落,说明性文字;字号一般不超过14px;
　　　　行内小标签;一般嵌套在p和h系列标签中使用;用来给不同的样式;不会默认铺满整个屏幕;
　　　　strong = > 粗体,表示强调;类似小标题;一般用在名词上;后面跟他的名词解释;
　　　　em => 斜粗体;表示强调;这个百度面试问过;
　　　　span => 普通文本用来给样式;
　　　　i => 斜体;
　　　　u => 文字带下划线;
　　　　b = > 粗体;
　　　　a = > 超链接标签;
　　　　还有java爱用的font标签;不建议用这个已经废弃了,虽然过渡的xhtml还支持这个标签;
　　　　div => 表示一个独立的内容区域;xhtml和html4.1中最常用的标签;
　　　　dl > dt+dd 定义列表; dt 类似小标题; dd为内容;
　　　　ul > li 无序列表; nav中常用;
　　　　ol > li 有序列表,用在新闻排行之类的排行中较符合语义;
　　　　table = > 表格 tr => 表示行;th(标题) => 第一行的标题; td =>内容;
　　　　上面除了行内的小标签和tr,th,td;均为可独占一行的标签;
2.css = > 层叠样式表;
　　　　css选择器;一般需要在css头部加 @charset "utf-8";以防止出现乱码;
　　　　　　!important 权重最高写法一般为: line-height:30px !important;
　　　　　　行内样式 <div style="width:100px"></div>
　　　　　　#id id选择器 <div id = "wn"></div> 使用为 #wn可以找到此元素,一个id只能使用一次;不可多个表情命名一个id;
　　　　　　.class class 选择器 <div class="wn"></div> .wn 可选中此元素; class可复用;当多个元素拥有相同的样式的时候可以使用同一个class来给他们赋样式;
　　　　　　标签选择器 <div></div> div 可选中所有div标签;因此权重较低
　　　　　　* 通配符 可匹配所有元素，因此权重最低;不建议使用;
　　　　常用样式:
　　　　　　font为符合属性;可以按顺序设置font-style,font-variant,font-weight,font-size/line-height,font-family;最低要设置字体大小和字体样式;如下:
　　　　　　font:12px/20px "Microsoft YaHei,宋体";
　　　　　　height => 高度 单位可以为px(像素);em;rem;
　　　　　　width => 宽度;
　　　　　　margin/padding = > 外边距/内边距;一个值为设置四个方向的距离;两个值为先上下后左右;三个值为上，左右，下;四个值为 marign-top,margin-right;margin-bottom;margin-left;依次为上右下左的边距;一般建议用padding因为你可以使用outerHeight,outerWidth来获取盒子的宽高信息;

　　　　　　color 设置文字的颜色信息;
　　　　　　background:url , arrangement, position;or 色值;例如background:#fff;设置背景颜色为白色; background:url(../image/icon.png) no-repeat center center; 设置一个背景图片为icon.png 不平铺;位置为水平和垂直居中;

　　　　　　text-align = > 文字的排列方式; left center right;
　　　　　　text-indent = > 设置文字缩进;
　　　　　　border:1px solid #ccc; 设置边框;
　　　　　　box-sizing:border-box; content-box;
　　　　　　float:left/right;浮动并脱离标准流;浮动元素对别的元素会有影响;并不能被父元素包裹;公用class clearfix 来清除浮动;
　　　　　　

.clearfix{zoom:1;}
.clearfix::after{content:'.';display:block;clear:both;height:0;visibility:hidden;}

 

　　　　display:block/inline/inline-block/flex; 块/行内/行内块/伸缩容器;
　　　　position:relative/absolute/fixed/static; 相对定位/绝对定位/固定定位/默认定位;
　　　　　　relative相对于自己定位;没有脱离标准流;
　　　　　　absolute相对于离自己最近的祖先节点定位;如果祖先节点查找至body都没有定位信息就相对于body定位;
　　　　　　fixed 相对于窗口(window)定位;
　　　　　　可以设置:top/right/bottom/left;来指定元素的位置;
　　　　　　static 默认;

　　　　line-height的继承;line-height 可以有三个值;100px/200%/2;
　　　　　　第一个值为固定继承为直接继承;
　　　　　　200%和子孙的宽高和字体大小没有关系;只和设置这个属性的标签的font-size有关,计算之后转换为固定值继承;
　　　　　　2 因子继承 如果继承了line-height:2;那么行高为自身的font-size*2;和父级的font-size无关;
　　　　text-decoration:underline/none/line-through 线在文字下方/无线/线水平穿过文字;

转载于:https://www.cnblogs.com/clearfix/p/4150221.html