「软帝学院」html入门基础条记“开运体育官方网站”

表现页面独立文章内容三、表单元素1.表单属性：1、method表现表单的提交方式，有两个值，第一个叫post，第二个叫getget方式的请求会将表单中所有表单元素信息显示在地址栏中post方式的请求必须有一个服务器来处置惩罚请求，所有表单元素的信息不会显示在地址栏中，在实际开发中一般使用post方式请求2、action表单要提交的位置 2.表单元素语法：属性： name表现input标签的名字value表现input标签的值type表现input标签的元素类型文本框：专门用来输入文字语法：，type的值为textsize表现文本框的长度maxlength表现允许输入的最大字符长度密码框：用来输入密码语法：，type的值为passwordsize表现文本框的长度maxlength表现允许输入的最大字符长度单选按钮男女12注意：单选按钮的每个input中的name值必须相同，否则不能实现选择一个切换的作用checked属性表现默认选中12复选框打游戏睡觉出去约会123复选框可以选择多个，而且可以取消checked属性表现默认选中12下拉列表框 selected表现默认选中按钮1、提交按钮submit，它可以将表单中的信息提交到指定的位置2、重置按钮reset，它可以将表单中的信息恢复到默认值3、普通按钮button，它只是单纯起一个按钮的作用，需要和JavaScript和jQuery一起使用，实现种种功效4、图片按钮image，src表现图片的路径，也具有提交作用多行文本域：需要输入多行文字

