当前位置:首页 > 网站技术 > 前端技术 > 正文内容

前端入门html、css、js知识汇总(1)

binadmin2020-05-26前端技术158

注:本文适合需要一点前端知识,如有不懂自行百度或去W3C官网、去菜鸟教程查询

1.html不需要编译,直接由浏览器执行
  html文件时一个文本文件
  html文件必须使用html或htm为文件后缀
  html大小写不敏感,htmlhtml一样
2.bgcolor指的是背景颜色
3.<!DOCTYPE html>不属于html标签,它用于定义文档类型。
4.<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5.标签属性align="justify" 对行进行伸展,这样每行都可以有相等的长度
6.pre 预格式化标签,文本在浏览器中显示时遵循在HTML源文档中定义的格式
7.添加li无序属性type,disc,square,circle
8._self:在当前窗口打开;
_blank:在新窗口打开;
_parent:在父框架集中打开被链接文档;
_top:在整个窗口中打开被链接文档。
9.不同页面定义锚点:
网页1:<a href='网页2#锚点'>...</a>
网页2:<a name='锚点'>...</a>
10.表格的标题使用caption标签
11.使用结构表格,实现边加载边显示效果
thead:放表格的表头
tbody:放表格的主体
tfoot:放表格的脚注
12.跨列属性colspan
跨行属性rowspan
单元格与内容的空隙 cellpadding
单元格与单元格的空隙 cellspacing
13.嵌入表格说明:完整的表格结构;放到<td>标签中
14.表单标签optgroup,分组划分下拉菜单列表标签
15.input图像域type='image',起到submit功能
<input type='image' src='图片路径' />
16.get和post区别
get:使用url传递参数
对所发送信息的数量也有限制
一般用于信息获取
post:表单数据作为http请求体的一部分
对所发送信息的数量无限制
一般用于修改服务器上的资源
17.form标签的属性enctype 对表单数据进行编码(三种)
18.链接伪类的顺序: :link>:visited>:hover>active
19.IETester  IE浏览器测试工具
20.www.bootcss.com/p/websafecolors/  web安全色
21.font简写:font:font-style font-variant font-weight font-size/line-height font-family
22.垂直方式:vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比
23.水平垂直居中:1块级元素中单行文本居中:heihgt:400px;line-height:400px;text-align:center
块级元素水平垂直居中:
父级设置position: relative;
自己设置position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
 2多行文本垂直居中:爷爷元素设置display:table 父元素设置vertical-align:middle;display:table-cell
24.间距:单词之间间距word-sapcing   字母之间间距letter-spacing(单词的判断以空格为标准)
25.设置元素文本大小写text-transform  capitalize|uppercase|lowercase|none
26.设置元素文本划线text-decoration  underline|overline|line-through|blink|none
27.当一个元素同时设置max-height和min-height,max-height小于min-height的值,最大高度自动转换成最小高度的值,所以显示min-height的值。
28.自定义li前缀图像--列表项标记list-type-image:url|none
29.自定义列表标记位置--list-type-position:inside|outside
30.背景图像随着滚动条是否滚动或固定:background-attachment:scroll | fixed
31.粘性定位{position: sticky; top:0;} 
32.状态标签:meter(实时状态显示) progress(任务过程)
33.列表标签:datalist details  配合input使用,效果为input下拉搜索功能
34.标记注释标签: ruby rt rb 标记定义注释或音标
35.output 标记定义输出类型,配合from表单使用,效果为计算器功能
36.input中type为range时表示范围
37.input中type为date时 ,type='month', type='week',type='time'
  type='range' type='search' type='color'
38.表单属性: autocomplate属性:自动填充功能
 autofocus属性  input自动获得焦点
 multiple属性 输入域选择多个值(仅email和file时)
 
 39.设置网站icon:<link rel='icon' href='icon.gif' type='image/gif' sizes='16*16'>
 40.设置网页a链接href前缀:<base href='http://localhost/' target='_blank' >,不添加target属性默认_self
 41.a:media=''(表示对设备进行优化,handheld对“手持”设备进行支持,tv对“电视”设备进行支持)
    a:hreflang='zh'(设置语言)
    a:rel='external'(设置超链接的引用,这里超链接为外部链接)
