天天看點

Web學習第一天——HTML簡介及常用标簽(文本标簽)一、 HTML簡介二、HTML中的常用标簽三、源代碼四、運作效果

第一天 HTML簡介及常用标簽(文本标簽)

  • 一、 HTML簡介
    • 1. 什麼是HTML
    • 2. HTML的編寫工具
    • 3. HTML的文檔結構
    • 4. W3C标準
  • 二、HTML中的常用标簽
    • (一). head标簽
      • 1. head中的常用标簽
        • ①meat标簽
        • ② title标簽
        • ③link标簽
        • ④script标簽(網頁的行為)
        • ⑤style标簽(網頁的表現)
    • (二). body标簽
      • 1. body中的常用标簽(文本标簽)
        • ① 段落标簽
        • ② 标題标簽
        • ③ 格式化标簽
        • ④ 其它标簽
  • 三、源代碼
  • 四、運作效果

一、 HTML簡介

1. 什麼是HTML

HTML:超文本标記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于建立網頁的标準标記語言。 由浏覽器負責解析執行

超文本: 指不僅僅可以表示文本,還超出了文本的範圍,還可以顯示圖檔,音頻和視訊,超連結等等。

2. HTML的編寫工具

記事本(不推薦,開發效率低)

Notepad++

HBuilder(推薦,開發效率高)

3. HTML的文檔結構

根标簽

<html></html>

告訴浏覽器從這裡開始解析

頭部标簽

<head></head>

浏覽器和搜尋引擎需要的相關資訊

主體标簽

<body></body>

顯示内容

根标簽下有且僅有頭部與主體兩個标簽

以下是符合**“W3C”标準**的HTML文檔結構

Web學習第一天——HTML簡介及常用标簽(文本标簽)一、 HTML簡介二、HTML中的常用标簽三、源代碼四、運作效果

4. W3C标準

網際網路聯盟(外語縮寫:W3C)标準不是某一個标準,而是一系列标準的集合。網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行為(Behavior)

結構的标準語言是HTML,XML

表現的标準語言是CSS

行為的标準語言是ECMAScript

二、HTML中的常用标簽

(一). head标簽

head标簽内的内容主要提供給浏覽器和搜尋引擎使用,不顯示在浏覽器中,使用者無法看見!

1. head中的常用标簽

①meat标簽

<meat charset="utf-8" />編碼格式标簽,告訴浏覽器網頁的編碼格式(不告訴浏覽器編碼格式,有可能導緻亂碼)
<meat  name="keywords" content=“北京尚學堂,···”/> “keywords”關鍵字标簽,搜尋引擎檢索網頁時用到。各關鍵字以逗号分割。
<meta name="description" content="淘寶網- 亞洲較大的網上交易平台···"/>“description”網頁描述标簽。一般用來描述網頁或者網站内容!
           

② title标簽

顯示網頁标題

<title>我的第一個網頁</title>網頁标題标簽   用于顯示目前網頁名稱,顯示在浏覽器标簽欄
           
Web學習第一天——HTML簡介及常用标簽(文本标簽)一、 HTML簡介二、HTML中的常用标簽三、源代碼四、運作效果

③link标簽

連結外部資源(包括網上資源和本地資源)

一般連結CSS檔案和Script檔案,以及項目中的其它資源

<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon">
将百度網頁标題的圖示拿來作為自己網頁标題圖示(連結外部資源)
<link rel="shortcut icon" href="img/favicon.ico" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon">
使用img檔案夾下的favicon.ico檔案作為自己網頁标題圖示(連結内部資源)
           

④script标簽(網頁的行為)

網頁與人機互動或彈出效果等的實作

<script>
		function test(){
			alert("你好,世界")
		}
</script>
彈窗效果
           

⑤style标簽(網頁的表現)

調控網頁的顯示樣式,讓網頁更美觀

<style>
		body{background: blue;}
</style>
将網頁背景設定為藍色
           

(二). body标簽

body标簽中的内容是浏覽器顯示給使用者看的。

1. body中的常用标簽(文本标簽)

① 段落标簽

常用于标記整段文字

<p>這是一個段落 </p> 特點是獨占一行,一行放不下,自動換行 ,預設字型大小
           

② 标題标簽

常用于文章标題

<h1></h1>·····<h6></h6>特點:獨占一行,字型加粗,字型由h1最大到h6最小
           

③ 格式化标簽

加粗、傾斜、上标、下标、預格式文本等等

<b>文字</b>加粗  (現推薦使用<strong>文字</strong>效果一樣)
<i>文字</i>傾斜  (現推薦使用<em>文字</em>效果一樣)
<sub>文字</sub>上标
<sup>文字</sup>下标
<del>文字</del>删除線
<ins>文字</ins>下劃線(常與del标簽一起使用,表示更正)
<pre>代碼</pre>預格式文本(常用于顯示計算機代碼)
           

④ 其它标簽

<br />換行
&nbsp 空格
           

三、源代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的第一個網頁</title>
		<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
		<link rel="shortcut icon" href="img/favicon.ico" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
		<meta name = "keywords" content = "谷歌一下"/>
	</head>
	
	<script>
		function test(){
			alert("你好,世界")
		}
	</script>
	
	<style>
		body{background: beige;}
	</style>
	
	<body onload="test()">
		<h1><b>天道酬勤</b>(一級标簽)</h1>
		
		<h2>雙氧水分解反應(二級标簽)</h2>
		<p>
			2H<sub>2</sub>O<sub>2</sub>=2H<sub>2</sub>O+O<sub>2</sub>
		</p>
		
		<h3>平方差公式(三級标簽)</h3>
		<p>
			<del>(a-b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup></del><br />
			<ins>(a-b)<sup>2</sup>=a<sup>2</sup>-2ab+b<sup>2</sup></ins>
		</p>
		
		<h4>無題<sub>&nbsp;&nbsp;李商隐&nbsp;&nbsp;</sub>(四級标簽)</h4>
		<p>
			<b>相見時難别亦難,<i>東風無力百花殘。</i></b> <br />
			 <strong>春蠶到死絲方盡,<em>蠟炬成灰淚始幹。</em></strong> <br />
			 <b>曉鏡但愁雲鬓改,<em>夜吟應覺月光寒。</em></b> <br />
			 <strong>蓬山此去無多路,<i>青鳥殷勤為探看。</i></strong> <br />
		</p>
		
		<h5>Java Code(五級标題)</h5>
		<p>
			<pre>
				public class HelloWorld{
					public static void main(String[] args){
						System.out.println("Hello World!");
					}
				}
			</pre>
		</p>
	</body>
</html>
           

四、運作效果

Web學習第一天——HTML簡介及常用标簽(文本标簽)一、 HTML簡介二、HTML中的常用标簽三、源代碼四、運作效果

繼續閱讀