DOCTYPE

DOCTYPE(Document Type)

該聲明位于文檔中最前面的位置，處于html標簽之前，此標簽告知瀏覽器文檔使用哪種HTML或者 XHTML規范。

DTD(Document Type Definition)

聲明以 !DOCTYPE 開始，不區分大小寫，前面沒有任何內容，如果有其他內容(空格除外)會使瀏覽器在IE下開啟怪異模式(quirks mode)渲染網頁。公共DTD，名稱格式為注冊//組織//類型 標簽//語言,注冊指組織是否由國際標準化組織(ISO)注冊，+表示是，-表示不是。組織即組織名稱，如：W3C。類型一般是 DTD。標簽是指定公開文本描述，即對所引用的公開文本的唯一描述性名稱，后面可附帶版本號。最后語言是DTD語言的ISO 639語言標識符，如：EN表示英文，ZH表示中文。XHTML 1.0 可聲明三種DTD 類型。分別表示嚴格版本，過渡版本，以及基于框架的HTML文檔。

HTML 4.01 strict

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd

HTML 4.01 Transitional

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd

HTML 4.01 Frameset

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/TR/html4/frameset.dtd

HTML5文檔類型

!DOCTYPE html !-- 使用 Html5 doctype，不區分大小寫 --

meta

聲明文檔使用的字符編碼

html5之前

 meta http-equiv= Content-Type content= text/html; charset=utf-8 html5 meta charset= utf-8 

SEO優化

標題

title your title /title

頁面描述

meta name= description content= your description

關鍵字

meta name= keywords content= your keywords

網頁作者

meta name= author content= your name

網頁搜索引擎索引方式

meta name= robots content= index,follow

follow 跟蹤鏈接并分析目標網頁。這是默認行為，并且可忽略。

index 將網頁編入索引。這是默認行為，并且可忽略。

noodp 不使用 Open Directory Project 來創建內容描述。

noydir 不使用 Yahoo Directory 來創建內容描述。

noarchive 不允許搜索引擎顯示內容的緩存版本。

cache 允許搜索引擎顯示內容的緩存版本。

nocache 不允許搜索引擎顯示內容的緩存版本。

標簽

定義文檔的結構，使文檔的標記更加語義化。

html5 demo !DOCTYPE html  html  head  meta charset= utf-8  title html5 demo /title  /head  body  header  h1 html5 demo /h1  nav  li nav1 /li  li nav2 /li  /ul  /nav  /header  section  h1 article aside /h1  article article /article  aside aside /aside  section  footer footer /footer  /body  /html 

tips

html5標簽更加豐富和完善，p標簽似乎沒有什么用武之地，但是如果僅僅想在文檔中加入一段樣式，這個時候p標簽便派上用場了。

標簽在不同瀏覽器默認樣式會有一些區別，為了一個網頁在不同瀏覽器中看到的效果一樣，通常要先格式化一下標簽的樣式

@charset utf-8 html{margin:0;padding:0;border:0}a,abbr,acronym,address,article,aside,blockquote,body,caption,code,dd,del,dfn,dialog,p,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,iframe,img,label,legend,li,nav,object,ol,p,pre,q,section,span,table,tbody,td,tfoot,th,thead,tr,ul{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1.5;background:#fff}table{border-collapse:separate;border-spacing:0}caption,td,th{text-align:left;font-weight:400;float:none!important}table,td,th{vertical-align:middle}blockquote:after,blockquote:before,q:after,q:before{content: }blockquote,q{quotes: }a img{border:none}a{text-decoration:none}:focus{outline:0}

如果要在不支持html5的瀏覽器中使用html5標簽，需要加一小段JavaScript代碼

 script  document.createElement( header  document.createElement( nav  document.createElement( section  document.createElement( aside  document.createElement( article  document.createElement( footer  /script 

標簽可編輯屬性contenteditable

article contenteditable /article

以上文章內容希望對各位朋友有所幫

以上就是HTML基本語法和語義寫法規則與實例的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。