避免使用 XHTML,复制代码 代码如下

作者: 前端  发布:2019-10-06

你不可不知的 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和性能工具。

9159.com 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 文档类型,以下是空文件:

<!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>

省略可选标签

HTML5 规范中规定了 HTML 标签是可以省略的。但从可读性来说,在开发的源文件中最好不要这样做,因为省略标签可能会导致一些问题。

省略一些可选的标签确实使得页面大小减少,这很有用,尤其是对于一些大型网站来说。为了达到这一目的,我们可以在开发后期对页面进行压缩处理,在这个环节中这些可选的标签完全就可以省略掉了。


按照惯例,所有的<script>元素都应该放在页面的<head>元素中。请注意:无论引用几个外部js文件,浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析 。换句话说,在第一个<script>元素包含的代码解析完成后,第二个<script>包含的代码才会被解析,然后才是第三个、第四个...
这种做法的目的就是把所有外部文件(包括CSS文件和JavaScript文件)的引用都放在相同的地方。可是,在文档的<head>元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口将是一片空白。为了避免这个问题,现代Web应用程序一般都会把全部JavaScript引用放在<body>元素中,放在页面的内容后面,如下所示:
[html]

验证

优化网页的一种方法就是浏览器可处理非法的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>

脚本加载

出于性能考虑,脚本异步加载很关键。一段脚本放置在 <head> 内,比如 <script src="main.js"></script>,其加载会一直阻塞 DOM 解析,直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本,对用户体验来说那真是一个巨大的影响。

异步加载脚本可缓解这种性能影响。如果只需兼容 IE10+,可将 HTML5 的 async 属性加至脚本中,它可防止阻塞 DOM 的解析,甚至你可以将脚本引用写在 <head> 里也没有影响。

如需兼容老旧的浏览器,实践表明可使用用来动态注入脚本的脚本加载器。你可以考虑 yepnope 或 labjs。注入脚本的一个问题是:一直要等到 CSS 对象文档已就绪,它们才开始加载(短暂地在 CSS 加载完毕之后),这就对需要及时触发的 JS 造成了一定的延迟,这多多少少也影响了用户体验吧。

终上所述,兼容老旧浏览器(IE9-)时,应该遵循以下最佳实践。

脚本引用写在 body 结束标签之前,并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本,但它只阻塞了 body 结束标签之前的 DOM 解析,这就大大降低了其阻塞影响。而在现代浏览器中,脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载,此时加载属于异步加载,不会阻塞 CSSOM(但其执行仍发生在 CSSOM 之后)。

所有浏览器中,推荐

 

  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="main.css">
  4.   </head>
  5.   <body>
  6.     <!-- body goes here -->
    1.     <script src="main.js" async></script>
  7.   </body>
  8. </html>

只在现代浏览器中,推荐

 

  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="main.css">
  4.     <script src="main.js" async></script>
  5.   </head>
  6.   <body>
  7.     <!-- body goes here -->
  8.   </body>
  9. </html>

复制代码 代码如下:

代码格式

格式一致性使得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。

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

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

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

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

语义化

根据元素(有时被错误地称作“标签”)其被创造出来时的初始意义来使用它。打个比方,用 heading 元素来定义头部标题,p 元素来定义文字段落,用 a 元素来定义链接锚点,等等。

有根据有目的地使用 HTML 元素,对于可访问性、代码重用、代码效率来说意义重大。


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

语义标记

语义指意义相关的事物,HTML 可从页面内容中看出语义:元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素,如<header>,<footer>及<nav>。

选择合适的元素来编写代码可保证代码的易读性:

  • 使用<h1>(<h2>,<h3>…)表示标题,<ul>或<ol>实现列表
  • 注意使用<article> 标签之前应添加<h1>标签;
  • 选择合适的HTML5语义元素如<header>,<footer>,<nav>,<aside>;
  • 使用<p>描述Body 文本,HTML5 语义元素可以形成内容,反之不成立。
  • 使用<em>和<strong>标签替代<i>和<b>标签。
  • 使用<label>元素,输入类型,占位符及其他属性来强制验证。
  • 将文本和元素混合,并作为另一元素的子元素,会导致布局错误,

