这些HTML、CSS知识点,面试和平时开发都需要 No10-No11
系列知识点汇总
1.基础篇
这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)
这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)
这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)
这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)
2.进阶篇
如何提升我的HTML&CSS技术,编写有结构的代码
No10.表格数据操作
1.Table 元素
(1)一般元素:table、tr(table row)、td(table data)、th(table head)。
(2)结构化元素:caption、thead、tbody、tfoot。
(3)元素说明:table的head、body、foot可把表格分组显示,头部信息放在thead中,body放在tbody中,末尾总结信息放在tfoot中。例如:
<table><caption>迟到人员统计</caption><thead><tr><th>姓名</th><th>迟到次数</th></tr></thead><tbody><tr><td>张三</td><td>2</td></tr></tbody><tfoot><tr><td colspan="2">总人数: 33</td></tr></tfoot> </table>
(4)table边框border间隙设置:border-collapse(值包含collapse、separate、inherit)边框间隙是否可见、border-spacing单元格与单元格之间border的空隙宽度。例如下面的样式设置border间隙可见,间隙宽度为5px:
table{border-collapse: separate;border-spacing: 5px;border: 1px solid red; }
(5)如何显示行分割线:首先要设置border间隙border-collapse为collapse,然后设置th和td的border-bottom。样式代码如下:
table{border-collapse: collapse; }td, th{border-bottom: 1px solid #cecfd5; }tfoot tr:last-child td{border-bottom: none; }
(6)交替行背景设置:通过伪类选择器:nth-child()方法以及参数even和odd选中奇数或偶数行可实现奇偶行交替显示。样式代码如下:
table{border-collapse: collapse; }thead{background: #395870;color: #fff; } tbody tr:nth-child(even){background: #f0f0f2; }
展示效果如下:
(7)border-collapse属性说明:建议设置值为separate,如果不设置为separate,带边框的body和foot比head宽一些。所以一般都建议设置border-collapse为separate并且border-spacing为0。下面代码实现带边框的交替行背景:
table{border-collapse: separate;border-spacing: 0; }thead{background: #395870;color: #fff; }th, td{padding: 10px 15px; }td{border-bottom: 1px solid #cecfd5;border-right: 1px solid #cecfd5; }td:first-child{border-left: 1px solid #cecfd5;}tbody tr:nth-child(even){background: #f0f0f2; }
实现效果如下:
2.本文对齐
(1)对齐属性:通过text-align、vertical-align设置单元格对象方式。
(2)对齐规则:name和desc等文本信息一般左对齐,而数字类型一般右对齐。
3.选择器
(1):first-child、:last-child:例如p:first-child{}选择父元素中第一个子元素并且这个元素名称是p。last-child同理。
(2):nth-child(even/odd):选择奇、偶元素。在表格交替设置背景色中用的比较多,例如: tbody tr:nth-child(even)表示赛选tbody中tr是偶数行的tr。
(3):first-of-type、last-of-type、only-of-type:和first-child或者last-child相似,分别表示选择包含父类的第一个元素、选择包含父类的最后一个元素、选择父元素只有一个元素的元素。例如下面代码表示赛选tr下只有一个td元素的所有所有td元素:
tbody td:only-of-type {padding-left: 0;padding-right: 0; }
(4):first-child和:first-of-type区别:first-child筛选的元素必须是父元素的第一个元素,而first-of-type筛选的元素可以不用是父元素的第一个元素,只要被父元素包含即可筛选到。下面的代码中first-child值筛选到第一个div下的p元素,而first-of-type两个div下的p元素都筛选到了。
<!DOCTYPE HTML> <html><head><meta charset="utf-8"><style type="text/css">p:first-child{color: red;}p:first-of-type{color: blue;}</style></head><body><div class="box"><div><p>111</p></div><div><span></span><p>222</p></div></div></body> </html>
No11.怎样写出好的代码
1.常见规则
(1)添加DOCTYPE:正确的文档结构都必须包含<DOCTYPE html>声明。
(2)小写规则:元素名称、属性、值都使用小写。
(3)引号使用:坚持使用双引号而不使用单引号。
(4)boolean值属性:属性的值类型为布尔类型时省略布尔值。例如:<checkbox checked></checkbox>。
(5)id和class命名:使用实际使用场景来命名,例如设置一个class为red,red表示的展示效果而不是场景。代码如下:
Bad:<p class="red">Error! Please try again.</p> Good:<p class="alert">Error! Please try again.</p>
(6)image标记alt属性:image必须标记可代替图片的文本信息alt属性。例如:
Bad:<img src="puppy.jpg"> Good:<img src="puppy.jpg" alt="A beautiful, two-year-old hound mix puppy">
(7)内容和样式分割:不要把样式嵌入到html内容中。一方面增加页面加载,另一方面难维护。例如:
Bad:<p style="color: #393; font-size: 24px;">Thank you!</p> Good:<p class="alert-success">Thank you!</p>
(8)少使用div元素:尽量多使用结构化元素,div使用太多导致页面太臃肿并且难维护。例如:
Bad: <div class="article"><div class="headline">Headlines Across the World</div></div> </div> Good: <div class="container"><article><h1>Headlines Across the World</h1></article> </div>
2.CSS代码规则
(1)使用注释组织代码:使用注释组织分组样式
Bad: header { ... } article { ... } .btn { ... } Good: /* Primary header */ header { ... }/* Featured article */ article { ... }/* Buttons */ .btn { ... }
(2)使用多行和空格分割样式
bad: a,.btn{background:#aaa;color:#f60;font-size:18px;padding:6px;} Good: a, .btn {background: #aaa;color: #f60;font-size: 18px;padding: 6px; }
(3)class命名:命名要表示实际意义,保持和css语义一致,使用小写字母和连字符。例如:
Bad:.Red_Box { ... } Good:.alert-message { ... }
(4)选择器定义:不要使用id来定义,选择器深度最好不要超过2到3级,中间过度定位的选择器尽量移除。像.new li a中的li就可移除掉。例如:
Bad: #aside #featured ul.news li a { ... } #aside #featured ul.news li a em.special { ... } Good: .news a { ... } .news .special { ... }
(5)使用简短属性:一个border如果同时设置了border-bottom、border-top、border-right、border-left,那么可使用border的简写方式。如果border只需设置一个方向,其他保持继承。那么可使用单个方向如border-left。例如:
Bad: img {margin-top: 5px;margin-right: 10px;margin-bottom: 5px;margin-left: 10px; } button {padding: 0 0 0 20px; } Good: img {margin: 5px 10px; } button {padding-left: 20px; }
(6)color属性值:尽量使用简单的十六进制表示,并且都小写。例如:
Bad: .module {background: #DDDDDD;color: #FF6600; } Good: .module {background: #ddd;color: #f60; }
(7)value为0规则:删除属性值为0的单位。例如:
Bad: div {margin: 20px 0px;letter-spacing: 0%;padding: 0px 5px; } Good: div {margin: 20px 0;letter-spacing: 0;padding: 0 5px; }
(8)供应商属性:把供应商属性分组排列。虽然现在很多浏览器都支持CSS3样式,但为了保证兼容性还是需要添加上供应商样式。例如:
div {background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);background: -moz-linear-gradient(#a1d3b0, #f6f1d3); background: linear-gradient(#a1d3b0, #f6f1d3);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
转载于:https://www.cnblogs.com/w-wanglei/p/5525596.html
这些HTML、CSS知识点,面试和平时开发都需要 No10-No11相关推荐
- 面试Java后端开发的感受:如果就以平时项目经验来面试,通过估计很难——再论面试前的准备...
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 作者:hsm_computer 链接:https://www.cn ...
- css面试基础知识,CSS知识点与面试题解析
前言 CSS 和 HTML 是网页开发中布局相关的组成部分,涉及的内容比较多和杂乱,本小节重点介绍下常考的知识点. 选择器的权重和优先级 CSS 选择器有很多,不同的选择器的权重和优先级不一样,对于一 ...
- html和css最全的知识点归纳总结,html和css的面试知识点总结(附示例)
本篇文章给大家带来的内容是关于html和css的面试知识点总结(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS优先级算法 优先级就近原则,同权重情况下样式定义最近者为 ...
- 最近面试Java后端开发的感受
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 来源:cnblogs.com/JavaArchitect/p/10 ...
- 最近面试 Java 后端开发的感受!
点击上方"方志朋",选择"置顶或者星标" 你的关注意义重大! 首发:cnblogs.com/JavaArchitect/p/10011253.html 上周,密 ...
- 面试java后端开发之后的一些感受
在上周,密集面试了若干位Java后端的候选人,工作经验在3到5年间.我的标准其实不复杂:第一能干活,第二Java基础要好,第三最好熟悉些分布式框架,我相信其它公司招初级开发时,应该也照着这个标准来面的 ...
- css就近原则_细品100道CSS知识点(上)「干货满满」
作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录 细品100道CSS知识点(上)[干货满满]本篇 细品100道C ...
- java行转列_最近面试 Java 后端开发的感受!
首发:cnblogs.com/JavaArchitect/p/10011253.html 上周,密集面试了若干位Java后端候选人,工作经验在3到5年间.我的标准其实不复杂(适用90%小小小公司,BA ...
- 程序员分享:最近面试 Java 后端开发的感受
上周,密集面试了若干位Java后端候选人,工作经验在3到5年间.我的标准其实不复杂: 第一能干活,第二Java基础要好,第三最好熟悉些分布式框架.我相信其它公司招初级开发时,应该也照着这个标准来面的. ...
最新文章
- php 标准输出到文件格式,php格式输出文件var_export函数实例
- 常用javascript函数
- linux pthread_join 使用记录
- RocketMQ的Producer详解之分布式事务消息(原理分析)
- html空白文字宽度
- datatables 搜索框 placeholder 属性
- VMware14.1 Ubuntu16.04设置xshell连接虚拟机
- DSP5509的GPIO学习-第5篇
- DBA/运维人员近期直播活动日历
- 3像素尺寸是多少_纸张的尺寸
- python的turtle模块(海龟画图)
- python基础(set)补充
- AD15 PCB规则检查,unplated pad
- ORACLE常用工具介绍
- photoshop切片的使用
- Tilera推用于云计算的多核处理器Meshed
- 田忌赛马 java,从田忌赛马看Java与.net
- java分解因式_Java将一个整数因式分解
- 机器学习基础 EM算法
- 推荐一款适用于vue的h5富文本编辑器
热门文章
- Mybatis-plus常用API全套教程,看完没有不懂的
- 酸爽! Intellij IDEA 神器居然还藏着这些实用小技巧 !
- 一个基于 Spring Boot 的项目骨架
- 新网杯top1方案:手把手构建中文语音合成模型!
- 剑指offer_第20题_包含min函数的栈_Python
- 十年AI谁“最能打”?AI 2000榜单:何恺明最佳论文“刷”状元,谷歌机构排名第一...
- 覆盖近2亿篇论文还免费!沈向洋旗下团队「读论文神器」登B站热搜
- 堪比当年的LSTM,Transformer引燃机器学习圈:它是万能的
- YOLOv4 中的 Mish 激活函数
- 改改 Python 代码,运行速度还能提升 6 万倍,Science:先别想摩尔定律了