表现界说了一个多行文本域cols表现文本域的宽度rows表现文本域的高度 文件域：上传文件 <input type="file" name="files"/>1需要设置编码属性enctype="multipart/form-data"，表现将表单数据分为多部门提交1邮箱：可以举行邮箱验证网址：可以举行网址验证 <input type="url" name="url"/>1数字：提供输入数字 min表现允许的最小值max表现允许的最大值step表现每次增加或者淘汰的数字距离value表现默认值 搜索框：可以搜索提示关键字的文本框 <input type="search" name="search" /><input type="button" value="百度一下" />123.表单的高级应用1、隐藏域：主要应用于在提交信息时不想让用户看到的信息举行隐藏提交 <input type="hidden" name="hidden" value="666"/>12、只读和禁用属性 只读：表现在网站上用户只能够检察，不能够修改的数据，使用readonly添加只读 禁用：一般表现在满足某个条件之后，才气使用的功效，使用disabled添加禁用3、表单元素的标注 ①选择要点击后跳转文本加上<label>标签 ②选择跳转对应的表单元素，给它加上id这个属性（id属性值在整个网页只能泛起一 次，不行以有重复的id值） ③在<label>中添加for属性，然后属性值为对应的id值4.表单的开端验证为什么要举行表单验证1、减轻服务器的压力2、保证数据的可行性和宁静性5.验证的方法1、placeholder表现这个表单元素期待用户输入什么信息，它是起提示作用，当用户输入内容时，提示信息隐藏2、required表现表单元素填写内容不能为空，使用了required的该表单元素必须填写3、pattern表现表单中的内容必须和输入的正则表达式一致  ^表现正则表达式的开始 $表现正则表达式的竣事 []表现在中括号中任选其中一个 \d表现匹配0~9之间的任意一个数 {n}表现前面的一种匹配方式匹配的次数，表现匹配n次 -表现就是- \w表现匹配所有字母或数字或下划线 \u4E00-\u9FA5匹配汉字 {4,10}表现匹配前面的一种匹配方式4~10次 A-Z表现匹配大写的英文字母 a-z表现匹配小写的英文字母 |表现或者四、初识CSS31.CSS:层叠样式表，它是专门用来设计网页气势派头的 2.CSS的优点1、内容与体现分散，便于网页维护2、网页的体现统一，统一气势派头3、富厚的样式，使得页面结构越发灵活4、淘汰网页的代码量，增加网页的浏览速度5、运用独立于页面的CSS，有利于网页被搜索引擎收录3.CSS样式的语法选择器{声明(可以为1~n条)属性:属性值;}选择器：需要添加这些声明的元素（标签）声明：由属性和属性值组成，中间用“:”,使用“;”末端 4.在html中添加样式的方式1、行内样式在需要添加样式的标签中，添加一个style属性，在style属性中添加声明2、内部样式在内里添加一个,然后通过选择器和声明添加样式3、外部样式它可以实现体现与内容的彻底分散，可以让样式表重复使用，便于维护和修改，而且可以极大的淘汰代码量①链接外部样式表语法：href表现引用的哪一个外部样式表rel表现使用的是样式表type表现文本类型为css类型②导入外部样式表语法：@import url(“css/第一个外部样式.css”);区别：链接外部样式表它是先将外部的CSS样式添加到网页中举行加载，再加载网页的内容，导入外部样式表是先加载网页中的内容，再举行外部样式表的加载样式表的优先级别行内样式>内部样式>外部样式，遵循“就近原则” 5.CSS3中的选择器一、基本选择器1、标签选择器：以标签名称作为选择器的名称选择所有网页的该标签元素，好比：p表现选择该网页中所有的p标签2、类选择器：以类的名称作为选择器的名称，而且在选择器的名称前加上“.”，类名能够重复使用3、id选择器：以id的名称作为选择器的名称，而且在选择器的名称前加上“#”，id名在该网页只能泛起一次，具有唯一性选择器的优先级id选择器>类选择器>标签选择器二、条理选择器1、子女选择器语法：E F{声明}，E表现的是被匹配的元素，F表现被匹配的E的子女元素好比：body p{},表现匹配所有body的子女p元素2、子选择器语法：E>F{声明}，E表现的是被匹配的元素，F表现被匹配的E的子元素好比：body>p{},表现匹配所有body的子元素中的p元素3、相邻兄弟选择器语法：E+F{声明}，E表现的是被匹配的元素，F表现被匹配的E的相邻兄弟元素好比：.p1+p{},表现匹配.p1的相邻元素而且为p元素，只匹配后面的元素4、通用兄弟选择器语法：E~F{声明}，E表现的是被匹配的元素，F表现被匹配的E的所有兄弟元素好比：.p1~p{},表现匹配.p1的所有兄弟元素而且为p元素，只匹配后面的元素三、结构伪类选择器1、语法：E>F:first-child，E表现的是被匹配的元素，F表现被匹配的F:first-child表现被匹配的E的子元素中第一个元素而且这个元素是F元素2、语法：E>F:last-child，E表现的是被匹配的元素，F表现被匹配的F:last-child表现被匹配的E的子元素中最后一个元素而且这个元素是F元素3、语法：E>F:nth-child(n)，E表现的是被匹配的元素，F表现被匹配的F:nth-child(n)表现被匹配的E的子元素中最后一个元素而且这个元素是F元素even表现匹配所有偶数行odd表现匹配所有奇数行4、语法：E>F:nth-of-type(n)，E表现的是被匹配的元素，F表现被匹配的F:nth-of-type(n)表现被匹配的E的子元素中所有的F元素，然后再去找第n个E>F:nth-child(n)表现先匹配所有的儿子，再去找第几个儿子是不是F元素，如果是就能匹配，E>F:nth-of-type(n)先匹配所有F元素，再去找第几个元素四、属性选择器1、E[attr],E表现匹配的E元素，attr表现属性，匹配具有attr属性的E元素2、E[attr=val],匹配具有attr属性，而且属性值为val的E元素3、E[attr^=val],匹配具有attr属性，而且属性值以val开头的E元素4、E[attr$=val],匹配具有attr属性，而且属性值以val末端的E元素5、E[attr*=val],匹配具有attr属性，而且属性值中包罗val的E元素 六、CSS3美化网页元素前言：<span>这个标签没有任何实际意义，它只是为了突出显示某个部门，它是一个行内元素，不能够独占一行，而且该元素所占的区域是凭据内容巨细决议，不会因为改变宽度和高度改变它的巨细<div>这个标签没有任何实际意义,它只是为了将某些部门装起来，它是一个块元素，会独占一行，而且该元素所占的区域是凭据它的宽度和高度决议，会因为改变宽度和高度改变它的巨细 1.字体样式：1、font-family字体类型，字体类型的值有：“楷书”、“隶书”、“微软雅黑”、英文字体可以写多个字体花样，使用“，”离隔，如果同时存在英文和中文字体，英文就显示英文字体，中文就显示中文字体，而且英文字体要放在中文字体前面2、font-size字体巨细，就是改变字体巨细，字体巨细的单元使用px3、font-style字体气势派头，normal正常的（默认）、italic（倾斜的）、oblique（倾斜的）4、font-weight字体粗细，bold（粗体）、bolder（更粗的）、lighter（细的）font字体属性，需要满足字体属性设置顺序，气势派头=》粗细=》巨细=》类型 2.文本样式：1、color文本颜色①使用英文单词去表现颜色②使用十六进制的方式表现，而且如果相邻的两两数字相同，可以缩写为一位③使用三原色的方式去表现，语法：rgb(r,g,b)，rgba(r,g,b,a)r,g,b取值从0~255a表现透明度，取值从0~1,0表现完全透明，1表现完全不透明2、text-align水平对齐方式，设置文本的水平对齐方式属性值：center居中，left居左，right居右3、vertical-align垂直对齐方式，设置文本的水平对齐方式属性值：middle居中，top居上，bottom居下4、text-indent设置文本首行缩进，属性值一般使用em相对单元，em表现长度为文本字符巨细的长度5、line-height设置文本行高，属性值使用px为单元，还可以设置为倍数6、text-decoration文本装饰属性值：①none表现没有任何装饰②underline表现下划线③overline表现上划线④line-through表现删除线 7、text-shadow文本阴影 语法：text-shadow : color x-offset y-offset blur-radius; color阴影颜色 x-offset表现X轴偏移量，正数往右偏移，负数往左偏移 y-offset表现Y轴偏移量，正数往下偏移，负数往上偏移 blur-radius表现模糊半径2.超链接伪类1、a:link单击会见前的超链接样式2、a:visited单击会见后的超链接样式3、a:hover鼠标悬浮的超链接样式4、a:active鼠标单击未释放的超链接样式 列表样式1、list-style-type表现设置列表的标志类型常用类型：none表现没有标志disc表现实心圆点square表现实心正方形circle表现空心圆点decimal表现数字2、list-style-image使用图像取代标志3、list-style-position表现在哪个位置使用标志4、list-style设置列表属性，通常使用这个属性 3.配景样式1、配景颜色background-color①使用英文单词去表现颜色②使用十六进制的方式表现，而且如果相邻的两两数字相同，可以缩写为一位③使用三原色的方式去表现，语法：rgb(r,g,b)，rgba(r,g,b,a)r,g,b取值从0~255a表现透明度，取值从0~1,0表现完全透明，1表现完全不透明有一个特殊值，transparent表现透明的意思，它是默认值2、配景图片background-imageurl表现的图片路径3、配景重复方式background-repeatrepeat表现沿水平偏向和垂直偏向举行重复no-repeat表现不重复repeat-x表现沿水平偏向重复repeat-y表现沿垂直偏向重复4、配景位移background-position：X轴偏向偏移量 Y轴偏向偏移量①可以使用像素值来表现偏移量，好比：50px 50px;②可以使用百分比来表现偏移量，好比：20% 50%;③可以使用英文字母来表现偏移量，好比：center middle;5、配景属性设置所有的配景样式6、配景尺寸background-size①auto表现配景图片保持原样，默认值②percentage表现配景图片巨细凭据容器巨细的百分比决议巨细，只写一个值表现只对一个值举行设置，另外一个值会凭据图片自己的比例等比例缩放自己比例为4:3400px 300px800px 600px1200px 900px③直接使用像素值px来设置图片巨细，只设置一个值和百分比一样④cover放大充满整个容器⑤contain放大充满整个容器，如果有一个偏向充满了整个容器，那么不在放大 4.渐变1、线性渐变：颜色沿着一条直线过渡linear-gradient(渐变偏向,颜色1，颜色2，颜色n)不加前缀偏向使用“to 偏向”表现往哪个偏向举行渐变，加上前缀之后使用“偏向”表现从哪个偏向开始渐变2、径向渐变：从一个起点朝所有偏向混淆-radial-gradient(渐变偏向,颜色1，颜色2，颜色n) 5.浏览器前缀：(制止兼容问题)IE浏览器前缀-ms-Chrome浏览器前缀-webkit-Safiri浏览器前缀-webkit-Opera浏览器前缀-o-Firefox浏览器前缀-moz- 七、盒子模型1.盒子模型：就是一个虚拟的矩形容器2.盒子模型的组成：1、content（内容）：表现主要内容2、padding（内边距）：表现内容与边框之间的距离3、border（边框）：表现包着内容的外框，边框是有一定宽度的4、margin（外边距）：表现边框外部与其他盒子的距离 3.边框border1、border-color边框颜色①使用英文字母来表现颜色②使用十六进制来表现颜色③使用三原色来表现颜色，rgb(),rgba()所有的块元素都是一个盒子模型border-top-color上边框，border-bottom-color下边框border-left-color左边框，border-right-color右边框※※※※※※※可以使用border-color去设置，可以取1~4个值任意一个如果设置一个值表现对应所有的偏向如果设置两个值，第一个值表现上边框和它对应边框的值，第二个值表现右边框和它对应的值如果设置三个值，第一个值表现上边框，第二个值表现右边框和它对应的值，第三个表现下边框的值如果设置四个值，第一个值表现上边框，第二个值表现右边框，第三个值表现下边框，第四个值表现左边框，根据顺时针的顺序依次设置2、border-width边框的粗细使用像素值去设置边框的粗细，网页一般使用这种方式设置边框颜色的方式一样3、border-style边框的样式none表现没有边框solid表现实线边框dashed表现虚线边框dotted表现点线边框设置边框样式的方式和置边框颜色的方式一样border边框属性可以设置边框的所有属性，不需要根据顺序border-left设置左边框的属性border-right设置右边框的属性border-bottom设置下边框的属性border-top设置上边框的属性外边距marginmargin-top设置上外边距的距离margin-right设置右外边距的距离margin-bottom设置下外边距的距离margin-left设置左外边距的距离可以使用margin去设置，可以取1~4个值任意一个和设置边框颜色的方式一样使用margin设置盒子居中，语法：margin：0px auto;需要满足两个条件①必须为块元素②必须设置盒子的宽度和高度内边距paddingpadding-top设置上内边距的距离padding-right设置右内边距的距离padding-bottom设置下内边距的距离padding-left设置左内边距的距离可以使用padding去设置，可以取1~4个值任意一个和设置边框颜色的方式一样 4.盒子模型的尺寸盒子模型的尺存分为盒子模型的宽度和高度盒子模型的外盒宽度=内容宽度+内边距的左右宽度+边框左右宽度+外边距左右宽度盒子模型的外盒高度=内容高度+内边距的上下高度+边框上下高度+外边距上下高度盒子模型的内盒宽度=内容宽度+内边距的左右宽度+边框左右度盒子模型的内盒高度=内容高度+内边距的上下高度+边框上下度 5.拯救结构使用box-sizing拯救结构，有3个值1、content-box：默认值，表现设置的宽度和高度即是内容的宽度和高度，盒子的宽度和高度通过盘算获得2、border-box：表现设置的宽度和高度即是盒子的宽度和高度3、inherit：继续父元素的盒子模型模式 6.圆角边框border-radius：为矩形边框设置圆角效果语法：border-radius:可以设置1~4个值;设置一个值会对四个角举行设置设置两个值，第一个值设置左上角和它对角的值，第二值是设置右上角和它对角的值设置三个值，第一个设置左上角，第二个设置右上角和它对角的值，第三个设置右下角的值设置四个值，第一个设置左上角，第二个设置右上角，第三个设置右下角，第四个设置左下角设置圆形①必须盒子的宽度和高度相同②圆角边框的值必须将四个角的值都设置为宽度的一半或者50%设置上半圆：宽度稳定，高度变为一半，第一个值、第二值为一半，第三和第四个为0设置下半圆：宽度稳定，高度变为一半，第一个值、第二值为0，第三和第四个为一半设置左半圆：宽度为一半，高度变稳定，第一个值、第四值为一半，第二和第三个为0设置左半圆：宽度为一半，高度变稳定，第一个值、第四值为0，第二和第三个为一半 扇形：高度和宽度都为一半，需要哪一个偏向的就添加哪个角的值，其他都为0 7.盒子阴影box-shadow语法：box-shadow:inset x-offset y-offset blur-radius color;第一个参数表现阴影的类型，不写为外阴影，inset表现为内阴影第二个参数表现阴影的水平偏移量，正数往右，负数往左第三个参数表现阴影的垂直偏移量，正数往下，负数往上第四个参数为模糊半径，模糊规模巨细，越往外越模糊第五个参数为阴影颜色 八、块元素与行内（内联）元素1.块元素与行内（内联）元素的特性1、块元素：独占一行，而且可以设置元素的宽高(div,h1-h6,p,列表)2、行内元素：不是独占一行，设置宽高对它不起作用，宽度由元素内容撑开。</strong><br><p>html入门基础条记(简朴实用)一、初识html1.HTML：Hyper Text Markup Language（超文本标志语言）java是一门编译性语言html是一门解释性的标志语言超文本：文字、图片、音频、视频、动画、超链接标志：就是指组成HTML的种种标签 2.HTML5的优势：1、各大浏览器厂商对它的支持2、市场的需求3、跨平台 3.W3C尺度：1、结构化尺度：指用什么语言去搭建整个网站（html 5）2、体现化尺度：指用什么去装饰整个网站（css3）3、行为尺度：指用什么去实现网站的功效（JavaScript，jQuery） 4.html的基本结构： <html><head><title>天猫精选-理想生活上天猫</title><script type="text/javascript">
    var ey_1564127251 = {"ClosePage":0,"get_url":"\/index.php?m=api&c=Ajax&a=get_arcrank&aid=334"};
