你不可不知的

你不可不知的 HTML 优化技巧

2016/09/12 · 基础技术 ·
2 评论 ·
HTML

本文作者: 伯乐在线 –
葡萄城控件
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。

很显然HTML 已经达到了一个瓶颈,尽管它是开发Web
界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML
元素,页面Size会更大。

如何有效的降低HTML
代码的复杂度和页面元素的数量,本文主要解决了这个问题,从多个方面介绍了如何编写简练,清晰的HTML
代码,能够使得页面加载更为迅速,且能在多种设备中运行良好。

对 HTML 进行分类设置类),使我们能够为元素的类定义 CSS
样式

相同的类设置相同的样式,或者为不同的类设置不同的样式

* 分类块级元素

它能够用作其他 HTML
元素的容器
,设置<div>元素的类,使我们能够为相同的<div>元素设置相同的类

<div  class=”cities”>

<h1>China</h1>

<p>中国有许多省份</p>

</div>

样式

<head>

<style>

.cities{

color:red;

padding:20px;

}

</style></head>

* 分类行元素

行内元素,能够用作文本的容器。设置<span>元素的类,能够为相同的<span>元素设置相同的样式。

<p>呵呵,<span
class=”red”
>Important</span>这边是一般的文本信息</p>

样式

<style>

span.red{

color:green;

margin:50px;

}

</style>

在设计和开发过程中需要遵循以下原则:

  • 结构分离:使用HTML 增加结构,而不是样式内容;
  • 保持整洁:为工作流添加代码验证工具;使用工具或样式向导维护代码结构和格式
  • 学习新语言:获取元素结构和语义标记。
  • 确保可访问: 使用ARIA 属性和Fallback 属性等
  • 测试: 使网站在多种设备中能够良好运行,可使用emulators和性能工具。

澳门新葡亰平台官网 1

布局

<div>元素常用作布局工具,因为能够轻松地通过 CSS
对其进行定位。

* 使用 HTML5 的网站布局

    header:定义文档或节的页眉;

    nav: 定义导航链接的内容;

    section: 定义文档中的节;

    article: 定义独立的自包含文章;

    aside: 定义内容之外的内容(比如侧栏);

    footer: 定义文档或节的页脚;

    details: 定义额外的细节;

    summery: 定义 details 元素的标题;

* 使用表格的Html布局

<table>的作用是显示表格化的数据

使用<table>元素能取得布局效果,因为能够通过 CSS
设置表格元素的样式

HTML、CSS 和JavaScript三者的关系

HTML 是用于调整页面结构和内容的标记语言。HTML
不能用于修饰样式内容,也不能在头标签中输入文本内容,使代码变得冗长和复杂,相反使用CSS
来修饰布局元素和外观比较合适。HTML元素默认的外观是由浏览器默认的样式表定义的,如在Chrome中h1标签元素会渲染成32px的Times
粗体。

三条通用设计规则:

  1. 使用HTML
    来构造页面结构,CSS修饰页面呈现,JavaScript实现页面功能。CSS
    ZenGarden 很好地展示了行为分离。
  2. 如果能用CSS或JavaScript实现就少用HTML代码。
  3. 将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。

Html响应式web设计(多看多写)

什么是响应式 Web 设计?

· RWD 指的是响应式 Web 设计Responsive Web Design

· RWD 能够以可变尺寸传递网页

· RWD 对于平板和移动设备是必需的

   
创建您自己的响应式设计:**
创建响应式设计的一个方法,是自己来创建它*

**    使用 Bootstrap:另一个创建响应式设计的方法,是使用现成的 CSS
框架;Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。


***Bootstrap
帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机:


<head>

<link
rel=”stylesheet” **href=”;

<head>

文档结构方面也可以做优化,如下:

  • 使用HTML5 文档类型,以下是空文件:

<!DOCTYPE html> <html> <head> <title>Recipes:
pesto</title> </head> <body>
<h1>Pesto</h1> <p>Pesto is good!</p>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
 
<head>
<title>Recipes: pesto</title>
</head>
 
<body>
 
  <h1>Pesto</h1>
 
  <p>Pesto is good!</p>
 
</body>
</html>
  • 在文档起始位置引用CSS文件,如下:

<head> <title>My pesto recipe</title> <link
rel=”stylesheet” href=”/css/global.css”> <link rel=”stylesheet”
href=”css/local.css”> </head>

1
2
3
4
5
6
7
<head>
  <title>My pesto recipe</title>
 
  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">
 
</head>

使用这两种方法,浏览器会在解析HTML代码之前将CSS信息准备好。因此有助于提升页面加载性能。

在页面底部body结束标签之前输入JavaScript代码,这样有助于提升页面加载的速度,因为浏览器在解析JavaScript代码之前将页面加载完成,使用JavaScript会对页面元素产生积极的影响。

<body> … <script src=”/js/global.js”> <script
src=”js/local.js”> </body>

1
2
3
4
5
6
7
8
<body>
 
  …
 
  <script src="/js/global.js">
  <script src="js/local.js">
 
</body>

使用Defer和async属性,脚本元素具有async 属性无法保证会按顺序执行。

可在JavaScript代码中添加Handlers。千万别加到HTML内联代码中,比如下面的代码则容易导致错误且不易于维护:

index.html:

<head> … <script src=”js/local.js”> </head> <body
onload=”init()”> … <button
onclick=”handleFoo()”>Foo</button> … </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
  
  …
 
  <script src="js/local.js">
 
</head>
 
<body onload="init()">
 
  …
 
  <button onclick="handleFoo()">Foo</button>
 
  …
 
</body>

下面的写法比较好:

index.html:

