首页  关于  方案  案例  联系
菜单
电话咨询

H5最基础知识点

北京H5开发,北京H5制作,H5制作,H5开发H5最基础知识点,一点一点的写,一步一步的写,例如写到字体时要想到字体相关的属性,长的很像的,做出来了一个,其他的都会跟着出来,要用到ul,li;然后在确定li里面的内容,若是浏览器出来的li里面有默认样式,就要清除掉默认样式;

日期:2018-11-07来源:北京H5开发

案例标签: 北京H5开发
1.常见标签的用法:
*块元素(独占一行,具有宽高属性)block:h1~h6,p,ul,li,ol,li,div,dl,dt,dd,p;
h1~h6:标题元素;
<p></p>:段落;
列表相关的(无序列表):<ul></ul>,<li></li>
列表相关的(有序列表):<ol></ol>,<li></li>
定义标题和描述:<dl> <dt>标题</dt><dd>描述</dd> </dl>
*内联元素(宽高由内容撑开,不单独站一行)inline:span局部小细节,strong加粗着重强调,em倾斜着重强调有语义,b加粗,i倾斜,img引入一张图片,font字体,a超链接;<a href="#" target="_blank">我是一个超链接</a>;
内联元素:a可以在一行排列;b不具有宽高属性;c宽高由内容撑开;d代码折行会被解析;
*内联块:inline-block;具有宽高属性,可以排成一行,代码折行会被解析(出现间隙);
*内联元素可以和块元素互转:display:inline;display:block;
将元素转化成内联块:display:inline-block;
2.引入样式的三种方式:
(1)行间样式:
<div style="width:200px;height:200px;background:blue;"></div>
(2)内部样式:在head标签内部,用style标签来包裹:<style></style>
<style>width:200px;height:200px;background:blue;</style>
(3)外部样式:先新建一个css样式表让后链接到标签里面:
<link href="" rel="stylesheet" type="text/css"/>
优先级:行间>内部>外部(同一个标签,同一个选择器;)
3.标准盒模型 相关的:width,height,border,padding,margin;
内外是以border为界限;
margin:外边距:一个值,上右下左
两个值,上下 左右
三个值,上 左右 下
四个值,上右下左(顺时针)
margin值叠加:垂直方向的margin值会出现叠加的问题,连个值相等的时候就取当前值,一大一小取较大值;可以利用其中一个的margin值来控制垂直方向上的间距,以避免问题;padding值不会出现叠加的问题;

padding:内边距;同margin一样的;
border-width:
border-style:solid(实线);dashed(虚线);
border-color:
上面的可以简写为:border:宽度 样式 颜色;border:2px solid #000;

标准盒子的占位宽=定义宽(width)+padding+border+margin;
标准盒子的占位高=定义高(height)+padding+border+margin;

div的占位宽=border-left+margin-left+padding-left+width+padding-right+margin-right+border-right;
div的占位高=border-top+margin-top+padding-top+height+padding-bottom+margin-bottom+border-bottom;
4.背景相关的:background
-color:
-image:url
-repeat:repeat(默认)/ no-repeat/ repeat-x /repeat-y;
-position:水平方向,垂直方向;
-attachment:scroll背景不跟随滚动条滚动/fixed背景跟对滚动条滚动;
可以简写为:
background:颜色,路径,是否平铺,x,y;
5.字体相关的:font
font-family:
font-size:
font-weight:
font-style:
可以简写为:font:style weight 字号/行高 family;中间用空格隔开;
color:字体颜色;
line-height:
text-align:left(默认),right,center;文字对齐方式
text-indent:2em;首行缩进;
letter-spacing:
word-spacing:
6.浮动:float:left/right/none(不浮动,注销浮动);可以使块元素在一行显示;
*清浮动常用的两种办法:
①写一个空div,放在浮动元素的后面:<div class=clearFloat></div>
.clearFloat{clear:both;}
②将clearFloat加给浮动元素的父元素:
.clearFloat{*zoom:1;} //这个是为了解决兼容问题;
.clearFloat:after{content:"";display:block;clear:both;}
7.定位:position:relative,absolute,fixed,static(不定位,静止的,默认值;)
fixed,漂浮于窗口外又相对独立,跟随窗口定位,跟随滚动,
在IE6 下不好使,解决办法:1.表达式做兼容
2.用JS来解决;
z-index:10;针对定位元素,值越大 层级越高,从父原则(拼爹);
8.css 选择器:
①类选择器:就是给元素起一个class名;class=box;在选择的时候就是来一个英文状态下的句号:.box{编辑样式}
<div class="box"></div>
②元素选择器:直接将标签单拎出来:div{width:200px;height:200px;background:blue;}
③id选择器:给元素起一个id名;#(一个html文档只能用一次)
<div id="div2"></div>
#div2{}
④*通配符,匹配所有的标签;
⑤派生选择器:(包含关系,空格隔开;)h3 span{};box p{};#box li a{};
(并列关系,同一级,不存在嵌套;兄弟关系~)h3~p{};
(相邻关系+)h3+p{};选中的是h3之后的兄弟元素p;
⑥群组选择器:(逗号分开,共用一套样式)div,p,h3{};

