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