Web前端开发 课件 1.3 基本语法

第一章基础概念1.3基本语法目录网页基本框架代码解读网页代码特点分析网页上内容放置方法美化网页内容的途径CSS语法规则CSS在网页中的不同应用方式网页框架代码解读声明部分页面部分头部主体编码格式网页标题浏览器空白部分显示的内容放在这个标记之间代码特点标记在尖括号“<>”中，紧挨着“<”的单词叫“标记名称”成对出现的标记，叫做双标记。前面是标记开始，后面是结束，后面在前面基础上加“/”。一般表示容器。有的标记，后面无结束标记，叫单标记，一般表示功能标记后面空格隔开的是标记的属性，表示标记的特点，包含属性名和属性值，用等号连接，多个属性用空格隔开。代码特点

<柜子

材质=“木头”

颜色=“白色”>上衣<隔板

材质=“木头”>裤子

</柜子>生活案例帮助理解（麻烦配图）代码特点4.有的标记无<>，而是在前面增加!或&等符号，一般表示特殊功能。“!”：

声明类型，如<!DOCTYPEhtml>向浏览器声明“文档为超文本标记文本”<!---->：声明注释，可以换行“&”：

声明特殊字符，如“ ”表示空格等5.单词不区分大小写。为了增加程序的可读性以及编码效率，一般选用小写，DOCTYPE习惯性大写放置内容1.把标题放在头部的title中2.把正文内容放在主体中3.给正文内容分段4.给正文内容换行代码及效果如右图所示<p></p>表示分段<br>表示换行改变外观的方式现代企业中通常选用标记改变属性改变样式改变改变网页内容外观目的：是为了让网页内容重点突出，看起来赏心悦目。不利于代码优化、复用和团队协助认识样式（CSS）CSS：指层叠样式表(CascadingStyleSheets)，是一种描述HTML文档样式的语言CSS可控制HTML元素显示的外观，使用外部样式表可以很好的解决内容与表现分离的问题，方便团队协作和代码复用，大大提升开发效率。一个站点有可能会有多个样式表文件为站点结构清晰，在站点规划时一般将CSS文件保存在单独文件夹中外部样式的应用方法请参看本节操作演示视频CSS语法规则分析语法格式：选择器名称{属性名:属性值;属性名:属性值;……}选择器名称属性名属性值表示赋值表示结束表示大括号中的系列属性的作用范围标记选择器：网页中所有该标记范围类选择器：用class属性调用的标记范围id选择器：id属性调用的标记范围CSS语法规则分析多个样式可以在同一行也可以在不同行两种写法无优劣之分，编程者可不拘泥于形式，根据编程习惯及样式内容具体分析，也可以两种书写方法混合使用，只要保证代码结构清晰即可。语法格式写法：选择器名称{

属性名:属性值;

……}语法格式：选择器名称{属性名:属性值;属性名:属性值;……}CSS注释“/*解释说明内容，可以换行*/”表示为什么红色背景白色文字的样式没有在网页中起作用？建立CSS与网页之间的联系麻烦用图形、动作表示格式：<link

href="地址"

type="text/css"

rel="stylesheet"/>建立CSS与网页之间的联系文档与外部资源的关系可在head区域多次出现表示路径即要引用内容的地址表示被链接文档类型表示引用的是css纯文本文件表示网页与被链接文档之间的关系表示文档是样式表除link引用外也可用@import引用，可结合相应内容的操作演示视频，加深对本节知识的理解操作演示视频CSS在网页中的其它应用方法页内样式语法格式：选择器名称{属性名称：属性值;属性名称：属性值;……}标记选择器：网页中所有该标记范围类选择器：用class属性调用的标记范围id选择器：id属性调用的标记范围操作演示行内样式语法格式：<标记名称

style=”样式属性名:属性值；样式属性名:属性值；……”>经验与启示合理选择：“条条大路通罗马”，网页外观修饰方法有很多种，人生的路也不止一条等着我们发现。每条路上都有独特的特点，我们要寻找符合我们目标要求的路。注重合作：产品开发中，团队合作很重要，如何提升合作效率，是需要着重思考的问题。网页制作中内容和样式的分离，有利于团队合作，提