54HTML和CSS零碎知识

1、发展历程一、1993-2000：HTML二、2000-2008：XHTML三、2008-今：HTML52、HTML5的历史一、2004年被提出，二、2007年被W3C接纳，并成立了新的 HTML 工做团队。三、2008年1月22日公布第一份正式草案。四、2012年12月17日，HTML5规范定稿。五、2013年5月6日， HTML 5.1正式草案公布。六、2014年10月29日，HTML5标准规范终于最终制定完成了。七、HTML5的设计目的：为了在移动设备上支持多媒体。八、支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；![图片描述](attimg://article/content/picture/201804/15/111910vud6uk66ur65d6dv.png)![图片描述](attimg://article/content/picture/201804/15/111911iqqjj3npo1z3bwbu.jpg)2、XHTML 与 HTML 之间的差别一、XHTML 元素必须被正确地嵌套。二、XHTML 元素必须被关闭。三、标签名必须用小写字母。四、XHTML 文档必须拥有根元素。3、read-only和disabled的区别？（1）提交表单的时候read-only能够提交，可是disabled不能够（2）read-only只针对input/textarea这样的文本输入框，对select无效，disabled对全部表单元素有效4、defer和async的用法：（1）async：HTML5新增属性，用于异步下载脚本文件，下载完毕当即解释执行代码。（2）defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。5、CSS中有继承性的属性（1）字体系列属性：font、font-family、font-weight、font-size、font-style；（2）文本系列属性：text-indent、text-align、line-height、word-spacing、letter-spacing、color（3）表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout（4）列表布局属性：list-style-type、list-style-image、list-style-position、list-style（5）全部元素能够继承的属性：visibility、cursor六：HTML5新增的元素和废除的元素（1）新增元素：section、article、aside、header、footer、nav、figure、video、audio、mark、progress、meter、time、canvas、command、details、datalist、output、source、menu、datagrid、embed、hgroup、keygen、ruby、rt、rp、wbr；（2）废除元素：basefont、big、center、font、s、strike、tt、u、frame、applet、bgsound、blink、marguee；7、省略号代码（1）单行省略号：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;（2）多行省略号：overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;8、：CSS中经常使用的四种连接状态（LV ha）：（1）a:link {color:#FF0000;}     未被访问的连接 （2）a:visited {color:#00FF00;}    已被访问的连接 （3）a:hover {color:#FF00FF;}    鼠标指针移动到连接上（4）a:active {color:#0000FF;}    正在被点击的连接 9、选择器   一、基本选择器语法     （1）* ：通配选择器      （2）E：元素选择器    选择指定类型的HTML元素     （3）#id：ID选择器  选择指定ID属性值为“id”的任意类型元素     （4）.class：类选择器         （5）selector1,selectorN：群组选择器    二、层次选择器语法    （1）E  F：后代选择器    （2）E>F：子选择器        （3）E+F：相邻兄弟选择器    （4）E~F：通用选择器，选择E元素后的全部匹配的F元素   三、动态伪类选择器语法    （1）E:link  连接伪类选择器      （2）E:visited   连接伪类选择器    （3）E:active    用户行为选择器    （4）E:hover 用户行为选择器    （5）E:focus 用户行为选择器10、HTML5新的API（1）拖放A、DragB、Drop（2）History API（历史记录）A、pushStateB、replaceState（3）Storage APIA、localStorageB、sessionStorage（4）Communication API （跨域通讯）postMessage（5）WebSocket API：双工通讯（6）Geolocation API（地理位置API）（7）Web Worker：经过JavaScript建立一个后台进程，执行耗时比较长的数据处理（8）File API：来帮助咱们在Web页面中访问本地文件，它能够在Web应用中展示11、表单验证一、form标签里绑定onsubmit事件二、type='submit'标签里绑定onsubmit事件三、type='submit'标签里绑定onclick事件四、type='button'标签里绑定onclick事件五、不须要绑定任什么时候间，直接点击type='submit'标签，数据格式为name=value&name=value六、借用jQuery12、清除浮动的8种方法一、子级结尾处加空div标签 clear:both二、父级div定义 width三、父级div定义 伪类:after四、父级div定义 overflow:hidden五、父级div定义 overflow:auto六、父级div 也一块儿浮动七、父级div定义 display:table八、子级结尾处加 br标签 clear:both来源，https://www.qdfuns.com/article/27495/5c4b42c07070e566383c631ee275fb2b.html十3、table相关一、border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。 table样式属性二、border-collapse 属性设置表格的边框是否被合并为一个单一的边框，仍是象在标准的 HTML 中那样分开显示。 table样式属性三、cellspacing 属性规定单元格之间的空间。table标签属性四、cellpadding 属性规定单元边沿与其内容之间的空白。table标签属性十4、清除浮动一、.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}十5、文件提交```html<li class="item">软件版本：<span id="softwareVersion">V2.0</span>    <form method="POST" enctype="multipart/form-data" action="" >        <input type="submit" value="升级">        <input type="file" name="file">    </form></li>```enctype取值及含义application/x-www-form-urlencoded  在发送前编码全部字符（默认）multipart/form-data   不对字符编码。在使用<包含文件上传控件>的表单时，必须使用该值。text/plain  空格转换为 "+" 加号，但不对特殊字符编码。十6、复选框状态(<input type='checkbox'/>)(1)获取复选框状态：$("#allSelect").prop("checked")；遍历时，这么用item.checked;(2)改变复选框状态：$("#allSelect").prop("checked",false)；遍历时，这么用item.checked = false;(3)翻转复选框状态：$("#allSelect").prop("checked",!($("#allSelect").prop("checked")))；遍历时，这么用item.checked = !item.checked;(4)判断复选框是否被选中：$("#allSelect").is(':checked')；遍历时，这么用item.is(':checked');(5)获取全部复选框：$("#single input:checkbox")或$("#single input[type=checkbox]");(6)获取全部被选中的复选框：$("#single input:checkbox:checked")或$("#single input[type=checkbox]:checked")十7、animation的参数animation: name(动画名) duration(运行周期) timing-function(运行轨迹) delay(延迟时间) iteration-count(播放次数) direction(是否轮流反向);animation: circleAnimation 1s linear 0s infinite normal;```css@keyframes circleAnimation {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(-360deg);  }}```十8、position（1）absolute:生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。（2）fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。（3）relative：相对于自身位置进行定位。（4）static  默认值。没有定位。（5）inherit 规定应该从父元素继承 position 属性的值。十9、HTML标签属性```json<!DOCTYPE html>声明文档类型。<html lang="en">声明本页面的主要语言。<meta charset="UTF-8">规定 HTML 文档的字符编码。<!DOCTYPE html>声明本文档的类型。<html lang="en">声明本文档的主要语言。<meta charset="UTF-8">声明本文档的字符编码。```二10、W3C标准规范：```css一、<!DOCTYPE html>声明本文档的类型。<html lang="en">声明本文档的主要语言。二、<meta charset="UTF-8">声明本文档的字符编码。三、JavaScript定义。Js必需要用<script language="javascript" type="text/javascript">来开头定义，以保证在不支持js的浏览器上直接显示出来。四、CSS定义。CSS必需要用<style type=“text/css”>开头来定义，为保证各浏览器的兼容性，在写CSS时请都写上数量单位。五、使用注释。正确的应用等号或者空格替换内部的虚线。<!--这里是注释-->六、全部标签的元素和属性名字都必须使用小写七、全部属性值必须用引号括起来（"" ''）双引号或单引号七、把全部特殊符号用编码表示：空格为&nbsp; 、小于号（<）&lt、大于号（>）&gt、和号（&）&amp等。八、全部属性必须有属性值，没有值就是重复自己。九、全部的标记都必须有相应的结束标记。双标记：<div></div> 单标记：<img />十、全部的标记都必须合理嵌套。<p><b></p></b>必须修改成：<p><b></b></p>十一、图片添加有意义的alt属性。图片加载失败时能够用alt属性代表图片内容。同理添加文字连接的title属性，帮助显示不完整的内容显示完整。十二、在form表单中增长label，以增长用户友好度以上是规范标准，结论：一、标签规范能够提升搜索引擎对页面的抓取效率，对SEO（搜索引擎优化）颇有帮助。二、尽可能使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提升页面渲染速度，提升用户的体验。三、样式尽可能少用行间样式表，使结构与表现分离，标签的id和class等属性命名要作到见文知义，标签越少，加载越快，用户体验提升，代码维护简单，便于改版参看：https://blog.csdn.net/Hhy_9288/article/details/78602277```二11、点击事件之显示执行与隐式执行示例：```html:run<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{width:100px;height:100px;background: red;}    </style></head><body><div id="myDiv" onclick="myClick(event,'second','third')" ></div><!--这是显示执行，有定义，有执行。执行时，除了浏览器向其传参'event'，还能够人为传参'second'、'third'--><script>    function myClick(first,second,third){        console.log(first);        console.log(second);        console.log(third);    }    document.getElementById("myDiv").onclick=function (myEvent) {  /*这是隐式执行，有定义，无执行。执行时，除了浏览器向其传参'event'，没办法人为传参'second'、'third'*/        console.log(myEvent);    }</script></body></html>```二12、半包围效果：```html:run<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body><p>    <span style="color:red;">被包围者</span>    <span style="color:green;">包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者</span></p></body></html>```二十3、一个空标签div，若是它没有任何占空间的样式，好比padding、border等，那么它是不占空间的。