第1讲 HTML css基础.ppt

Internet与网页设计 第一讲 Html语言与css简介 HTML语言简介、简单的利用CSS控制页面 主要内容 1.HTML 语言简介 2.HTML 文档的结构及文字标签简单设置 3.HTML 的缺陷 4.css 概念 5.简单使用CSS控制页面 1.HTML 语言简介 Html 的全称是”超文本标记语言”(Hyper text Markup Language) 是一种标记语言,不需要编译,直接由浏览器执行。 www为万维网world wide web 的缩写， www是建立在html上全球的、交互的、多平台的信息资源网络。 文件扩展名为：.html或.htm Html文件打开方式 使用html编写的文件可以使用很多种类的文本编辑器进行编辑。 Word 写字板 记事本 Frontpage Dreamweaver 利用记事本打开网页 利用记事本打开网页 2.HTML文档的结构及文字标签简单设置 html head title我的第一个网页/title /head body 我的第一个网页 /body /html 2.HTML文档的结构及文字标签简单设置 head元素出现在文档的开头部分。head与/head之间可以嵌入javascript 和css样式等丰富网页的内容。 2.HTML文档的结构及文字标签简单设置 title元素定义HTML文档的标题。title与/title之间的内容将显示在浏览器窗口的标题栏。 2.HTML文档的结构及文字标签简单设置 body元素表明是HTML文档的主体部分。在body与/body之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。 HTML实例（2） 好，咱们来看个例子 例:1-0.html 2.文字标签简单设置 FONT控制的字体、大小和文字。 语法： FONT face=“字体”,size=“文字大小”,color=“颜色值”…/FONT face 控制文字使用的字体 size 控制文字的大小 color 设置文字颜色 实例1-1.html 2.文字标签简单设置 HTML定义了6级标题，1-6级，标题文字随级数增大依次减小。 h1h1的效果/h1 h2h2的效果/h2 h3h3的效果/h3 h4h4的效果/h4 h5h5的效果/h5 h6h6的效果/h6 利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。 align=“left / center / right” 3.HTML 的缺陷 例：第一讲中的1-2.html 如果我们的网页不仅仅是上例中的四个标题，或者说有非常多的标题。如果希望都将标题都变成“红色”，那么对与整个网站来说，工作量势必非常的繁重。 4.css 概念 Css的引入 Css（cascading style sheet）,中文名称是：层叠样式表，用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 例：第一讲中1-3.html文件 看CSS的作用 5.简单使用CSS控制页面 CSS在控制网页时非常的便利，那么如何采用CSS样式进一步控制页面呢？ 5.简单使用CSS控制页面 7.1.行内样式（1-5.html） 7.2.内嵌式（1-6.html） 7.3.链接式（1-7.html） 7.4.导入样式（1-8.html） 通常我们在学习CSS时，应该尽量的参照其他网站来学习CSS，例如：百度 查看百度的CSS代码 5.简单使用CSS控制页面 通过对其他网站的CSS代码的学习，能够对CSS更直观的认识，并且快速的上手。 至于HTML和CSS是如何进一步控制网页元素的，我们将在下面的章节中进行介绍。 ?主讲：张玉彬? * ?主讲：张玉彬? * *