HTML其他概念




"俗话说,出来江湖混的,持善良之心,怀正义之气,总有志同道合者共相为谋。而HTML也有这么几个大哥们er、小兄dei、小宝贝儿。他们一起干大事,为服务好普罗大众贡献自己一份力量,接下来让我们一起走进他们吧。"
——有心人做有心事哦,晚安EmilyChen!




(一)WEB初识

【1】浏览器

五大主流浏览器 开发团队或浏览器内核简称 CSS3特定属性(新属性加前缀)
Chrome webkit -webkit-transform
Safari webkit
IE ms
Firefox moz
Opera o
浏览器内核(渲染内核和js内核,前者渲染代码,计算显示方式,进而读取呈现页面;后者偏向于动态效果的展示)

【2】web标准

浏览器编写的代码统一规范,让浏览器尽可能显示一致的效果
①由此依据,内容能被更广泛的设备访问
②方便代码维护,提高页面加载速度
③网站流量的费用就降低了
④更容易被搜索引擎搜索
⑤让web的发展前景更广阔


(二)SEO规范

(Search Engine Optimization)搜索引擎优化

【1】浏览器标签页title 标题

控制在28个字符最佳,网站名(或产品名)-网站的介绍

【2】Keywords 关键字

6~8个关键字最佳,电商类网站可以多些

【3】Description 网站说明

字符数含空格不超过120个汉字最佳 补title、Keywords未能充分的描述 用英文逗号隔开: "关键字1,关键字2"

【4】LOGO

加个h标题,告诉搜索引擎这里很重要--h里放个链接--链接里加个网站名和title提示,便于搜索引擎收录


(三)IDE

(Integrated Department Environment)集成开发环境,又叫代码编辑工具

【1】常用

Dreamweaver Sublime Text WebStorm VScode

【2】Emmet语法

  • 页面骨架:! 按下tab键
  • 多个子元素:ul>li*6
  • 序列化:h$*6
  • 内容化:h{学生}*6
  • 带名:.div #div
  • 复制粘贴上下行:光标到对象,shift+alt+↑或↓
  • 多行选择:光标到对象,shift+alt+按下拖动光标
  • 查询:ctrl+h
  • 替换:ctrl+alt+enter



(四)切图


【1】Cutterman是个嵌入正版PhotoShop的一个快速成图的插件,便于web前端与UI设计工作上的对接
【2】比PS更小巧的就是Framework,建议用此软件进行精灵图的代码书写

精灵图(sprite),因谐音又叫雪碧图

把大量小图片集中于一张大背景图,一般用svg格式会好点

  • 优点:可应用于大量的矢量小图标,减少服务器请求次数,加快页面加载速度,提升用户体验
  • 代码:background:url()no-repeat position
  • 切记:position是根据切图软件选取对象的x,y坐标而定,且多为负值


posted @ 2020-07-23 20:55  MaricoCheung  阅读(218)  评论(0编辑  收藏  举报