Web 整合

HTML

span 行内元素

p 块级元素

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：

                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博客