HTML网页结构化框架、meta标签和语义化标签
生活随笔
收集整理的這篇文章主要介紹了
HTML网页结构化框架、meta标签和语义化标签
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.HTML網頁結構化框架代碼示例
myhtml.html
<!--文檔聲明，聲明當前網頁的版本--> <!DOCTYPE html> <!--html的根標簽（元素），網頁中的所有內容都要寫在根元素的里邊--> <html lang="en"> <!--head是網頁頭部，head中的內容不會在網頁中直接出現，主要用來幫助瀏覽器或搜索引擎來解析網頁--> <head><!--meta標簽用來設置網頁的元數據，這里meta用來設置網頁的字符集，避免亂碼問題--><meta charset="UTF-8"><!--title中的內容會顯示在瀏覽器的標題欄，搜索引擎會主要根據title中的內容來判斷網頁的主要內容--><title>大土土隨筆</title> </head> <!--body是html的子元素，表示網頁的主體，網頁中的所有可見的內容都應寫在body里面--> <body><!--h1網頁的一級標題--><h4>這是我的網站首頁</h4> </body> </html>用瀏覽器打開，效果如下：
2.HTML meta標簽代碼示例
myhtml2.html
<!--文檔聲明，聲明當前網頁的版本--> <!DOCTYPE html> <!--html的根標簽（元素），網頁中的所有內容都要寫在根元素的里邊--> <html lang="en"> <!--head是網頁頭部，head中的內容不會在網頁中直接出現，主要用來幫助瀏覽器或搜索引擎來解析網頁--> <head><!--meta標簽用來設置網頁的元數據，元數據不是給用戶看的charset 指定網頁的字符集，避免亂碼問題name 指定的數據的名稱http-equiv="refresh" 將頁面重定向到另一個網站content 指定的數據的內容keywords 表示網站的關鍵字，可以同時指定多個關鍵字，關鍵字間使用英文,隔開description 用于指定網站的描述title標簽的內容會作為搜索結果的超鏈接上的文字顯示--><meta charset="UTF-8"><meta name="keywords" content="Python,Linux,C++,MySQL,鏡像,工具軟件,CTF,單片機,驅動源碼,源代碼"><meta name="description" content="發布Python、Linux、C++、MySQL等技術教程和自己開發的工具軟件以及程序源代碼！"><!--將頁面重定向到另一個網站--><meta http-equiv="refresh" content="3;url=http://www.datutusuibi.com/"><!--title中的內容會顯示在瀏覽器的標題欄，搜索引擎會主要根據title中的內容來判斷網頁的主要內容--><title>大土土隨筆</title> </head> <!--body是html的子元素，表示網頁的主體，網頁中的所有可見的內容都應寫在body里面--> <body><!--h1網頁的一級標題--><h4>這是我的網站首頁</h4><!--在新瀏覽器頁面打開網址--><a href="http://www.datutusuibi.com/" target="_blank">大土土隨筆</a> </body> </html>用瀏覽器打開，效果如下：
3.HTML 語義化標簽代碼示例
myhtml3.html
<!--文檔聲明，聲明當前網頁的版本--> <!DOCTYPE html> <!--html的根標簽（元素），網頁中的所有內容都要寫在根元素的里邊--> <html lang="en"> <!--head是網頁頭部，head中的內容不會在網頁中直接出現，主要用來幫助瀏覽器或搜索引擎來解析網頁--> <head><!--meta標簽用來設置網頁的元數據，元數據不是給用戶看的charset 指定網頁的字符集，避免亂碼問題name 指定的數據的名稱http-equiv="refresh" 將頁面重定向到另一個網站content 指定的數據的內容keywords 表示網站的關鍵字，可以同時指定多個關鍵字，關鍵字間使用英文,隔開description 用于指定網站的描述title標簽的內容會作為搜索結果的超鏈接上的文字顯示--><meta charset="UTF-8"><meta name="keywords" content="Python,Linux,C++,MySQL,鏡像,工具軟件,CTF,單片機,驅動源碼,源代碼"><meta name="description" content="發布Python、Linux、C++、MySQL等技術教程和自己開發的工具軟件以及程序源代碼！"><!--將頁面重定向到另一個網站<meta http-equiv="refresh" content="3;url=http://www.datutusuibi.com/">--><!--title中的內容會顯示在瀏覽器的標題欄，搜索引擎會主要根據title中的內容來判斷網頁的主要內容--><title>大土土隨筆</title> </head> <!--body是html的子元素，表示網頁的主體，網頁中的所有可見的內容都應寫在body里面--> <body><!--標題標簽：h1~h6一共六級標題從h1~h6遞減，h1最重要，h6最不重要h1在網頁中的重要性僅次于title標簽，一般情況下標題標簽只會使用到h1~h3，h4~h6很少用。標題標簽都是塊元素在頁面中獨占一行的元素稱為塊元素--><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h6>六級標題</h6><br><br><br><!--hgroup標簽用來為標題分組，可以將一組相關的標題同時放入hgroup--><hgroup><h3>回鄉偶書二首</h3><h4>其一</h4></hgroup><h4>唐 賀知章</h4><!--p標簽表示頁面中的一個段落，p也是一個塊元素--><!--q標簽表示一個短引用blockquote標簽表示一個長引用strong表示強調，重要內容br標簽表示頁面中的換行--><p>少小離家老大回，<br>鄉音無改鬢毛衰。<br>兒童相見不相識，<br>笑問客從何處來。<br></p></body> </html>用瀏覽器打開，效果如下：
獲取更多資料，請訪問大土土隨筆
如果本文對您有所幫助，請關注微信公眾號“捷創源科技”！
總結
以上是生活随笔為你收集整理的HTML网页结构化框架、meta标签和语义化标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MFC串口通信串口指示灯的实现
- 下一篇： 2017年html5行业报告,云适配发布