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）行间样式：

（2）内部样式：在head标签内部，用style标签来包裹：<style></style>

（3）外部样式:先新建一个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{width:200px;height:200px;background:blue;}

③id选择器：给元素起一个id名；#（一个html文档只能用一次）

#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

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

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里给连进来）

(max-width:800px)"/>

css当中的写法：

@media screen and ( max-width:800px ){};

横屏 @media screen and ( orientation:landscape ){};

竖屏 @media screen and ( orientation:portrait){};

来看例子

24.把文件给链接进来的方法：

（1）相对找

（2）盘符

25.有关overflow：hidden；的用法

overflow：hidden；加给父元素；

26.

拿到设计图，首先划块分区，然后去做细节，首先写一个大的div，确定width和height，

然后在确定大的div里面包含的小div，除了微软雅黑和宋体之外的其他字体，都可以切成图片，也可以跟需求的人沟通；

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

正常文档流是从上往下；

27.手机端不用处理兼容问题，要处理手机尺寸的匹配问题；

猜你喜欢