SlideShare a Scribd company logo
1 of 15
HTML 培训 -cscw 培训讲座系列 主讲人:方阳
第一课  HTML 概况与基本元素介绍 ,[object Object]
Html 基础知识 ,[object Object],[object Object],[object Object],[object Object]
HTML= 网页 ,[object Object],[object Object],[object Object]
HTML 头部 head 身体 body <html> <head> <meta> <title></title> </head> <body> Html 正文 </body> </html>
 
头部 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],  头元素包含关于文档的概要信息,也称为元信息( meta-information )。 Meta  意为“关于某方面的信息”。 可以这么说,元数据( meta-data )是关于数据的信息,而元信息是关于信息的信息。
<!DOCTYPE> ,[object Object],<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> 在上面的声明中,声明了文档的根元素是  html ,它在公共标识符被定义为  &quot;-//W3C//DTD XHTML 1.0 Transitional//EN &quot;  的  DTD   中进行了定义。浏览器将明白如何寻找匹配此公共标识符的  DTD 。如果找不到,浏览器将使用公共标识符后面的  URL  作为寻找  DTD  的位置。 DTD(Document Type Definition)  是一套关于标记符的语法规则。
编码 ,[object Object],<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot;>  使用 UTF8 编码 ( 国际化编码 ) <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /> 使用中文 gb2312 编码 <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=gb2312&quot; /> 下面这些编码方式 , 比如 : 中文  GBK , 繁体中文  Big5 , 日文  EUC-JP , 韩文  EUC-KR  等 , 每种语言的编码方式是不同的 , 所以需要使用 charset 为网页提供了一种编码方式 , 否则页面很可能出现乱码 . UTF-8  是没有国家的编码 , 也就是独立于任何一种语言 , 任何语言都可以使用
Html 最基本单位 - 元素 ,[object Object],[object Object],[object Object],[object Object],<sentence>   This is a very sample element.   </sentence> 开始标记 内容 结束标记
创建简单的 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]
超链接 锚 A (anchor) 元素 ,[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]

More Related Content

Viewers also liked

DIY 21st Century Marketing for NAJDSC 2015 Small School Track
DIY 21st Century Marketing for NAJDSC 2015 Small School TrackDIY 21st Century Marketing for NAJDSC 2015 Small School Track
DIY 21st Century Marketing for NAJDSC 2015 Small School TrackJon Mitzmacher
 
外联部总结
外联部总结外联部总结
外联部总结fanggesun
 
从广工男生看大学生形象
从广工男生看大学生形象从广工男生看大学生形象
从广工男生看大学生形象fanggesun
 
Media evaluation
Media evaluationMedia evaluation
Media evaluationLiam Hicks
 
One Ning To Rule Them All
One Ning To Rule Them AllOne Ning To Rule Them All
One Ning To Rule Them AllJon Mitzmacher
 
Apresentação de Campanha - Entec 2015
Apresentação de Campanha - Entec 2015Apresentação de Campanha - Entec 2015
Apresentação de Campanha - Entec 2015André Castro Barroso
 
Mandy McGuire Visits the Museum
Mandy McGuire Visits the MuseumMandy McGuire Visits the Museum
Mandy McGuire Visits the Museumanneelliot
 
Manajemen dalam keperawatan posted by
Manajemen dalam keperawatan posted byManajemen dalam keperawatan posted by
Manajemen dalam keperawatan posted byAndWar Syoehada'
 
Get Social in 2011: Social Media Marketing tips & trends
Get Social in 2011: Social Media Marketing tips & trendsGet Social in 2011: Social Media Marketing tips & trends
Get Social in 2011: Social Media Marketing tips & trendsaubreeismyname
 
Marketing the 21st Century Learning Aspects of Jewish Day School
Marketing the 21st Century Learning Aspects of Jewish Day SchoolMarketing the 21st Century Learning Aspects of Jewish Day School
Marketing the 21st Century Learning Aspects of Jewish Day SchoolJon Mitzmacher
 
Communication barriers l2
Communication barriers l2Communication barriers l2
Communication barriers l2Sebastian Yu
 
ABC of Capital Gains in India
ABC of Capital Gains in IndiaABC of Capital Gains in India
ABC of Capital Gains in IndiaAmeet Patel
 
Taxation Issues w.r.t. Demonetisation
Taxation Issues w.r.t. Demonetisation Taxation Issues w.r.t. Demonetisation
Taxation Issues w.r.t. Demonetisation Ameet Patel
 

Viewers also liked (13)

DIY 21st Century Marketing for NAJDSC 2015 Small School Track
DIY 21st Century Marketing for NAJDSC 2015 Small School TrackDIY 21st Century Marketing for NAJDSC 2015 Small School Track
DIY 21st Century Marketing for NAJDSC 2015 Small School Track
 
外联部总结
外联部总结外联部总结
外联部总结
 
从广工男生看大学生形象
从广工男生看大学生形象从广工男生看大学生形象
从广工男生看大学生形象
 
Media evaluation
Media evaluationMedia evaluation
Media evaluation
 
