Submit Search
Upload
HTML/CSS/JS基础
•
117 likes
•
15,687 views
jay li
Follow
淘宝前端技术培训第二课,HTML/CSS/JS基础
Read less
Read more
Technology
Design
Report
Share
Report
Share
1 of 66
Download now
Download to read offline
Recommended
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
Recommended
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
Oktopartial Introduction
Oktopartial Introduction
Takeshi AKIMA
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
20151206 hamamatsu handson
20151206 hamamatsu handson
Six Apart
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Toru Kawamura
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
圭輔 大曽根
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Takashi Uemura
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
Html講習会資料
Html講習会資料
竹島 泉
深入剖析浏览器
深入剖析浏览器
jay li
Html / CSS Presentation
Html / CSS Presentation
Shawn Calvert
HTML CSS Basics
HTML CSS Basics
Mai Moustafa
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
Introduction to html
Introduction to html
vikasgaur31
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Sun Technlogies
Responsive Web UI Design
Responsive Web UI Design
jay li
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
JavaScript Programming
JavaScript Programming
Sehwan Noh
Ecmascript
Ecmascript
jay li
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
More Related Content
What's hot
Oktopartial Introduction
Oktopartial Introduction
Takeshi AKIMA
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
20151206 hamamatsu handson
20151206 hamamatsu handson
Six Apart
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Toru Kawamura
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
圭輔 大曽根
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Takashi Uemura
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
Html講習会資料
Html講習会資料
竹島 泉
What's hot
(11)
Oktopartial Introduction
Oktopartial Introduction
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
20151206 hamamatsu handson
20151206 hamamatsu handson
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
jQuery Mobile入門
jQuery Mobile入門
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Html講習会資料
Html講習会資料
Viewers also liked
深入剖析浏览器
深入剖析浏览器
jay li
Html / CSS Presentation
Html / CSS Presentation
Shawn Calvert
HTML CSS Basics
HTML CSS Basics
Mai Moustafa
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
Introduction to html
Introduction to html
vikasgaur31
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Sun Technlogies
Responsive Web UI Design
Responsive Web UI Design
jay li
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
JavaScript Programming
JavaScript Programming
Sehwan Noh
Ecmascript
Ecmascript
jay li
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
Shay Howe
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
Philipp Bosch
Fleet Management System
Fleet Management System
lontongcorp
HyperText Markup Language - HTML
HyperText Markup Language - HTML
Sun Technlogies
Fleet Management Basics
Fleet Management Basics
jcade75834
Learn HTML & CSS From Scratch in 30 Days
Learn HTML & CSS From Scratch in 30 Days
Jonathan Grover
HTML presentation for beginners
HTML presentation for beginners
jeroenvdmeer
Html Ppt
Html Ppt
vijayanit
Análisis crítico de un proyecto
Análisis crítico de un proyecto
Teresa Fernández Diez
Viewers also liked
(20)
深入剖析浏览器
深入剖析浏览器
Html / CSS Presentation
Html / CSS Presentation
HTML CSS Basics
HTML CSS Basics
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
Introduction to html
Introduction to html
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Responsive Web UI Design
Responsive Web UI Design
淘宝前端技术巡礼
淘宝前端技术巡礼
JavaScript Programming
JavaScript Programming
Ecmascript
Ecmascript
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
Fleet Management System
Fleet Management System
HyperText Markup Language - HTML
HyperText Markup Language - HTML
Fleet Management Basics
Fleet Management Basics
Learn HTML & CSS From Scratch in 30 Days
Learn HTML & CSS From Scratch in 30 Days
HTML presentation for beginners
HTML presentation for beginners
Html Ppt
Html Ppt
Análisis crítico de un proyecto
Análisis crítico de un proyecto
Similar to HTML/CSS/JS基础
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Atushi Sugiyama
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
Takashi Endo
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Yuki Minakawa
160412 html001 html概要編
160412 html001 html概要編
elephancube
JavaEE6 First Application #glassfishjp
JavaEE6 First Application #glassfishjp
Satoshi Kubo
Web講座 第2回
Web講座 第2回
nanametown
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
Takayuki Miyauchi
.インストールをやってみよう
.インストールをやってみよう
ohotech
Web Site Optimization for Beginners
Web Site Optimization for Beginners
masaaki komori
Similar to HTML/CSS/JS基础
(10)
_HTML5で組んでみた_
_HTML5で組んでみた_
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
160412 html001 html概要編
160412 html001 html概要編
JavaEE6 First Application #glassfishjp
JavaEE6 First Application #glassfishjp
Web講座 第2回
Web講座 第2回
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
.インストールをやってみよう
.インストールをやってみよう
Web Site Optimization for Beginners
Web Site Optimization for Beginners
More from jay li
犀牛书第六版
犀牛书第六版
jay li
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
Jswebapps
Jswebapps
jay li
F2e security
F2e security
jay li
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
jay li
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
jay li
编码大全 拔赤
编码大全 拔赤
jay li
小控件、大学问
小控件、大学问
jay li
Mobile UI design and Developer
Mobile UI design and Developer
jay li
Javascript autoload
Javascript autoload
jay li
Html5form
Html5form
jay li
Slide
Slide
jay li
Js doc toolkit
Js doc toolkit
jay li
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
jay li
夏之 专题设计
夏之 专题设计
jay li
赤骥 用户研究入门
赤骥 用户研究入门
jay li
2011彩票首页开发实践
2011彩票首页开发实践
jay li
Web设计的画纸深入了解我们的显示器
Web设计的画纸深入了解我们的显示器
jay li
潜意识设计
潜意识设计
jay li
Html&css培训 舒克
Html&css培训 舒克
jay li
More from jay li
(20)
犀牛书第六版
犀牛书第六版
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Jswebapps
Jswebapps
F2e security
F2e security
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
编码大全 拔赤
编码大全 拔赤
小控件、大学问
小控件、大学问
Mobile UI design and Developer
Mobile UI design and Developer
Javascript autoload
Javascript autoload
Html5form
Html5form
Slide
Slide
Js doc toolkit
Js doc toolkit
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
夏之 专题设计
夏之 专题设计
赤骥 用户研究入门
赤骥 用户研究入门
2011彩票首页开发实践
2011彩票首页开发实践
Web设计的画纸深入了解我们的显示器
Web设计的画纸深入了解我们的显示器
潜意识设计
潜意识设计
Html&css培训 舒克
Html&css培训 舒克
Recently uploaded
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Recently uploaded
(9)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
HTML/CSS/JS基础
1.
HTML CSS JS
前端系列培训课程之一 前端基础培训课程 - HTML CSS JS 1 12年4月9日星期⼀一
2.
About me
舒克 淘宝旅行前端工程师 @葫芦居士 www.gourdboy.com 前端基础培训课程 - HTML CSS JS 2 12年4月9日星期⼀一
3.
这不是速成班
http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:f2eks 前端基础培训课程 - HTML CSS JS 3 12年4月9日星期⼀一
4.
前端基础培训课程 - HTML
CSS JS 4 12年4月9日星期⼀一
5.
前端基础培训课程 - HTML
CSS JS 4 12年4月9日星期⼀一
6.
前端基础培训课程 - HTML
CSS JS 4 12年4月9日星期⼀一
7.
只会用工具的前端工程师时代已经过去
前端基础培训课程 - HTML CSS JS 4 12年4月9日星期⼀一
8.
HTML:结构 & 内容
CSS:样式 JS:结构 & 内容 & 样式 & 动画 & 交互 & 画 & 前端基础培训课程 - HTML CSS JS 5 12年4月9日星期⼀一
9.
HTML:结构 & 内容
& 交互 CSS:样式 JS:结构 & 内容 & 样式 & 动画 & 交互 & 画 前端基础培训课程 - HTML CSS JS 5 12年4月9日星期⼀一
10.
HTML:结构 & 内容
& 交互 CSS:样式 & 动画 JS:结构 & 内容 & 样式 & 动画 & 交互 前端基础培训课程 - HTML CSS JS 5 12年4月9日星期⼀一
11.
HTML
Hypertext Markup Language 超文本标记语言 前端基础培训课程 - HTML CSS JS 6 12年4月9日星期⼀一
12.
HTML
• 文档类型声明 doctype • 元素 element • 属性 attribute 前端基础培训课程 - HTML CSS JS 7 12年4月9日星期⼀一
13.
文档类型声明
• html4.0 & xhtml1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> Strict , Transitional , Frameset • html4.0 ~ html5.0 <!DOCTYPE html> 向上向下兼容 前端基础培训课程 - HTML CSS JS 8 12年4月9日星期⼀一
14.
head
• title 页面标题,必需且唯一 • meta <meta charset=”gbk” /> <meta name="description" content="Seo相关的页面介绍文字"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> • link <link rel="shortcut icon" type="image/x-icon" href="http://www.taobao.com/favicon.ico" /> <link rel="stylesheet" href="http://a.tbcdn.cn/??p/global/1.0/global-min.css" /> 前端基础培训课程 - HTML CSS JS 9 12年4月9日星期⼀一
15.
元素
• 块级元素 (block) div , p , h1~h6 , ul , li , dt , dd , dl , form, section , article , nav , aside... 特点:在文档流中默认占据整行的位置 • 行内元素 (inline) span , em , strong , label , a , img , input , button , select , var , del ... 特点: 在文档流中默认一行可以展示多个行内元素 • 嵌套规则 块级元素可以嵌套所有行内元素,除a以外的行内元素不能嵌套块级元素 错误的写法:<span><div>文本内容1</div></span> 前端基础培训课程 - HTML CSS JS 10 12年4月9日星期⼀一
16.
合理使用语意化的标签
增强页面的可访问性 搜索引擎优化(SEO) 前端基础培训课程 - HTML CSS JS 11 12年4月9日星期⼀一
17.
Headling
h1~h6的合理应用对于SEO至关重要 前端基础培训课程 - HTML CSS JS 12 12年4月9日星期⼀一
18.
前端基础培训课程 - HTML
CSS JS 13 12年4月9日星期⼀一
19.
h1
前端基础培训课程 - HTML CSS JS 13 12年4月9日星期⼀一
20.
h1
h2 h2 h2 h2 前端基础培训课程 - HTML CSS JS 13 12年4月9日星期⼀一
21.
前端基础培训课程 - HTML
CSS JS 14 12年4月9日星期⼀一
22.
h1
前端基础培训课程 - HTML CSS JS 14 12年4月9日星期⼀一
23.
h1
h2 h2 h2 前端基础培训课程 - HTML CSS JS 14 12年4月9日星期⼀一
24.
h1
h2 h2 h2 detail页面的h1应该为文章或者宝贝名称 前端基础培训课程 - HTML CSS JS 14 12年4月9日星期⼀一
25.
常用语意化元素
• header , footer • section , article • nav , aside , figure • ol , ul , dl • table , tr , th ,td 前端基础培训课程 - HTML CSS JS 15 12年4月9日星期⼀一
26.
通用属性
• id • class • 不再使用的属性 align , bgcolor , background , color ,bgsound , border ... 前端基础培训课程 - HTML CSS JS 16 12年4月9日星期⼀一
27.
表单元素
• form • label • input , textarea , select • button 前端基础培训课程 - HTML CSS JS 17 12年4月9日星期⼀一
28.
表单元素对交互影响:通用属性
• label标签的应用 用法1:<input id="J_MyChk" type="checkbox" value="" /><label for="J_MyChk">点击我也可以让左边选中</label> 用法2: <label><input type="checkbox" value="" />点击我也可以让左边选中</label> • tabindex • autocomplete • disabled • button的type属性 错误:<button>我是个按钮</button> 正确:<button type="button">我是个按钮</button> 前端基础培训课程 - HTML CSS JS 18 12年4月9日星期⼀一
29.
表单元素对交互影响:HTML5增强表单
input元素type属性的合理应用 以前 : text , password 现在 : number , date , tel , url , search , range , color ... 前端基础培训课程 - HTML CSS JS 19 12年4月9日星期⼀一
30.
不同type值的input在手机端的展示
type="text" type="number" type="email" type="tel" 前端基础培训课程 - HTML CSS JS 20 12年4月9日星期⼀一
31.
增强属性
兼容性:http://www.quirksmode.org/html5/inputs.html • max,min,step <input type="number" min="-10" max="1000" step="5" /> • required 必填项 • autofocus 默认获得输入焦点 • placeholder 占位符 • pattern 对输入控件进行正则校验 前端基础培训课程 - HTML CSS JS 21 12年4月9日星期⼀一
32.
required
+ pattern 不再依赖JS对表单进行输入格式和必填项校验 firefox + chrome全面支持 推荐在小二工具应用中使用 前端基础培训课程 - HTML CSS JS 22 12年4月9日星期⼀一
33.
增强的属性
x-webkit-speech 前端基础培训课程 - HTML CSS JS 23 12年4月9日星期⼀一
34.
IE条件注释
<!--[if lt IE 7]><html class="no-js ie ie6 lte9 lte8 lte7"> <![endif]--> <!--[if IE 7]><html class="no-js ie ie7 lte9 lte8 lte7"> <![endif]--> <!--[if IE 8]><html class="no-js ie ie8 lte9 lte8"> <![endif]--> <!--[if IE 9]><html class="no-js ie ie9 lte9"> <![endif]--> <!--[if gt IE 9]><html class="no-js"><![endif]--> <!--[if !IE]><!--><html><!--<![endif]--> 前端基础培训课程 - HTML CSS JS 24 12年4月9日星期⼀一
35.
CSS
Cascading Style Sheet 层叠样式表 前端基础培训课程 - HTML CSS JS 25 12年4月9日星期⼀一
36.
CSS发展史
CSS1 1996.12成为推荐标准(字体,颜色、空白边) CSS2 1998.5成为推荐标准 (浮动,定位,选择器) CSS2.1 2002年修订(伪类,属性选择器) CSS3 未正式发布但已普遍开始应用 前端基础培训课程 - HTML CSS JS 26 12年4月9日星期⼀一
37.
针对不同设备的CSS代码
media属性 <link media=“screen”/> 样式表内的写法 @media print { #header{border:1px solid #000} } 前端基础培训课程 - HTML CSS JS 27 12年4月9日星期⼀一
38.
可以针对不同的媒介类型书写CSS
前端基础培训课程 - HTML CSS JS 28 12年4月9日星期⼀一
39.
MediaQuery 针对设备的不同状态书写CSS
前端基础培训课程 - HTML CSS JS 29 12年4月9日星期⼀一
40.
层叠的意义
• 浏览器缺省设置 • 外部样式表 • 内部样式表 • 浏览者自定义样式 前端基础培训课程 - HTML CSS JS 30 12年4月9日星期⼀一
41.
CSS语法
• 选择器属性值 selector { property : value } 前端基础培训课程 - HTML CSS JS 31 12年4月9日星期⼀一
42.
选择器 Css Selector
• 元素选择器 h1 • 类选择器 .classname • id选择器 #id • 全局选择器 * • 继承选择器 div p • 选择器分组 h1,h2 • 伪类选择器 :hover • CSS 属性选择器 input[type=“button”] ie6 前端基础培训课程 - HTML CSS JS 32 12年4月9日星期⼀一
43.
选择器的优先级
表格中A、B、C、D分别代表四个等级A为最高级,D为最底级 也可以理解为数学中的千位,百位,十位,个位,D就代表个位 前端基础培训课程 - HTML CSS JS 33 12年4月9日星期⼀一
44.
伪类选择器
• a:link , a:hover , a:active , a:visited • :hover 和 :focus 在表单输入控件中使用 • ::selection 对划选的内容进行样式设置 • :first-child 选择第一个元素 前端基础培训课程 - HTML CSS JS 34 12年4月9日星期⼀一
45.
CSS属性
• 属性继承 Text-related properties that are inherited 文本样式相关的属性会继承 List-related properties that are inherited 列表样式相关属性会继承 The color property is inherited 颜色属性会继承 前端基础培训课程 - HTML CSS JS 35 12年4月9日星期⼀一
46.
常用会继承CSS属性
border-‐collapse, border-‐spacing, caption-‐side, color, cursor, direction, empty-‐cells, font-‐family, font-‐size, font-‐style, font-‐variant, font-‐weight, font, letter-‐spacing, line-‐height, list-‐style-‐image, list-‐style-‐type, list-‐style, orphans, pitch-‐range, pitch, quotes, text-‐align, text-‐indent, text-‐decoration, visibility, white-‐ space, word-‐spacing 前端基础培训课程 - HTML CSS JS 36 12年4月9日星期⼀一
47.
CSS布局
• 表格布局 • float布局 • 负边距布局 http://www.cnblogs.com/mofish/archive/2011/01/18/1938543.html • 圣杯布局 参考:http://www.alistapart.com/articles/holygrail • 绝对定位布局 • inline-block布局法 YUI CssGrid 1.定宽 2.流式布局 前端基础培训课程 - HTML CSS JS 37 12年4月9日星期⼀一
48.
Block Formatting Contexts
块级格式化上下文 • why? 阻止边距折叠 可以包含内部元素的浮动 阻止元素被浮动覆盖 • 触发 float的值不为none。 overflow的值不为visible。 display的值为table-cell, table-caption, inline-block中的任何一个。 position的值不为relative和static。 BFC相关资料:http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts 前端基础培训课程 - HTML CSS JS 38 12年4月9日星期⼀一
49.
一些容易让人困惑的
CSS属性 前端基础培训课程 - HTML CSS JS 39 12年4月9日星期⼀一
50.
position:
• static 默认值 • relative 相对定位 • absolute 绝对定位 • fixed 可视区域定位/屏幕定位 前端基础培训课程 - HTML CSS JS 40 12年4月9日星期⼀一
51.
overflow:
• visible 始终可见 (默认值) • hidden 溢出隐藏 (子元素有绝对定位时慎用) • auto 自动 ,溢出时出现滚动条 • scroll 始终出现滚动条 前端基础培训课程 - HTML CSS JS 41 12年4月9日星期⼀一
52.
vertical-align:
• middle 垂直居中对齐 • top 顶部对齐 • bottom 底部对齐 前端基础培训课程 - HTML CSS JS 42 12年4月9日星期⼀一
53.
display: & visibility:
• display:none • visibility:hidden 前端基础培训课程 - HTML CSS JS 43 12年4月9日星期⼀一
54.
渐进增强的CSS3
前端基础培训课程 - HTML CSS JS 44 12年4月9日星期⼀一
55.
圆角 border-radius
width:100px; width:100px; ff4+ chrome5+ ie9+ height:100px; height:100px; border-radius:5px border-radius:50px; width:100px; ie6-ie8 height:100px; border-radius:5px 前端基础培训课程 - HTML CSS JS 45 12年4月9日星期⼀一
56.
渐变 CSS Gradient
• 学习: http://www.slideshare.net/LeaVerou/mastering-css3-gradients • 工具: http://www.colorzilla.com/gradient-editor/ 前端基础培训课程 - HTML CSS JS 46 12年4月9日星期⼀一
57.
过渡动画 transition
指定元素的某个属性发生变化时产生过渡效果 .has-trans { -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ -moz-transition: all 0.3s ease-out; /* FF4+ */ -ms-transition: all 0.3s ease-out; /* IE10 */ -o-transition: all 0.3s ease-out; /* Opera 10.5+ */ transition: all 0.3s ease-out; } 扩展阅读:http://www.w3cplus.com/content/css3-transition 前端基础培训课程 - HTML CSS JS 47 12年4月9日星期⼀一
58.
动画 animation
@keyframes anim-flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } .anim-flash { animation-name: anim-flash; } 前端基础培训课程 - HTML CSS JS 48 12年4月9日星期⼀一
59.
RGBA
• 增加了透明的支持 border:10px solid rgba(0,0,0,0.5); background:rgba(255,0,0,0.3); 前端基础培训课程 - HTML CSS JS 49 12年4月9日星期⼀一
60.
CSS属性值参考手册
https://developer.mozilla.org/en/CSS_Reference 前端基础培训课程 - HTML CSS JS 50 12年4月9日星期⼀一
61.
CSS sprites
• 优点 1.减少HTTP请求,降低服务器负担 2.文件体积更小 1+1 < 2 • 缺点 1.开发/维护成本高 2.扩展性差 前端基础培训课程 - HTML CSS JS 51 12年4月9日星期⼀一
62.
关于图片-基础知识
• 图形 VS 照片 • 真彩色图像 VS 调色板图像 • 透明 和 alpha通道(RGBA) • 隔行扫描 前端基础培训课程 - HTML CSS JS 52 12年4月9日星期⼀一
63.
关于图片-格式
• gif • png • jpg 前端基础培训课程 - HTML CSS JS 53 12年4月9日星期⼀一
64.
JavaScript
参看 地极PPT 前端基础培训课程 - HTML CSS JS 54 12年4月9日星期⼀一
65.
Q&A
前端基础培训课程 - HTML CSS JS 55 12年4月9日星期⼀一
66.
参考资料
• https://developer.mozilla.org/cn/HTML • https://developer.mozilla.org/en/ CSS_Reference • 《高性能网站建设进阶指南》 - Steve Souders 前端基础培训课程 - HTML CSS JS 56 12年4月9日星期⼀一
Download now