内容教案web前端12htmlcss概要_第1页
内容教案web前端12htmlcss概要_第2页
内容教案web前端12htmlcss概要_第3页
内容教案web前端12htmlcss概要_第4页
内容教案web前端12htmlcss概要_第5页
已阅读5页，还剩93页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、HTML/CSS 概要rank FEX关于我- http:/rank.im- ranklau- - 刘平川，网名 rank；- 8 年开发经验；- 08 年入职百度，现任 FEX 总负责人；- 关注前端技术、电商、及新兴产品；- 喜欢旅行，有摄影爱好；Web 架构概念ClientHTTPHTTPHyperLinkURIURIHTML/DocHTML/Doc重构工程师网页内容 HTML界面交互 JavaScript布局样式 CSS网页结构 HTML业务逻辑 JavaScript前端从重构开始网页内容 HTML布局样式 CSS网页结构 HTMLHTML/CSS 课程目标能够通过所学知识开发 FEX

2、 首页HTMLHyper Text Markup Language- HTML 基础- HTML 布局by gringerbergI. HTML 基础- 了解 HTML 历史- 了解 HTML 作用- 掌握 HTML 语法- 能用 HTML 写基本页面HTML 的历史源于 SGML标准通用标记语言HTML 是子集W3C 成立19941995HTML21996HTML31997HTML41999HTML4.0120082000XHTML1.02001XHTML1.1HTML 5 设计原则时要保守；接收时要开放。 伯斯法则10 年前的 HTML什么是 HTML？- HTML 指的是超文本标记语言

3、Hyper Text Markup Language- HTML 不是一种编程语言，而是一种标记语言- 标记语言是一套标记- HTML 使用标记markup tag来描述网页- HTML 文档包含了 HTML- HTML 文档也叫做 Web 页面及文本内容问HTM 扩展名文件与 HTML 扩展名文件区别by dr_nikHTML 对于网页的作用HTML 是网页的骨架骨架的好坏决定了未来的灵活性First Example<!DOCTYPE html><html><head><title>第一个Web页面</title></head

4、><body><h1 id=“head”>Hello, HTML and CSS!</h1></body></html>HTML 网页结果<HTML></HTML><body></body><h1>Hello, HTML and CSS!</h1><head></head><title>第一个Web页面</title>HTML 文档结构- DOCTYPE了文档类型- 位于- 位于- 位于<html>

5、 与 </html> 描述了文档类型<head> 与 </head> 描述文档头<body> 与 </body> 为可视化网页内容<!DOCTYPE html><html><head><title>第一个Web页面</title></head><body><h1 id=“head”>Hello, HTML and CSS!</h1></body></html><!DOCTYPE><!DO

6、CTYPE>有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确HTML的版本，浏览器就能正确显示网页内容。HTML5<!DOCTYPEhtml>HTML4.01<!DOCTYPE"HTMLPUBLIC"-/W3C/DTDHTML">4.01Transitional/EN"XHTML 1.0<!DOCTYPE"htmlPUBLIC"-/W3C/DTDXHTML1.0Transitional/EN"">HTML- 按闭合类型分类- 闭合- 空HTML 闭合标签-

7、标记由一对尖括号包含一个标记名称组成：<标签>- 大部分标记成对出现：起始标记和结束标记 <标签></标签><a href=“http:/rank.im”> 链接 </a>内容 </标签>链接 </a><标签 属性名=“属性值”><a href=“http:/rank.im”><标签名空格属性名=“属性值”>内容</标签>HTML 空标签- 它只包含属性，并且没有闭合标签<img src=“<标签名空格属性名=“属性值”>HTML 元素HTML和

8、HTML 元素 通常都是描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始与结束，例:<h1>Hello, HTML and CSS!</h1>如果你忘记闭合标签浏览器会容错，有一些规则防止 HTML 解析的 Crash.替换元素<img><input><select><object>- 元素都没有实际的内容- 根据属性决定显示的内容<><iframe><imgsrc=“”/>非替换元素- HTML 大多数元素是不可替换元素。- 他们将内容直接告诉浏览器，将其显示出来。-&l

9、t;div><p><h1>Hello, HTML and CSS!</h1>HTML 注释<! comments is here ><!注释内容>HTML分类- 文档结构- 文本结构- 文字字体- 列表<ul><ol><li><dl><dt><dd><h1> - <h6><p><br><span><bdo><pre><acronym><abbr><