<head> … </head> <body> … <button
id=”foo”>Foo</button> … <script src=”js/local.js”>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
 
  …
 
</head>
 
<body>
 
  …
 
  <button id="foo">Foo</button>
 
  …
 
  <script src="js/local.js">
 
</body>

js/local.js:

init(); var fooButton = document.querySelector(‘#foo’);
fooButton.onclick = handleFoo();

1
2
3
4
init();
var fooButton =
    document.querySelector(‘#foo’);
fooButton.onclick = handleFoo();

Html框架(使用框架,一个浏览器页面可以放置多个Html页面)

通过使用一个框架,你可以在同一个浏览器窗口中显示不止同一个页面每份Html文档成为一个框架,并且每一个都独立于其他的框架。

使用框架的坏处:

    *  开发人员必须同时跟踪更多的HTML文档

    *  很难打印整张页面

框架结构标签<frameset>

  *  框架结构标签(<frameset>)定义如何将窗口分割为框架

  * 每个 frameset 定义了一系列列;

  * rows/columns规定了每行或每列占据屏幕的面积

编者注:frameset 标签也被某些文章和书籍译为框架集。

框架标签(Frame):

Frame 标签定义了放置在每个框架中的 HTML 文档

在下面的这个例子中,我们设置了一个两列框架集第一列被设置为占据浏览器窗口的
25%第二列被设置为占据浏览器窗口的 75%HTML 文档
“frame_a.htm”
被置于第一个列中,而 HTML 文档 “frame_b.htm”
被置于第二个列中

<frameset cols=”25%,75%” >

<frame src=”frame_a.htm”>

<frame src=”frame_b.htm”>

</frameset>

备注:假如一个框架有可见边框用户可以拖动边框改变它的大小。为了避免这种情况发生,可以
<frame>标签中
加入:noresize=”noresize”

为不支持框架的浏览器加<noframes>标签

重要提示不能<body></body>与<frameset></frameset>标签同时使用,不过,假如你添加含一段文本<noframes>标签,就必须将这段文字嵌套于<body></body>标签内

eg:

<frameset  cols=”25%,75%”>

<frame src=”frame_a.htm”>

<frame src=”frame_b.htm”>

<noframes>

<body>这里浏览器不支持框架</body>

</noframes>

<frameset>

验证

优化网页的一种方法就是浏览器可处理非法的HTML
代码。合法的HTML代码很容易调试,且占内存少,耗费资源少,易于解析和渲染运行起来更快。非法的HTML代码让实现响应式设计变得异常艰难。

当使用模板时,合法的HTML代码显得异常重要,经常会发生模板单独运行良好,当与其他模块集成时就报各种各样的错误,因此一定要保证HTML代码的质量,可采取以下措施:

  • 在工作流中添加验证功能:使用验证插件如HTMLHint或SublineLinter帮助你检测代码错误。
  • 使用HTML5文档类型
  • 确保HTML的层次结构易于维护,要避免元素嵌套处于左开状态。
  • 保证添加各元素的结束标签。
  • 删除不必要的代码 ;没有必要为自关闭的元素添加结束标签;Boolean
    属性不需要赋值,如果存在则为True;

<video src=”foo.webm” autoplay=”” controls=””/>

1
<video src="foo.webm" autoplay="" controls=""/>

内联框架(即内框架)

iframe运用在网页内显示网页

* 添加iframe语法

<iframe src=”URL”></iframe>

URL指向隔离页面的位置

Iframe – 设置高度和宽度heightwidth 属性用于规定
iframe 的高度和宽度

属性值默认单位像素;但也可以用百分比来设定(比如80%)。

eg:

<iframe src=”demo.iframe.htm”  height=”200″  width=”200″>
</iframe>

* Iframe –删除边框

frameborder属性规定是否显示iframe周围的边框,设置属性frame
border数值为0
则可以移除边框

<iframe src=”demo.iframe.htm” 
frameborder=”0″></iframe>

* 使用iframe作为链接的标准

iframe可用作澳门新葡亰平台官网 ,链接的目标(target)

链接的target属性必须引用iframe的name属性

<iframe  src=”iframe.htm”  name=”iframe_a”></iframe>

<p><a  href=”” 
target=”iframe_a”></a></p>

代码格式

格式一致性使得HTML代码易于阅读,理解,优化,调试。

Html背景

* 背景(Backgrounds)

<body>拥有两个配置背景的标签。背景可以是颜色或者图像;

背景颜色(Bgcolor)

背景颜色属性背景设置某种颜色属性值可以是十六进制数RGB
值或颜色名

<body bgcolor=”#000000“></body>

<body bgcolor=”rgb(0,0,0)”></body>

<body bgcolor=”black”></body>

eg:

添加图片为背景:

<body  background=”/i/eg_bg_06.gif”></body>

使用颜色设置背景和文字颜色

<body  bgcolor=”#ffffff”  text=”yellow”></body>

备注:<body>标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的
HTML 标准(HTML4 和 XHTML)中已被废弃。W3C
在他们的推荐标准中已删除这些属性。应该使用层叠样式表CSS)来定义
HTML 元素的布局
和显示属性

背景(Background)

背景属性背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制

<body  background=”clouds.gif”></body>

<body
background=””></body>

URL可以是相对地址,如第一行代码,也可以使用绝对地址,如第二行代码,

提示:如果你打算使用背景图片,你需要紧记一下几点:

* 背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。

* 背景图像是否与页面中的其他图象搭配良好。

* 背景图像是否与页面中的文字颜色搭配良好。

* 图像在页面中平铺后,看上去还可以吗?

* 对文字的注意力被背景图像喧宾夺主了吗?

发表评论

电子邮件地址不会被公开。 必填项已用*标注