42.ol有序列表属性:start起始值  reversed 倒序排列
43.html:<html manifest=''>(定义页面离线应用文件)
44.css选择器:
1)通用兄弟选择器 element ~ sibings
选择element后面的所有sibings元素,而且他们有一个相同的父元素
2)相邻兄弟选择器 element + sibings
选择紧接在element后面的sibings元素,而且他们有一个相同的父元素
3)Element[attr]
选择所有带attr的element
4)Element[attr~="value"]
选择attr属性包含单词"value"的element
5)Element[attr^="value"]
选择attr属性以单词"value"开头的element
6)Element[attr$="value"]
选择attr属性以单词"value"结尾的element
7)Element[attr*="value"]
选择attr属性包含单词"value"的element
8)Element[attr|="value"]
选择attr属性为"value"或以"value"开头的element
45.ui元素状态伪类: 可编辑 :enabled  不可编辑 :disabled  选中时 :checked
46.css3选择器 :first-child :last-child :nth-child() :nth-last-child() :nth-of-type()
:nth-last-of-type() :first-of-type() :last-of-type :only-child :only-of-type :empty
 
:not(:last-of-type) 除了最后一个
47.伪元素
1)element::first-line   (只能用于块元素 )
  对第一行文本进行css
2)element::first-letter (只能用于块元素 )
  向文本的首字母设置特殊样式
3)element::selection
设置选中文本后的背景色和前景色
48.border-image 边界图片-source -slice -width -outset -repeat
49.裁剪图像属性background-clip:border-box|padding-box|content-box
50.背景图像定位background-origin:border-box|padding-box|content-box
51.背景图像大小background-size:length|percentage|cover(覆盖)|contain
52.多重背景图像background-image:url(img1.jpg), url(img1.jpg)
53.线性渐变background:linear-gradient(direction,color-stop1,clor-stop2,...);
标准写法:background:linear-gradient(to (方向),color-stop1,clor-stop2,...);
使用角度:background:linear-gradient(angle,color-stop1,clor-stop2,...);
54.线性渐变的重复渐变:background:repeating-linear-gradient(color-stop1,clor-stop2,...);
55.径向渐变:background:radial-gradient(center, shape size, star-color, last-color);
设置形状:background:radial-gradient(shape, star-color, last-color);
shape => circle--圆形  ellipse--椭圆(默认)
设置尺寸:background:radial-gradient(size, star-color, last-color);
size => closest-side--最近边  farthest-side--最远边 closest-corner--最近角  farthest-corner--最远角
56.径向渐变的重复渐变:background:repeating-radial-gradient(color-stop1,clor-stop2,...);
57.IE9以下=>IE渐变:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='starColor',endColorstr='endColor',GradientType=0|1|2);
58.css文本轮廓:text-outline:thickness blur color;(目前任何主流浏览器不兼容)
59.css文本换行:word-break:normal|break-all|keep-all
word-wrap:normal|break-word(针对长单词和url)
text-align-last:auto|left|right|center|justify|start|end|initial|inherit
text-overflow:clip|ellipsis|string
60.css3 @font-face
@font-face{
  font-family:<YourWebFontName>;
  src:<source>[<format>][<source>[<format>]]*;
  [font-weight:<weight>];
  [font-style:<style>];
}
@font-face通用模板
@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot');   /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
         url('YourWebFontName.woff') format('woff'),   /* Modern Browsers */
         url('YourWebFontName.ttf') format('truetype'),   /* Safari, Android, iOS */
         url('YourWebFontName.svg#YourWebFontName') format('svg');  /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
字体格式转换工具http://www.fontsquirrel.com/tools/webfont-generator
 