</script>
<script type="text/javascript" src="/public/static/common/js/view_arcrank.js?v=v1.4.7"></script>
</head><body bgcolor="pink">大家好！！！！！</body></html>双标签：有个两个标签成对泛起的叫做双标签表现HTML网页的开始，表现网页的竣事表现网页头部的开始，表现网页头部的竣事表现网页身体的开始，表现网页身体的竣事表现网页标题的竣事 标题标签<h1></h1>....<h6></h6>:会对文字举行加粗，而且改变字体的巨细，还会举行换行 段落标签<p></p>:表现它独占一行，会保留段落之间的间距 加粗<strong></strong>:表现加粗 斜体<em></em>:表现斜体 字体设置<font></font>:表现字体属性：color颜色 face字体的样式 size字体的巨细单标签：只有一个，开始就竣事的叫做单标签 属性：charset = “utf-8”;utf-8表现国际编码花样，所有的字符都能识别 换行标签<br/>：表现换到下一行 水平线标签<hr/>:表现水平线属性：width表现水平线的宽度 size表现水平线的厚度 color表现水平线的颜色 align表现水平线的水平位置，left左边，center中间，right右边 图像标签<img src="" alt="「软帝学院」html入门基础条记“开运体育官方网站”(图1)" title="「软帝学院」html入门基础条记“开运体育官方网站”(图1)"/>src表现的是图片地址绝对路径：直接写完整图片所在的位置相对路径：先找到和你的网页所在同一级的图片所在位置，然后再去在这个基础 去找图片的位置，如果图片在下一级那么使用“/”来找到它，如果 上一级使用“..”来找到它alt表现的是图片加载失败的替代文字title表现的是鼠标悬浮时图片的提示文字width表现图片的宽度height表现图片的高度特殊标签：大于符号：>（great than）小于符号：<（less than）空格符号：版权符号：©注释：5.超链接标签 <a href="" target=""></a>1href表现链接的地址，使用相对路径的方式去使用target表现毗连的方式_blank表现在新窗口打开_self表现在本窗口打开_parent表现在父窗口打开1、页面间的链接，用于两个页面之间相互的跳转2、锚链接，用于页面之间定位①要设置一个锚点，语法锚点②将点击之后要跳转的超链接设置跳转的锚点位置，语法： 如果不在同一个页面中，先写好要跳转页面所在的位置，然后再写锚点的名字3、功效性链接 (发邮件、msn、可以打开当地的相应的客户端)语法： 二、网页媒体元素1.视频元素<video></video>属性：src表现添加视频的路径(位置)controls表现在添加的视频元素上添加播放控件，只有一个属性值/autoplay表现自动播放（慎用），只有一个属性值如果属性只有一个值，属性值可以省略不写source表现引用的视频源路径，一般会引用多个源路径，以制止浏览器不兼容的问 题 2.音频元素<audio></audio>属性：src表现添加视频的路径（位置）controls表现在添加的音频元素上添加播放控件，只有一个属性值/autoplay表现自动播放（慎用），只有一个属性值source表现引用的音频源路径，一般会引用多个源路径，以制止浏览器不兼容的问 题 3.内嵌框架<iframe></iframe>属性：src表现添加内嵌内容的路径name表现这个框架的名字width表现这个框架的宽度height表现这个框架的高度frameborder表现内嵌框架的边框scrolling表现是否泛起转动条作用：1、将多个网页重复的部门抽取出来，通过内嵌框架的方式，放到各个网页中2、使用<a>标签跳转到指定的框架中，先在指定要跳转到的框架中取一个name，使用target=“name的值”<a>标签一定要写href属性才气生效，如果不想跳转到任何页面，那么href="#",表现该超链接为空链接，点击空链接会刷新页面 4.语义化结构标签：主要是为了让结构越发清晰化 <header>表现页面头部内容<section>表现页面主体内容<footer>表现页面底部内容<nav>表现导航栏内容<aside>表现侧边栏内容<article>表现页面独立文章内容三、表单元素1.表单<form></form>属性：1、method表现表单的提交方式，有两个值，第一个叫post，第二个叫getget方式的请求会将表单中所有表单元素信息显示在地址栏中post方式的请求必须有一个服务器来处置惩罚请求，所有表单元素的信息不会显示在地址栏中， 在实际开发中一般使用post方式请求2、action表单要提交的位置 2.表单元素语法：属性： name表现input标签的名字value表现input标签的值type表现input标签的元素类型 文本框：专门用来输入文字语法：<input type="text" name="userName" value="admin"/>，type的值为textsize表现文本框的长度maxlength表现允许输入的最大字符长度 密码框：用来输入密码语法：<input type="password" name="userName" value="admin"/>，type的值为passwordsize表现文本框的长度maxlength表现允许输入的最大字符长度 单选按钮 <input type="radio" name="sex" value="boy"/>男<input type="radio" name="sex" value="girl"/>女12注意：单选按钮的每个input中的name值必须相同，否则不能实现选择一个切换的作用checked属性表现默认选中12复选框 <input type="checkbox" name="hobby" value="" />打游戏<input type="checkbox" name="hobby" value="" checked/>睡觉<input type="checkbox" name="hobby" value="" />出去约会123复选框可以选择多个，而且可以取消checked属性表现默认选中12下拉列表框 <select>表现界说了一个列表框<option>表现列表项<select><option>--请选择--</option><option selected>中国</option><option>美国</option></select> selected表现默认选中 按钮1、提交按钮submit，它可以将表单中的信息提交到指定的位置2、重置按钮reset，它可以将表单中的信息恢复到默认值3、普通按钮button，它只是单纯起一个按钮的作用，需要和JavaScript和jQuery一起使用，实现种种功效4、图片按钮image，src表现图片的路径，也具有提交作用 多行文本域：需要输入多行文字<textarea>表现界说了一个多行文本域cols表现文本域的宽度rows表现文本域的高度 文件域：上传文件 <input type="file" name="files"/>1需要设置编码属性enctype="multipart/form-data"，表现将表单数据分为多部门提交1邮箱：可以举行邮箱验证网址：可以举行网址验证 <input type="url" name="url"/>1数字：提供输入数字 min表现允许的最小值max表现允许的最大值step表现每次增加或者淘汰的数字距离value表现默认值 搜索框：可以搜索提示关键字的文本框 <input type="search" name="search" /><input type="button" value="百度一下" />123.表单的高级应用1、隐藏域：主要应用于在提交信息时不想让用户看到的信息举行隐藏提交 <input type="hidden" name="hidden" value="666"/>12、只读和禁用属性 只读：表现在网站上用户只能够检察，不能够修改的数据，使用readonly添加只读 禁用：一般表现在满足某个条件之后，才气使用的功效，使用disabled添加禁用3、表单元素的标注 ①选择要点击后跳转文本加上<label>标签 ②选择跳转对应的表单元素，给它加上id这个属性（id属性值在整个网页只能泛起一 次，不行以有重复的id值） ③在<label>中添加for属性，然后属性值为对应的id值4.表单的开端验证为什么要举行表单验证1、减轻服务器的压力2、保证数据的可行性和宁静性5.验证的方法1、placeholder表现这个表单元素期待用户输入什么信息，它是起提示作用，当用户输入内容时，提示信息隐藏2、required表现表单元素填写内容不能为空，使用了required的该表单元素必须填写3、pattern表现表单中的内容必须和输入的正则表达式一致  ^表现正则表达式的开始 $表现正则表达式的竣事 []表现在中括号中任选其中一个 \d表现匹配0~9之间的任意一个数 {n}表现前面的一种匹配方式匹配的次数，表现匹配n次 -表现就是- \w表现匹配所有字母或数字或下划线 \u4E00-\u9FA5匹配汉字 {4,10}表现匹配前面的一种匹配方式4~10次 A-Z表现匹配大写的英文字母 a-z表现匹配小写的英文字母 |表现或者四、初识CSS31.CSS:层叠样式表，它是专门用来设计网页气势派头的 2.CSS的优点1、内容与体现分散，便于网页维护2、网页的体现统一，统一气势派头3、富厚的样式，使得页面结构越发灵活4、淘汰网页的代码量，增加网页的浏览速度5、运用独立于页面的CSS，有利于网页被搜索引擎收录3.CSS样式的语法选择器{声明(可以为1~n条)属性:属性值;}选择器：需要添加这些声明的元素（标签）声明：由属性和属性值组成，中间用“:”,使用“;”末端 4.在html中添加样式的方式1、行内样式在需要添加样式的标签中，添加一个style属性，在style属性中添加声明2、内部样式在内里添加一个,然后通过选择器和声明添加样式3、外部样式它可以实现体现与内容的彻底分散，可以让样式表重复使用，便于维护和修改，而且可以极大的淘汰代码量①链接外部样式表语法：href表现引用的哪一个外部样式表rel表现使用的是样式表type表现文本类型为css类型②导入外部样式表语法：@import url(“css/第一个外部样式.css”);区别：链接外部样式表它是先将外部的CSS样式添加到网页中举行加载，再加载网页的内容，导入外部样式表是先加载网页中的内容，再举行外部样式表的加载样式表的优先级别行内样式>内部样式>外部样式，遵循“就近原则” 5.CSS3中的选择器一、基本选择器1、标签选择器：以标签名称作为选择器的名称选择所有网页的该标签元素，好比：p表现选择该网页中所有的p标签2、类选择器：以类的名称作为选择器的名称，而且在选择器的名称前加上“.”，类名能够重复使用3、id选择器：以id的名称作为选择器的名称，而且在选择器的名称前加上“#”，id名在该网页只能泛起一次，具有唯一性选择器的优先级id选择器>类选择器>标签选择器二、条理选择器1、子女选择器语法：E F{声明}，E表现的是被匹配的元素，F表现被匹配的E的子女元素好比：body p{},表现匹配所有body的子女p元素2、子选择器语法：E>F{声明}，E表现的是被匹配的元素，F表现被匹配的E的子元素好比：body>p{},表现匹配所有body的子元素中的p元素3、相邻兄弟选择器语法：E+F{声明}，E表现的是被匹配的元素，F表现被匹配的E的相邻兄弟元素好比：.p1+p{},表现匹配.p1的相邻元素而且为p元素，只匹配后面的元素4、通用兄弟选择器语法：E~F{声明}，E表现的是被匹配的元素，F表现被匹配的E的所有兄弟元素好比：.p1~p{},表现匹配.p1的所有兄弟元素而且为p元素，只匹配后面的元素三、结构伪类选择器1、语法：E>F:first-child，E表现的是被匹配的元素，F表现被匹配的F:first-child表现被匹配的E的子元素中第一个元素而且这个元素是F元素2、语法：E>F:last-child，E表现的是被匹配的元素，F表现被匹配的F:last-child表现被匹配的E的子元素中最后一个元素而且这个元素是F元素3、语法：E>F:nth-child(n)，E表现的是被匹配的元素，F表现被匹配的F:nth-child(n)表现被匹配的E的子元素中最后一个元素而且这个元素是F元素even表现匹配所有偶数行odd表现匹配所有奇数行4、语法：E>F:nth-of-type(n)，E表现的是被匹配的元素，F表现被匹配的F:nth-of-type(n)表现被匹配的E的子元素中所有的F元素，然后再去找第n个E>F:nth-child(n)表现先匹配所有的儿子，再去找第几个儿子是不是F元素，如果是就能匹配，E>F:nth-of-type(n)先匹配所有F元素，再去找第几个元素四、属性选择器1、E[attr],E表现匹配的E元素，attr表现属性，匹配具有attr属性的E元素2、E[attr=val],匹配具有attr属性，而且属性值为val的E元素3、E[attr^=val],匹配具有attr属性，而且属性值以val开头的E元素4、E[attr$=val],匹配具有attr属性，而且属性值以val末端的E元素5、E[attr*=val],匹配具有attr属性，而且属性值中包罗val的E元素 六、CSS3美化网页元素前言：<span>这个标签没有任何实际意义，它只是为了突出显示某个部门，它是一个行内元素，不能够独占一行，而且该元素所占的区域是凭据内容巨细决议，不会因为改变宽度和高度改变它的巨细<div>这个标签没有任何实际意义,它只是为了将某些部门装起来，它是一个块元素，会独占一行，而且该元素所占的区域是凭据它的宽度和高度决议，会因为改变宽度和高度改变它的巨细 1.字体样式：1、font-family字体类型，字体类型的值有：“楷书”、“隶书”、“微软雅黑”、英文字体可以写多个字体花样，使用“，”离隔，如果同时存在英文和中文字体，英文就显示英文字体，中文就显示中文字体，而且英文字体要放在中文字体前面2、font-size字体巨细，就是改变字体巨细，字体巨细的单元使用px3、font-style字体气势派头，normal正常的（默认）、italic（倾斜的）、oblique（倾斜的）4、font-weight字体粗细，bold（粗体）、bolder（更粗的）、lighter（细的）font字体属性，需要满足字体属性设置顺序，气势派头=》粗细=》巨细=》类型 2.文本样式：1、color文本颜色①使用英文单词去表现颜色②使用十六进制的方式表现，而且如果相邻的两两数字相同，可以缩写为一位③使用三原色的方式去表现，语法：rgb(r,g,b)，rgba(r,g,b,a)r,g,b取值从0~255a表现透明度，取值从0~1,0表现完全透明，1表现完全不透明2、text-align水平对齐方式，设置文本的水平对齐方式属性值：center居中，left居左，right居右3、vertical-align垂直对齐方式，设置文本的水平对齐方式属性值：middle居中，top居上，bottom居下4、text-indent设置文本首行缩进，属性值一般使用em相对单元，em表现长度为文本字符巨细的长度5、line-height设置文本行高，属性值使用px为单元，还可以设置为倍数6、text-decoration文本装饰属性值：①none表现没有任何装饰②underline表现下划线③overline表现上划线④line-through表现删除线 7、text-shadow文本阴影 语法：text-shadow : color x-offset y-offset blur-radius; color阴影颜色 x-offset表现X轴偏移量，正数往右偏移，负数往左偏移 y-offset表现Y轴偏移量，正数往下偏移，负数往上偏移 blur-radius表现模糊半径2.超链接伪类1、a:link单击会见前的超链接样式2、a:visited单击会见后的超链接样式3、a:hover鼠标悬浮的超链接样式4、a:active鼠标单击未释放的超链接样式 列表样式1、list-style-type表现设置列表的标志类型常用类型：none表现没有标志disc表现实心圆点square表现实心正方形circle表现空心圆点decimal表现数字2、list-style-image使用图像取代标志3、list-style-position表现在哪个位置使用标志4、list-style设置列表属性，通常使用这个属性 3.配景样式1、配景颜色background-color①使用英文单词去表现颜色②使用十六进制的方式表现，而且如果相邻的两两数字相同，可以缩写为一位③使用三原色的方式去表现，语法：rgb(r,g,b)，rgba(r,g,b,a)r,g,b取值从0~255a表现透明度，取值从0~1,0表现完全透明，1表现完全不透明有一个特殊值，transparent表现透明的意思，它是默认值2、配景图片background-imageurl表现的图片路径3、配景重复方式background-repeatrepeat表现沿水平偏向和垂直偏向举行重复no-repeat表现不重复repeat-x表现沿水平偏向重复repeat-y表现沿垂直偏向重复4、配景位移background-position：X轴偏向偏移量 Y轴偏向偏移量①可以使用像素值来表现偏移量，好比：50px 50px;②可以使用百分比来表现偏移量，好比：20% 50%;③可以使用英文字母来表现偏移量，好比：center middle;5、配景属性设置所有的配景样式6、配景尺寸background-size①auto表现配景图片保持原样，默认值②percentage表现配景图片巨细凭据容器巨细的百分比决议巨细，只写一个值表现只对一个值举行设置，另外一个值会凭据图片自己的比例等比例缩放自己比例为4:3400px 300px800px 600px1200px 900px③直接使用像素值px来设置图片巨细，只设置一个值和百分比一样④cover放大充满整个容器⑤contain放大充满整个容器，如果有一个偏向充满了整个容器，那么不在放大 4.渐变1、线性渐变：颜色沿着一条直线过渡linear-gradient(渐变偏向,颜色1，颜色2，颜色n)不加前缀偏向使用“to 偏向”表现往哪个偏向举行渐变，加上前缀之后使用“偏向”表现从哪个偏向开始渐变2、径向渐变：从一个起点朝所有偏向混淆-radial-gradient(渐变偏向,颜色1，颜色2，颜色n) 5.浏览器前缀：(制止兼容问题)IE浏览器前缀-ms-Chrome浏览器前缀-webkit-Safiri浏览器前缀-webkit-Opera浏览器前缀-o-Firefox浏览器前缀-moz- 七、盒子模型1.盒子模型：就是一个虚拟的矩形容器2.盒子模型的组成：1、content（内容）：表现主要内容2、padding（内边距）：表现内容与边框之间的距离3、border（边框）：表现包着内容的外框，边框是有一定宽度的4、margin（外边距）：表现边框外部与其他盒子的距离 3.边框border1、border-color边框颜色①使用英文字母来表现颜色②使用十六进制来表现颜色③使用三原色来表现颜色，rgb(),rgba()所有的块元素都是一个盒子模型border-top-color上边框，border-bottom-color下边框border-left-color左边框，border-right-color右边框※※※※※※※可以使用border-color去设置，可以取1~4个值任意一个如果设置一个值表现对应所有的偏向如果设置两个值，第一个值表现上边框和它对应边框的值，第二个值表现右边框和它对应的值如果设置三个值，第一个值表现上边框，第二个值表现右边框和它对应的值，第三个表现下边框的值如果设置四个值，第一个值表现上边框，第二个值表现右边框，第三个值表现下边框，第四个值表现左边框，根据顺时针的顺序依次设置2、border-width边框的粗细使用像素值去设置边框的粗细，网页一般使用这种方式设置边框颜色的方式一样3、border-style边框的样式none表现没有边框solid表现实线边框dashed表现虚线边框dotted表现点线边框设置边框样式的方式和置边框颜色的方式一样border边框属性可以设置边框的所有属性，不需要根据顺序border-left设置左边框的属性border-right设置右边框的属性border-bottom设置下边框的属性border-top设置上边框的属性外边距marginmargin-top设置上外边距的距离margin-right设置右外边距的距离margin-bottom设置下外边距的距离margin-left设置左外边距的距离可以使用margin去设置，可以取1~4个值任意一个和设置边框颜色的方式一样使用margin设置盒子居中，语法：margin：0px auto;需要满足两个条件①必须为块元素②必须设置盒子的宽度和高度内边距paddingpadding-top设置上内边距的距离padding-right设置右内边距的距离padding-bottom设置下内边距的距离padding-left设置左内边距的距离可以使用padding去设置，可以取1~4个值任意一个和设置边框颜色的方式一样 4.盒子模型的尺寸盒子模型的尺存分为盒子模型的宽度和高度盒子模型的外盒宽度=内容宽度+内边距的左右宽度+边框左右宽度+外边距左右宽度盒子模型的外盒高度=内容高度+内边距的上下高度+边框上下高度+外边距上下高度盒子模型的内盒宽度=内容宽度+内边距的左右宽度+边框左右度盒子模型的内盒高度=内容高度+内边距的上下高度+边框上下度 5.拯救结构使用box-sizing拯救结构，有3个值1、content-box：默认值，表现设置的宽度和高度即是内容的宽度和高度，盒子的宽度和高度通过盘算获得2、border-box：表现设置的宽度和高度即是盒子的宽度和高度3、inherit：继续父元素的盒子模型模式 6.圆角边框border-radius：为矩形边框设置圆角效果语法：border-radius:可以设置1~4个值;设置一个值会对四个角举行设置设置两个值，第一个值设置左上角和它对角的值，第二值是设置右上角和它对角的值设置三个值，第一个设置左上角，第二个设置右上角和它对角的值，第三个设置右下角的值设置四个值，第一个设置左上角，第二个设置右上角，第三个设置右下角，第四个设置左下角设置圆形①必须盒子的宽度和高度相同②圆角边框的值必须将四个角的值都设置为宽度的一半或者50%设置上半圆：宽度稳定，高度变为一半，第一个值、第二值为一半，第三和第四个为0设置下半圆：宽度稳定，高度变为一半，第一个值、第二值为0，第三和第四个为一半设置左半圆：宽度为一半，高度变稳定，第一个值、第四值为一半，第二和第三个为0设置左半圆：宽度为一半，高度变稳定，第一个值、第四值为0，第二和第三个为一半 扇形：高度和宽度都为一半，需要哪一个偏向的就添加哪个角的值，其他都为0 7.盒子阴影box-shadow语法：box-shadow:inset x-offset y-offset blur-radius color;第一个参数表现阴影的类型，不写为外阴影，inset表现为内阴影第二个参数表现阴影的水平偏移量，正数往右，负数往左第三个参数表现阴影的垂直偏移量，正数往下，负数往上第四个参数为模糊半径，模糊规模巨细，越往外越模糊第五个参数为阴影颜色 八、块元素与行内（内联）元素1.块元素与行内（内联）元素的特性1、块元素：独占一行，而且可以设置元素的宽高(div,h1-h6,p,列表)2、行内元素：不是独占一行，设置宽高对它不起作用，宽度由元素内容撑开。2.display:显示（元素以哪种形式举行显示）1、block：块级元素的默认值，在元素前后会有换行2、inline:行内元素的默认值，元素前后没有换行3、inline-block:行内块元素，元素既有行内元素的特性(可以和其他元素显示在同一行)又有块级元素的特性（可以设置宽高）。</p><p>4、none:该元素不被显示。3.float:浮动:使得块级元素排列在同一行1、left:左浮动2、right：右浮动3、none:元素不浮动，根据尺度文档流显示 4.clear：清除浮动1、left：清除元素左边的浮动2、right:清除元素右边的浮动3、both：清除两侧4、none:默认值，不清除浮动 5.解决父级边框塌陷的方法1、在浮动元素的后面加空div，而且给这个空div设置样式：clear：both2、给父级设置高度height3、给父级添加属性overflow:auto;4、给父级添加伪类after#father:after{content:’’;display:block;clear:both} 6.overflow:属性用来处置惩罚溢出1、visible:可见的，内容元素会被显示出来，可是在父级边框的外面2、hidden:内容元素会被显示在边框里，可是超出的部门会被隐藏3、scroll:内容元素会被隐藏，可是浏览器会提供转动条，转动以显示超出的内容4、auto:当内容元素超出父级的高度时就提供转动条以显示超出的内容，若内容未超出就不显示转动条。九、定位与动画1.定位属性:position1、static:默认值，没有定位2、relative：相对定位，相对于元素原本的位置举行偏移，元素原来的位置会被保留，浮动元素设置相对定位后，是相对元素浮动以后的位置举行偏移。3、absolute:绝对定位，相对于离元素最近的已经设置定位属性的祖先元素为基准举行偏移，元素原来的位置不会被保留，如果没有已经定位的祖先元素，则以浏览器窗口为基准举行偏移。</p><p>4、fixed：牢固定位，以浏览器窗口为基准举行偏移。5、定位的元素的层级会比未定位的元素的级别更高，相对定位通常用于给父元素设置定位属性，可是不设置不偏移量，联合绝对定位使用，牢固定位用于广告栏，返回顶部的图标，楼层导航等。</p><p>6、z-index：改变定位元素的堆叠顺序，值为整数，值越大，级别越高，显示在最上面。2.动画1、变形语法:transform:变形函数;2、平移函数：translate(x,y);x代表水平偏向的位移，y代表垂直偏向的位移，单元为px；3、缩放函数：scale(x,y);x代表元素宽度的缩放量，y代表高度的缩放量。</p><p>4、倾斜函数：skew(x,y);x代表元素水平偏向的倾斜度数，y代表垂直偏向的倾斜度数，单元是deg。5、旋转函数：rotate(x);x代表旋转的度数，为正数时顺时针旋转，为负数时逆时针旋转。2、过渡transition：是一种动画转换历程，渐慢，渐快等。</p><p>语法：transition:过渡样式的属性 过渡花费的时间 过渡函数(过渡的速度) 过渡的延迟时间；1)使用步骤A、在元素默认样式中声明元素默认的样式B、声明元素最终出现的样式，如悬浮(hover)，获取焦点(focus)时的样式C、在元素默认的样式中添加过渡属性。3、过渡函数：1、ease：默认值，由快到慢2、linear:匀速3、ease-in:越来越快4、ease-out:越来越慢5、ease-in-out:先越来越快再越来越慢 3.动画animation1、建立关键帧(浏览器兼容前缀是加在@与keyframes中间的)语法：@keyframes 动画名称{0%{元素样式}25%{元素样式}…}4.挪用动画在元素样式中挪用语法：animation:动画名称 动画次数 动画播放的偏向 动画播放状态1)、动画播放次数：为整数，默认值为1，无限循环infinite2)动画发生的操作：forwards(向前) backwards（向后） both（既可以向前又可以向后）3)动画播放状态：running(播放) paused(暂停)4)动画播放偏向：normal（向前） alternate(偶数次向前)。</p><br>本文关键词：开运体育官方网站<br><p>本文来源：<strong>开运体育官方网站-www.qdledltd.com</strong></p>						</div>
					</div>
					<div class="news_prevnext">
						<div class="news_prev">
														<a href="/index.php?m=home&c=View&a=index&aid=333" title="如何把副业搞得风生水起？法式员增收的4种方式‘开运体育官方网站’"> 上一篇 : 如何把副业搞得风生水起？法式员增收的4种方式‘开运体育官方网站’ </a>
													</div>
						<div class="news_next">
														<a href="/index.php?m=home&c=View&a=index&aid=339" title="微视酷VR课堂再次引爆展会,家长为小孩排长队体验【开运体育官方网站】"> 下一篇 : 微视酷VR课堂再次引爆展会,家长为小孩排长队体验【开运体育官方网站】 </a>
													</div>
					</div>

