HTML5页面的基本框架结构
生成頁面的基本框架主要還是在head標簽中增加一些基本的標簽
1.<title></title>標簽
<title>標簽顧名思義，為標題，名字的意思，也就是設置網頁在顯示欄顯示的標題。
2.<meta charset="UTF-8">
在<meta>里charset="UTF-8"表示該網頁的國際編碼，也是使網頁用瀏覽器打開時顯示的是中文的信息，不是亂碼。
3.<meta name="keywords" content="關鍵詞，關鍵字">
name="keywords",表示關鍵詞，關鍵字的意思，在content里輸入的也是關鍵詞，關鍵字。用于網頁的信息在搜索引擎中顯示，更容易找到你的網頁。
比如說：當你在百度搜索框里輸入一些像“美女”之類的信息時，下拉框下面就會自動跳出“美女圖片、美女視頻、美女熱舞”之類的信息。這些就是關鍵詞，關鍵字。
4.<meta name="description" content="描述網頁的信息">
name="description",表示描述，描寫，在content里輸入描述網頁信息這些內容。
比如說：你在百度搜索框里輸入“北京大學”然后點擊搜索，在顯示出來的所有信息中，有標題“北京大學_百度百科”下面校標旁邊的信息就是網頁的描述信息了。
5.<meta name="viewport" content="width=device-width,initial=1.0,user-scalable=0">
name="viewport",viewport在網頁移動端中不可缺少，關于viewport和其中的一些參數具體介紹下：
viewport介紹：
? ? ?1）一個百分百的頁面在移動設備瀏覽的時候 網頁的寬度沒有和設備的寬度一致
? ? ?2）因為在移動設備中 瀏覽器和網頁之間還有一層虛擬的容器叫viewport
? ? ?3）原來承載網頁的，而且主流的設備當中的viewport寬度默認是980px，
? ? ? ? ? 可以縮放，可以設置尺寸，只在移動設備中才有。
? ? ?所以使用viewport和流式布局達到移動端的適配:
?
| 1.設置viewport | |
| ? | <meta name="viewport" />//聲明一個視口(瀏覽器默認自帶) |
| 2.具體功能設置(常用參數設置) | |
| ? | width:設置視口的寬度 |
| ? | 特殊的值為device-width,代表當前設備的寬度,允許網頁隨設備寬度的變化而變化,單位為px |
| ? | <meta name="viewport" content="width=device-width"/> |
| ? | initial-scale:設置視口的默認縮放比 |
| ? | 設置縮放比的值initial-scale=1.0,可以保證縮放比一致,大于0小于1縮小,大于1放大 |
| ? | <meta name="viewport" content="initial-scale=1.0"/> |
| ? | user-scalable:設置是否允許用戶自行縮放 |
| ? | 設置值為0(no)為禁止用戶自行縮放,1(yes)代表允許 |
| ? | <meta name="viewport" content="user-scalable=0"/> |
| ? | minimum-scale:最小允許縮放比 |
| ? | <meta name="viewport" content="minimum-scale=1.0"/> |
| ? | maximum-scale:最大允許縮放比 |
| ? | <meta name="viewport" content="maximum-scale=1.0"/> |
viewport中的參數不一定每個都要設置，具體根據自己情況設置，上面的<meta>標簽里設置是比較常用的
6.<meta http-equiv="X-UA-Compatible" content="ie=edge">
http-equiv="X-UA-Compatible"：是ie的一個專有屬性，它告訴ie需要用何種版本去渲染網頁
ie=edge：因為edge為最新的瀏覽器，所以表示用最新的瀏覽器引擎渲染網頁。
?
下面就是html5的頁面基本框架結構：
<!--聲明文檔類型為HTML5--> <!DOCTYPE html> <html><head><meta charset="utf-8"><title>HTML5基本框架</title><meta name="keywords" content="關鍵詞，關鍵字"><meta name="description" content="描述網頁的信息"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head><body><script></script></body> </html>?
?
?
總結
以上是生活随笔為你收集整理的HTML5页面的基本框架结构的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言程序的模板,C++中模板与用C语言
- 下一篇： mondrian mysql 实例_mo