61.css2D转换trandform:rotate()旋转 translate()平移  scale()缩放  skew()扭曲或斜切
62.css3D转换trandform:rotate3d(x,y,z,angle)旋转 translate3d(x,y,z)平移  scale3d(x,y,z)缩放  matrix(a,b,c,tx,ty)矩阵
更改转换元素的位置:transform-origin(x,y,z)
transform:matrix(1,0,0,1,x,y)等同于transform:translate(x,y)
矩阵matrix缩放(scale)
transform:matrix(sx,0,0,sy,0,0)等同于transform:scale(sx,sy)
矩阵matrix旋转(rotate)
transform:matrix(cosβ,sinβ,-sinβ,cosβ,0,0)等同于transform:rotate(βdeg)
矩阵matrix拉伸(skew)
transform:matrix(1,tanβy,tanβx,1,0,0)等同于transform:skew(βxdeg,βydeg)
关于y=-x镜像转换transform: matrix(0,-1,-1,0,0,0);
3d矩阵:transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)等同于transform: scale3d(sx, sy, sz)
 
63.transform-style:flat|preserve-3d
perpective:number|none
perpective-origin:x y;
元素背面面向用户是否可见:backface-visibility:visible|hidden
64.过渡属性transition
检索参与过渡的属性:transition-property:none|all|property(需要改变的元素属性名)
检索过渡的持续时间:transition-duration:time;(秒或者毫秒,默认为0)
检索过渡的动画类型:transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|steps
检索延迟过渡的时间:transition-delay:time;(秒或者毫秒,默认为0)
 
65.css动画 animation
动画名字:animation-name:keyframename|none
动画持续时间:animation-duration:time
动画过渡类型:animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|steps
动画延迟时间:animation-delay:time;(秒或者毫秒,默认为0)
动画循环次数:animation-iteration-count:infinite|<number>
动画是否反向运动:animation-direction:normal|reverse|alternate|alternate-reverse|initial|inherit
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正常方向运行,并持续交替运行
动画不播放时的样式:animation-fill-mode:none|forwards|backwards|both|initial|inherit
none:默认值。不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画结束或开始时的状态
动画暂停或正在运行:animation-play-state:paused|running
paused:指定暂停动画
running:默认值,指正在运行的动画
66.@keyframes animationname{
    keyframes-selector{
      css-style
    }
  }
参数说明:
animationname:定义animation的名字
keyframes-selector:动画持续时间的百分比,0-100%,from(0%),to(100%)
css-style:css样式
67.css3 will-change
优化动画3步骤1.position-fixed替代background-attachment
2.带图片的元素放在伪元素中
3.巧用will-change
will-change:auto|scroll-position|contents|<custom-ident>|<animateable-feature>
auto:此关键字没有特定的意图
scroll-position:表示将要改变元素的滚动位置
contents:表示将要改变元素的内容
*****<custom-ident>:明确特定将要改变的属性与给定的名称
<animateable-feature>:可动画的一些特征值
注意:勿滥用,提前声明,remove


标签: htmlcss
分享给朋友:
返回列表

没有更早的文章了...

下一篇:使用rem做手机端网页自适应

相关文章

CSS Flex 盒布局教程

CSS Flex 盒布局教程

参考文章:A Visual Guide to CSS3 Flexbox Properties,W3C CSS Flexible Box Layout Module Level,Flex 布局教程:语法...

5种常见网页自动跳转方法

5种常见网页自动跳转方法

利用HTML标记(META中的REFRESH属性)用HTML标记,就是用META的REFRESH标记,举例如下:<meta http-equiv=refresh content="10...

 前端入门html、css、js知识汇总(2)

前端入门html、css、js知识汇总(2)

68.ECMAScript{   简单数据类型:undefined,null,boolean,number,string   复杂数据类型:object...

常用正则表达式汇总

常用正则表达式汇总

来源:菜鸟教程http://c.runoob.com/front-end/854常用正则表达式正则表达式元字符和特殊字符移步6、第五章--引用类型(Date类型、RegExp类型)一、校验数字的表达式...

SEO搜索引擎工作原理

SEO搜索引擎工作原理

一、搜索引擎工作原理  当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。  在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信