《Web前端開發項目教程》認識網站和網頁-制作第一個網頁_第1頁
《Web前端開發項目教程》認識網站和網頁-制作第一個網頁_第2頁
《Web前端開發項目教程》認識網站和網頁-制作第一個網頁_第3頁
《Web前端開發項目教程》認識網站和網頁-制作第一個網頁_第4頁
《Web前端開發項目教程》認識網站和網頁-制作第一個網頁_第5頁
已閱讀5頁，還剩14頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

任務01-2制作第一個網頁項目01認識網站和網頁任務01-2：制作第一個網頁

知識點掌握HTML5文檔的基本格式理解Web標準

技能點學會使用HbuilderX創建簡單網頁一、常用HTML編輯器1.記事本初學者學習寫HTML文件時經常會用到的一個工具，因為網頁本身就是超鏈接文本文件，在記事本中鍵入HTML代碼后，在“文件”菜單選擇“另存為”命令，將文檔保存為.htm或者.html擴展名的文件，使用瀏覽器打開就可以瀏覽網頁了。3一、常用HTML編輯器2.HbuilderXHBuilder是DCloud推出的一款支持HTML5的Web開發集成開發環境，主體由Java編寫，速度快，通過完整的語法提示和代碼輸入法、代碼塊等能大幅提升HTML、JS、CSS的開發效率。HBuilderX是HBuilder的下一代版本，官方自述為“輕如編輯器、強如IDE的合體版本”，體積小、靈活，而且由我國的前端開發人員編寫，使用方便。4一、常用HTML編輯器AdobeDreamweaverCSSublimeText3漢化版等5二、在Hbuilder中新建網頁三、HTML5的文檔結構7頭部部分主體部分<html>…</html>標簽標記HTML文檔的開始和結束這部分包括標題和其他說明信息。包括在<head>…</head>標簽內，一般來說，位于頭部的內容都不會在網頁內直接顯示這部分包含文本、圖像和鏈接。它包括在<body>…</body>標簽內文檔類型聲明<!DOCTYPEhtml><html><head>

<metacharset="utf-8"> <title></title>

</head> <body> <!--文檔主體，定義頁面顯示的內容--></body></html>標簽HTML標簽是由尖括號包圍的關鍵詞，比如<html>，也叫標記雙標簽：成對出現,比如<body></body>,標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽單標簽：<hr/><br/>單標簽要添加斜杠，例如<br/>（空行）來關閉，不加在一些瀏覽器中也可以。HTML標簽對大小寫不敏感，HTML5.0版本中，W3C明確規定，標簽必須用小寫格式。<!DOCTYPE>聲明DOCTYPE是DocumentType（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的XHTML（或者HTML）的版本。只有確定了一個正確的DOCTYPE，XHTML里的標識和CSS才能正常生效。<!DOCTYPEhtml>------聲明HTML5，大多網站都為html5<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN“-----聲明HTML4.01，有3種DTD（文檔類型定義）聲明可以選擇：過渡的（Transitional）、嚴格的（Strict）和框架的（Frameset）。過渡型標準下，瀏覽器對文檔的解析比較寬松。一些老版本的網站依然延用。HTML文檔頭部標記<head></head><head>與</head>之間的標記只控制頁面的性能而不會顯示在網頁上。一個文檔只能有一對head標記。通常<title></title>、<meta/>、<link/>等標記可以放在head部分。1.<title></title>設置頁面標題2.<meta/>用于定義頁面中的信息，例如文檔的關鍵字、作者及描述等，在頭部可以包含任意數量的<meta/>標記3.<link/>引用外部文件<title></title> <head> <metacharset="utf-8"> <title>網上商城</title> </head><meta/><meta/>用于定義頁面中的信息，基本語法如下：<metacharset=“UTF-8”/>代表世界通用的語言編碼；<metaname=“”

content=“”

/>

name屬性值可以是搜索內容名，如author、keywords、description等，而content屬性對應搜索內容值。便于搜索引擎查找信息和分類信息<meta/><metahttp-equiv=“”

content=“”

/>meta的屬性還可以是http-equiv，使用http-equiv/content參數可設置服務器發送給瀏覽器的http頭部信息，為瀏覽器顯示該頁面提供相關參數.<meta

http-equiv="refresh"content=“2">

表示每隔2秒，自動刷新網頁<metahttp-equiv="refresh"content=“5;url=”>

間隔5秒后，自動刷新到163郵箱登錄頁面<link/>一個頁面允許使用多個<link/>標記引用多個外部文件。例如：<linkrel="stylesheet"href="public/css/liMarquee.css"><linkhref="/Templets/mode3/images/style.css"rel="stylesheet"type="text/css"><linkhref="/Templets/mode3/images/slideshow.css"rel="stylesheet"/>

HTML文檔主體標記<body></body>HTML文檔主體標記<body></body>用于定義頁面所要顯示的內容，除使用腳本添加的特效之外，瀏覽器頁面所顯示的所有文本、圖像、音頻和視頻等元素都必須位于<body></body>標記之間。一個HTML文檔最多使用一對<body></body>標記，這對標記必須在<head></head>標記之后。在body中常用的標記有<h1>~<h6>、<p>、<hr>、<br>、<img>、<div>等。<h1>~<h6>標題標記HTML提供了6個等級的標題，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>依次遞減，為雙標記。<body> <h1>1級標題</h1> <h2>2級標題</h2> <h3>3級標題</h3> <h4>4級標題</h4> <h5>5級標題</h5> <h6>6級標題</h6></body>默認情況下標題文字是加粗左對齊的，并且從<h1>到<h6>字號遞減<p></p>段落標記<p>是HTML文檔中最常見的標記，為雙標記用法：<p>段落內容</p><hr/>水平線標記<br/>換行標記<hr>是創建橫跨網頁水平線的標記，單標記用法：<hr/><br>將某段文本強制換行顯示，單標記用法：<br/>HTML的樹形文檔結構實訓任務<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>第一個HTML頁面</title> </head> <body> <h2style="text

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論