html5+css3(教学PPT)

HTML5+CSS3,1,本课程目标：,能制作界面美观大方、面向企业应用的静态商业网站，不含动态脚本功能。主要内容包括：掌握基本标签以及一些常用的属性链接表单元素的使用，框架CSS3样式表使用Dreamweaver6制作网页以及布局,2,2020/6/8,本章目标：,理解html5思想熟悉html5基本结构理解html5的元素、属性和值及其他的含义熟悉寻找文件的目录命名方法理解html5的语义化,3,2020/6/8,第一章：网页的构造块,1.1html思想当我们打开橱柜，为每一份调料贴上一些标签，如：油、盐、醋等等，我们就很容易认出它们；编写html跟这个贴标签的过程类似，不同的是编写html并非向调料上贴标签，而是为网页内容打上能够描述他们的标签。这些标签名称不需要我们自己创建。html描述的不是内容，而是看起来是什么样。如我们在为调料贴名字的时候是油、盐等，我们贴的是物质本身的名称，但在html里就是油腻的液体、白色的小颗粒状粉末。,4,2020/6/8,1.2基本的html结构,5,2020/6/8,1.3标签：元素、属性、值及其他1、元素元素就是描述网页不同部分的小标签，title（标题）、p（段落）、nav（包含一组链接）等等都是元素，有的元素包含一个或多个属性，属性用来进一步描述元素。2、属性属性包含了元素的额外信息。百度首页上述中的href就是a的一个属性。3、父元素和子元素如果一个元素包含另一个元素，他就是被包含元素的的父元素，被包含元素称为子元素。这是一个段落上述article元素就是p元素的父元素，p是article的子元素,6,2020/6/8,1.4网页的文本内容元素中包含的文本是网页最基本成分，浏览器呈现HTML时，会把文本中的多个空格或制表符压缩成单个空格，把回车符或换行符转换成单个空格，或者将他们一起忽略。Unicode极大的缓解了特殊字符问题，用UTF-8对页面进行编码并用同样的编码保存HTML文件已成为一种标准做法。,7,2020/6/8,1.5链接、图像及其他分文本内容在一个网页中，我们通常可以看到的不只是文字，还有图像和一些可以点击的链接，外部文件（如图像）实际上并没有放在html文件中，而是单独保存的，页面只是简单地引用了这些文件。,8,2020/6/8,1.6文件名和文件夹1、文件名采用小写字母：mywebpage.html2、使用正确的扩展名：.htm或.html3、用短横线分割单词:-,9,2020/6/8,1.7URLURL（UniformResourceLocator,统一资源定位符）是地址的别名。它包含关于文件存储位置和浏览器应如何处理它的信息。互联网上的每一个文件都有唯一的URL。URL的第一个部分称为模式。模式告诉浏览器如何处理需要打开的文件。最常见的模式是HTTP。URL的第二部分是文件所在的主机的名称，紧接着是路径。例如：,10,2020/6/8,1.8html：有含义的标记html描述的是网页内容的含义，既语义。语义化的html指那些使用最恰当的html元素进行标记的内容，在标记的过程中并不关心内容显示。语义化html的原因：1、提升访问性和互操作性（内容对于借助辅助技术的残障访问者是可访问的，同时对于台式机、手机、平板电脑及其他设备上的浏览器都是可访问的。2、提升搜索引擎优化的效果。3、使维护代码和添加样式变得容易。4、使代码更少，页面加载更快。,11,2020/6/8,1.9浏览器对网页的默认显示效果每个web浏览器都有一个内置的css文件（一张样式表），它决定了每个HTML元素的默认样式，可以自己创建css