SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
羅世豪
Outline ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML & CSS ,[object Object],[object Object]
HTML 的基本構成 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML 的基本構成 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML 的基本構成 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
常用的 HTML 標籤 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
常用的 HTML 標籤 ,[object Object],[object Object],[object Object],[object Object],[object Object]
常用的 HTML 標籤 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
常用的 HTML 標籤 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
常用的 HTML 標籤 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
常用的 HTML 標籤 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
常用的 HTML 標籤 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
常用的 HTML 標籤 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
常用的 HTML 標籤 ,[object Object],[object Object],[object Object],<div  id =“content&quot; >   <p> 遊戲名稱叫做  <span  class =“game“ > 風林火山 </span> </p>   </div>
HTML 的巢狀結構與階層性 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],巢狀結構正確示範 <html>  <head> <title> 天空部落 </title> </head> <body>  <div>   <a href=“http://blog.yam.com”> 天空部落的連結   </a> </div> </body>  </html>
HTML 的巢狀結構與階層性 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What is CSS? ,[object Object],[object Object],[object Object],[object Object]
Why CSS? ,[object Object],[object Object],[object Object],[object Object]
CSS 基本語法 body { color: black; background: white; } 多種宣告間以分號隔開 宣告( declaration block ) 決定展現的樣式 特性 (property) 值 (value) 選取符( selector ) 決定這個規則所影響的範圍
常見的 CSS 使用方式
[object Object]

Mais conteúdo relacionado

Semelhante a Html & Css

Chicago EXPO Creating a Pure CSS Template in Joomla 1.5
Chicago EXPO Creating a Pure CSS Template in Joomla 1.5Chicago EXPO Creating a Pure CSS Template in Joomla 1.5
Chicago EXPO Creating a Pure CSS Template in Joomla 1.5compassdesign
 
Struts1+ hibernate3
Struts1+ hibernate3Struts1+ hibernate3
Struts1+ hibernate3edanwade
 
揭秘Html5和Css3
揭秘Html5和Css3揭秘Html5和Css3
揭秘Html5和Css3Adam Lu
 
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍裕波 周
 
Html5css3 go.yeefe.com
Html5css3 go.yeefe.comHtml5css3 go.yeefe.com
Html5css3 go.yeefe.comtellyeefe
 
Leading with Relationship
Leading with RelationshipLeading with Relationship
Leading with RelationshipRod Brooks
 
淘宝新首页开发实践
淘宝新首页开发实践淘宝新首页开发实践
淘宝新首页开发实践chencheng 云谦
 
Denver CMS Expo Creating CSS template
Denver CMS Expo Creating CSS templateDenver CMS Expo Creating CSS template
Denver CMS Expo Creating CSS templatecompassdesign
 
Creating CSS Template with Barrie North
Creating CSS Template with Barrie NorthCreating CSS Template with Barrie North
Creating CSS Template with Barrie NorthJohn Coonen
 
Overview Of HTML
Overview Of HTMLOverview Of HTML
Overview Of HTMLxiaomimum
 
Developer Student Clubs NUK - Web Fundamentals
Developer Student Clubs NUK - Web FundamentalsDeveloper Student Clubs NUK - Web Fundamentals
Developer Student Clubs NUK - Web FundamentalsJiaxuan Lin
 
20100116 02 同一カテゴリの投稿を一覧表示する
20100116 02 同一カテゴリの投稿を一覧表示する20100116 02 同一カテゴリの投稿を一覧表示する
20100116 02 同一カテゴリの投稿を一覧表示するTakashi Uemura
 
混聚开发模式与应用 兼谈Web2.0时代的数字生活与学习
混聚开发模式与应用 兼谈Web2.0时代的数字生活与学习混聚开发模式与应用 兼谈Web2.0时代的数字生活与学习
混聚开发模式与应用 兼谈Web2.0时代的数字生活与学习Lester,Gaofeng Ruan
 
