
html
刘鸿宇..
用代码改变世界
展开
-
优化图片的加载
图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验...原创 2021-01-12 08:57:41 · 167 阅读 · 0 评论 -
做好SEO需要考虑什么
了解搜索引擎如何抓取网页和如何索引网页meta标签优化关键词分析付费给搜索引擎链接交换和链接广泛度(Link Popularity)合理的标签使用原创 2021-01-12 08:56:51 · 312 阅读 · 0 评论 -
标签语义化
去掉或者丢失样式的时候能够让页面呈现出清晰的结构有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化...原创 2021-01-12 08:55:29 · 157 阅读 · 0 评论 -
Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 如何触发这2种模式?
声明位于文档中的最前面,处于标签之前。告知浏览器以何种模式来渲染文档严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现触发严格模式是在Html前申明正确的DTD触发混杂模式是在Html文档开始不声明DTD,或者在DOCTYPE前加入XML声明...原创 2021-01-10 17:16:33 · 176 阅读 · 0 评论 -
Doctype文档类型
标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 FramesetXHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 FramesetStandards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页...原创 2021-01-10 17:14:13 · 124 阅读 · 0 评论 -
HTML与XHTML的区别
XHTML 元素必须被正确地嵌套XHTML 元素必须被关闭标签名必须用小写字母XHTML 文档必须拥有根元素原创 2021-01-10 17:10:37 · 79 阅读 · 0 评论 -
CSS sprites原理,和优缺点
原理:CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。优点:减少网页的http请求减少图片的字节解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名更换风格方便,只需要在一张或少张图片上修改图片的原创 2021-01-10 17:06:38 · 223 阅读 · 0 评论 -
隐藏元素的方法
visibility: hidden;这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在opacity: 0;一个CSS3属性,设置0可以使一个元素完全透明,制作出和visibility一样的效果。与visibility相比,它可以被transition和animateposition: absolute;使元素脱离文档流,处于普通文档之上,给它设置一个很大的left负值定位,使元素定位在可见区域之外display: none;元素会变得不可见,并且不会再占用文档的空间transform:原创 2021-01-10 17:04:57 · 124 阅读 · 0 评论 -
清除浮动的方法
注解:浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动。正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷)添加额外标签,例如<div style="clear:both"></div>使用br标签和其自身的html属性,例如<br clear="all" />父元素设置 overflow:hidden;在IE6中还需要触发hasLayout例如zoom:1父元素设置 overflow:auto 属性;同样IE6需要触发has原创 2021-01-10 17:03:13 · 107 阅读 · 0 评论 -
line-height三种赋值方式
带单位:px不用计算,em则会使元素以其父元素font-size值为参考来计算自己的行高纯数字:把比例传递给后代,例如父级行高为1.5,子元素字体为18px,则子元素行高为1.5*18=27px百分比:将计算后的值传递给后代...原创 2021-01-10 16:57:58 · 324 阅读 · 0 评论 -
水波加载动画 html+css
1.贴图:2.加入连接:写上你想写的字3.在新窗口打开连接:写上要写的字消除连接的下划线在新窗口打开连接:写上你想写的字4.移动字体(走马灯):写上你想写的字5.字体加粗:写上你想写的字6.字体斜体:写上你想写的字7.字体下划线: 写上你想写的字8.字体删除线: 写上你想写的字9.字体加大: 写上你想写的字10.字体控制大小:写上你想写的字 (其中字体大小可从h1-h5,h1最大,h5最小)11.更改字体颜色:写上你想写的字(其中value值在000000与ffffff(16位进制)原创 2021-01-10 16:51:08 · 199 阅读 · 1 评论 -
CSS布局
固定布局流式布局弹性布局浮动布局定位布局margin和padding原创 2021-01-08 13:43:25 · 82 阅读 · 0 评论 -
html5有哪些新特性、移除了那些元素?
新特性:a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加b. 拖拽释放(Drag and drop) APIc. 语义化更好的内容标签(header,nav,footer,aside,article,section)d. 音频、视频API(audio,video)e. 画布(Canvas) APIf. 地理(Geolocation) APIg. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失h. sessionSt原创 2021-01-08 13:42:29 · 219 阅读 · 0 评论 -
iframe的优缺点
优点:解决加载缓慢的第三方内容如图标和广告等的加载问题iframe无刷新文件上传iframe跨域通信缺点:i frame会阻塞主页面的Onload事件无法被一些搜索引擎索引到页面会增加服务器的http请求会产生很多页面,不容易管理...原创 2021-01-08 13:41:36 · 82 阅读 · 0 评论 -
table的缺点
太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量灵活性差,比如要将tr设置border等属性,是不行的,得通过td代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱不够语义...原创 2021-01-08 13:39:41 · 140 阅读 · 0 评论 -
src与href的区别
src用于替换当前元素href用于在当前文档和引用资源之间确立联系src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接...原创 2021-01-08 13:38:48 · 82 阅读 · 0 评论 -
<img>标签上title属性与alt属性的区别是什么
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短, 下·不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息...原创 2021-01-08 13:37:18 · 164 阅读 · 0 评论