你不可不知的HTML优化技巧，还不抓紧时间收藏

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

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

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

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

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

HTML,CSS 和JavaScript三者的关系

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

三条通用设计规则：

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

文档结构方面也可以做优化，如下：

使用HTML5 文档类型，以下是空文件：

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

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

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

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

下面的写法比较好：

index.html:

<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();

验证

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

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

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

代码格式

格式一致性使得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>
 2: <label for="name">Name:</label><input type="text" id="name">
 3: </div>

布局

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

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

CSS

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

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

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

段时间没写文章了，这段时间比较忙，很抱歉。

今天的这个手机登录界面，使用了rem作为单位，自定义了字体，使用了模糊背景，半透明登陆框。效果是小编从网上看到的，就动手实现了下，分享给在座的诸位。小编才疏学浅，如果有什么不对或许要改进的地方，还望各位不吝赐教。

我们先来看下效果图：

一、准备工作：

1、目录简单介绍下

images 放图片
fonts 字体、字体图标
css 样式表文件
base.css 基础样式
login.css login界面样式
image
js javascript文件
flexible.js rem转换px文件
login.js login页面的其他js
login.html 登录页面

2、base.css文件：我们在 base.css 中定义字体、边距、填充等，这里只指出一些关键点，想要源码的话可以关注我们，然后再私信我们，我们会发给您。

① 通过效果图，我们可以看到，placeholder提示文字是白色，所以在这里需要更改下：

input::-webkit-input-placeholder{
	color:#fff;
}

② 定义字体，这里只用了ttf，因为手机下大部分都是webkit内核，webkit内核是支持ttf格式的字体的。

@font-face {
 font-family: 'PingFangSC-Regular';
 src: url('../fonts/PingFangSC-Regular.ttf');
 font-weight: normal;
 font-style: normal;
}

③ 初始化字体大小，字体类型等

body,input{
	font-size: .26rem;
	font-family:'PingFangSC-Regular';
	color:#fff;
}

注：1、其他的边距、浮动、flex等，就不在这里写了，源码里面的base.css文件写的很清楚

2、rem单位，后面会有解释

3、由于有 flexible.js ，这里的html设置的字体大小无需我们设置。

3、flexible.js 文件可以将rem转换成px，自动设置html的字体大小，这样rem的值就会被浏览器根据html的字体大小实时解析成px，以适应不同分辨率的手机。我们需要做两步：

① 在头部引入 flexible.js，让它一上来就执行：

<script type="text/javascript" src="./js/flexible.js"></script>

② 打开 flexible.js，找到最后一行，将两个传参改成设计稿的宽度，我这里设计稿是720，所以，修改如下：

;(function(designWidth, maxWidth) {
	...
})(720, 720);

那么，在量出设计稿的像素值，在css中，除以100，就是rem。

4、新建login.html，放在根目录，在header头部加入下面的代码，让页面宽度等于手机宽度，并且禁止缩放：

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />

5、在login.html的header加入下面的代码，禁止手机将页面中的号码格式化，否则影响美观：

<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

6、引入相关css、js，这里不多说了。

至此，准备工作完成了，下面开始编写页面了。

二、高斯模糊的背景

背景高斯模糊，就不能直接设置到body上，否则body里面的内容都会高斯模糊，所以单独写个section，来设置

<section class="bg"></section>
.bg{
	background:url(../images/bg.jpg) no-repeat center/cover;
	position: fixed;
	z-index: 1;
	top:0;
	left:0;
	right:0;
	bottom:0;
	filter:blur(15px);
}

效果图如下：

出问题了，高斯模糊导致周边变淡，玩过PS的都知道这个问题。我们只需要将背景容器放大点，超出body就行了，所以，修改后的css如下：

.bg{
	background:url(../images/bg.jpg) no-repeat center/cover;
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	filter:blur(15px);
	transform:scale(1.1);
}

效果图如下：

注：因为背景定位了，所以里面的内容都要定位并且z-index都要比它高。

三、整体居中

页面的内容上下居中，无论什么分辨率，内容始终在中间：

1、给body挂上 flex flex-middle，这个是在base里面定义好的flex样式

<body class="flex flex-middle">

2、既然要垂直居中，body的高度肯定要100%，html也要设置，否则，body的100%没作用：

body,html{
	height: 100%;
}
.wrap{
	padding:0 .85rem;
	position: relative;
	z-index: 2;
}

3、这个wrap就是居中容器，所有的内容都放里面：

<section class="wrap"></section>

三、头部header

header比较简单，要注意“Welcome”，有阴影，这里不能用盒子阴影box-shadow，而是用文字阴影text-shadow，它比box-shadow少个参数，即扩展。根据UI，测量的尺寸都除以100就是rem的值，如130px，这里就写1.3rem就可以了

.header h1{
	font-weight: normal;
	font-size: 1rem;
	text-shadow: 0 0 4px rgba(0,0,0,.5);
	text-align: center;
}
.header p{
	font-size: .22rem;
	text-align: center;
	line-height: 1.8
}
<header class="header">
 <h1>Welcome</h1>
 <p>
 Lorem ipsum sit amet,consectetur adipiscing dlit. Donec auctor neque sed pretium luctus.
 </p>
</header>

效果如下

四、主体部分