十步学会用Css+Div建站
十步学会用Css+Div建站十步学会用Css+Div建站
十步学会用Css+Div建站yiditushe
 
给初学者的Html5教程
给初学者的Html5教程给初学者的Html5教程
给初学者的Html5教程Zhang Xiaoxue
 

Semelhante a Html & Css (20)

Chicago EXPO Creating a Pure CSS Template in Joomla 1.5
Chicago EXPO Creating a Pure CSS Template in Joomla 1.5Chicago EXPO Creating a Pure CSS Template in Joomla 1.5
Chicago EXPO Creating a Pure CSS Template in Joomla 1.5
 
Struts1+ hibernate3
Struts1+ hibernate3Struts1+ hibernate3
Struts1+ hibernate3
 
Html1
Html1Html1
Html1
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html Layout
Html LayoutHtml Layout
Html Layout
 
Html Layouts
Html LayoutsHtml Layouts
Html Layouts
 
揭秘Html5和Css3
揭秘Html5和Css3揭秘Html5和Css3
揭秘Html5和Css3
 
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
 
Html5css3 go.yeefe.com
Html5css3 go.yeefe.comHtml5css3 go.yeefe.com
Html5css3 go.yeefe.com
 
Leading with Relationship
Leading with RelationshipLeading with Relationship
Leading with Relationship
 
淘宝新首页开发实践
淘宝新首页开发实践淘宝新首页开发实践
淘宝新首页开发实践
 
Denver CMS Expo Creating CSS template
Denver CMS Expo Creating CSS templateDenver CMS Expo Creating CSS template
Denver CMS Expo Creating CSS template
 
Creating CSS Template with Barrie North
Creating CSS Template with Barrie NorthCreating CSS Template with Barrie North
Creating CSS Template with Barrie North
 
Html培训
Html培训Html培训
Html培训
 
Overview Of HTML
Overview Of HTMLOverview Of HTML
Overview Of HTML
 
Developer Student Clubs NUK - Web Fundamentals
Developer Student Clubs NUK - Web FundamentalsDeveloper Student Clubs NUK - Web Fundamentals
Developer Student Clubs NUK - Web Fundamentals
 
20100116 02 同一カテゴリの投稿を一覧表示する
20100116 02 同一カテゴリの投稿を一覧表示する20100116 02 同一カテゴリの投稿を一覧表示する
20100116 02 同一カテゴリの投稿を一覧表示する
 
混聚开发模式与应用 兼谈Web2.0时代的数字生活与学习
混聚开发模式与应用 兼谈Web2.0时代的数字生活与学习混聚开发模式与应用 兼谈Web2.0时代的数字生活与学习
混聚开发模式与应用 兼谈Web2.0时代的数字生活与学习
 
十步学会用Css+Div建站
十步学会用Css+Div建站十步学会用Css+Div建站
十步学会用Css+Div建站
 
给初学者的Html5教程
给初学者的Html5教程给初学者的Html5教程
给初学者的Html5教程
 

Último

SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven designJamie (Taka) Wang
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_patternJamie (Taka) Wang
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLPJamie (Taka) Wang
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 

Último (15)

SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
Entities in DCPS (DDS)
Entities in DCPS (DDS)Entities in DCPS (DDS)
Entities in DCPS (DDS)
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven design
 
20161027 - edge part2
20161027 - edge part220161027 - edge part2
20161027 - edge part2
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
20200323 - AI Intro
20200323 - AI Intro20200323 - AI Intro
20200323 - AI Intro
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_pattern
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
20200226 - AI Overview
20200226 - AI Overview20200226 - AI Overview
20200226 - AI Overview
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
 
20151111 - IoT Sync Up
20151111 - IoT Sync Up20151111 - IoT Sync Up
20151111 - IoT Sync Up
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 

Html & Css

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20. CSS 基本語法 body { color: black; background: white; } 多種宣告間以分號隔開 宣告( declaration block ) 決定展現的樣式 特性 (property) 值 (value) 選取符( selector ) 決定這個規則所影響的範圍
  • 22.