整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁的標記語言。它由一系列的標簽組成，這些標簽用于描述網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。HTML標簽通常由尖括號包圍，例如<tag>。
HTML標簽可以分為兩類：塊級元素和內(nèi)聯(lián)元素。塊級元素用于組織網(wǎng)頁的結(jié)構(gòu)，例如段落、標題、列表等。內(nèi)聯(lián)元素用于標記文本中的特定部分，例如鏈接、強調(diào)文本等。
HTML標簽可以包含屬性，屬性提供了有關(guān)標簽的額外信息。例如，<a>標簽用于創(chuàng)建鏈接，可以使用href屬性指定鏈接的目標URL。
除了標簽和屬性，HTML還支持一些特殊字符實體，用于表示特殊字符，例如小于號（<）、大于號（>）等。
HTML可以與CSS（層疊樣式表）和JavaScript一起使用，以增強網(wǎng)頁的外觀和功能。CSS用于控制網(wǎng)頁的樣式，例如顏色、字體、布局等。JavaScript用于實現(xiàn)交互性和動態(tài)效果，例如表單驗證、動畫等。
通過使用HTML，開發(fā)人員可以創(chuàng)建具有結(jié)構(gòu)良好、易于理解和導航的網(wǎng)頁。它是構(gòu)建互聯(lián)網(wǎng)的基礎(chǔ)之一，被廣泛應用于網(wǎng)站開發(fā)和內(nèi)容管理系統(tǒng)。
HTML的語法由標簽、屬性和內(nèi)容組成。下面是HTML的基本語法規(guī)則：
下面是一個簡單的HTML示例：
<!DOCTYPE html>
<html>
<head>
<title>我的網(wǎng)頁</title>
</head>
<body>
<h1>歡迎來到我的網(wǎng)頁</h1>
<p>這是一個段落。</p>
<a href="https://www.example.com">點擊這里</a>訪問示例網(wǎng)站。
</body>
</html>
在這個示例中，<!DOCTYPE html>聲明了文檔類型為HTML5。<html>標簽是HTML文檔的根元素。<head>標簽用于定義文檔的頭部信息，例如標題和樣式表。<title>標簽定義了網(wǎng)頁的標題，將顯示在瀏覽器的標題欄中。<body>標簽用于定義文檔的主體內(nèi)容。<h1>標簽定義了一個一級標題，<p>標簽定義了一個段落，<a>標簽定義了一個鏈接。
源：設計達人（shejidaren888）
最近在更新設計導航 HTML 代碼時，發(fā)現(xiàn)有個樣式總是加載不出來，經(jīng)過細看發(fā)現(xiàn)竟然是因為用了中文的雙引號導致，但因為網(wǎng)頁代碼編輯器西文和中文的雙引號太相似所以忽略查找這個問題，如此初級的問題卻浪費了不少時間……
所以最終解決方案就是為網(wǎng)頁代碼編輯器使用代碼專用字體：FiraCode + 中文字體組合（也適用于網(wǎng)頁端），使用此方法，可以美化代碼效果，減少因字符視覺差造成的小問題，對眼睛疲勞也有一定緩解作用哦。
一、FiraCode字體
FiraCode估計很多資深編碼人員都了解過，在 Github 已經(jīng)有30000 的 Star，它主要有2個特色：
1、字符等寬
每個字符寬度占用距離是一樣的，所以無論大小寫，你都能看到它是對齊的，但是若遇到有中文字體，這就不太好使了。
2、連字符號設計
當用戶如輸入 這兩個符號，就會自動連在一起。如下圖：
二、中文字體選擇
為了解決引號的視覺問題，我們還必須選擇中文字體，經(jīng)小編測試一翻后，最后使用了思源黑體，這樣引號就比較好分別了。WIN 系統(tǒng)下顯示可能會更加明顯。當然最后還是個人喜好設置中文字體啦。
mac 系統(tǒng) Atom 編輯器截圖
三、Atom 編輯器修改字體方法
小編使用的免費的 Atom 網(wǎng)頁代碼編輯器，所以只能用它來舉例，其它編輯器修改方法也大同小異，可自行百度哦。
1、選擇菜單 Atom ，然后在下拉菜單中選擇用戶樣式設置
2、在「atom-text-editor」加入 font-family 和 font-size 的 CSS 屬性：
font-family: "firacode-retina","Source Han Sans CN"; font-size:16px;
需要注意的是，小編使用了 Retina 屏的電腦，所以字體名稱就用「firacode-retina」，在非高清屏的下直接使用「firacode」就行，具體大家可以自己試試，區(qū)別不是很大。
具體如下圖：
四、下載地址
下載的字體非常全面，包含 ttf 及網(wǎng)頁端的eot, woff 等字體格式，無需轉(zhuǎn)換就能直接使用。
Firacode 官方下載地址：
https://github.com/tonsky/FiraCode
思源黑體下載地址：
http://www.shejidaren.com/app-she-ji-bi-bei-zi-ti.html
總結(jié)
使用FiraCode 中文的字體組合，不僅能讓一串串代碼變得工整美觀，還能減少因字符顯示引起的出錯率，推薦大家收藏使用。
設計前端頁面是，我們有一個原則:效果能用css實現(xiàn)的，絕對不用js來實現(xiàn)，因為這樣可以加快頁面渲染速度，js的解析速度要慢于css的解析速度!
css簡單二級導航
小提示:完整源碼和注釋在最下方
使用純css來實現(xiàn)二級導航的大致思路是:
使用最簡單的元素<div id=”navBar”>,ul li a來實現(xiàn)，
規(guī)劃二級導航，直接在一級導航的Li元素中使用ul li a
一級導航設計第一個要點：
li要設置為float:left，因為li元素默認的display屬性是list-item，這個屬性有點類似于block，默認是換行的，所以我們要指定float:left,讓li元素水平順序排列
#navBar ul li{
float: left;/**浮動向左就會自動排列**/
background-color: #ddd3d3;
position: relative;/**用作2級導航的定位元素**/
}
一級導航的第二個要點：
a屬性的display屬性要設置為block,因為A元素的默認屬性是inline，inline不會填充整個寬度，display:block可以做到
#navBar ul li a{
display: block;
margin: 0 10px;
line-height: 50px;/**文字水平居中**/
}
一級導航的第三個要點：
a元素的line-height要和導航條的高度一致，這樣可以做到文字垂直居中，同樣，我們在加上text-algin:center屬性，文字就變得水平居中了
一級導航的第四個要點：
一級導航的Li元素postion屬性我們設置為relative，一會我們要用到
二級導航要點：
把li繼承一級導航中的float:left屬性去掉
#navBar ul li ul li{
float: none;
border-bottom: 1px solid #000;
}
因為二級導航列表項我們要的排列效果是垂直排列
設置二級導航ul display:none;先把二級導航隱藏
#navBar ul li ul{
display: none; /**沒有發(fā)生hover事件的時候，先隱藏二級導航**/
}
設置二級導航postion屬性為Postion:absolute,top:一級導航條的高度,left:0;
position: absolute;/**位置是絕對定位，定位的父元素是一級導航的li**/ top:50px;/**一級導航條的高度，不設定會覆蓋1級導航**/ left: 0;
我們使用li的偽類來實現(xiàn)二級導航菜單的顯示
#navBar ul li:hover ul{
Display:block;
}
對，css的弱項在哪里？就是沒有驅(qū)動事件，偽類有時候可以實現(xiàn)事件驅(qū)動效果
最后，為了二級導航的列表清晰一些，我們在二級導航中l(wèi)i元素添加一個1像素的黑色實體下邊框
二級導航的代碼要放在一級導航ul li的后面，具體就是:
<li> <!--二級導航--> <ul > <li><a>導航11</a></li> <li><a>導航12</a></li> </ul> <a>導航1</a> </li>
為什么不把二級導航放在一級導航Li的下方？這樣代碼結(jié)構(gòu)不是更加清晰明了嗎
因為position:absolute要尋找一個postion:relative的父元素，如果找不到最近的relative父元素，那么就以body為父元素定位，如果二級導航代碼在一級導航的li下方，那么一級導航li和二級導航這時間屬于同級元素，不是父子關(guān)系，所有二級導航的絕對定位會定位到body
總結(jié)：我們使用了:hover偽類實現(xiàn)了css代替js事件，觸發(fā)并實現(xiàn)了二級導航的樣式改變，使用了相對定位和絕對定位來顯現(xiàn)了二級導航正確顯示在一級導航列表項的下方，能用css實現(xiàn)的事情，就不要使用js來做！
完整代碼帶注釋:
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
