HTML和CSS零碎知识

原创 前端工程师_钱成 随笔 HTML 126阅读 2018-04-15 11:23:08 举报

一、发展历程
1、1993-2000:HTML
2、2000-2008:XHTML
3、2008-今:HTML5


二、XHTML 与 HTML 之间的差异
1、XHTML 元素必须被正确地嵌套。
2、XHTML 元素必须被关闭。
3、标签名必须用小写字母。
4、XHTML 文档必须拥有根元素。
三、read-only和disabled的区别?
(1)提交表单的时候read-only可以提交,但是disabled不可以
(2)read-only只针对input/textarea这样的文本输入框,对select无效,disabled对所有表单元素有效
四、defer和async的用法:
(1)async:HTML5新增属性,用于异步下载脚本文件,下载完毕立即解释执行代码。
(2)defer:用于开启新的线程下载脚本文件,并使脚本在文档解析完成后执行。
五、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;
七、省略号代码
(1)单行省略号:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
(2)多行省略号:overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
八、:CSS中常用的四种链接状态(LV ha):
(1)a:link {color:#FF0000;} 未被访问的链接
(2)a:visited {color:#00FF00;} 已被访问的链接
(3)a:hover {color:#FF00FF;} 鼠标指针移动到链接上
(4)a:active {color:#0000FF;} 正在被点击的链接

九、选择器
1、基本选择器语法
(1)* :通配选择器
(2)E:元素选择器 选择指定类型的HTML元素
(3)#id:ID选择器 选择指定ID属性值为“id”的任意类型元素
(4).class:类选择器
(5)selector1,selectorN:群组选择器
2、层次选择器语法
(1)E F:后代选择器
(2)E>F:子选择器
(3)E+F:相邻兄弟选择器
(4)E~F:通用选择器,选择E元素后的所有匹配的F元素
3、动态伪类选择器语法
(1)E:link 链接伪类选择器
(2)E:visited 链接伪类选择器
(3)E:active 用户行为选择器
(4)E:hover 用户行为选择器
(5)E:focus 用户行为选择器
十、HTML5新的API
(1)拖放
A、Drag
B、Drop
(2)History API(历史记录)
A、pushState
B、replaceState
(3)Storage API
A、localStorage
B、sessionStorage
(4)Communication API (跨域通信)
postMessage
(5)WebSocket API:双工通信
(6)Geolocation API(地理位置API)
(7)Web Worker:通过JavaScript创建一个后台进程,执行耗时比较长的数据处理
(8)File API:来帮助我们在Web页面中访问本地文件,它可以在Web应用中展现十一、表单验证
1、form标签里绑定onsubmit事件
2、type='submit'标签里绑定onsubmit事件
3、type='submit'标签里绑定onclick事件
4、type='button'标签里绑定onclick事件
5、不需要绑定任何时间,直接点击type='submit'标签,数据格式为name=value&name=value
6、借用jQuery
十二、清除浮动的8种方法
1、子级结尾处加空div标签 clear:both
2、父级div定义 width
3、父级div定义 伪类:after
4、父级div定义 overflow:hidden
5、父级div定义 overflow:auto
6、父级div 也一起浮动
7、父级div定义 display:table
8、子级结尾处加 br标签 clear:both
来源,https://www.qdfuns.com/article/27495/5c4b42c07070e566383c631ee275fb2b.html
十三、table相关
1、border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。 table样式属性
2、border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。 table样式属性
3、cellspacing 属性规定单元格之间的空间。table标签属性
4、cellpadding 属性规定单元边沿与其内容之间的空白。table标签属性
十四、清除浮动
1、.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
十五、文件提交

enctype取值及含义
application/x-www-form-urlencoded 在发送前编码所有字符(默认)
multipart/form-data 不对字符编码。在使用<包含文件上传控件>的表单时,必须使用该值。
text/plain 空格转换为 "+" 加号,但不对特殊字符编码。
十六、多选框
(1)<input type='checkbox'/>//多选框的HTML写法
(2) var allTr = $("tbody tr input:checked");//获取被选中的多选框
(3)var num = $("tbody tr td input[type=checkbox]:checked")//获取被选中的多选框
(4) if ($(this).is(':checked')) {//该多选框是否被选中
(5) $("#allChecked").prop("checked", false);//设置多选框为未被选中状态
(6) $("#allChecked").prop("checked", true);//设置多选框为被选中状态

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复