代碼分為三部分編寫
<html>是網頁文件的最外層標記 <head> 之間的文本是頭信息,不會顯示在瀏覽器中,包括基本的描述,整個網頁的公共屬性 </head> <body> 是網頁的主體部分,正文:文字、圖片、鏈接、表單等 </body> </html>
<head>頭部標記</head> <title></title>只能有一個 <base/>只能有一個 <link>可以有多個 <meat>可以有多個 <meat name="" content=""> <meat http-equiv="" content="">
title
定義網頁標題,顯示在瀏覽器的標題欄中 有利于搜素引擎(也是在搜索引擎中顯示的標題)
base
基底網址標記
用于設定瀏覽器中文件的絕對路徑
網頁中的文件只需要寫下文件的相對路徑即可,這個路徑就是base指定下的路徑
link
設置外部文件的鏈接標記
用于確定本頁面和其他文檔之間的關系
meta
兩種用法
<meta name="" contnet="">
<meta http-equiv="" content="">
name用于在網頁中加入關于網頁的描述信息
網頁的關鍵字,網頁描述信息
http-equiv:屬性用于在HTME文檔中模擬HTTP協議的
響應消息頭,例如,告訴瀏覽器,是否緩存頁面,
使用什么樣的字符集顯示網頁內容
meta的name標簽屬性:不是自己定義的值
Keywords:網頁的關鍵字
Description:網頁的描述 Robots:index noindex follow nofollow all none Author
copyright:版本
mate標簽的http-equiv屬性設置
Content-Type :網頁文檔類型 ,刷新頁面
<meta http-equiv="refresh" content="3; url=http://wwww.baidu.com/"> <meta http-equiv="Windows-Target" content="_top" 此條語句的作用:禁止別人把你的網頁放在小窗體里,一旦鏈接到你的網頁,會全屏顯示
Page=Enter和Page=Exit
<meta http-equiv="Page-Enter" content="revealTrans(Transition=5,Ouration=1.000)"> <meta http-equiv="Page-Exit" content="revealTrans(Transition=8,Ouration=1.000)"> 為頁面進入和退出特效,一共有23種
主體標記<body>
在它中放置網頁中所有內容
<body bgcolor="#ff00ff" text="#00ff00" link="red" alink=""(鼠標單擊顏色) topmargin=""(頂部距離) vlink=""(鼠標放在上時的顏色) leftmargin=""(默認左距離) background=""(放置背景圖片)>
只要是可以用樣式控制的,就不用HTML本身的屬性,可以用CSS控制
Id name class style 通用屬性,所有的元素都可以使用
文檔類型定義
<!DDCTYPE HTML PUBLIC"-//w3c//DTD XHML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transition1.dtd"(dtd的地址,按照dtd地址的格式顯示本頁面)>
互聯網時代人們通過上網瀏覽信息,打開瀏覽器上網看到豐富的圖文、視頻、音樂等多媒體信息,一系列信息反饋和視覺沖擊之后,您有沒有想過,互聯網這么發達的時代,您覺得花一點點時間學會做個網站頁面不真香?
“超文本標記語言“(HTML)作為文檔信息載體。當我們用html創建文檔時,它將我們的語言轉換成計算機可以理解的語言。這使得計算機能執行特定任務至關重要。人與計算機交互,需要一套編輯規范,編輯者(相對于計算機,這里指寫html的人)使用html標簽(機器識別的關鍵字)對內容做排版,填寫內容,然后定義板塊的樣式和動畫后的一份字符串文本,發布到遠程服務器,最終被機器解析成網絡傳輸報文協議,傳輸到前端(一般情況下就是我們的瀏覽器),就能夠呈現出大家熟悉的網站頁面了。
這里有一個小的指導教程,大家可以跟著來學習
一、 準備工具
編輯器 - windows系統自帶的記事本工具(右擊鼠標快捷鍵-> 新建 -> 文本文檔 )
瀏覽器
二、 實現步驟
電腦桌面上右擊鼠標,新建文本文檔,helloword.html,需要注意修改.txt后綴名為.html
2.輸入以下內容
<html>
<head>
<title>第一個頁面</title>
</head>
<body>
<h1>您的成果</h1>
<p>hello word!</p>
</body>
</html>
用瀏覽器打開這個文檔,可以通過修改打開方式也可以把文檔拖到瀏覽器快捷鍵圖標上面選擇瀏覽器打開,預覽成果。
三、總結一下您做的事情
使用windows系統的文本文檔工具寫了一份文本。這是一份主要信息內容(“第一個頁面”、“您的成果”、“hello word!”),和信息結構化載體關鍵字(“html”,“head“,“title“,“body”,“h1”,“p”)的文本,組成了一份帶結構的文本。我為什么稱之為帶結構呢?主要原因是,讀者閱讀需要清楚知道內容排版、模塊、段落信息等等,例如:一份word文檔,首行就是一個大標題,其次副標題,然后就是段落內容,其組成成分可能有圖片、視頻、跳轉鏈接、注釋等,它們組成了一個word文檔的結構,按word文檔結構規范編輯word文檔是掌握word的基本要領。掌握html,需要認識html的基本結構。按照教程的html內容,它組成了html的最基本結構,<html> </html>, 可告知瀏覽器其自身是一個 HTML 文檔。<head></head>,可告知瀏覽器這里是文檔的頭部。<body></body> 這里是文檔的主體。“<>” 告知瀏覽器,將要用到元素標簽,即“<html>”用了html標簽。“<>”是標簽的開始,“</>”則是標簽的結束。標簽是HTML語言中最基本的單位,標簽的組合使用即是自由組合,也是相互約束的。例如:“<title></title>”標簽,告訴瀏覽器本頁的標題,只能在“<head></head>”標簽里面使用。掌握html需要知道各種標簽的作用范圍,定義和用法。以上 “<h1></h1>” 是文檔內容大標題,副標題有 “<h12></h2>” 、 “<h3></h3>” ..... “<h5></h5>”。“<p></p>” 標簽定義了段落內容,每一次 “<p></p>”,文本內容將產生一個段落。編寫html為了方便閱讀,需要有良好的編寫格式。每一個子標簽需要頂格,“<head>"相對“<html>頂格了,我是通過輸入Tab實現的。平級的標簽不需要頂格,例如 ,案例中的排版 “<h1>" “<p>" 是相對于“<body>"平級的。
充分利用html標簽,完成頁面內容的布局,需要掌握以下要點
掌握基本的html標簽,參考網絡學習資源鏈接:https://www.w3school.com.cn/html/html_basic.asp掌握html排版技巧,使得頁面內容整整齊齊
使用css,層疊樣式定義,它主要是負責控制內容展示的形式,并不具有具體信息內容,它能控制html元素的布局、屬性、例如在css里面,定義了某類元素的名字(.className = {}),這類元素統一長度為10px( .className = {width:10px} ),之后通過把名字賦予元素(<div class="className" > <div>),擁有class="className"的元素都會顯示出長度為10px的樣子。
參考內容https://www.w3cschool.cn/css/
使用script,可以控制元素的響應動作,例如移動元素、改變元素的大小,顏色、切換圖片、提交表單、校驗內容等等。頁面常用的是javascript,需要較輕的編程知識,但是由于javascript的出現,使得頁面的前端開發技術的進步,永無止境。
參考內容 https://www.w3school.com.cn/tags/tag_script.asp
html如此簡單,只要您不被標簽內容影響了您對超文本的閱讀理解,了解html標簽對內容做了結構化,掌握起來,便能夠進入互聯網的大舞臺時代了!
獲得精彩內容,記得關注哦!
tml簡介:
通俗講是用來做網頁的語言
超文本標記語言
網頁可以添加文字、視頻、音樂、特效
結構包括頭部、身體組成網頁。
html工具:
編程工具:dreamever HBuilder notepad++ 電腦自帶記事本也可以不過得換下后綴改為.html
作圖工具:photoshop
動畫:Flash
特效:javascript語言
注:要是沒有下載途徑下載這些軟件的話私信我給你們發過去哈
編程開始:
以HBuilder為例
打開軟件 新建web項目
給項目命名 項目名稱寫你的項目名字Html-01
項目命名
打開右側index.html文件開始編程
編程代碼
運行程序,上方運行即可
運行效果圖
運行效果圖
試著在改成這樣代碼看看效果
加的屬性
加屬性后的運行效果
加屬性后效果
第一次發文章也是小菜鳥,希望可以找到對編程感興趣的人一起學習交流!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。