HTML初體驗

HTML初體驗

HTML、XML、XHTML有什么區(qū)別

  • HTML
    • 超文本標記語言（Hypertext Markup language），是一種用于創(chuàng)建網(wǎng)頁的標準標記語言，常與CSS,JavaScript一起用于設(shè)計網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。為語法較為松散的、不嚴格的Web語言，HTML是一種標記語言而不是編程語言。
  • XML
    • 可擴展標記語言（Extensible Markup Language），主要用于存儲數(shù)據(jù)和結(jié)構(gòu)，不用來表現(xiàn)或展示數(shù)據(jù)
  • XHTML
    • 可擴展超文本標記語言（eXtensible HyperText Markup Language，XHTML），基于XML，作用與HTML類似，但語法更嚴格

HTML語義化

  • 語義化是一種編寫HTML的方式，本質(zhì)上是指在寫一個頁面的時候，選擇合適的標簽，使用合理的代碼結(jié)構(gòu)。即根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標簽（代碼語義化）
  • 好處：
    • 清晰的頁面結(jié)構(gòu)：去掉或樣式丟失的時候，也能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)，增強頁面的可讀性。
    • 支持更多的設(shè)備：屏幕閱讀器（如果訪客有視障）會完全根據(jù)你的標記來“讀”你的網(wǎng)頁。 如果你使用的含語義的標記，屏幕閱讀器會根據(jù)你的標簽來判斷網(wǎng)頁的內(nèi)容，而不是一個字母一個字母的拼寫出來。
    • 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴于標記來確定上下文和各個關(guān)鍵字的權(quán)重。
    • 便于團隊開發(fā)和維護：在團隊中大家都遵循同一個標準，可以減少很多差異化的東西，方便開發(fā)和維護，提高開發(fā)效率，甚至實現(xiàn)模塊化開發(fā)。

怎樣理解內(nèi)容與樣式分離的原則

  • 一個網(wǎng)頁分為三個部分：HTML——結(jié)構(gòu)，CSS——表現(xiàn)，javascrip——行為。內(nèi)容也就是html，樣式也就是css。所以內(nèi)容和樣式的分離，就是指在網(wǎng)頁編碼的過程中，要將html和css兩大部分分開。
  • 寫 HTML 的時候先不管樣式, 重點放在HTML的結(jié)構(gòu)和語義化上，讓 HTML 能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。之后再去寫樣式。
  • 寫 JS 的時候，盡量不要用 JS 去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化
  • HTML 內(nèi)不允許出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式

分離原則的優(yōu)點
1.瀏覽器加載網(wǎng)頁頁面速度變快。分離原則下，大部分頁面代碼寫在了CSS當中，頁面體積容量變得更小。
2.網(wǎng)頁修改設(shè)計時，效率、省時。根據(jù)html標簽內(nèi)ID或class的標記，到CSS里找到相應(yīng)的ID或class，可以快速替換指定位置的樣式，不會破壞頁面架構(gòu)和其他部分的樣式。典型的應(yīng)用就是網(wǎng)頁換膚，使用相同的 html 結(jié)構(gòu)，不同的 css 樣式。
3.更好地被搜索引擎收錄?；趦?nèi)容與樣式分離的原則，html的語義化就是首要考慮的,網(wǎng)頁中語義化的標簽代碼就會更加適合搜索引擎。
4.css樣式的分離，它可以根據(jù)不同的瀏覽器，達到顯示效果的統(tǒng)一。保證網(wǎng)頁架構(gòu)不變形的前提下，放心在不同瀏覽器渲染顯示樣式。

有哪些常見的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>
  • 標簽定義及使用說明
    • 元數(shù)據(jù)（Metadata）是數(shù)據(jù)的數(shù)據(jù)信息。
    • meta標簽提供了 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在客戶端，但是會被瀏覽器解析。
    • meta元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時間，作者及其他元數(shù)據(jù)。
    • 元數(shù)據(jù)可以被瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 Web 服務(wù)調(diào)用。
  • 示例1
定義文檔關(guān)鍵詞，用于搜索引擎：
<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如果直接設(shè)置pixel_value數(shù)值，大部分的安卓手機不支持，但是iOS支持；
    height – viewport 的高度 （范圍從 223 到 10,000 ）
    user-scalable [yes | no]是否允許縮放
    initial-scale [數(shù)值] 初始化比例（范圍從 > 0 到 10）
    minimum-scale [數(shù)值] 允許縮放的最小比例
    maximum-scale [數(shù)值] 允許縮放的最大比例
    target-densitydpi 值有以下（一般推薦設(shè)置中等像素密度或者低像素密度，后者設(shè)置具體的值dpi_value，另外webkit內(nèi)核已不準備再支持此屬性）
         -- dpi_value 一般是70-400//沒英寸像素點的個數(shù)
         -- device-dpi設(shè)備默認像素密度
         -- 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
