整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html有什么作用

          tml有什么作用

          html有什么作用?一、用戶體驗,例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用;二、有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標簽來確定上下文和各個關鍵字的權重。以下是html作用的更多內容,歡迎參閱。

          一、用戶體驗,例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用;

          二、有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標簽來確定上下文和各個關鍵字的權重;

          三、方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以意義的方式來渲染網頁;

          四、便于團隊開發和維護,語義化更具有可讀性,下一步把網頁的重要動向,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。

          html的特點

          HTML文檔制作不是很復雜,且功能強大,支持不同數據格式的文件鑲入,這也是WWW盛行的原因之一,其主要特點如下:

          1 簡易性,HTML版本升級采用超集方式,從而更加靈活方便。

          2 可擴展性,HTML語言的廣泛應用帶來了加強功能,增加標識符等要求,HTML采取子類元素的方式,為系統擴展帶來保證。

          3 平臺無關性。雖然PC機大行其道,但使用MAC等其他機器的大有人在,HTML可以使用在廣泛的平臺上。

          學習html有什么好處

          1、很輕松的修改你的網站、博客的網頁結構。

          2、對SEO網站優化很有用處。

          3、拿來主義,通過保存其他網站頁面源代碼,適當的修改,可以仿制出你想要的模板。

          4、當你有一張漂亮的PSD源文件圖片時,你可以很輕易的把圖片切割制作成網頁。

          5、無論是PHP、ASP、.NET、JSP等網站編程語言,都要用到HTML。

          6、可以輕松檢測出網站是否中了網頁木馬和預防網頁木馬。

          7、可以向更高一層次進階:DIV+CSS網頁設計。

          用什么可以編輯HTML

          HTML其實是文本,它需要瀏覽器的解釋,HTML的編輯器大體可以分為三種,

          1 基本編輯軟件,使用WINDOWS自帶的記事本或寫字版都可以編寫,當然,如果你用WPS來編寫,也可以。不過存盤是請使用.htm或.html作為擴展名,這樣瀏覽器就可以解釋執行了。

          2 半所見即所得軟件,這種軟件能大大提高開發效率,它可以使你在很短的時間內做出HOMEPAGE,且可以學習HTML,這種類型的軟件主要有HOTDOG,還有國產的軟件網頁作坊。

          3 所見即所得軟件,使用最廣泛的編輯器,完全可以一點不懂HTML的知識就可以做出網頁,這類軟件主要有FRONTPAGE98,DREAMWEAVER。

          點擊左下角了解更多課程資訊

          、定義

          <meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上,但是對于機器是可讀的。可用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。

          2、作用

          meta里的數據是供機器解讀的,告訴機器該如何解析這個頁面,還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容,例如我們為頁面中添加如下meta標簽:


          1. <meta http-equiv="charset" content="iso-8859-1">
          2. <meta http-equiv="expires" content="31 Dec 2008">

          瀏覽器的頭部就會包括這些:


          1. charset:iso-8859-1
          2. expires:31 Dec 2008

          只有瀏覽器可以接受這些附加的頭部字段,并能以適當的方式使用它們時,這些字段才有意義。

          3、meta的必需屬性和可選屬性

          meta的必需屬性是content,當然并不是說meta標簽里一定要有content,而是當有http-equiv或name屬性的時候,一定要有content屬性對其進行說明。例如:

          必需屬性

          <meta name="keywords" content="HTML,ASP,PHP,SQL">

          這里面content里的屬性就是對keywords進行的說明,所以呢也可以理解成一個鍵值對吧,就是{keywords:"HTML,ASP,PHP,SQL"}。

          可選屬性

          在W3school中,對于meta的可選屬性說到了三個,分別是http-equiv、name和scheme。考慮到scheme不是很常用,所以就只說下前兩個屬性吧。

          http-equiv

          http-equiv屬性是添加http頭部內容,對一些自定義的,或者需要額外添加的http頭部內容,需要發送到瀏覽器中,我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明,那么現在再舉個例子。例如我們不想使用js來重定向,用http頭部內容控制,那么就可以這樣控制:

          <meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

          在頁面中加入這個后,5秒鐘后就會跳轉到指定頁面啦,效果可看W3school的例子

          name

          第二個可選屬性是name,這個屬性是供瀏覽器進行解析,對于一些瀏覽器兼容性問題,name屬性是最常用的,當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以,不然就是沒有意義的。還是舉個例子吧:

          <meta name="renderer" content="webkit">

          這個meta標簽的意思就是告訴瀏覽器,用webkit內核進行解析,當然前提是瀏覽器有webkit內核才可以,不然就是沒有意義的啦。當然看到這個你可能會有疑問,這個renderer是從哪里冒出來的,我要怎么知道呢?這個就是在對應的瀏覽器的開發文檔里就會有表明的,例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔

          常用meta標簽大總結

          接下來就是常用的meta標簽大總結啦,我會盡可能的做到全

          charset

          charset是聲明文檔使用的字符編碼,解決亂碼問題主要用的就是它,值得一提的是,這個charset一定要寫第一行,不然就可能會產生亂碼了。

          charset有兩種寫法


          1. <meta charset="utf-8">
          2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

          兩個都是等效的。

          百度禁止轉碼

          百度會自動對網頁進行轉碼,這個標簽是禁止百度的自動轉碼

          <meta http-equiv="Cache-Control" content="no-siteapp" />

          SEO 優化部分


          1. <!-- 頁面標題<title>標簽(head 頭部必須) -->
          2. <title>your title</title>
          3. <!-- 頁面關鍵詞 keywords -->
          4. <meta name="keywords" content="your keywords">
          5. <!-- 頁面描述內容 description -->
          6. <meta name="description" content="your description">
          7. <!-- 定義網頁作者 author -->
          8. <meta name="author" content="author,email address">
          9. <!-- 定義網頁搜索引擎索引方式,robotterms 是一組使用英文逗號「,」分割的值,通常有如下幾種取值:none,noindex,nofollow,all,index和follow。 -->
          10. <meta name="robots" content="index,follow">

          viewport

          viewport主要是影響移動端頁面布局的,例如:


          1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

          content 參數:

          • width viewport 寬度(數值/device-width)
          • height viewport 高度(數值/device-height)
          • initial-scale 初始縮放比例
          • maximum-scale 最大縮放比例
          • minimum-scale 最小縮放比例
          • user-scalable 是否允許用戶縮放(yes/no)

          各瀏覽器平臺

          Microsoft Internet Explorer


          1. <!-- 優先使用最新的ie版本 -->
          2. <meta http-equiv="x-ua-compatible" content="ie=edge">
          3. <!-- 是否開啟cleartype顯示效果 -->
          4. <meta http-equiv="cleartype" content="on">
          5. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
          6. <!-- Pinned Site -->
          7. <!-- IE 10 / Windows 8 -->
          8. <meta name="msapplication-TileImage" content="pinned-tile-144.png">
          9. <meta name="msapplication-TileColor" content="#009900">
          10. <!-- IE 11 / Windows 9.1 -->
          11. <meta name="msapplication-config" content="ieconfig.xml">

          Google Chrome


          1. <!-- 優先使用最新的chrome版本 -->
          2. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
          3. <!-- 禁止自動翻譯 -->
          4. <meta name="google" value="notranslate">

          360瀏覽器


          1. <!-- 選擇使用的瀏覽器解析內核 -->
          2. <meta name="renderer" content="webkit|ie-comp|ie-stand">

          UC手機瀏覽器

          UCBrowser_U3_API

          QQ手機瀏覽器


          1. <!-- 鎖定屏幕在特定方向 -->
          2. <meta name="x5-orientation" content="landscape/portrait">
          3. <!-- 全屏顯示 -->
          4. <meta name="x5-fullscreen" content="true">
          5. <!-- 頁面將以應用模式顯示 -->
          6. <meta name="x5-page-mode" content="app">

          Apple iOS


          1. <!-- Smart App Banner -->
          2. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
          3. <!-- 禁止自動探測并格式化手機號碼 -->
          4. <meta name="format-detection" content="telephone=no">
          5. <!-- Add to Home Screen添加到主屏 -->
          6. <!-- 是否啟用 WebApp 全屏模式 -->
          7. <meta name="apple-mobile-web-app-capable" content="yes">
          8. <!-- 設置狀態欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
          9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
          10. <!-- 添加到主屏后的標題 -->
          11. <meta name="apple-mobile-web-app-title" content="App Title">

          Google Android


          1. <meta name="theme-color" content="#E64545">
          2. <!-- 添加到主屏 -->
          3. <meta name="mobile-web-app-capable" content="yes">
          4. <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

          App Links


          1. <!-- iOS -->
          2. <meta property="al:ios:url" content="applinks://docs">
          3. <meta property="al:ios:app_store_id" content="12345">
          4. <meta property="al:ios:app_name" content="App Links">
          5. <!-- Android -->
          6. <meta property="al:android:url" content="applinks://docs">
          7. <meta property="al:android:app_name" content="App Links">
          8. <meta property="al:android:package" content="org.applinks">
          9. <!-- Web Fallback -->
          10. <meta property="al:web:url" content="http://applinks.org/documentation">
          11. <!-- More info: http://applinks.org/documentation/ -->

          最后——移動端常用的meta


          1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          2. <meta name="apple-mobile-web-app-capable" content="yes" />
          3. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
          4. <meta name="format-detection"content="telephone=no, email=no" />
          5. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          6. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認的工具欄和菜單欄 -->
          7. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設置蘋果工具欄顏色 -->
          8. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話,忽略email識別 -->
          9. <!-- 啟用360瀏覽器的極速模式(webkit) -->
          10. <meta name="renderer" content="webkit">
          11. <!-- 避免IE使用兼容模式 -->
          12. <meta http-equiv="X-UA-Compatible" content="IE=edge">
          13. <!-- 針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 -->
          14. <meta name="HandheldFriendly" content="true">
          15. <!-- 微軟的老式瀏覽器 -->
          16. <meta name="MobileOptimized" content="320">
          17. <!-- uc強制豎屏 -->
          18. <meta name="screen-orientation" content="portrait">
          19. <!-- QQ強制豎屏 -->
          20. <meta name="x5-orientation" content="portrait">
          21. <!-- UC強制全屏 -->
          22. <meta name="full-screen" content="yes">
          23. <!-- QQ強制全屏 -->
          24. <meta name="x5-fullscreen" content="true">
          25. <!-- UC應用模式 -->
          26. <meta name="browsermode" content="application">
          27. <!-- QQ應用模式 -->
          28. <meta name="x5-page-mode" content="app">
          29. <!-- windows phone 點擊無高光 -->
          30. <meta name="msapplication-tap-highlight" content="no">
          31. <!-- 適應移動端end -->

          作網頁時,經常需要設置網頁的基本信息,如網頁的標題、作者等。為此,HTML提供了一系列設置網頁信息的標簽,這些標簽通常都寫在

          <head>標簽內,也被稱為HTML.文檔頭部相關標簽。下面將介紹常用的HTML文檔頭部標簽中的<title>和<meta>標簽。

          (1)<title>標簽

          <title>標簽用于設置HTML頁面的標題,也就是為網頁取一個名稱。在網頁結構中,<title>標簽必須位于<head>標簽內。一個HTML.文檔只能含有一個<title>標簽,<title></title>標簽之間的內容將顯示在瀏覽器窗口的標題欄中。例如,將某個頁面標題設置為“輕松學習HTML.5”,示例代碼如下:

          <title>輕松學習HIML.5</title>

          上述代碼對應的頁面效果如下圖:

          (2)<meta>標簽

          <meta>標簽用于定義頁面的元信息(元信息不會顯示在最終的頁面效果中),可重復出現在標簽中。在HTML中,<meta>標簽是一個單標簽,本身不包含任何內容,僅表示網頁的相關信息。通過標簽的屬性,可以定義頁面的相關參數。

          例如,為搜索引擎提供網頁的關鍵字、作者姓名、內容描述,以及定義網頁的刷新時間等。下面介紹<meta/>標簽常用的幾組設置,具體如下。

          <meta name-”名稱”content-”值”>:在<meta>標簽中使用 name 屬性和 content 屬性可以為搜索引擎提供信息。其中,name屬性提供搜索內容名稱,content屬性提供對應的搜索內容值,這些屬性的具體應用如下。

          設置網頁關鍵字,如某圖像網站的關鍵字設置,示例代碼如下:

              <meta name=“keywoxds”content=“千圖網,免費素材下載,千圖網免費素材圖庫,矢量圖,矢量圖庫,圖像素材,網頁素材,
          免費素材,PS素材,網站素材,設計模板,設計素材,網頁模板免費下載,千圖,素材中國,素材,免費設計,圖像”/>

          在上述示例代碼中,nare屬性的屬性值為"keywonds”,該屬性值用于定義搜索內容名稱為網頁關鍵字;content 屬性的屬性值用于定義關鍵字的具體內容,多個關鍵字內容之間可以用“,”分隔。

          設置網頁描述,如某圖像網站的描述信息設置,示例代碼如下:

              <meta name=”description”content=”專注免費設計素材下裁的網站!提供矢量圖素材,矢量青景圖像,矢量圖庫,還有
          psd素材,PS素材,設計模板,設計素材,PPT素材,以及網頁素材,網站素材,網頁圖標免費下載”/>

          在上述示例代碼中,name屬性的屬性值為“deseription”,該屬性值用于定義搜索內容名稱為網頁描述;comtent 屬性的屬性值用于定義描述的具體內容。網頁描述的文字不必過多,能夠描述清晰即可。

          設置網頁作者,如可以為網站增加作者信息,示例代碼如下:

          <meta name-"author" content="網絡部"/>

          在上述示例代碼中,name屬性的屬性值為”author”,該屬性值用于定義搜索內容名稱為網頁作者;content屬性的屬性值用于定義具體的作者信息。

          <meta http-equiv=”名稱”content=”值”>在<meta/>標簽中,http-equiv 屬性和content 屬性可以設置服務器發送給瀏覽器的HTTP頭部信息,為瀏覽器顯示該頁面提供相關的參數標準。其中,http-equiv屬性提供參數類型,content屬性提供對應的參數值,這些屬性的具體應用如下。設置字符集,如某圖像官網字符集的設置,示例代碼如下:

          <meta http-equiva"Content-Type" content="text/html; charset=gbk"/>

          在上述示例代碼中,hitp-epuiv屬性的屬性值為“Content-Type”.content屬性的屬性值為“test/html”和“charset=gbk”,兩個屬性值之間用“:”隔開。其中,“text/html”用于說明當前文檔類型為HIML“charset=gbk”用于說明文檔字符集為GBK(中文編碼)。

          目前最常用的國際化字符集編碼格式是UTF-8,常用的中文字符集編碼格式主要是GBK和GB2312。當用戶使用的字符集編碼格式與當前瀏覽器不匹配時,網頁內容就會出現亂碼。新版本的HTML.5簡化了字符集的寫法,示例代碼如下:

          <meta charset="utf-g">

          設置頁面自動刷新與跳轉,如定義某個頁面10秒后跳轉至百度首頁,示例代碼如下:

          <meta http-equiv""refresh" content="10; url- httpa://sww.baidu.com/"/>

          在上述示例代碼中,http-equiv屬性的屬性值為“refresh”,content屬性的屬性值為數值和URL。兩個屬性值之間用“:”隔開,分別用于指定跳轉時間和目標頁面的URL。跳轉時間默認以秒為單位。


          主站蜘蛛池模板: 无码人妻精品一区二区三区99仓本| 亚洲一区二区三区AV无码| 国产亚洲福利精品一区二区| 无码一区二区三区| 香蕉久久一区二区不卡无毒影院| 国产色精品vr一区区三区| 无码精品人妻一区| 欧洲精品码一区二区三区免费看 | 无码人妻久久一区二区三区免费| 福利电影一区二区| aⅴ一区二区三区无卡无码| 日本精品夜色视频一区二区 | 中文字幕一精品亚洲无线一区| 一区二区不卡视频在线观看| 精品综合一区二区三区| 亚州国产AV一区二区三区伊在| 无码精品人妻一区| 中文字幕在线观看一区| 在线视频一区二区三区三区不卡 | 乱色熟女综合一区二区三区| 无码精品久久一区二区三区| 丰满人妻一区二区三区免费视频| 亚洲一区二区精品视频| 国产丝袜无码一区二区三区视频 | 成人区人妻精品一区二区不卡视频| 激情内射亚州一区二区三区爱妻| 综合久久久久久中文字幕亚洲国产国产综合一区首 | 一区二区三区视频| 国模精品一区二区三区视频| 免费观看日本污污ww网站一区| 国产一区二区三区手机在线观看| 人成精品视频三区二区一区| 精品乱子伦一区二区三区高清免费播放| 精品国产香蕉伊思人在线在线亚洲一区二区 | 中文字幕在线播放一区| 无码人妻少妇色欲AV一区二区| 国产乱码一区二区三区四| 天美传媒一区二区三区| 久久国产香蕉一区精品| 奇米精品视频一区二区三区| 无码人妻一区二区三区免费手机|