茶叶品质网站建设,做一个交易网站要花多少钱,短信轰炸网站开发,辽宁建设工程信息网官网新网址1. 什么是HTML#xff1f;2. 用过什么调试器#xff08;浏览器#xff09;#xff0c;编辑器#xff1f;3. HTML4.0 和 HTML5.0 的区别#xff1f;4. 手写 HTML 代码5. 元素类型有哪些#xff08;display有哪些属性#xff09;#xff1f;块元素、行元素和行内块元素的…1. 什么是HTML2. 用过什么调试器浏览器编辑器3. HTML4.0 和 HTML5.0 的区别4. 手写 HTML 代码5. 元素类型有哪些display有哪些属性块元素、行元素和行内块元素的区别你能分别写出多少个块元素、行元素6. a标签 中的两个重要属性是什么分别用来干什么7. 什么是相对路径、绝对路径8. form 中 name 有什么作用9. form 表单中 get 和 method 请求的区别10. 创建样式表有哪几种方式分别怎么写11. link 和 import 的区别12. css 有哪些选择器这些选择器的权重分别是多少13. 让块元素居中14. 让行元素居中15. 让图片居中16. overflow 有哪些属性默认属性是什么float 有哪些属性高度塌陷的解决办法是什么17. px、em、rem之间的区别18. background-repeat 有哪些属性值19. 图片常用格式以及区别20. 定位属性有哪些区别是什么21. 什么是“盒模型”画出盒模型并写出盒模型的宽。22. 图片整合的优势有哪些23. 隐藏一个元素的方法有哪些24. 什么是 BFC有什么作用25. 用代码写出几种后台布局单飞、双飞/圣杯、后台管理26. 常用的浏览器及内核、兼容前缀27. PC 浏览器前端优化策略28.表格行分组有哪几个标签29.怎么去除换行产生的空格 1. 什么是HTML
HTML 是超文本标记语言。XHTML 指可扩展超文本标记语言标识语言。HTML5 指的是HTML的第五次重大修改。 2. 用过什么调试器浏览器编辑器
调试器火狐浏览器FireFox谷歌浏览器ChromeIE浏览器。 编辑器Dreamweaver、HBuild、vsCode 3. HTML4.0 和 HTML5.0 的区别
1更简单 2标签的语义化 3语法更宽松 4多设备跨平台 5自适应网页设计 6兼容性 html4css2.0 兼容 ie6/7/8html5不能兼容ie6/7。 4. 手写 HTML 代码
!-- head标签里面可以放title, style,meta, link, script, noscript, and base --
!doctype html !--- 声明。告诉浏览器这是html5版本的写法 ----
htmlhead !---页头、也叫“站头”网站头部 ---meta charsetUTF-8 / !---- 翻译国际编码。识别中文不加这个会乱码 -----title/title !---- 网站名中文名不合适 ----/headbody/body !--- 主体部分 ---
/html5. 元素类型有哪些display有哪些属性块元素、行元素和行内块元素的区别你能分别写出多少个块元素、行元素
1元素类型 常用的有4中不显示元素 none 默认块元素block、行元素inline、行内块元素inline-block
2区别以及标签
名称块元素行元素行内块元素区别1. 天生能换行的元素独占一行每一个块状元素都会从新的一行重新开始从上到下排布2. 在不设置宽度的情况下块元素的宽度是它父级元素内容的宽度3. 在不设置高度的情况下块级元素的高度是它本身内容的高4. 可以直接控制宽度、高度以及盒子模型的相关css属性天生不能换行的元素天生不能换行但能设置宽高的元素标签h1-h6pbr/nbsphr/ul和liol和lidl dt dddivb iustrongemsspanaimginputtextarea
3元素转换通过 display。 6. a标签 中的两个重要属性是什么分别用来干什么
!-- a标签中的两个重要属性 ---
!-- href超链接属性target_blank新窗口打开 --
a hrefwww.baidu.com target_blank/a7. 什么是相对路径、绝对路径
a标签的href属性、img标签的src属性、
1绝对路径 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。 例如C:\xyz\test.txt 代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个URL绝对路径。
2相对路径 相对于某个基准目录的路径。包含Web的相对路径HTML中的相对目录。 例如在Servlet中/“代表Web应用的根目录。物理路径的相对表示例如”./ 代表当前目录…/代表上级目录。这种类似的表示也是属于相对路径。
/表示源文件的根目录 ./表示当前文件所在的目录(可以省略) ../表示当前文件所在的目录的上一级目录
绝对路径由根目录(/)为开始写起的文件名或者目录名称如/home/oldboy/test.py;相对路径相对于目前路径的文件名写法。例如./home/oldboy/exam.py或…/…/home/oldboy/exam.py简单来说只要开头不是/就是属于相对路径 8. form 中 name 有什么作用
1name 属性用于对提交到服务器后的表单数据进行标识 2或者在客户端通过 JavaScript 引用表单数据。 注释只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 9. form 表单中 get 和 method 请求的区别
method传输方式默认get。两者的区别 1get 通过地址栏传输会将信息拼接到地址栏上。而 post 不会讲信息拼接到地址栏上 2post 的传输方式比 get 安全 3post 能传输大量信息 4get 传输速度比 post 快( get 没有加密 ) 注意常用 get 的传输方式。 10. 创建样式表有哪几种方式分别怎么写
1内联样式表style typetext/csscss语法/style**最好写在head/head中 2外部样式表link relstylesheet typetext/css href路径 / 和 import url(路径); 3内联样式表嵌入式、行间、行内div style“height:100px;background:red;” /div 11. link 和 import 的区别
区别linkimport1. 从属关系link是HTML提供的标签不仅可以加载 CSS 文件还可以定义 RSS、rel 连接属性等。import是 CSS 提供的语法规则只有导入样式表加载CSS的作用。2. 加载顺序当一个页面被加载的时候就是被浏览者浏览的时候link引用的CSS会同时被加载。而import引用的CSS 会等到页面全部被下载完再被加载所以有时候浏览import加载CSS的页面时开始会没有样式。3. 兼容性的差别link标签作为 HTML 元素不存在兼容性问题。import是CSS2.1提出的所以老的浏览器不支持import只t在IE5以上的才能识别。4. 使用dom控制样式时的差别当使用javascript控制dom去改变样式的时候只能使用link标签。import不是 dom 可以控制的。5. 权重区别link引入的样式权重大于import引入的样式。12. css 有哪些选择器这些选择器的权重分别是多少
1id 选择符 0100 2class 选择符 0010 3伪类选择符 0010 4元素选择符类型选择符0001 5后代选择符 后代选择符的权重之和 6群组选择符 7通配符 内联样式表的权重最高1000 继承样式的权重为0000 13. 让块元素居中
1高度已知 ① margin: 0 auto;这是让块元素水平居中的手段需要配合 width 一起使用
stylediv{width:300px; height:300px; background:#f0f; margin:0 auto;}
/style
bodydivbox/div
/body② 定位 position:fixed 和 margin: auto; 水平垂直居中。
stylediv{width:300px; height:300px; background:#f0f;position:fixed; left:0; right:0; top:0; bottom:0; margin:auto;}
/style
bodydivbox/div
/body③ 使用 定位 position:fixed 和平移 margin;
!-- margin: 上 右 下 左; 第一个距离填高度的一半且要往上所以是负值 --
stylediv{width:300px; height:200px; background:#f0f;position:fixed; top:50%; left:50%; margin:-100px 0 0 -150px;}
/style
bodydivbox/div
/body④ 2D 居中使用 定位 position:fixed 和平移 transform: translate(水平, 垂直);
!-- 与 ③ 原理一样 --
stylediv{width:300px; height:200px; background:#f0f;position:fixed; top:50%; left:50%; transform: translate(-150px, -100px);}
/style
bodydivbox/div
/body2高度未知 ① 2D 居中使用 定位 position:fixed 和平移 transform: translate(水平, 垂直);
!-- translate()中的两个参数百分比是根据自身来的 --
stylediv{width:300px; background:#f0f;position:fixed; top:50%; left:50%; tansform: translate(-50%, -50%);}
/style
bodydiv盒子高度未知定位之后使用translate平移自身的一半距离/div
/body14. 让行元素居中
1text-align:center 让一个 span 标签中的文本水平居中将该 span 标签套在一个块元素中
stylep{width:300px; background:#f0f; text-align:center;}
/style
pspanspan文字/span
/p2line-height: 高度px; 文本垂直居中。 15. 让图片居中
1使用 line-height 和 vertical-align。 只在html5中生效XHTML1.0是不生效的。
stylediv{width:600px; height:300px; border:2px solid black;line-height:300px; /*img 属于行内块元素可以使用文本属性使img垂直居中 */text-align: center; /*写在父元素身上属性继承*/}img{width: 200px;height:200px;vertical-align: middle; /*不写这个属性的话图片对齐点在底部。写了之后图片对齐点在中心*/}
/style
bodydivimg src../imgs/蔡蔡2.jpg alt srcset/div
/body2虚拟一个行内块元素让图片和这个元素的对齐点都在中心。
stylediv{width:600px; height:400px; border:2px solid black;text-align: center; /*写在父元素身上属性继承*/}img{width: 200px;height:200px;vertical-align: middle;/*让图片的对齐点在中心*/}i{display: inline-block;/*让i标签可以设置高度*/height: 100%; /*让i标签的高度框的高度*/vertical-align: middle;/*让i标签的对齐点在中心*/}
/style
bodydivimg src../imgs/蔡蔡2.jpg /i/i!-- i标签不要换行不然会产生5px距离 --/div
/body3使用伪元素类似2。
stylediv{width:600px; height:400px; border:2px solid black;text-align: center; /*写在父元素身上属性继承*/}img{width: 200px;height:200px;vertical-align: middle;/*让图片的对齐点在中心*/}div:after{content: ;display: inline-block;/*让i标签可以设置高度*/height: 100%; /*让i标签的高度框的高度*/vertical-align: middle;/*让i标签的对齐点在中心*/}
/style
body
!-- 因为会5px空格所以不能换行 --divimg src../imgs/蔡蔡2.jpg //div
/body16. overflow 有哪些属性默认属性是什么float 有哪些属性高度塌陷的解决办法是什么
1overflow
overflow:visible;/*默认值*/
overflow:hidden;/*溢出隐藏*/
overflowscroll;/*滚动*/
overflow:auto;/*自动出现滚动条*/2float
float: none; //默认不浮动
float: left; //左浮动
float: right; //右浮动3高度塌陷的解决办法 ① 给父元素足够高度缺点无法做到高度自适应 ② overflow: hidden; 缺点溢出的部分子元素超出父元素会被隐藏 ③ 在最后一个浮动元素之后添加一个块元素这个块元素写样式 clear:both; 来清除浮动。 ④ 万能清除法配合第三种方式通过伪元素来实现
//zoom:1;一条解决ie疑难杂症比如浮动的神奇属性
// visibility: visible/hidden;可见/隐藏
//父元素:before{content: ; display:table;} 解决第一个块元素 margin-top 向上传递问题。
父元素{zoom:1;}
父元素:after{display: block; content: ; clear: both; visibility: hidden;}
父元素:before{content: ; display:table;}16. 用代码写出下三角 哪个方向的三角形就将哪个方向的边框设置 border-方向: 大小 solid 颜色相邻的边框颜色设置成白色消失色对边的边框设置为 0 stylediv{width:0; /*块元素不设置宽度父元素宽度*/height:0; /*可省略*/border-top:20px solid #00f;border-left:20px solid #fff;border-right:20px solid #fff;border-bottom: 0;}
/style17. px、em、rem之间的区别
名称pxemrem介绍px像素Pixel。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置则相对于浏览器的默认字体尺寸。rem是CSS3新增的一个相对单位root em根em。特点1. IE无法调整那些使用px作为单位的字体大小2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位3. Firefox能够调整px和emrem但是96%以上的中国网民使用IE浏览器(或内核)。1. em的值并不是固定的2. em会继承父级元素的字体大小。使用rem为元素设定字体大小时仍然是相对大小但相对的只是HTML根元素。注意任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em16px。
px 与 rem 的选择
对于只需要适配少部分手机设备且分辨率对页面影响不大的使用px即可 。对于需要适配各种移动设备使用rem例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。 18. background-repeat 有哪些属性值
repeat //默认平铺
repeat-x //横向平铺
repeat-y //纵向平铺
no-repeat //不平铺19. 图片常用格式以及区别
格式.jpg.png.gif区别图片有损质量但肉眼难分辨用来减小图片大小图片非镂空使用。图片有损质量但肉眼分辨不出用来减小图片大小图片镂空使用。图片有损质量严重肉眼容易分辨常用做动图。20. 定位属性有哪些区别是什么
postion: static默认、absolute绝对定位、relative相等定位、fixed固定定位定位属性position属性值staticrelativeabsolutefixed称呼默认不定位相对定位绝对定位固定定位区别没有定位元素出现在正常的流中.根据自身初始所在位置来定位不破坏原有元素的特性。自动向上检索根据最近的定位元素作为父元素如果检索不到就以 html 来定位。始终根据 html 来定位是否占文档流占文档流占文档流不占文档流完全脱离文档流不占文档流完全脱离文档流特点或用法特点因为相对定位占文档流在没有设置 left、top 属性下的效果和static 默认是一样的。用法①向上检索定位的元素作为父框②多个定位元素使用 z-index 来定义层级。特点位置不随着滚动条滚动而发生变化。适用场合微调距离时可以用此属性。可以使用lefttoprightbottom等。通常用于做重叠效果。网页遮罩。21. 什么是“盒模型”画出盒模型并写出盒模型的宽。 盒模型的组成分为外边距、边框、内边距、内容区盒子实际宽度高度内容content边框border间隙padding间隔margin IE盒模型也叫怪异盒模型具体可以查看 html笔记四弹性盒响应式 22. 图片整合的优势有哪些
1 减少对服务器的请求次数从而提高页面加载速度 2减少图片体积; 23. 隐藏一个元素的方法有哪些
1display:none; 完全消失且不占文档流 2visibility:hidden; css消失占文档流 3opacity:0; 透明占文档流 4postion:relative;left:-99999px; 相对定位占文档流 5postion:absolute;left:-99999px; 绝对定位不占文档流 24. 什么是 BFC有什么作用 BFCBlock fomatting content块级格式化上下文。是 w3c css2.1 规范中的一个概念。它是页面中的一块渲染区域且有一套渲染规则它决定了其子元素将如何定位以及和其他元素的关系和相互作用。 具有 BFC 特性的元素看作是隔离了的独立容器容器里面的元素不会在布局上影响到外面的元素并且 BFC 具有普通容器所没有的一些特性。
具体html笔记二html4css2.0元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹 25. 用代码写出几种后台布局单飞、双飞/圣杯、后台管理
代码太长了我放到HTMLcss实现的效果里面了。 26. 常用的浏览器及内核、兼容前缀
浏览器内核兼容前缀IE浏览器Trident-ms-火狐Firefox浏览器Gecko-moz-原谷歌现苹果Webkit-webkit-现在Opera和谷歌Blink由Google和Opera 开发的浏览器排版引擎原OperaPresto迅速的但是缺乏兼容性-o-27. PC 浏览器前端优化策略 28. 表格行分组有哪几个标签
表头 thead/thead表体 tbody/tbody表尾 tfoot/tfoot 29. 怎么去除换行产生的空格
1方案一不换行 2方案二在给父元素设置font-size:0;子元素再设置 font-size 大小。案例示范