設(shè)置作者姓名及聯(lián)系方式
<meta name="author" contect="name, xxx@163.com" />
  • 示例8
聲明文檔兼容模式，指示IE以目前可用的最高模式顯示內(nèi)容
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

文檔聲明的作用?嚴格模式和混雜模式指什么?<!Doctype html> 的作用?

文檔聲明的作用

  • 用來聲明文檔對象模型，用來告訴瀏覽器應(yīng)該使用哪種方式來解析渲染頁面。

嚴格模式和混雜模式

  • 嚴格模式就是使用<!Doctype>標簽來顯式聲明該用哪種方式來渲染頁面
  • 混雜模式即允許瀏覽器使用自己的方式來渲染頁面。

<!Doctype html> 的作用

  • <!Doctype html>即就是聲明使用HTML5來解析渲染頁面

瀏覽器亂碼的原因是什么？如何解決

  • 瀏覽器亂碼原因
    • 保存的文檔的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的。
    • 亂碼一般是英文以外的字符才會出現(xiàn)。
  • 如何解決
    • 首先，在文件保存的時候你自己要清楚是用哪種編碼方式保存的，然后在html文檔中加入<meta charset="">標簽，聲明頁面編碼方式

常見的瀏覽器有哪些，什么內(nèi)核

  • 常見瀏覽器
    • chrome，F(xiàn)irefox，ie，360，Safari、opera等
  • 內(nèi)核
    1. Trident(IE內(nèi)核)：IE瀏覽器，很多國內(nèi)瀏覽器，以及很多雙核瀏覽器的其中“一核”都是Trident。
    2. Gecko：FireFox
    3. Webkit：Chrome，Safari
    4. Presto：Opera

列出常見的標簽，并簡單介紹這些標簽用在什么場景

常見標簽 場景
<h1>...</h1> 表示標題,h1到h6分別代表六級標題
<p>...</p> 段落，表示大段文字
<a>...</a> 鏈接，鏈接到下一個地址，有href, target,title三個屬性,分別表示鏈地址（或#錨點，#about，/路徑），頁面打開方式，網(wǎng)頁標題
<img> 展示圖片，屬性src：圖片地址，屬性alt:描述圖片的注釋.ps:只閉合標簽，最后不需要 /
<div>...</div> 表示一大塊，用于給頁面劃分區(qū)域，讓結(jié)構(gòu)更清晰。屬性：id,表示給一個元素取名；class:表示給一類元素取名
<ul>...</ul> 無序列表，用于表示并列的內(nèi)容，ul的直接子元素是li,可以嵌套
<ol>...</ol> 有序列表
<li>...</li> 列表項，與ul,ol結(jié)合使用
<dl>.</dl>,<dt>.</dt>,<dd>.</dd> 用于展示一系列 “標題:內(nèi)容... ”的場景
<button>點我</button> 按鈕
<strong>.</strong> ,<em>.</em> em 需要強調(diào)一下strong 很重要、強調(diào)性更強
<span>...</span> 給某個需要加樣式的元素添加標記，無強調(diào)語義
<iframe>...</iframe> 用于嵌入一個頁面
<table>..</table> 用于展示表格，不要用來做布局，thead tbody tfoot可省略
<tr>..</tr> 行，與<table>..</table>一起用于展示表格
<th>..</th> 標題的列
<td>..</td> 內(nèi)容的列
<!Doctype html> 文檔對象模型
<br> 換行
<html>..</html> 整個頁面的根節(jié)點，一個頁面只能有一個html標簽，所有內(nèi)容應(yīng)位于html標簽內(nèi)
<head>..</head> 用于定義文檔的頭部信息，它是所有頭部元素的容器
<title>...</title> 文檔的標題
<meta>...</meta> 提供有關(guān)頁面的元信息
<body>...</body> 文檔的內(nèi)容,即可視頁面內(nèi)容
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,125評論 1贊 92
  • 簡介網(wǎng)絡(luò)瀏覽器很可能是使用最廣的軟件。在這篇入門文章中，我將會介紹它們的幕后工作原理。我們會了解到，從您在地址欄輸...
    wengjq閱讀 2,310評論 2贊 15
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,371評論 0贊 8
  • 1. 瀏覽器頁面有哪三層構(gòu)成，分別是什么，作用是什么? 構(gòu)成：結(jié)構(gòu)層、表示層、行為層分別是：HTML、CSS、Ja...
    程序猿人王小賤閱讀 1,989評論 1贊 11
  • 我叫衛(wèi)星，我一直喜歡的一個女生叫水星。我很聰明，也是因為太聰明的我一眼看穿了很多事，水星很單純，想法也很簡單，我喜...
    廢狗李子閱讀 251評論 0贊 0

友情鏈接更多精彩內(nèi)容