选择器的优先级:id>class>元素;
8.表格(table)
thead,tbody,th,tr,td;
边框合并加给table:table{border-collapse:collapse;}
table td{border:1px solid #000;}

9.表单(form)
声明表单搜集信息的区域;
10.h5新增标签(元素)
header,nav,artical,aside,footer,section,hgroup,figure(figurecaption),
address,progress,time,mark,details(summary),
datelist(和input配合用要给datelist加一个id,简历联系;)
11.表单类型(type=”“)
email,number,search,url,color,date,datetime,month,range,week,
datetime-local.
12.表单新增属性
autofocus,自动获取焦点
required,必填项
placeholder,输入提示
pattern,正则验证
autocomplete,自定完成
formaction,表单提交的目标地址
formmethod,表单提交的方式
spellcheck,拼写检查
accept,限制上传类型
form="",(给form起一个id名,在input里面
添加form="";)
13.全局属性:
hidden,隐藏
designMode,(on/off)设计模式
contenteditable,(true/false)允许元素可编辑
14.有关css选择器
①属性选择器(新增的)
E [ attr = "val"]{}; 等于
^ 开始
* 包含
$ 结尾
~ 属性值为一个词列表,包含
| val-开始
②伪类选择器:单个冒号
E:first-child{}
E:last-child{};
E:nth-child(n){};
2n-1
2n
even 偶数
odd 奇数
E:nth-last-child(n){};
E:only-child(){};

E:first-of-type{};
E:last-of-type{};
E:nth-of-type(n){};
2n-1
2n
even 偶数
odd 奇数
E:empty{};
E:not(selector){};
E:enabled{};可用
E:checked{};选中
E:disabled{};禁用
E:target{};匹配相关URL指向的元素;
③伪对象(元素)选择器:双冒号
E::before{};
E::after{};
E::selection{};
E::first-line{};
E::first-letter{};
15.文本相关
text-stroke:
text-shadow:
white-space:nowrap;
word-break:break-all;(长单词长url断开,换行,连续字符换行)
word-wrap:break-word;
direction:ltr/rtl;(配合Unicode-bidi:bidi-override;;来使用)
自定义字体:@font-face{
font-family:“ ”;
src: ;
url,.....
}
16.颜色表示方法:
①rgba(0,0,0,0.5);
r红色,取值范围为0~255
g绿色,取值范围为0~255
b蓝色,取值范围为0~255
a透明度,取值范围为0~1
②hsla(180,10%,10%,0.5);
h色调,取值范围为0~360
s饱和度,取值范围为0~100%
l亮度,取值范围为0~100%
a透明度,取值范围为0~1
17.背景相关
background-size:水平 垂直 百分比/px ;(cover,contain)
background-clip:padding-box;
border-box;
content-box;
background-origin:padding-box;
border-box;
content-box;
多背景是用逗号隔开:background:url(),url();
背景的线性渐变:background:linear-gradient(red,green,blue) 方向:left top right bottom left top deg;
背景重复: background:-webkit-repeating-linear-gradient(red 10% ,blue 20%);
背景径向渐变:background:radial-gradient;
18.边框图片(border-image)
简写的顺序:src slice/width repeat (round repeat stretch);
border-image:src slice width repeat (round repeat stretch);
其中slice没有单位,round平铺,repeat重复,stretch拉伸,一个值:水平垂直
两个值:水平 垂直;
19.圆角(border-radius:)
border-radius:一个值 四个角水平垂直半径相同;
2个值 斜对角;
3个值 上左 上右下左 下右;
4个值 上左 上右 下右 下左;
border-radius:水平半径/垂直半径;
20.盒模型相关:
box-shadow:
box-sizing:border-box;(怪异盒模型,定义的width和height包含padding和border)
content-box;(标准盒模型,定义的width和height不包含padding和border)
21.弹性盒相关:(给父元素加)
display:-webkit-box;(加给父元素)
box-orient:vertical;(纵向,垂直)
horizontal;(横向,水平)
box-direction:normal;
reverse;(反向排列)
box-ordinal-group:设置弹性盒子元素显示顺序;
box-pack:start; (水平方向)
center;
end;
justify;
box-align:start;(垂直方向)
end;
center;
box-flex:值为数字; 分配弹性盒子的剩余空间(将剩下的分为几份)
resize:both,vertical,horizontal,(配合overflow:auto使用)
box-reflect:above,below,left,right;
22.多栏布局
column-width
column-count
column-gap
column-rule
23.媒体查询:(先在head里给连进来)
<link href="1.css" rel="stylesheet" type="text/css" media="screen and
(max-width:800px)"/>

css当中的写法:
@media screen and ( max-width:800px ){};
横屏 @media screen and ( orientation:landscape ){};
竖屏 @media screen and ( orientation:portrait){};
来看例子
<link href="max600.css" rel="stylesheet" type="text/css" media="screen and (max-width:600px)">
<link href="600and900.css" rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:900px)">
<link href="min900.css" rel="stylesheet" type="text/css" media="screen and (min-width:900px)">

24.把文件给链接进来的方法:
(1)相对找
(2)盘符
25.有关overflow:hidden;的用法
overflow:hidden;加给父元素;
26.
拿到设计图,首先划块分区,然后去做细节,首先写一个大的div,确定width和height,
然后在确定大的div里面包含的小div,除了微软雅黑和宋体之外的其他字体,都可以切成图片,也可以跟需求的人沟通;
一点一点的写,一步一步的写,例如写到字体时要想到字体相关的属性,长的很像的,做出来了一个,其他的都会跟着出来,要用到ul,li;然后在确定li里面的内容,若是浏览器出来的li里面有默认样式,就要清除掉默认样式;
正常文档流是从上往下;

27.手机端不用处理兼容问题,要处理手机尺寸的匹配问题;
THANKS!
0

010-52875431 / 132-6931-9513

微信二维码