推荐使用 HTML5 的文档类型申明,使我们能够

你不可不知的 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>

前端编码规范(2)HTML 规范,前端编码

在制作网页的过程中,我们经常写类似下面的代码:
[html]

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

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

图片 1

布局

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

* 使用 HTML5 的网站布局

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

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

    section: 定义文档中的节;

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

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

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

    details: 定义额外的细节;

    summery: 定义 details 元素的标题;

* 使用表格的Html布局

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

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

文档类型

推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>

(建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限)。

HTML 中最好不要将无内容元素 [1]的标签闭合,例如:使用 <br> 而非 <br />.


复制代码 代码如下:

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>

HTML 验证

一般情况下,建议使用能通过标准规范验证的 HTML 代码,除非在性能优化和控制文件大小上不得不做出让步。

使用诸如 W3C HTML validator 这样的工具来进行检测。

规范化的 HTML 是显现技术要求与局限的显著质量基线,它促进了 HTML 被更好地运用。

不推荐

 

  1. <title>Test</title>
  2. <article>This is only a test.

推荐

 

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>Test</title>
  4. <article>This is only a test.</article>

<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

本文由必威发布于必威-前端,转载请注明出处:推荐使用 HTML5 的文档类型申明,使我们能够

相关阅读