Web 整合

HTML

块级元素:div h1-h6 hr p ul ol table address blockquote dir from menu

行内元素:a br I em img input select span sub sup u textarea

可变元素:button del iframe ins

br/ 强制换行 

 i  em倾斜

 b strong 加粗

u 下划线

mark 高亮

超链接 a :a href="链接地址"  target="_blank" alt="可替文本" title="文字提示"

                tartget:_self 自己界面打开 _blank在其他界面打开

         <a id="tips"> 锚 调整位置 </a> <br />  // html5以前 使用name设定锚的名称 也是通过#name
        <a href="#tips"> 锚 调转提示文字</a> 

        

 无序 列表:ul>li*n 

有序列表 : ol>li*n

摘要概述 :details summary  一个details 通常含有一个summary

进度条:meter  ,progress  

表格: table  行: tr  标题行: th :普通列 td

                     cellspacing 单元框间距;
                    cellpadding单元框内间距       

                  去除内空格:       cellspacing="0" cellpadding="0"

                           [style]     border-collapse:collapse;

                                               border-spacing=0;

取消内边框: border="0" cellspacing="0"

居中:水平居中:text-align: center   垂直居中:line-height= 高

行合并:rowspan="n" 列合并:colspan="n"  注意:最后同行或同列的td个数要一致

表单:form  

       表单的属性【

         text 单行文本框

         password 密码

 默认选择:checked{

        radio 单选  , name 相等

        checkbox 多选 , name 相等 

}

select option下拉列表; selected="selected" 默认选择

 textarea 多行文本域 (可通过拖拽改变大小)

Cols属性:每行的字符数

Rows属性:文本行数


   button 按钮

range 滑动块 可通过   step 滑动跨度:  min="10" max="100" step="10"

进度条(不可滑动,value 设置值):progress,meter

        reset 重置

      submit 提交

          date      日期 

        color 颜色 

        email  邮箱 

number 数字

tel 电话

表单的参数【

        把标签变成不可编辑属性:   contenteditable="true"

        隐藏 类型  display:none 不占位

         默认提示  placeholder="输入邮箱"

           下拉框多选  multiple 

        提交时无需验证 novalidate

       提交时验证必须填写 required

        只读:  disabled不可选颜色变浅;

                        readonly 可选但不可写样式不变

        自动焦点: autofocus (多个自动焦点 会聚焦到第一个)

正则表达式 :pattern

CSS

        选择器

        元素选择器 :  元素名{}

        id选择器:#id名{}

        类/class选择器 : .class名{}

        并集选择器:选择器1名,选择器2名{}     选择器1和选择器2

        后代选择器: 选择器1名 选择器2名{}  针对的是 在选择器1里下的选择器2( 祖先)

            子选择器 : 选择器1名>选择器2名{}  针对的是 在选择器1里的直接子元素中选择器2(父子)

        属性选择器 : 例:input[type="text"]{ }

超链接伪类:

a:hover:鼠标悬浮其上

A:link:未单击访问时

A:active:鼠标单击未释放

A:visited:单击访问后

颜色

英文单词 red white

十六进制 #ffff00 【6个f 白 6个0 黑】

Rgb(255,0,0) 【 3 个0 黑,3个255 白】

Rgba(255,0,0,0.5)

背景

背景颜色:background-color:

背景图像:background-image:url(“路径”);

背景重复:background-repeat: no-repeat  repeat-x/y

背景定位:background-position: 水平定位 竖直定位

水平定位:left right center    px(正数向右,负数向左)

竖直定位:top bottom center  px(正数向下负数向上)

简写:background: red url() no-repeat 20px center;

字体:

字体类型:font-family:’楷体’;

字体大小: font-size px  

字体粗细:font-weight: 100-1000 

                                         normal :400 ;  正常

                                        bold:700; 加粗

                     

简写:font: 风格 粗细 大小 类型

文本:

颜色:color

文本对齐方式:text-align: left right center

文本修饰:text-decoration:none underline   overline line-through

文本缩进:text-indent: px

行高:line-height

垂直对齐:vertical-align: top middle bottom

Css列表:

列表项类型:list-style-type:none disc实心圆  circle空心圆 decimal 阿拉伯数字 square 实心黑块

列表项图片:List-style-image:url()

列表项位置;list-stle-position:inside/outside(图标在li里/外)

盒子模型:

         边距:border: 3px solid red; 

                        solid,实线 ,           dotted,点线  dashed虚线

                    box-sizing: border-box;     将边框对内显示 

             

                           阴影  :  水平(正为右) 垂直(下为正) 模糊度 颜色

                                         盒子阴影:box-shadow:5px 5px 5px  green;

                                          文本阴影:text-shadow

                            首行缩进 : text-indent: 30px

                         /*  外边距 上  右 下 左(黄框的外面)*/
                                margin: 10px 10px 0px;

                           内边距   :padding

                               /* 背景 :背景颜色  背景图片路径 是否平铺   */

                                 /*位于的位置(left 右正 top 下正 决定) /所占整体的比例*/

                                background: red url(../img/image1.jpg) no-repeat  left top/100% 100%;

                浮动:float 浮动 不在同一个层级上,任何元素都可以

                        

浮动的特性:脱离标准文档流(可以与其他元素并排展示,可以设置宽高,如果不设置会默认内容的宽高)

浮动的元素互相贴靠:浮动元素会贴靠上一个浮动元素的边,如果宽度不够,则当前浮动元素会换行显示,换行后顶部不会超过上一个浮动元素的底部。