</div>
				<div class="pro_detail">
					<div class="pro_detail_rel_hd">  <strong>推荐产品</strong>
					</div>
					<div class="pro_detail_rel_item">
												<div class="one" >
							<a href="/index.php?m=home&c=View&a=index&aid=30" title="产品名称七"> <img src="/uploads/allimg/20200930/1-200930161645I0.jpg" alt="产品名称七" class="pic"></a><br>
							<a href="/index.php?m=home&c=View&a=index&aid=30" title="产品名称七" class="tle">产品名称七</a></div>
												<div class="one" >
							<a href="/index.php?m=home&c=View&a=index&aid=29" title="产品名称六"> <img src="/uploads/allimg/20200930/1-200930161632b6.jpg" alt="产品名称六" class="pic"></a><br>
							<a href="/index.php?m=home&c=View&a=index&aid=29" title="产品名称六" class="tle">产品名称六</a></div>
												<div class="one" >
							<a href="/index.php?m=home&c=View&a=index&aid=28" title="产品名称五"> <img src="/uploads/allimg/20200930/1-200930161544296.jpg" alt="产品名称五" class="pic"></a><br>
							<a href="/index.php?m=home&c=View&a=index&aid=28" title="产品名称五" class="tle">产品名称五</a></div>
												<div class="one" >
							<a href="/index.php?m=home&c=View&a=index&aid=27" title="产品名称四"> <img src="/uploads/allimg/20200930/1-200930160G6434.jpg" alt="产品名称四" class="pic"></a><br>
							<a href="/index.php?m=home&c=View&a=index&aid=27" title="产品名称四" class="tle">产品名称四</a></div>
												
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div id="copy">
			<div class="clear"></div>
		</div>
		<div class="top50"></div>
		<div class="footWrap" id="foogwpkk">
  <div class="footer">
    <div class="f_wz fl">
      <h3>联系我们</h3>
      Copyright © 2005-2023 www.qdledltd.com. 开运体育官方网站科技 版权所有<br/>
      服务热线：0215-39364222　联系人：陈经理 <br/>
      联系地址：湖北省鄂州市和顺县支明大楼1228号<br />
      备案号：<a href="https://beian.miit.gov.cn" rel="nofollow" target="_blank">ICP备39152729号-9</a> </div>
    <div class="bqdxtkg"></div>
    <div class="f_nav f_wz fl">
      <h3>底部导航</h3>
      <p> <a href="#">返回顶部</a>  <a href="/index.php?m=home&c=Lists&a=index&tid=1">关于我们</a>  <a href="/index.php?m=home&c=Lists&a=index&tid=2">产品展示</a>  <a href="/index.php?m=home&c=Lists&a=index&tid=3">应用案例</a>  <a href="/index.php?m=home&c=Lists&a=index&tid=4">新闻中心</a>  <a href="/index.php?m=home&c=Lists&a=index&tid=5">在线留言</a>  <a href="/index.php?m=home&c=Lists&a=index&tid=6">联系我们</a>  </p>
    </div>
    <div class="bqdxtkg"></div>
    <div class="dbdewmk f_wz fr">
      <h3>扫描二维码</h3>
      <div class="dbdewmk">
        <div class="footer_r fl"><img src="/uploads/allimg/20200925/1-20092510461O61.jpg" width=134/><br />
          关注手机二维码</div>
        <div class="footer_r fl" style="margin-right:0px;"><img src="/uploads/allimg/20200925/1-200925104624Z5.jpg" width=134/><br />
          扫一扫关注微信 </div>
      </div>
    </div>
  </div>
  <div class="clear"></div>
</div>

</body>
</html>