整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
何提升Web頁面的性能，很多開發人員從多個方面來下手如JavaScript、圖像優化、服務器配置，文件壓縮或是調整CSS。
很顯然HTML 已經達到了一個瓶頸，盡管它是開發Web 界面必備的核心語言。HTML頁面的負載也是越來越重。大多數頁面平均需要40K的空間,像一些大型網站會包含數以千計的HTML 元素，頁面Size會更大。
如何有效的降低HTML 代碼的復雜度和頁面元素的數量，本文主要解決了這個問題，從多個方面介紹了如何編寫簡練，清晰的HTML 代碼，能夠使得頁面加載更為迅速，且能在多種設備中運行良好。
在設計和開發過程中需要遵循以下原則：
HTML,CSS 和JavaScript三者的關系
HTML 是用于調整頁面結構和內容的標記語言。HTML 不能用于修飾樣式內容，也不能在頭標簽中輸入文本內容，使代碼變得冗長和復雜，相反使用CSS 來修飾布局元素和外觀比較合適。HTML元素默認的外觀是由瀏覽器默認的樣式表定義的，如在Chrome中h1標簽元素會渲染成32px的Times 粗體。
三條通用設計規則：
文檔結構方面也可以做優化，如下：
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
<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代碼的質量，可采取以下措施：
代碼格式
格式一致性使得HTML代碼易于閱讀，理解，優化，調試。
語義標記
語義指意義相關的事物，HTML 可從頁面內容中看出語義：元素和屬性的命名一定程度上表達了內容的角色和功能。HTML5 引入了新的語義元素，如<header>，<footer>及<nav>。
選擇合適的元素來編寫代碼可保證代碼的易讀性：
例如：
<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 代碼以實現功能和為目標，而不是樣式。
CSS
雖然本文講解的是如何優化HTML，下面介紹了一些使用css的基本技能：
以上就是本文介紹的優化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比較簡單，要注意“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/
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>HTML中，文本格式化通常涉及使用特定的標簽來控制文本的顯示方式。段落和換行是兩個基本但非常重要的文本格式化概念。用<p>創建段落，<br>插入換行。
1）段落 (<p> 標簽)
<p> 標簽自帶上下邊距，用以區分不同的段落。
<p>這是一個段落。</p>
<p>這是另一個段落。</p>2）換行 (<br> 標簽)
<br> 標簽只是簡單地添加一個換行點，不添加任何額外的空間或邊距，并且通常用于詩歌或地址等需要精確控制換行位置的文本。
這是文本行的開始。<br>這是新的一行，但在同一個段落內。使用<em>和<strong>強調文本。HTML中，強調文本通常使用 <em> 和 <strong> 標簽來實現。這兩個標簽既有語義意義，也影響文本的表現形式。
<em> 標簽用于表示強調文本，通常表現為斜體，用以表示文本的輕度強調。
<strong> 標簽用于表示更強烈的強調，通常表現為加粗，表示文本的高度強調。
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>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><!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>參考文檔：https://www.cjavapy.com/article/3306/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
