余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

最详细的html+css笔记(三)(HTML,CSS)

xiyangw 2022-11-25 11:29 97 浏览 0 评论

第三部分 附录(因为暂时不支持插入超链接所以部分内容无法显示


附录一 DIV命名规范


  • 企业DIV使用频率高的命名方法
  • 网页内容类
  • 标题: title
  • 摘要: summary
  • 箭头: arrow
  • 商标: label
  • 网站标志: logo
  • 转角/圆角:corner
  • 横幅广告: banner
  • 子菜单: subMenu
  • 搜索: search
  • 搜索框: searchBox
  • 登录: login
  • 登录条:loginbar
  • 工具条: toolbar
  • 下拉: drop
  • 标签页: tab
  • 当前的: current
  • 列表: list
  • 滚动: scroll
  • 服务: service
  • 提示信息: msg
  • 热点:hot
  • 新闻: news
  • 小技巧: tips
  • 下载: download
  • 栏目标题: title
  • 热点: hot
  • 加入:joinus
  • 注册: regsiter
  • 指南: guide
  • 友情链接: friendlink
  • 状态: status
  • 版权: copyright
  • 按钮: btn
  • 合作伙伴: partner
  • 投票: vote
  • 左右中:left right center


  • 注释的写法: /* Footer */ 内容区/* End Footer */
  • id的命名:
  • 页面结构
  • 容器: container
  • 页头:header
  • 内容:content/container
  • 页面主体:main
  • 页尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center

  • 导航
  • 导航:nav
  • 主导航:mainbav
  • 子导航:subnav
  • 顶导航:topnav
  • 边导航:sidebar
  • 左导航:leftsidebar
  • 右导航:rightsidebar
  • 菜单:menu
  • 子菜单:submenu
  • 标题: title
  • 摘要: summary

  • 功能
  • 标志:logo
  • 广告:banner
  • 登陆:login
  • 登录条:loginbar
  • 注册:regsiter
  • 搜索:search
  • 功能区:shop
  • 标题:title
  • 加入:joinus
  • 状态:status
  • 按钮:btn
  • 滚动:scroll
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 当前的:current
  • 小技巧:tips
  • 图标: icon
  • 注释:note
  • 指南:guild
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:link
  • 版权:copyright

  • class的命名:
  • 颜色:使用颜色的名称或者16进制代码,如
  • .red { color: red; }
  • .f60 { color: #f60; }
  • .ff8600 { color: #ff8600; }
  • 字体大小,直接使用”font+字体大小”作为名称,如
  • .font12px { font-size: 12px; }
  • .font9px {font-size: 9pt; }
  • 对齐样式,使用对齐目标的英文名称,如
  • .left { float:left; }
  • .bottom { float:bottom; }
  • 标题栏样式,使用”类别+功能”的方式命名,如
  • .barnews { }
  • .barproduct { }

  • 注意事项::
  • 一律小写;
  • 尽量用英文;
  • 不加中杠和下划线;
  • 尽量不缩写,除非一看就明白的单词.


  • 推荐的 CSS 书写顺序:
  • 显示属性
  • display
  • list-style
  • position
  • float
  • clear
  • 自身属性
  • width
  • height
  • margin
  • padding
  • border
  • background
  • 文本属性
  • color
  • font
  • text-decoration
  • text-align
  • vertical-align
  • white-space
  • other text
  • content

附录二 CSS精灵


  • CSS精灵原理以及应用
  • CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。
  • 该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签。
  • 一个简单的例子:
  • 一张图片作出一个按钮的三个状态
  • 一个链接用CSS做成按钮的样式,我们可以使用同一张图片,完成按钮的三个状态,a:link,a:hover,a:active <a class="button" href="#">链接</a>
  • 加入右侧的图片为:200px 65px的三个按钮图拼合而成的图片button.png,从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。
a {
 display:block; 
 width:200px; 
 height:65px; 
 line-height:65px; /*定义状态*/
 text-indent:-2015px; /*隐藏文字*/
 background-image:url(button.png); /*定义背景图片*/
 background-position:0 0;
 /*定义链接的普通状态,此时图像显示的是顶上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定义链接的滑过状态,此时显示的为中间部分,向下取负值*/
}
a:active {
 background-position:0 -132px; 
 /*定 义链接的普通状态,此时显示的是底部的部分,向下取负值*/
}
  • 更多的CSS雪碧,图片更复杂,背景定位更精确。可能会用到大量的数值
  • 如:background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位
  • 优点:
  • 减少加载网页图片时对服务器的请求次数
  • 可以合并多数背景图片和小图标,方便在任何位置使用,这样不同位置的请求只需要调用一个图片,从而减少对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量。
  • 提高页面的加载速度
  • sprite技术的其中一个好处是图片的加载时间(在有许多 sprite 时,单张图片的加载时间)。由所需图片拼成的一张 GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNGsprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
  • 减少鼠标滑过的一些bug
  • IE6不会主动预加载鼠标滑过即a:hover中的背景图片,所以,如果使用多张图片,鼠标滑过会出现闪白的现象。使用CSS雪碧,由于一张图片即可,所以不会出现这种现象。
  • 不足:
  • CSS雪碧的最大问题是内存使用
  • 影响浏览器的缩放功能
  • 拼图维护比较麻烦
  • 使CSS的编写变得困难
  • CSS 雪碧调用的图片不能被打印
  • 错误得使用 Sprites 影响可访问性

附录三 一些tips解决方案


页面优化实践


  • 从下面的几个方面可以进行页面的优化:
  • 减少请求数
  • 图片合并
  • CSS文件合并
  • 减少内联样式
  • 避免在 CSS中使用 import
  • 减少文件大小
  • 选择适合的图片格式
  • 图片压缩
  • CSS 值缩写(Shorthand Property)
  • 文件压缩
  • 页面性能
  • 调整文件加载顺序
  • 减少标签数量
  • 调整选择器长度
  • 尽量使用CSS 制作显示表现
  • 增强代码可读性与可维护性
  • 规范化
  • 语义化
  • 模块化

写DIV+CSS 的一些常识


  • 不要使用过小的图片做背景平铺
  • 这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200200=40, 000 次,占用资源
  • 无边框
  • 推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源
  • 慎用 通配符
  • 所谓通配符,就是将CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。
  • CSS的十六进制颜色代码缩写
  • 习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。
  • 样式放头上,脚本放脚下。不内嵌,只外链
  • 坚决不用 CSS表达式
  • 使用 引用样式表,而不是通过@import 导入。
  • 一般来说,PNG比 GIF 要小,小得多。再者,GIF 中有多少颜色是被浪费的,很值得优化。
  • 千万不要在 HTML中缩放图片,一者不好看,二者占资源。
  • 正文字体最好用偶数
  • 12px、14px、16px,效果非常好。特例,15px。
  • block、ul、ol等上下留出至少一倍行距,左侧至少两倍行距,右侧随意。
  • 段落之间,至少要有一倍行距
  • 强行指定某些元素的 line-height,正文 1.6倍于文字大小,标题1.3倍。
  • 中文标点用全角
  • 英文夹杂在中文中,左右空格,半角。
  • 中文字体的粗体和斜体,远离较好

常用代码片段


  • 雅虎工程师提供的CSS初始化示例代码【仅供参考】
  • 可以在html头文件中直接引用,从而避免浏览器的不兼容带来的错误。
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
 margin:0; padding:0; 
}
body {
 background:#fff; 
 color:#555; 
 font-size:14px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
 font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
 font-weight:normal; 
 font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
 font-style:normal; 
 font-weight:normal;
}
a { 
 color:#555; 
 text-decoration:none; 
}
a:hover { 
 text-decoration:underline; 
}
img {
 border:none;
}
ol,ul,li { 
 list-style:none; 
}
input, 
textarea, 
select, 
button { 
 font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
 border-collapse:collapse; 
}
html {
 overflow-y: scroll;
} 
.clearfix:after {
 content: "."; 
 display: block; 
 height:0; 
 clear:both; 
 visibility: hidden;
}
.clearfix { 
 *zoom:1; 
}
  • mobile meta标签
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
  • 表格不被撑开
table-layout: fixed; word-break: break-all;;border-collapse: collapse
  • 不设宽高居中
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
 <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
 <input type=”button” value=”item1″ />
 </span>
</div>
  • 透明度的兼容代码
filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/
  • 文字溢出点点省略
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
  • 清除浮动的几种方法
  • 方法一:投机取巧法 – 不推荐
  • 直接一个放到当作最后一个子标签放到父标签那儿,此方法屡试不爽,兼容性强
  • 方法二:overflow + zoom方法 –不推荐
  • .fix{overflow:hidden; zoom:1;}
  • 此方法优点在于代码简洁,涵盖所有浏览器
  • 方法三:after + zoom方法 -推荐–此方法可以说是综合起来最好的方法了
  • clearfix只应用在包含浮动子元素的父级元素上
.fix{zoom:1;}
.fix:after{
 display:block; 
 content:'clear'; 
 clear:both;
 line-height:0; 
 visibility:hidden;
}
  • 更多代码片段详情
  • 实用的60个CSS代码片段

一些总结


  • 自动继承属性:
  • color
  • font
  • text-align
  • list-style
  • 非继承属性:
  • background
  • border
  • position
  • 具有破坏性的元素:
  • float
  • display:none;
  • position:absoblute/fixed/sticky;
  • 具有包裹性的元素:
  • display:inline-block/table-cell
  • position:absolute/fixed/sticky
  • overflow:hidden/scroll
  • 消除图片底部间隙的方法
  • 图片块状化-无基线对齐
  • img{display:block;}
  • 图片底线对齐
  • img{vertical-align:bottom;}
  • 行高足够小 - 基线位置上移
  • .box{line-height:0;}

一些概念


  • BFC
  • BFC全称”Block Formatting Context” 中文为“块级格式化上下文”
  • 记住这么一句话:BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
  • 优雅降级(graceful degradation)
  • 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
  • 渐进增强 progressive enhancement:
  • 是在浏览器开启JavaScript功能后,如果浏览器版本不支持某些 JavaScript 能力,我们解决这种问题的方式
  • 平稳退化
  • 是在浏览器没有JavaScript功能,或没有开启JavaScript功能情况下,我们解决这种问题的方式;

学习从来不是一个人的事情,要有个相互监督的伙伴,想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料,一起学习,一起成长!

相关推荐

“三次握手,四次挥手”你真的懂吗?

记得刚毕业找工作面试的时候,经常会被问到:你知道“3次握手,4次挥手”吗?这时候我会“胸有成竹”地“背诵”前期准备好的“答案”,第一次怎么怎么,第二次……答完就没有下文了,面试官貌似也没有深入下去的意...

面试官问:三次握手与四次挥手是怎么完成的?

作者|饶全成来源|码农桃花源记得刚毕业找工作面试的时候,经常会被问到:你知道“3次握手,4次挥手”吗?这时候我会“胸有成竹”地“背诵”前期准备好的“答案”,第一次怎么怎么,第二次……答完就没有...

三次握手和四次挥手的高阶面试题,建议收藏

昨天村长的讲解,真是一语点醒,这样的解释胜过死记硬背。但对于学习者,如果不能有直观感受,可能还是觉得不接地气,今天介绍两个工具,一个是网络抓包工具Wireshark,一个是linux命令tcpdum...

三次握手和四次挥手到底是个什么鬼东西

之前总有是有面试官喜欢问,你知道什么是三次握手么?什么是四次挥手么?为什么握手需要三次,挥手需要四次呢?今天我们就来详细的聊一下这个。1.什么是TCPTCP协议,简单称呼一下的话,那就是传输控制协议,...

加深理解TCP的三次握手与四次挥手

在了解三次握手和四次挥手之前,先要知道TCP报文内部包含了那些东西。熟悉了解TCP报文对日后学习网络和排除方面有很大的帮助,所以,今天为了加深对三次握手的理解,从新去认识TCP报文格式。TCP报文格式...

三次握手 与 四次挥手_三次握手四次挥手大白话

三次握手:①首先Client端发送连接请求报文②Server段接受连接后回复ACK报文,并为这次连接分配资源。③Client端接收到ACK报文后也向Server段发生ACK报文...

动画讲解TCP的3次握手,4次挥手,让你一次看明白

专注于Java领域优质技术,欢迎关注作者:老钱占小狼博客TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一。很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答。本篇尝试...

linux下实现免密传输文件或登录到其他服务器

使用scp传输文件到其他服务器的时候,提示需要输密码,如下:[root@18csetup]#scpLINUX.X64_180000_db_home.zip192.168.133.120:/u0...

Linux如何通过salt免密SCP传输上百台机的脚本?看chatGPT的回答

如何通过salt免密SCP传输上百台机的shell脚本”,下面是chatGPT给出的结果。scp批量免密脚本给出的详细shell脚本如下:#!/bin/bash#源文件路径和目标路径SRC_...

Linux/Mac scp命令上传文件_将hdfs上的文件下载到本地的命令是

语法scp[可选参数]file_sourcefile_target参数说明:-1:强制scp命令使用协议ssh1-2:强制scp命令使用协议ssh2-4:强制scp命令只使用IPv4寻...

Linux常用功能——文件远程传输_linux 远程传输文件

scp是securecopy的简写,是linux系统下基于ssh登陆进行安全的远程文件拷贝命令,用于在Linux下进行远程拷贝文件的命令。和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器...

使用 scp 命令定时拉取服务器备份文件

我们的服务器,每周五必须要做下备份,但总是忘记执行备份这件事情,或者是服务器备份做了,但没有做异地备份。所以通过定时任务自动备份,备份成功之后,在其它服务器上面通过定时任务scp命令自动拉取备份文...

windows下最轻便的FTP/SCP文件管理器

这次推荐的工具叫做winscp,这个工具如果是IT从业人员,又是做服务端相关工作的话,可能无人不知,如果是刚入门,推荐立马上手试试。如果看了觉得有用,欢迎收藏、点赞、关注。官方网站:https://w...

我不是网管 - Linux中使用SCP命令安全复制文件

SCP是linux发行版中的命令行工具,用于通过网络安全地跨系统复制文件和目录。SCP代表安全复制,因为它使用ssh协议复制文件。拷贝时,scp命令建立ssh连接到远程系统。换句话说...

WinSCP软件双系统(Win-Linux)文件传输教程

WinSCP软件是windows下的一款使用ssh协议的开源图形化SFTP客户端,也就是一个文件传输的软件,它有什么优点吗,咱们嵌入式开发中经常会将windows中的文件复制到linux系统当中,比较...

取消回复欢迎 发表评论: