html和css之间有什么区别_HTML基本知识

HTML+css知识总结(建议收藏） 　　页面设计以谷歌浏览器的bink内核为主流使用。 　　一个页面的主要组成由结构（html5）表现（css）行为（JavaScript）组成， 　　今天学习的是以标签和路径为主的html5的内容。 　　lang语言：作用于提示浏览器编译 charset字符：用UTF-8为全球通用准没错。 　　骨架标签：html，head，title，body(head与body同级关系，head与title父子关系) 　　排版标签：h1-6类似目录分级，br换行，p段落，hr单行线，div和span没有明确意义，但是一个是一行一个一个是一行多个以后会经常使用文本格式标签：strong加粗，em斜体，del删除线，ins下划线。 　　图片标签：正常img后必须是src=url链接，用来图片。属性有title显示内容，height与width宽高，alt无法显示显示备注，border图片边框宽度。 　　链接标签：a标签后必跟herf=“x”，其中x可以引用外部的链接或者内部链接，内部链接可以分为绝对路径与相对路径。上级路径表达https://zhuanlan.zhihu.com/,下级路劲表达/，这个上下级是相对的。 　　a标签也可用于描点定位，在h1-6的标题标签里加入id之后，href=#+id可以转跳。 　　base标签：此标签作用在head里面，告知body内容里面的标签应该全体获得base里的属性预格式化与特殊字符：pre标签可以方便的将汉字排版转换为显示效果，但是不利于排版与操作一般不使用。 　　特殊字符是&+单词可以代替部分符号，但是在编译时不会编译这些特殊字符符号，在显示部分内容时可以优化代码。 　　主要学习的是表格，表单与列表 　　表格是用来显示数据内容的，tabel为表格整体，tr为表格行（没有列的概念），td为行里面的小格子，使用th是可以自动居中和加粗的表头。 　　需要添加表格标题可以使用caption。正常显示出表格轮廓经常用到boeder=1和cellspacing=0，width与height显示出表格大小，align选取位置。 　　为了以后css更方便的美化表格，可以自己分成thead，tbody，tfood的组成方式。 　　需要合并表格时使用colspan与rowspan，两者同时使用可以类似“田”字效果。 　　表单是用来收集用户内容的，在与后台交流数据时使用form来让表单成为一个整体去提交。 　　最常用的是input，在填写每一个input的时候请务必添加name方便后台认知其作用。 　　input里面的type决定input的类型，text为文本，password为密码，radio是同name只能选一个，checkbox则是同name可以选多个，button为默认按钮，还有submit的提交和reset的重置。imge插入图片，file选择文件。 　　value可以让text文本里面自己显示出想要的文字，但是每次点上去需要自己删除才能再去输入，和我们正常情况不一样后面应该会学到。checked是默认选择。label为了让用户体验提升可以让鼠标的判定范围更大。 　　testarea主要和input里面text区别在于输入内容容量，学习css之后更方便的美观testarea。 　　select是选择器，通过option来决定选择的内容，默认选择也可以写入selected。 　　在使用时表格和表单经常是一起使用的，表格的表现方式可以让数据更明确，表单则是需要收集数据的功能。 　　列表感觉视频讲解的最少但是实际用起来应该是最多的，无序列表ul与有序列表ol，在我的谷歌浏览器里面没有显示出圆点与数字头标，自定义列表理解为多了一层的列表可以带一个标题。 　　正常情况下我每次看到视频里面的综合案例我是自己先写再去看视频，最后看有啥区别的，有时候会有部分不一样。 　　

　　

　　









　　1选择器类 　　1. ~ 　　属于选择器的一类，在2种素有相同的父级素时，element1~element2的选择，定义为 　　element1 之后出现的所有 element2的素全部选中更改样式属性 　　2. 伪素选择器 　　del::selection：当你的鼠标滑过时选择的内容中的属性 　　del::first-lette：一段文字中的第一个单词 　　del::first-line：一段文字中的第一个段落 　　.class::before与.class::after：默认的是行内素，在一个素之前和之后添加的内容 　　3. 伪类选择器 　　first-chird：选取父素中首个子素 　　last-chird：选取父素中最后一个的样式 　　nth-chird()：选取父素中自定义的选择，()添加2n偶数even，2n+1奇数odd，3n3的倍数 　　4.属性选择器 　　class[class^=]：所有定义过class中头部带有=之后的单词的类 　　Class[class$=]：所有定义过class中尾部带有=之后的单词的类 　　Class[class*=]：所有定义过class中带有=之后的单词的类 　　2. 新标签与新属性 　　1. 新标签 　　header：定义头部 　　nav：定义导航栏 　　footer：定义尾部 　　article：定义文章 　　section：定义某一节 　　aside：定义内容侧边 　　2.新属性 　　Input的表单属性，比较常用的 　　placeholder：再之后直接消失预设置的词语 　　autofocus：自动焦点 　　button：文字可以自动居中，语意向的属性 　　multiple：多文件上传 　　required：必填，一般就是我们常遇见的* 　　介绍下tab栏的实现方式，利用纯css去实现的tab栏，最为关键的部分为首先对多选的盒子进行隐藏display：block，再去利用target（类似于hover但是这个是生效），再显示出来display：block。之后再利用选择器去更改后的样式即可。 　　3.多媒体引入方式 　　iframe：直接引入第三方网站播放，control可以不设置也能操作 　　video：视频引入方式，可以设置是否循环loop，是否自动播放autoplay，重要的是control必须设置不设置不能播放，可以使用默认插件 　　audio：音频引入方式，可以设置是否循环loop，是否自动播放autoplay，重要的是control必须设置不设置不能播放，可以使用默认插件 　　4.文字对齐 　　实质就是在内容之前创建可一个行内快素，给予高度与宽度可以设置文档流的位置，如果设置一个vertical-align: middle;让文字自动居中可以消除这种影响。 　　5过度的使用 　　1. 基本属性 　　transition-property：规定设置过渡效果的 CSS 属性的名称，建议最好用all全选 　　transition-duration：规定完成过渡效果需要多少秒或毫秒。 　　transition-timing-function：规定速度效果的速度曲线。 　　transition-delay：定义过渡效果何时开始。 　　可以简写4连，注意下如果设置时长transition-duration为0是没有效果的 　　transition是设置在需要变换之前的素里面，transform则是设置在变化的属性里面 　　2. 实现效果 　　可以进行宽度高度的变化，更改width与height即可 　　可以实现颜色的渐变，更改color即可 　　可以实现放大与缩小，更改scale即可（scale格式为x，y前者设置百分比宽后者设置百分比高，只有一个值是两者同时进行。大于1即可放大，小于1即可缩小） 　　可以实现位移transform: translate（x.y）可以设置px也可以设置百分比。利用这个效果也可以实现我们之前的定位素居中，top: 50%;left: 50%;transform: translate(-50%, -50%);，明显类似于我们之前学习的margin-left设置自身宽度的一半。 　　可以实现旋转transform: rotate(360deg)，后面数字代表多少°，transform-origin: right bottom;后面根方位名词设置旋转中心在哪个位置。 　　可以实现倾斜角度transform: skew(30deg);后面根的是多少° 　　3. 实际利用 　　京东的图片原理：可以设置一个盒子放入图片，计算好大小，需要对多余的大小隐藏。之后设置位移或者放大，可以提升用户体验。 　　京东的侧边栏：ul的li里面用定位分别设置li再包含一个div，正常情况下显示出li，之后利用hover放到li上时更改div的宽度。 　　楚桥的旋转：用div装入定位的图片，不排版情况下是自己层层覆盖只显示出一个图片，再给予一个旋转点对每个图片设置不同的旋转角度可以实现效果。 　　鼠标过的阴影：配合box-shadow使用（简写为x位移，y位移，模糊程度，模糊颜色），再设置translateX，translateY（px或%）。 　　1. 盒子的2种显示形式 　　box-sizing:content-box 只有box的witdh和height，我们默认情况就是这种。 　　box-sizing:border-box 包括padding和border更为方便，基本上以后使用全部用这个，最大好处就是不用再去计算盒子的大小。可以设置到全局选择器里面。 　　2.复习过度 　　transition 在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性。写在需要进行过度的素中。 　　Transform是变形，是css3的一个属性，和其他width，height属性一样。 　　translate 是transform的属性值，是指素进行2D变换或者3D变换，例如scale，translateXY, 　　Translate3D。 　　3.网站排版要求 　　之前是很喜欢先把盒子画出来再去填写内容，这样子做的时候是视觉上最方便。但是致命缺点是容易在缩放网页时，因为你固定的宽高，或者给予的固定的margin值会导致排版排挤。 　　主要做法是尽量只给内容再用padding撑起来盒子，但是说实话这样做比之前难一点，需要对自己盒子的层级与内容理解的很清楚才容易做出来，不然很容易出一个问题改变盒子内部的排版就非常麻烦。 　　之后注意清除浮动，和固定的margin值可以尽量用百分比的形式去给予。列如margin-left:10%(这个宽度是相对于父级盒子的)。做出来的网站在缩放时有一定的兼容性，其实自己去淘宝缩放一下就能看出来确实是特别厉害。 　　4.动画 　　Animation形式上与过度有些类似不过属性多了几个。 　　animation-name：必须声明，之后再调用，以后学函数都是这样。 　　animation-duration：动画时长，设置0是没有效果的。 　　animation-timing-function：动画速度 　　animation-delay：何时开始 　　animation-iteration-count：次数， infinite无限次 　　animation-deractio：是否反方向 normal alternate 　　animation-play-state是否暂停 　　正常情况最为重要的三个是，名称，动画时长。常用设置次数为无限次。 　　调用方法@keyframes name from{} to{} 　　如果想分成多段可以用百分比分割0%，25%等等自己想分成几段都行。 　　5.flex伸缩布局 　　在尽量不使用浮动或者定位的情况下，去排版任何素。 　　使用方法：在父级盒子中写入display: flex，子级盒子再去设子flex（n），n代表子级盒子可以获得的份数。如果3个子级都是1则平均3等份，谁设置2就4等份，设置2的给2份。 　　如果需要某个子级盒子固定宽度也可以设置，列如父级盒子给予1000px，子级盒子3个，第一个给予100px，另外两个再去设置flex（n），这个时候是剩下的900px再去分给这两个子级盒子。如果需要垂直布局在父级盒子设置一个flex-direction: column即可，规则与横向布局一样。最后有2个属性min-width与max-width，最小值与最大值，因为是百分比分配在拉伸浏览器的时候会变化大小，不给于最小值可以压缩成线没有设置的意义，给予这个值可以在拉伸时保证显示盒子内容的大小即可。 　　6.背景缩放 　　写法background-size，解释为在某一个盒子里面，你的背景图片设置no-repeat的情况下是容易与盒子大小不一致，如何去设置背景大小。 　　background-size（x，y），设置2个值可以是固定px也可以是百分比，设置固定px是压缩或者放大将背景图强行变化。如果是设置百分比，则是相对于盒子的大小去设置图片，两个50%就是占据盒子1/4的大小。 　　background-size（n），如果设置一个值另外一个是默认为auto，是相对于你所设置的值的比例，去放大缩小原图。之前是相对于父级盒子，这个是相对于图片自身。 　　Cover，cover设置会保证沾满盒子背景，图片比例不会拉伸，即图片短的地方他自己会放大到兼容盒子宽度，但是长的地方就显示不出来。 　　Contain，contain可以保证图标全部在盒子里，图片比例不会拉伸，所以盒子内部有部分空白处。 　　精灵图在安卓设备上设置的是pc端的2倍，我们在设置精灵图背景定位时要除2，再去计算定位坐标。 　　7.颜色渐变 　　之前在写sigusoft和淘宝就遇到过，提取一个盒子里面的颜色发现每一个像素都不一样。这个设置当前没有默认兼容的浏览器，所以需要添加浏览器前缀设置，动画其实最好也添加。 　　background: -webkit-linear-gradient(top,rgb(52,98,255),rgb(169,109,251)); 　　-webkit-是申明兼容的浏览器是谷歌浏览器，其余的还有-moz的-火狐，-o的-O鹏，-ms的-IE几个比较常见的。linear-gradien固定写法，后面框里面为颜色变化开始位置，与从哪个颜色变到哪个颜色，top就是从上往下变化。 　　8.多背景 　　在一个盒子里放入多个背景图片，提倡简写方法 　　background: url(images/8.png) bottom right no-repeat,url(images/8.png) top left no-repeat; 　　即只写url，方位，重复值，其余的简写属性自己再单独去分开写。 　　9.盒子半透明 　　之前学习的background-color: rgba是只针对盒子背景颜色的透明，如果是需要真正所有盒子的内容透明使用的是opacity，设置0.2就是透明20%了，利用hover可以设置一点厉害的效果。之前经常用定位去放2个盒子到一起做遮挡效果，用opacity应该可以直接设置。 　　10.文字阴影 　　使用方法基本与box-shadow一样的text-shadow，4个值分别为x，y，模糊程度，模糊颜色。不是很提倡去使用，游览区渲染的时候比较耗费资源。 　　11.3D变化 　　Transform在原有的基础上增加一个z轴。X左负，y上负，z里负。 　　Transform：rotateX Transform：rotateY Transform：rotateZ:(ndeg) 　　属性perspective近小远大，景深焦距作用，越小越明显一般500左右即可。原作者：学致编程原出处：原文链接：HTML+css知识总结(建议收藏）