10、;blockquote><q><ins><del><address><tt><i><b><big><small><em><strong><dfn><code><samp><kbd><var><cite><sup><sub><kbd><time><bdo><bdi><article><html>

11、<title><head><body>HTML分类- 表格- 表单- 嵌入- 布局- 其他<div><aside><header><footer><marquee><hr><base><meta><table><thead><tbody><tfoot><tr><td><th><col><colgroup><caption><from>

12、<input><textarea><button><select><optgroup><option><label><fieldset><legend><img><map><area><object><param><audio><><canvas><source><iframe><a>语义化 HTML- 每一个标记都有特定含义- 标记表示结构、内容而非外观、

13、样式by Tomas Caspers<ol><li><h1>Its<li><h1>KIMNow</h1></li>JAGO</h1></li> Ticket</h1></li><li><h1>The</ol>Season看制作页面需要的引用图片<img src=“url”>列表链接<ul class="post-list"><li><a href="/blo

14、g/2014/06/svg-whitespace/"><img src="/img/svg-whitespace/cover.jpg" onerror="this.src='/public/images/tmp/cover.png'"><p>关于 SVG text 元素处理连续空.</p><span class="date">zswang 发布于 19 Jun 2014</span></a></li></ul>

15、;<ul class="github-projects"><li><a href="fis" target=“_blank">FIS</a></li>.</ul><ul class="page-nav page-navi-index"><li><a href=“/“>首页</a></li>.</ul>II. HTML 布局- 掌握使用 div 标签进行页面布局HTML 布局- 掌握使

16、用 div进行页面布局#header#body#aside#footer#header#body#aside#footer#header#body#aside#footer#header#body#aside#footer<!DOCTYPE html><html><head><title> FEX </title></head><body><div id="header">header</div><div id="layout" class=

17、"clearfix"><div id="body"><div id="body-box">body</div></div><div id="aside"><div id="aside-box">aside</div></div></div><div id="footer">footer</div></body></html

18、>HTML5#header#body#aside#footer<!DOCTYPE html><html><head><title> FEX </title></head><body><header id="header"><nav></nav></header><section id="body"></section><aside id="aside"></

19、aside><footer id="footer"></footer></body></html>HTML 奥秘布局 div/section/header/footer/section 列表的运用 ol/ul结构的抽象 header/body/footer语义化的-by Medea Black问写出 HTML感觉说：一辈子怎能只有一种人生模式？<p><cite>感觉</cite>说：<br><q>一辈子怎能只有<em>一种</em>人生模

20、式？</q></p><h1 id=“head”>Hello, HTML and CSS!</h1>每一个 HTML 元素都有默认的样式<!DOCTYPE html><html><head><title>第一个Web页面</title></head><body><h1 id=“head”>Hello, HTML and CSS!</h1></body></html>HTML 和 CSS 是好by SpitMcGeeCS

21、S- CSS 基础- CSS 布局Cascading Style Sheet- 案例解析HTML 对于网页的作用HTML 是网页的骨架骨架的好坏决定了未来的灵活性区分表现与内容HTML 是网页的骨架CSS 决定页面布局与装饰特别是.I. CSS 基础- 了解 CSS 历史- 了解 CSS 作用- 如何使用 CSS- 了解 CSS 语法- 进行基本的样式编码1994W3C 成立CSS1995HTML2Cascading Style Sheet1996HTML3CSS1.0随着 HTML 发展而发展级联样式表。是一种描述性语言，是一种用来表现 HTML 或 XML 等文件样式的计算机语言。HTML

22、419971999HTML4.01CSS2.02000XHTML1.02001XHTML1.1CSS3.0没有 CSS 就是奔<!DOCTYPE html><html><head><title>第一个Web页面</title></head><body><h1 id=“head”>Hello, HTML and CSS!</h1></body></html>这些页面都是相同的 HTML没有 CSS 的奔CSS 文件HTML 文件CSS MagicCSS 禅意花园by

23、 marianna_armata如何使用 CSS- 内联样式 inline style- 嵌入样式 embed style/internal style- 外部样式 external style内联样式- 内联样式就是写在属性里的 CSS。- 以下实例显示出如何改变段落的颜色和左外边距。- 内联样式的优先级最高。- 使用内联样式的方法是在相关的- 样式属性可以包含任何 CSS 属性。中使用样式属性。<p style="color: red; margin-left: 20px"> This is a paragraph</p>嵌入/内部 样式以下实例

