web设计网页的代码、web设计网页的代码是什么 收藏 0

HTML页面精简代码只需做好这5步

网站打开速度慢？网站加载图片慢？网站容易卡顿？身为站长和网站用户的你有没有遇到过这种情况？没错，这些都是网站页面体积惹的祸。解决办法是通过技术手段去掉臃肿杂乱的代码，减小网页文件大小，加快网页加载速度，替身网站打开速度。

网页精简代码主要涉及以下几个要点：

1.CSS样式精简

网页制作应通过CSS（层叠样式表单）来统一定制字体风格。例如：

(bstyle=\”color:red;font-size:16px;\”)测试(/b)

(divid=\”divmain\”style=\”font-size:12px;\”)DIV(/b)

(divstyle=\”color:red;\”)红色(bstyle=\”color:green;\”)绿色(/b)(/div)

———————-

(styletype=\”text/css\”)

b（color:red;font-size:16px;）/*通用对象*/

#divmain（font-size:12px;）/*ID对象*/

.red（color:red;）/*定制类别*/

.redb（color:green;）/*定制类别下的通用对象*/

(/style)

(b)测试(/b)

(divid=\”divmain\”)DIV(/b)

(divclass=\”red\”)红色(b)绿色(/b)(/div)

CSS精简代码示例文件把文字的字体、字号、颜色、背景色等统一起来，不用对每段文字单独进行格式定义，从而减少大量重复性标签。注意把所有css文件单独存放在命名为css的外部文件中。

语法：(linkrel=\”stylesheet\”type=\”text/css\”href=\”/common/client.css\”)

作用的优先级：自身的style属性)页面的内部style对象)页面外部css文件。

下载：css帮助

2.JavaScript精简：

1.简化js中的函数名称和变量。

例如：Google，里面的函数名称只有1个或者2个字符。

2.将网页的公共部分转换为脚本并存于js文件里。这样可以减少文件大小，加快下载速度，同时也方便管理。不过不能将导航等等优化的关键代码转换成js，否则搜索引擎搜索不到。

转换方式：

原来：(h1)天天收藏夹(/h1)

脚本：document.write(“(h1)天天收藏夹(/h1)”);

例如：华军软件园源代码，将标题、导航等等都放着js文件里，将导航放在js里面就不太好了。

3.使用base标签精简：

Base标签是一个全集控制的标签。

比如：

(AHREF=\”http://www.llsffx.com/code/1.htm\”target=”_blank”)代码一(/A)

(AHREF=\”http://www.llsffx.com/code/2.htm\”target=”_blank”)代码一(/A)

其中http://www.llsffx.com和target=”_blank”:多次重复，增加无用的代码。

修改为：

(head)

(basehref=”http://www.llsffx.com/”target=”_blank”)

(/head)

(body)

(ahref=”/code/1.htm”)代码一(/a)

(ahref=”/code/2.htm”)代码二(/a)

(/body)

4.慎用网页精简代码工具

通常的网页精简代码工具，对htm精简代码具有一定的破坏性，常常为了精简代码将标签的后半个标签删除，造成网页的不完整。

处理前：(table)(tr)(td)第一行(/td)(/tr)(tr)(td)第二行(/td)(/tr)(/table)

处理后：(table)(tr)(td)第一行(tr)(td)第二行(/table)

处理后(/td)(/tr)被去掉了，使页面不完整。

5.删除空格和回车

机智的精简代码是连多余的空格和回车都删除的一干二净。这样能够使网页文件大小下降不少。但是这样的做后果是容易使代码排列杂乱，加大程序猿修改代码进度。

注：()替换成<>和{}

Highlight.js – 前端的代码语法高亮库

千辛万苦写了篇技术分享，贴了一堆代码，兴高采烈地发到了自己的博客网站上。结果却发现代码全是白底黑字，字体还难看得很，你瞬间就没了兴致。能不能让网页也能像 IDE 那样，做带语法高亮的炫酷显示呢？来看一看 Highlight.js 吧，看这个语法高亮库如何点亮你的代码。

Highlight.js

Highlight.js，是在 Github 上由 highlight.js 组织开源的前端代码语法高亮库，代码仓库在 https://github.com/highlightjs/highlight.js，目前版本为 10.1.0。其不依赖于任何框架，自带对于大量编程语言和标记语言的语法高亮规则，和主流的高亮色彩方案，且可以自由扩展。其支持自动语言检测，使用极为方便，是在网页上进行语法高亮的不二之选。

highlight.js语法高亮库

Highlight.js 的 CSS 文件的选择决定高亮配色方案，默认为 Default，另外还有如 Monokai Sublime、Ocean、Solarized Dark、Tomorrow 等经典的主流配色方案。

而 JS 文件的选择决定可以支持的语言。主要的 highlight.min.js 包含了一些主流的语言，包括 C++、XML、Markdown、Java 等。如果需要一些其他的语言，则要另外引用该语言对应JS文件。

Highlight.js 在浏览器中可以简单的引用 CDN 来使用：

Highlight.js 使用十分简单，在引用了 CSS 和 JS 后，执行

Highlight.js就会自动查找网页中以标签 pre 和 code 所包裹的代码

并自动检测代码语言，进行高亮渲染。我们也可以为 code 标签添加语言名称的 class，来显式地标明代码语言。我们可以看一个使用示例，注意实际代码中尖括号等 HTML 转义字符需要进行转义处理：

该网页对于 C++ 语言片段使用了 Monokai Sublime 主题进行了语法高亮渲染：

使用Highlight.js渲染C++代码

可以看到，包括关键字、注释和字面值等都有了不同颜色的渲染，输出十分美观。以下则是使 Dracula 主题对 Javascript 代码渲染的例子：

使用Highlight.js渲染Javascript代码

我们也可以不使用 pre 和 code 标签来包裹代码，改为使用自定义的容器，使用时需要注意换行和等宽字体的问题。

在渲染大量代码时，为避免浏览器卡死，可以使用 Web Worker 来在后台进行渲染：

Highlight.js 使得在前端页面进行语法高亮变得十分方便，为在网页显示的代码增添了颜色和生机。

Highlight.js 文档详尽，设计简洁，为编写新的语言支持和配色方案提供了很大支持，定制化能力和可扩展性极强。Highlight.js 的代码包含了对于各种语言的语法解析，和不同配色方案的设计，对于对编程语言和语法高亮领域感兴趣的开发者是一座珍贵的宝库。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com