浮动元素有字围效果(标准文档流的文字不会被浮动元素遮挡,围绕浮动元素)

                定位:position: relative 相对 位置还存在 相对于自己位移
                                position: absoule;绝对 位置不存在 , 相对于上一个定位的父级位移

                               position: fixed;  /固定位置 与上级块无关 跟界面有关

                          

                  属性z-index:定位时设置层级关系,数字越大越靠上

                             clear: both;  清除浮动  left both right 位置上

                  溢出处理: overflow-y: scroll

                     隐藏 :    visibility: hidden;  位置存在
                                     display: none;      不存在                          

                                Display:block行内元素转换为块元素

                                Display: inline设置块元素转行内元素

                                Display:inline-block:块元素横向排列同时保留块元素的特性

                        渐变:圆形: border-radius: 50%;

                                    从内向外:background-image: radial-gradient(yellow,green);

                                     从上到下: background-image: linear-gradient(yellow,green);

                      

               弹性布局:{

                          display: flex;(默认:从左到右,上端对齐 ,不换行)

                        从右到左: flex-direction: row-reverse; 
                从上到下 : flex-direction: column; 
              从下到上 : flex-direction: column-reverse; 

        

自动换行 ,warp第一行在最上面:flex-wrap: wrap; 
            
 自动换行 ,warp第一行在最下面:  flex-wrap: wrap-reverse;

 对齐 : justify-content: flex-start; 
右对齐 : justify-content: flex-end; 
            
居中对其: justify-content: center; 
            
 两端对齐 : justify-content: space-between; 
 间隔相同 :justify-content: space-around; 


            
       下端对齐 : align-items: flex-end; 
      中间对齐 :   align-items: center;

  单独设置对齐方式 :  align-self: flex-end;        

           排序顺序  order越小越靠前: order: 1; 
 

}

        JS:

                3个组成部分 :文档对象模型(DOM) 浏览器对象模型(BOM)ECMAScript

                var 类似全局变量

                    let 局部变量

                const 常量

        

        数据类型:typeof(变量)返回变量的数据类型

        字符串 数字number 对象object    布尔

                 在网页输出   document.write("<h1>123</h1>");
             控制台输出    console.log("hello world");

              弹窗  alert(" tanC");    

        询问  confirm("are you already");

        输入对话框prompt()

==和===区别 !==和!=区别

==比较的是内容

===比较的是内容和数据类型是否否相同

!=内容是否不同

!==内容和数据类型至少有一项不相同

常用事件:

Onclick:点击事件

Onblur:光标失去焦点

Onfocus:聚集焦点

Onsubmit:提交事件

Onmouseover:鼠标移入事件

Onmouseout:鼠标移出事件

        

常用的Js内置函数:

parseInt()把字符串解析成数字,并返回一个正数

parseFloat()把字符串解析成数字,并返回一个小数

IsNaN()判断是否是非数字

        

Number对象

toString():数字转字符串

toFIxed(n)保留n位小数  四舍五入 不足用0填充

计时函数

SetTImeout(”调用的函数“,等待的毫秒数):等待多长时间执行一次,如果要多次执行,让调用函数内容调用SetTImeout()

clearTimeout(setTImeout()返回的id值):清除setTimeout设置的定时

Setinerval(调用的函数,间隔的毫秒数):每隔多长时间执行一次

ClearInerval(setINerval()返回的id值):清除setInerval设置的定时

        对象:String JS对象-String-CSDN博客

                数组对象 JS对象-数组(Array)_lcatake的博客-CSDN博客JS对象-String-CSDN博客

      

日期对象的创建

Var date  = new Date();//创建当前系统时间的日期对象

Var date = new Date(2023,9,13);//创建指定的年月日日期对象

Var date  = new Date(2023,9,13,15,43,50);//创建指定的年月日时分秒日期对象

Var date  = new Date(‘2023-9-13 15:44:20’);//创建指定的年月日时分秒日期对象

常用函数

getFullYear():从日期对象返回四位年份

getMonth()从日期对象中返回月份0-11实际月份=getMonth()+1

getDate()返回一个月中的某一天

getHours()返回日期对象的小时

getMinutes()返回日期对象的分钟

getSeconds();秒

getDay()返回一个星期中的某天(0-6)0:周末

getMIlliseconds()毫秒

getTime()返回从1970-1-1至今的毫秒数

以及对应的set方法

var rep1=new RegExp("正则表达式");

正则 :rep1.test(str) 查看 str中是否含有rep1 返回布尔类型    

                        rep1.exec(str); 查看 str中是否含有rep1 有则返回rep1,无则返回str

获取、设置属性

.className:获取/设置Class属性

.style:获取/设置css样式

.getAttribute(属性名):获取属性的值

.setAttribute(属性名,属性值):设置属性的值

.hasAttribute(属性名):判断是否包含指定属性

.removeAttribute(属性名):删除指定属性

动态添加节点

创建一个节点 var node =doucument.createElement(“li”)

创建一个文本节点 var textnode = ‘hello’;

元素节点追加文本节点

node.appendChild(textnode);

找到父节点

Var father = document.getElementByTagNamr(‘ul’)[0];

父节点追加子节点 father.appendChild(node);

动态删除节点

  找到要删除的节点

Var chilenode = document.getELementById(‘one’);

找到父节点

Var fathernode = document.getElementById(‘box’);

父节点上删除子节点

fathernode.removeChild(childnode);

        JQ:

Jq的基本使用_lcatake的博客-CSDN博客

jq的动画

JS的动画_lcatake的博客-CSDN博客

        

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值