24、显示出如何背景颜色和左外边距。- 当单个文件需要特别样式时，就可以使用内部样式表。- 放在 head里的 CSS。<head><style type="text/css"> body background-color: red pmargin-left: 20px</style></head>外部样式- 放在外部的 CSS。- 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。- 使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。<head><link rel="stylesh

25、eet" type="text/css" href="mystyle.css"></head>CSS 语法基础1 个选择器：告诉浏览器样式作用给谁属性：告诉浏览器要改什么属性值：告诉浏览器要怎么改选择器属性名:属性值;selector declaration1; declaration2; . declarationN CSS 语法基础 - 选择器语法一个几乎可选择任何节点的语法示例：选择文档所有 div 标签下的 p 标签里 className(类名) 包含 item 的第一个元素。divpclassName=item:fi

26、rst-child标签关系标签属性伪类(关系选择器1标签选择器1)1,(属性选择器*)(伪类选择器)*CSS 语法基础 - 快捷选择器- ID 选择器- 类名选择器div.red background:red;等价于 divclass=red background:red;div#header background:red; 等价于 divid=header background:red;CSS 语法基础 -选择器通配符- 字符*代表所有集合。下例：div 下所有的第一个子节点div *:first-child background:redCSS 语法基础 - 选择器组- 选择器组用英文逗号,

27、分隔。等价于div, p color:black;div color:black; p color:black;CSS 注释div, p color:black; /* comments is here */*注释内容*/II. CSS 进阶 - 布局 Layout- 了解 CSS 里盒模型概念- 了解 CSS 块元素与行内元素- 了解 CSS 浮动与定位- 能够使用 CSS 进行基本布局盒模型marginborderpaddingheightcontenthewidth标准严格模式 - StrictIE 怪异模式 - Quickmarginightborderwidthpaddingcont

28、ent盒模型块元素/内联元素- 总是在新行上开始；- 高度，行高以及外边距和内边距都可；- 宽度缺省是它的容器的 100%，除非设定一个宽度；- 它可以容纳内联元素和其他块元素。- display: block- 和其他元素都在一行上；- margin，padding 只对水平方向有效；- 宽度就是它的文字或图片的宽度，不可改变；- 内联元素只能容纳文本或者其他内联元素。- display: inline浮动 oat 元素- oat:right- oat:left浮动元素- CSS 的浮动元素可以其他元素向左或向右被推动。- 往往是用于图像排版，但它在布局时一样非常有用。<!DOCTYP

29、E html><html><head><style>img float:right;</style></head><body><p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p><p><img sr

30、c="logocss.gif" width="95" height="84" />This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.</p></body></html>浮动元素- 水平浮动意味着只能左右移动而不能上下移动。- 一个浮动元素会尽量向左或右。- 所有的可能在所有包含元素的左侧或右侧的。- 浮动元- 浮动元后的元

31、素将前的元素将它。受到影响。- 如果图像是右浮动，下面的文本流将环绕在它左边:<head><style>.thumbnail float:left; width:110px; height:90px; margin:5px;</style></head><body><h3>Image Gallery</h3><p>Try resizing the window to see what happens when the images does not have enough room.</p&g

32、t;<img class="thumbnail" src="/images/klematis_small.jpg"><img class="thumbnail" src="/images/klematis2_small.jpg"><img class="thumbnail" src="/images/klematis3_small.jpg"><img class="thumbnail" src="/ima

33、ges/klematis4_small.jpg"><img class="thumbnail" src="/images/klematis_small.jpg"><img class="thumbnail" src="/images/klematis2_small.jpg"><img class="thumbnail" src="/images/klematis3_small.jpg"><img class="

34、;thumbnail" src="/images/klematis4_small.jpg"></body>div2div1div2div1 float:rightdiv1 float:rightdiv2但是.by .:AnnetteB:.div3div2 float:rightdiv1 flt:rightdiv3div1 float:rightdiv2 float:rightdiv3div2 float:rightdiv1 float:right如何清除浮动- 空清除- 父元素清除方法一- 空清除div#clearfix clear:both; height:0;div3div#clearfix clear:both; height:0;div1 float:rightdiv2 float:rightdi

人人文库> 全部分类> 应用文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论