html5基礎一

06-08

html5基礎一

網站

網站是通過網頁以文字、圖片、聲音、視頻、交易等形式體現出來的信息集合體。
網站是由網頁構成，網頁是html文件
網頁的內容是由html標記實現
要想做網頁就得學習html標記。

html簡介

HTML：Hyper Text Markup Language（超文本標記語言）

HTML5的優勢

世界知名瀏覽器廠商對HTML5的支持
微軟
Google
蘋果
Opera
Mozilla
市場的需求
跨平台

編輯工具

記事本
dreamweaver
ultraedit
sublime等
推薦sublime

創建html文件

右鍵--新建文本文檔--重命名--將後綴名txt改為html

HTML基本結構

DOCTYPE聲明告訴你瀏覽器使用什麼規範
<HTML>…</HTML>標籤標記著 HTML 文檔的開始和結尾
<head>...</head>網站頭部
<body>...</body>主體內容部分
<title>...</title>標題標籤

<meta>標籤

<!DOCTYPE html><head> <meta charset="UTF-8" /> <meta name="keywords" content="關鍵字" /> <meta name="description" content="內容描述……" /> <title>Document</title></head><body> </body></html>

「UTF-8」網頁字元編碼
「keywords」搜索關鍵字
"description" 內容描述

標題標籤

<!DOCTYPE html><head> <meta charset="UTF-8" /> <title>Document</title></head><body> <h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6></body></html>

特點：黑體；自動換行；從大到小

段落標籤

<h1>北京歡迎你</h1><p>北京歡迎你，有夢想誰都了不起！</p><p>有勇氣就會有奇蹟。</p>

特點：和上下文有空白行，自動換行

換行標籤

<h1>北京歡迎你</h1><p> 北京歡迎你，有夢想誰都了不起！<br /> 有勇氣就會有奇蹟。<br /> 北京歡迎你，為你開天闢地<br /> ……</p>

字體樣式標籤

<strong>徐志摩人物簡介</strong><p> <em>1910</em>年入杭州學堂<br/> <em>1918</em>年赴美國克拉大學學習銀行學<br/> ……</p>

加粗：<strong>…</strong> ;<b>...</b>
斜體：<em>…</em> ;<i>...</i>
文字：<font color=「顏色」 size=「字型大小」> 文字 </font>

注釋和特殊符號

空格 " "
大於號(>) ">"
小於號(<) "<"
引號(") """
版權符號@ "©"

練習製作李清照簡介

需求說明

標題用標題標籤，人名加粗顯示，時間斜體顯示，並製作頁面版權部分