One Ning To Rule Them All
One Ning To Rule Them AllOne Ning To Rule Them All
One Ning To Rule Them All
 
Apresentação de Campanha - Entec 2015
Apresentação de Campanha - Entec 2015Apresentação de Campanha - Entec 2015
Apresentação de Campanha - Entec 2015
 
Mandy McGuire Visits the Museum
Mandy McGuire Visits the MuseumMandy McGuire Visits the Museum
Mandy McGuire Visits the Museum
 
Manajemen dalam keperawatan posted by
Manajemen dalam keperawatan posted byManajemen dalam keperawatan posted by
Manajemen dalam keperawatan posted by
 
Get Social in 2011: Social Media Marketing tips & trends
Get Social in 2011: Social Media Marketing tips & trendsGet Social in 2011: Social Media Marketing tips & trends
Get Social in 2011: Social Media Marketing tips & trends
 
Marketing the 21st Century Learning Aspects of Jewish Day School
Marketing the 21st Century Learning Aspects of Jewish Day SchoolMarketing the 21st Century Learning Aspects of Jewish Day School
Marketing the 21st Century Learning Aspects of Jewish Day School
 
Communication barriers l2
Communication barriers l2Communication barriers l2
Communication barriers l2
 
ABC of Capital Gains in India
ABC of Capital Gains in IndiaABC of Capital Gains in India
ABC of Capital Gains in India
 
Taxation Issues w.r.t. Demonetisation
Taxation Issues w.r.t. Demonetisation Taxation Issues w.r.t. Demonetisation
Taxation Issues w.r.t. Demonetisation
 

Similar to Html培训

淘宝新首页开发实践
淘宝新首页开发实践淘宝新首页开发实践
淘宝新首页开发实践chencheng 云谦
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScriptSanji Zhang
 
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训给聚划算后端开发的前端培训
给聚划算后端开发的前端培训j5726
 
HTML CSS Javascript 语法手册
HTML CSS Javascript 语法手册HTML CSS Javascript 语法手册
HTML CSS Javascript 语法手册Ying wei (Joe) Chou
 
揭秘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
 
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練Joseph Chiang
 
HTML&CSS簡單介紹
HTML&CSS簡單介紹HTML&CSS簡單介紹
HTML&CSS簡單介紹recast203
 
《网页设计与制作》第一章:网页制作基础
《网页设计与制作》第一章:网页制作基础《网页设计与制作》第一章:网页制作基础
《网页设计与制作》第一章:网页制作基础greentask
 
网页制作基础
网页制作基础网页制作基础
网页制作基础loo2k
 
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
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
Inside browser
Inside browserInside browser
Inside browsermysqlops
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介peterju
 

Similar to Html培训 (20)

Html&css基础
Html&css基础Html&css基础
Html&css基础
 
淘宝新首页开发实践
淘宝新首页开发实践淘宝新首页开发实践
淘宝新首页开发实践
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScript
 
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训给聚划算后端开发的前端培训
给聚划算后端开发的前端培训
 
HTML CSS Javascript 语法手册
HTML CSS Javascript 语法手册HTML CSS Javascript 语法手册
HTML CSS Javascript 语法手册
 
揭秘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
 
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
 
HTML&CSS簡單介紹
HTML&CSS簡單介紹HTML&CSS簡單介紹
HTML&CSS簡單介紹
 
Div+css培训
Div+css培训Div+css培训
Div+css培训
 
《网页设计与制作》第一章:网页制作基础
《网页设计与制作》第一章:网页制作基础《网页设计与制作》第一章:网页制作基础
《网页设计与制作》第一章:网页制作基础
 
Js dom
Js domJs dom
Js dom
 
网页制作基础
网页制作基础网页制作基础
网页制作基础
 
Div+css布局
Div+css布局Div+css布局
Div+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.5
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Inside browser
Inside browserInside browser
Inside browser
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介
 

Recently uploaded

日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单jakepaige317
 
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制kathrynalvarez364
 
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书kathrynalvarez364
 
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书kathrynalvarez364
 
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制bairnshajjes
 
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...黑客 接单【TG/微信qoqoqdqd】
 

Recently uploaded (6)

日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
 
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
哪里可以购买日本神奈川县立保健福祉大学学位记/录取通知书可以制作吗/补办马来西亚大学文凭/CIA证书定制
 
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
 
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
 
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
 
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
 

Html培训

  • 1. HTML 培训 -cscw 培训讲座系列 主讲人:方阳
  • 2.
  • 3.
  • 4.
  • 5. HTML 头部 head 身体 body <html> <head> <meta> <title></title> </head> <body> Html 正文 </body> </html>
  • 6.  
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

Editor's Notes

  1. 之所以称为为超文本,是因为在网页文本中包含了“超链接” ,所谓超级链接,就是一种 URL 指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是 HTML 获得广泛应用的最重要的原因之一。 标记语言是一种指示文档中各部分显示规则的方法,它主要关注文档的结构而非文档的外观。
  2. HTML 网页头部对网站来说起着相当重要的作用,因此很有必要了解一下网页头部的规范写法及各标签的含义