HTML初體驗
HTML、XML、XHTML有什么區別
- HTML
- 超文本標記語言（Hypertext Markup language），是一種用于創建網頁的標準標記語言，常與CSS,JavaScript一起用于設計網頁、網頁應用程序以及移動應用程序的用戶界面。為語法較為松散的、不嚴格的Web語言，HTML是一種標記語言而不是編程語言。
- XML
- 可擴展標記語言（Extensible Markup Language），主要用于存儲數據和結構，不用來表現或展示數據
- XHTML
- 可擴展超文本標記語言（eXtensible HyperText Markup Language，XHTML），基于XML，作用與HTML類似，但語法更嚴格
HTML語義化
- 語義化是一種編寫HTML的方式，本質上是指在寫一個頁面的時候，選擇合適的標簽，使用合理的代碼結構。即根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）
- 好處：
- 清晰的頁面結構：去掉或樣式丟失的時候，也能讓頁面呈現清晰的結構，增強頁面的可讀性。
- 支持更多的設備：屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。 如果你使用的含語義的標記，屏幕閱讀器會根據你的標簽來判斷網頁的內容，而不是一個字母一個字母的拼寫出來。
- 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴于標記來確定上下文和各個關鍵字的權重。
- 便于團隊開發和維護：在團隊中大家都遵循同一個標準，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模塊化開發。
怎樣理解內容與樣式分離的原則
- 一個網頁分為三個部分：HTML——結構，CSS——表現，javascrip——行為。內容也就是html，樣式也就是css。所以內容和樣式的分離，就是指在網頁編碼的過程中，要將html和css兩大部分分開。
- 寫 HTML 的時候先不管樣式, 重點放在HTML的結構和語義化上，讓 HTML 能體現頁面結構或者內容。之后再去寫樣式。
- 寫 JS 的時候，盡量不要用 JS 去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化
- HTML 內不允許出現屬性樣式，盡量不要出現行內樣式
分離原則的優點
1.瀏覽器加載網頁頁面速度變快。分離原則下，大部分頁面代碼寫在了CSS當中，頁面體積容量變得更小。
2.網頁修改設計時，效率、省時。根據html標簽內ID或class的標記，到CSS里找到相應的ID或class，可以快速替換指定位置的樣式，不會破壞頁面架構和其他部分的樣式。典型的應用就是網頁換膚，使用相同的 html 結構，不同的 css 樣式。
3.更好地被搜索引擎收錄。基于內容與樣式分離的原則，html的語義化就是首要考慮的,網頁中語義化的標簽代碼就會更加適合搜索引擎。
4.css樣式的分離，它可以根據不同的瀏覽器，達到顯示效果的統一。保證網頁架構不變形的前提下，放心在不同瀏覽器渲染顯示樣式。
有哪些常見的meta標簽
meta標簽有三個屬性，分別是
name,http-equiv,charset
<head>
<meta name="description" content="免費web教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="W3Cschool">
<meta charset="UTF-8">
</head>
- 標簽定義及使用說明
- 元數據（Metadata）是數據的數據信息。
- meta標簽提供了 HTML 文檔的元數據。元數據不會顯示在客戶端，但是會被瀏覽器解析。
- meta元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者及其他元數據。
- 元數據可以被瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 Web 服務調用。
- 示例1
定義文檔關鍵詞，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 示例2
定義web頁面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">
- 示例3
定義頁面作者：
<meta name="author" content="Hege Refsnes">
- 示例4
每30秒刷新頁面：
<meta http-equiv="refresh" content="30">
- 示例5
屏幕的縮放
<meta name="viewport" content="">
content的幾個屬性：
width viewport的寬度[device-width | pixel_value]width如果直接設置pixel_value數值，大部分的安卓手機不支持，但是iOS支持；
height – viewport 的高度 （范圍從 223 到 10,000 ）
user-scalable [yes | no]是否允許縮放
initial-scale [數值] 初始化比例（范圍從 > 0 到 10）
minimum-scale [數值] 允許縮放的最小比例
maximum-scale [數值] 允許縮放的最大比例
target-densitydpi 值有以下（一般推薦設置中等像素密度或者低像素密度，后者設置具體的值dpi_value，另外webkit內核已不準備再支持此屬性）
-- dpi_value 一般是70-400//沒英寸像素點的個數
-- device-dpi設備默認像素密度
-- high-dpi 高像素密度
-- medium-dpi 中等像素密度
-- low-dpi 低像素密度
完整案例:<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
- 示例6
聲明文檔使用的字符編碼
<meta charset='utf-8'>
- 示例7
設置作者姓名及聯系方式
<meta name="author" contect="name, xxx@163.com" />
- 示例8
聲明文檔兼容模式，指示IE以目前可用的最高模式顯示內容
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
文檔聲明的作用?嚴格模式和混雜模式指什么?<!Doctype html> 的作用?
文檔聲明的作用
- 用來聲明文檔對象模型，用來告訴瀏覽器應該使用哪種方式來解析渲染頁面。
嚴格模式和混雜模式
- 嚴格模式就是使用<!Doctype>標簽來顯式聲明該用哪種方式來渲染頁面
- 混雜模式即允許瀏覽器使用自己的方式來渲染頁面。
<!Doctype html> 的作用
- <!Doctype html>即就是聲明使用HTML5來解析渲染頁面
瀏覽器亂碼的原因是什么？如何解決
- 瀏覽器亂碼原因
- 保存的文檔的編碼格式和瀏覽器解析時的解碼格式不匹配導致的。
- 亂碼一般是英文以外的字符才會出現。
- 如何解決
- 首先，在文件保存的時候你自己要清楚是用哪種編碼方式保存的，然后在html文檔中加入
<meta charset="">標簽，聲明頁面編碼方式
- 首先，在文件保存的時候你自己要清楚是用哪種編碼方式保存的，然后在html文檔中加入
常見的瀏覽器有哪些，什么內核
- 常見瀏覽器
- chrome，Firefox，ie，360，Safari、opera等
- 內核
- Trident(IE內核)：IE瀏覽器，很多國內瀏覽器，以及很多雙核瀏覽器的其中“一核”都是Trident。
- Gecko：FireFox
- Webkit：Chrome，Safari
- Presto：Opera
列出常見的標簽，并簡單介紹這些標簽用在什么場景
| 常見標簽 | 場景 |
|---|---|
<h1>...</h1> |
表示標題,h1到h6分別代表六級標題 |
<p>...</p> |
段落，表示大段文字 |
<a>...</a> |
鏈接，鏈接到下一個地址，有href, target,title三個屬性,分別表示鏈地址（或#錨點，#about，/路徑），頁面打開方式，網頁標題 |
<img> |
展示圖片，屬性src：圖片地址，屬性alt:描述圖片的注釋.ps:只閉合標簽，最后不需要 / |
<div>...</div> |
表示一大塊，用于給頁面劃分區域，讓結構更清晰。屬性：id,表示給一個元素取名；class:表示給一類元素取名 |
<ul>...</ul> |
無序列表，用于表示并列的內容，ul的直接子元素是li,可以嵌套 |
<ol>...</ol> |
有序列表 |
<li>...</li> |
列表項，與ul,ol結合使用 |
<dl>.</dl>,<dt>.</dt>,<dd>.</dd> |
用于展示一系列 “標題:內容... ”的場景 |
<button>點我</button> |
按鈕 |
<strong>.</strong> ,<em>.</em> |
em 需要強調一下strong 很重要、強調性更強 |
<span>...</span> |
給某個需要加樣式的元素添加標記，無強調語義 |
<iframe>...</iframe> |
用于嵌入一個頁面 |
<table>..</table> |
用于展示表格，不要用來做布局，thead tbody tfoot可省略 |
<tr>..</tr> |
行，與<table>..</table>一起用于展示表格 |
<th>..</th> |
標題的列 |
<td>..</td> |
內容的列 |
<!Doctype html> |
文檔對象模型 |
<br> |
換行 |
<html>..</html> |
整個頁面的根節點，一個頁面只能有一個html標簽，所有內容應位于html標簽內 |
<head>..</head> |
用于定義文檔的頭部信息，它是所有頭部元素的容器 |
<title>...</title> |
文檔的標題 |
<meta>...</meta> |
提供有關頁面的元信息 |
<body>...</body> |
文檔的內容,即可視頁面內容 |
