108-html入門
阿新 • • 發佈：2018-12-06
html hypertext mark-up language 超文字標記語言 <!DOCTYPE html> 這是一個宣告 doc 檔案 type 型別 檔案型別--html <html lang="zh-CN> </html> 成對出現 語言-中文zh-CN <meta charset="utf-8"/> 這種是單行的標籤 直接是< /> 巢狀關係 <ul> <li> <a /> </li> <li> <a /> </li> </ul> 這裡就是一種ul巢狀li,裡面再巢狀a標籤的巢狀關係 開始開始開始 <!DOCTYPE html> <html> <head> </head> <body> </body> </html> 解釋一下 head是用來設定html文件的相關屬性 還有相關檔案的匯入 這些都放在head裡面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> </body> </html> 這裡的meta標籤是用來設定文件屬性的 charset是設定編碼格式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我是Alice</title> </head> <body> </body> </html> 這裡的title是用來設定頁面的標題的 還有body標籤就是來放置頁面的顯示內容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我是Alice</title> </head> <body> <p>My name is Alice</p> </body> </html> p標籤就是文字 這樣就是一個基本的html文件了 其實我們可以快速建立基本程式碼 比如在WebStorm中 歎號!然後加tab鍵 就可以生成基本程式碼 !+tab <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> 我們看一下 <meta name="viewport" //視窗的意思 content=" //內容 width=device-width, //寬度為裝置螢幕寬度 user-scalable=no, //允許使用者縮放=NO initial-scale=1.0, //初始縮放值=1 maximum-scale=1.0, //最多縮放值=1 minimum-scale=1.0 //最小縮放值=1 "> <meta http-equiv="X-UA-Compatible" content="ie=edge"> 這條主要是針對IE瀏覽器的 因為ie瀏覽器bug很多 就有了這條設定 然後所有瀏覽器訪問我們這個html頁面的時候 都以最新版ie的效果來渲染