例如:

<div>Name: <input type="text" id="name"></div>

1
<div>Name: <input type="text" id="name"></div>

Html脚本(即javascript)

JavaScript 使 HTML 页面具有更强的动态交互性

插入一段脚本

<body>

<script  type="text/javascript">

document.write(" <h1> Hello world!</h1>")

</script>

</body>

如何应用不支持脚本禁用脚本浏览器

<body>

<script>

document.write("hello world")

</script>

<noscript> Sorry, your browser does not support JavaScript! </noscript>      //在浏览器不支持客户端脚本时候显示此段文字

</body>

* HTML script 元素

<script>标签用于定义客户端脚本,比如javascript

script元素既可以包含脚本语句,也可通过src属性指向外部脚本文件

必需的 type 属性规定脚本的 MIME 类型JavaScript 最常用于图片操作、表单验证以及内容动态更新

下面的脚本会向浏览器输出“Hello World!”:

<script>

document.write(" hello world!")

</script>

 *<noscript>标签

<noscript>标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时.

* noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

* 只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容

多媒体回溯

对页面上的媒体而言,像图片、视频、canvas 动画等,要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本(alt),视频和音频文件我们可以为其加上说明文字或字幕。

提供可替代内容对可用性来说十分重要。试想,一位盲人用户如何能知晓一张图片是什么,要是没有 @alt 的话。

(图片的 alt 属性是可不填写内容的,纯装饰性的图片就可用这么做:alt="9159.com 2")。

 

  1. <img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">

这样,在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

换种写法会更好

<div> <label for="name">Name:</label><input type="text" id="name"> </div>

1
2
3
<div>
   <label for="name">Name:</label><input type="text" id="name">
</div>

如何应付老式的浏览器

注意:如果浏览器压根没法识别<script>标签,那么<script>标签所包含的内容将以文本方式显示在页面上避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器无法识别<script>标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器读懂这些脚本并执行它们,即使代码被嵌套在注释标签内

javascript:

<script type="text/javascript">

<!--

document.write("Hello World!")

//-->

</script>

关注点分离

理解 web 中如何和为何区分不同的关注点,这很重要。这里的关注点主要指的是:信息(HTML 结构)、外观(CSS)和行为(JavaScript)。为了使它们成为可维护的干净整洁的代码,我们要尽可能的将它们分离开来。

严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。

就是说,尽量在文档和模板中只包含结构性的 HTML;而将所有表现代码,移入样式表中;将所有动作行为,移入脚本之中。

在此之外,为使得它们之间的联系尽可能的小,在文档和模板中也尽量少地引入样式和脚本文件。