这个主要是头像、输入框和提交按钮，都比较简单，就不多说了。边框小编设置的粗细是0.5px，这里并不代表边框粗细就是0.5px。因为现在手机大部分都是视网膜屏，物理分辨率都是逻辑分辨率的2倍多，这里设置的0.5px是逻辑分辨率，转换成物理像素大概就是1px。

.avatar{
	width: 1.5rem;
	height: 1.5rem;
	display: block;
	margin: auto;
	border-radius: 999px;
	border:.5px solid #fff;
	box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
}
.row *{
	height:.85rem;
	line-height: .85rem;
	width: 100%;
	text-align: center;
	border-radius: 999px;
	box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
}
.row .ipt{
	background: transparent;
	border:.5px solid #fff;
}
.row .submit{
	background:linear-gradient(to bottom,#25af61,#149c4f);
	border:0 none;
	display: block;
	border:.5px solid #33c773;
}
<section class="main mt110">
 <img class="avatar" src="./images/avatar.jpg">
 <section class="row mt25">
 <input type="text" class="ipt" placeholder="User Name">
 </section>
 <section class="row mt25">
 <input type="password" class="ipt" placeholder="Password">
 </section>
 <section class="row mt25">
 <a href="javascript：;" class="submit">Login</a>
 </section>
</section>

六、版权

这个没什么好说的，居中，定位在底部

.copy{
	position: absolute;
	bottom: .2rem;
	left: 0;
	right: 0;
	z-index: 2;
	font-size: .23rem;
}
<footer class="copy tc mt40">
 © 2019 IT学堂
</footer>

最终效果如下

想要源码的话可以关注我们，然后再私信我们，我们会发给您。关注IT学堂，有更多干货哦！

HTML文本格式化通常使用一系列特定的标签来改变文本的外观或结构。这些标签可以控制文本的字体、大小、颜色、对齐方式等，也可以用来标记文本的逻辑结构（如段落、标题、列表等）。除了这些基本的格式化标签，HTML还支持通过CSS（级联样式表）来更精细和灵活地控制文本的格式和样式。

参考文档：https://www.cjavapy.com/article/3306/

1、标题

HTML中，文本格式化和结构化主要通过一系列标签来完成，其中标题（Headings）标签是最常用于定义文本格式的元素之一。HTML提供了六级标题标签，从 <h1> 到 <h6>，<h1> 表示最高级别的标题，而 <h6> 表示最低级别的标题。这些标题标签不仅帮助改善网页的结构和可读性，还对搜索引擎优化（SEO）至关重要，因为搜索引擎使用这些标签来识别网页上的不同部分和内容的层次结构。每个级别的标题都有默认的样式，通常是不同的大小和加粗，以显示它们的层次结构

<h1>这是一个 H1 标题</h1>
<h2>这是一个 H2 标题</h2>
<h3>这是一个 H3 标题</h3>
<h4>这是一个 H4 标题</h4>
<h5>这是一个 H5 标题</h5>
<h6>这是一个 H6 标题</h6>

2、段落与换行

HTML中，文本格式化通常涉及使用特定的标签来控制文本的显示方式。段落和换行是两个基本但非常重要的文本格式化概念。用<p>创建段落，<br>插入换行。

1）段落 (<p> 标签)

<p> 标签自带上下边距，用以区分不同的段落。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

2）换行 (<br> 标签)

<br> 标签只是简单地添加一个换行点，不添加任何额外的空间或边距，并且通常用于诗歌或地址等需要精确控制换行位置的文本。

这是文本行的开始。<br>这是新的一行，但在同一个段落内。

3、强调文本

使用<em>和<strong>强调文本。HTML中，强调文本通常使用 <em> 和 <strong> 标签来实现。这两个标签既有语义意义，也影响文本的表现形式。

<em> 标签用于表示强调文本，通常表现为斜体，用以表示文本的轻度强调。

<strong> 标签用于表示更强烈的强调，通常表现为加粗，表示文本的高度强调。

<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>

4、列表

HTML 提供了两种主要的列表类型：有序列表（<ol>）和无序列表（<ul>）。两种类型都使用列表项（<li>）来定义列表中的实际项。

1）有序列表

有序列表以 <ol> 标签开始。每个列表项都放在 <li> 标签内。列表是有序的，也就是每个项目都是编号的。这适用于项目顺序很重要的列表，如食谱或待办事项列表。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

2）无序列表

无序列表以 <ul> 标签开始。像有序列表一样，每个项都放在 <li> 标签内。然而，无序列表中的项目不是编号的。使用圆点符号进行表示。这适用于项目顺序不重要的列表，如购物清单。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

5、使用示例

<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>

<h1>HTML 文本格式化</h1>
<p>这是一个<em>斜体</em>和<strong>加粗</strong>的示例。</p>
<p><u>这段文本下划线</u>和<s>这段文本是删除线</s>。</p>
<p>化学水分子公式为H<sub>2</sub>O，E=mc<sup>2</sup>。</p>

<pre>
这是预格式化文本，
保留了空格和
换行符。
</pre>

<blockquote>这是一个长引用的示例，可能包含多个段落。</blockquote>
<p>这是一个<q>短引用</q>的示例。</p>

<p>使用<code>HTML</code>和<code>CSS</code>进行网页设计。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>复制文本。</p>
<p><samp>这是计算机程序的输出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作为变量。</p>

</body>
</html>