清晰的分层意味着:

  • 不使用超过一到两张样式表(i.e. main.css, vendor.css)
  • 不使用超过一到两个脚本(学会用合并脚本)
  • 不使用行内样式(<style>.no-good {}</style>
  • 不在元素上使用 style 属性(<hr>
  • <link rel="stylesheet" href="main.css" type="text/css">
  • <script src="main.js" type="text/javascript"></script>
  • 推荐

     

    1. <link rel="stylesheet" href="main.css">
    2. <script src="main.js"></script>

    可用性

    如果 HTML5 语义化标签使用得当,许多可用性问题已经引刃而解。ARIA 规则在一些语义化的元素上可为其添上默认的可用性角色属性,使用得当的话已使网站的可用性大部分成立。假如你使用 navasidemainfooter 等元素,ARIA 规则会在其上应用一些关联的默认值。
    更多细节可参考 ARIA specification

    另外一些角色属性则能够用来呈现更多可用性情景(i.e. role="tab")。


    Tab Index 在可用性上的运用

    检查文档中的 tab 切换顺序并传值给元素上的 tabindex,这可以依据元素的重要性来重新排列其 tab 切换顺序。你可以设置 tabindex="-1" 在任何元素上来禁用其 tab 切换。

    当你在一个默认不可聚焦的元素上增加了功能,你应该总是为其加上 tabindex 属性使其变为可聚焦状态,而且这也会激活其 CSS 的伪类 :focus。选择合适的 tabindex 值,或是直接使用 tabindex="0" 将元素们组织成同一 tab 顺序水平,并强制干预其自然阅读顺序。


    ID 和锚点

    通常一个比较好的做法是将页面内所有的头部标题元素都加上 ID. 这样做,页面 URL 的 hash 中带上对应的 ID 名称,即形成描点,方便跳转至对应元素所处位置。

    打个比方,当你在浏览器中输入 URL http://your-site.com/about#best-practices,浏览器将定位至以下 H3 上。

     

    1. <h3 id="best-practices">Best practices</h3>

    格式化规则

    在每一个块状元素,列表元素和表格元素后,加上一新空白行,并对其子孙元素进行缩进。内联元素写在一行内,块状元素还有列表和表格要另起一行。

    (如果由于换行的空格引发了不可预计的问题,那将所有元素并入一行也是可以接受的,格式警告总好过错误警告)。

     

    1. <blockquote>
    2.   <p><em>Space</em>, the final frontier.</p>
    3. </blockquote>
      1. <ul>
    4.   <li>Moe</li>
    5.   <li>Larry</li>
    6.   <li>Curly</li>
    7. </ul>
      1. <table>
    8.   <thead>
    9.     <tr>
    10.       <th scope="col">Income</th>
    11.       <th scope="col">Taxes</th>
    12.     </tr>
    13.   </thead>
    14.   <tbody>
    15.     <tr>
    16.       <td>$ 5.00</td>
    17.       <td>$ 4.50</td>
    18.     </tr>
    19.   </tbody>
    20. </table>

    HTML 引号

    使用双引号(“”) 而不是单引号(”) 。

    不推荐

     

    1. <div class='news-article'></div>

    推荐

     

    1. <div class="news-article"></div>

    [1]: 此处的空白元素指的是以下元素:areabasebrcolcommandembedhrimginputkeygenlinkmetaparamsourcetrackwbr

    规范,前端编码 文档类型 推荐使用 HTML5 的文档类型申明: !DOCTYPE html (建议使用 text/html 格式的 HTML。避免使用 X...

或者也可以使用<script>标签的defer属性表明脚本在执行时不会影响页面的构造,即脚本会被延迟到整个页面都解析完毕后再运行,代码如下:
[html]

布局

要提高HTML代码的性能,要遵循HTML 代码以实现功能和为目标,而不是样式。

  • 使用<p>元素修饰文本,而不是布局;默认<p>是自动提供边缘,而且其他样式也是浏览器默认提供的。
  • 避免使用<br>分行,可以使用block元素或CSS显示属性来代替。
  • 避免使用<hr>来添加水平线,可使用CSS的border-bottom 来代替。
  • 不到关键时刻不要使用div标签。
  • 尽量少用Tables来布局。
  • 可以多使用Flex Box
  • 使用CSS 来调整边距等。

Html头部

文档的标题

* <title>标题定义文档的标题

eg: 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<meta http-equiv="Content-Language" content="zh-cn"/>

<title>标题不会显示在文档区</title>

</head>

* 如何使用 base 标签使页面中的所有标签新窗口中打开

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<mata http-equiv="Content-Language" content="zh-cn">

<base target="_blank"></head>

<body >

<p>

<a href="" target="_blank">这个连接</a>将在新窗口中加载,因为 target 属性被设置为 "_blank"</a>

</p>

<p>

<a href="; 这个链接将在新窗口中加载,及时没有target属性</a></p>

</body>

* 使用<meta>元素来描述文档

*使用<meta>元素来定义文档的关键词

* 如何把用户重订新的网址

HTML<Head>元素

<head> 元素是所有头部元素的容器,<head>内元素包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。以下标签都可以添加到 head 部分,<title>,<link>,<base>,<meta>,<script>,<style>

Html <title>元素

<title>标签定义文档的标题,title 元素在所有 HTML/XHTML 文档中都是必需的,

title 元素能够:

 *  定义浏览器工具栏中标题

 *  提供页面被添加到收藏夹时显示的标题

 *  显示在搜索引擎结果中的页面标题

一个简化的 HTML 文档

<!DOCTYPE html>

<html>

<head>

<title> 这是文章的标题 </title>

</head>

<body>

The content of document ......

</body>

</html>

Html <base>元素

<base>元素页面上所有的链接规定默认地址或者是默认目标

<head>

<base target="_blank" />

<base href=""/>

</head >

Html<link>元素

<link>标签定义文档与外部资源之间的关系

<link>标签最常用作样式表

eg:<head>

< link rel="stylesheet" type="text/css" href="mystyle.css"/>

</head>

Html<style>元素

<style>标签用于为 HTML 文档定义样式信息。

您可以在 style 元素内***规定* HTML 元素在*浏览器中呈现的样式*:
**

<head>

<style>

body {

background-color:yellow

}

p {

color:blue

}

</style>

</head>

Html<meta>元素

元数据(metadata)是关于数据的信息

<meta>标签提供关于 HTML 文档的元数据,元数据不会显示在页面上,但是对于机器是可读的,典型的情况是,meta 元素被用于规定页面的描述关键词文档的作者、最后修改时间以及其他元数据。

<meta>标签始终位于 head 元素中。

元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

针对搜索引擎的关键词

一些搜索引擎利用meta元素的namecontent属性索引你的页面;

meta元素定义页面的描述

<meta  name="description  content=" Free Web tutorials on HTML, CSS, XML"/>

meta元素定义页面的关键词

<meta name="keywords"  content="HTML CSS  XML">

备注:namecontent的属性的作用来描述页面的内容

Html<script>元素

<script>标签

复制代码 代码如下:

CSS

虽然本文讲解的是如何优化HTML,下面介绍了一些使用css的基本技能:

  • 避免内联css
  • 最多使用ID类 一次
  • 当涉及多个元素时,可使用Class来实现。

以上就是本文介绍的优化HTML代码的技巧,一个高质量高性能的网站,往往取决于对细节的处理,因此我们在日常开发中,能够考虑到用户体验,后期维护等方面,则会产生更高效的开发。

2 赞 8 收藏 2 评论

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

关于作者:葡萄城控件

9159.com 3

葡萄城成立于1980年,是全球最大的控件提供商、微软公司认证的金牌合作伙伴。 个人主页 · 我的文章 · 2 ·    

9159.com 4

上述两种写法的实际效果是一样的。但是,并非所有的浏览器都支持defer属性,有些浏览器会忽略这个属性,不延迟脚本的执行。

您可能感兴趣的文章:

  • JavaScript动态添加css样式和script标签
  • IE8中动态创建script标签onload无效的解决方法
  • 动态创建script标签实现跨域资源访问的方法介绍
  • Script标签与访问HTML页面详解
  • script标签属性type与language使用选择
  • script标签的 charset 属性使用说明
  • javascript 获取url参数和script标签中获取url参数函数代码
  • asp.net(C#) 动态添加非ASP的标准html控件(如添加Script标签)
  • 有趣的script标签用getAttribute方法来自脚本吧
  • 浅谈js script标签中的预解析

本文由9159.com发布于前端,转载请注明出处:避免使用 XHTML,复制代码 代码如下

关键词:

上一篇:没有了
下一篇:没有了