版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第一章
HTML5基础知识HTML（HyperTextMarkupLanguage）即超文本标签语言。2014年10月HTML的第5版本标准定稿后，现在使用的基本是该版本，简称HTML5。概述1.1文档基本结构HTML文档元素有很多种类型，它们的功能也是多种多样的。HTML5文档有严格文档结构，其中结构元素定义了整个文档结构，划分了HTML文档的层次。文档基本结构1.1.1文档结构元素文档基本结构元素分为<html>元素、<head>元素、<body>元素、<meta>元素等。如：<html>元素由<html>和</html>标签对表示文档基本结构1.1.2文档语义元素HTML5新增了很多新的文档语义元素。文档语义元素能让浏览器更好地读取页面结构，更便于团队开发和维护。常用的文档语义元素包括<header>（头部）、<nav>（导航栏）、<section>（区块）、<article>（主要内容）、<aside>（侧边栏）、<footer>（底部）等。有了语义元素，HTML文档大致可以按图1-2所示设计摆放的块。语义元素不带渲染格式，渲染格式还依赖于CSS或者内联style属性。文档基本结构1.1.3行内元素和块级元素HTML5行内元素在浏览器上显示的时候通常不会以新行开始，如：<b>,<td>,<a>,<img>等元素等。如例1-3块级元素在显示时会另起新行，典型的块级元素如<p>和<div>。如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。<div>元素的一个常见的用途是文档布局，如例1-4.文档基本结构1.2文字排版页面制作时需要对内容进行排版，主要涉及如何在浏览器中输出文本，以及设置文本输出的格式和文本输出的字体，如斜体、黑体字、下加一划线等等。文字排版1.2.1分段在网页进行排版时经常要在HTML5文档中创建自然段，<p>元素是用来创建一个段落。文字排版1.2.1分段在网页进行排版时经常要在HTML5文档中创建自然段，<p>元素是用来创建一个段落。例1-5.文字排版1.2.2换行HTML文档的换行效果必须通过<br>元素实现，<br>用来告诉浏览器在此处创建一个换行符。<br>是一个很简单的元素，它没有结束标签。例1-6.文字排版块引用页面中块引用效果是<blockquote>元素实现，该元素作用是对加入<blockquote></blockquote>之间文本在浏览器中按两边缩进的方式显示出来，如例1-7。文字排版块引用页面中块引用效果是<blockquote>元素实现，该元素作用是对加入<blockquote></blockquote>之间文本在浏览器中按两边缩进的方式显示出来，如例1-7。文字排版1.2.4预定义有时页面中希望出现特定排版格式的内容，如带多层缩进的程序代码，此时使用<pre>元素来对文本进行预处理操作，这使得浏览器上渲染出的内容带预定义格式。例1-8.文字排版1.2.5标题页面中经常需要出现分多级标题排版的情形，HTML语言提供了一系列对文本中的标题进行操作的元素：<h1>……<h6>，即一共有六级标题的标题元素。例1-9.文字排版1.2.6字体在HTML文档中需用特定元素来表示特定的字体形式。<b>元素和<strong>元素用来使文本以黑体字的形式输出；<i>元素和<em>元素用来使文本以斜体字的形式输出；<u>元素用来使文本以下加一划线的形式输出。而<sub>元素则表示内部文本是下标，<sup>元素则表示内部文本为上标，<q>元素则表示内部内容是引用别人的话语，如例1-10所示。文字排版1.3表单制作表单在Web网页中用来让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序进行处理，从而使得Web服务器与用户之间具有交互功能。表单制作1.3.1表单HTML5中使用<form>元素来创建一个表单，也即定义表单的开始和结束位置，在标签对之间的一切都属于表单的内容。<form>标签具有action、method和target属性。例1-11.表单制作1.3.2输入框页面中用户录入信息时，需要使用<input>元素来创建输入框。按input的类型可以为把表单元素分为有文本框、密码框、单选按钮、复选框、图片按钮、文件域、邮箱、网址、数字、滑动条、搜索框等，用户通过指定<input>的type属性。详见表1-1.例1-12，各种<input>的type属性类型使用开发实例。表单制作<input>元素除了type属性之外还有很多其他属性。表1-2.各种<input>元素的属性值用法实例如例1-13所示。
表单制作1.3.3下拉列表和选项用户在固定选项中选择的时候，是由<select>元素和<option>元素来共同完成的。<select>元素来创建一个下拉列表框或可以复选的列表框。<select>和</select>标签对用于<form>和</form>标签对之间。<select>具有multiple、name和size属性。例1-14.表单制作1.3.4文本域页面中经常要录入大段的文字，使用<textarea>元素用来创建一个可以输入多行的文本域，<textarea></textarea>标签对用于<form>和</form>标签对之间。<textarea>具有name、cols和rows属性。例1-15所示。表单制作1.3.5数据列表页面中使用datalist元素来创建数据列表，使得数据列表在页面中可以复用，是辅助表单中文本框输入的，它本身是隐藏的，与表单文本框的list属性绑定，即将list属性值设置为datalist元素的id值。如例1-16。表单制作1.3.5输出框页面中经常需要输出计算结果，使用<output>元素来显示各种不同内容，如输入的值、JavaScript代码执行后的结果等。该元素必须从属于某个表单，或通过属性指定某个表单。如例1-17所示。表单制作1.3.6表单综合案例使用表单做一个用户信息登记页面开发实例。需求分析：使用<input>标签实现图1-19的用户信息登记页面，其中<input>的类型分别有text、number、checkbox、radio等类型，还有下拉框和文本域，必要的时候使用<select>和textarea等标签。例1-18。表单制作1.4表格和列表页面中经常出现表格和列表，两者都经常用来展示数据，或者用来进行页面布局。表格和列表1.4.1表格表格对于制作网页是很重要的，表格主要用于展示页面数据，也有利用表格的规整性进行布局的，现在很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置。一个HTML表格需要用到<table>元素、<th>元素、<tr>元素、<td>元素等。表格和列表2.表头、行、单元格<th>元素表示表头，<th>和</th>标签对须置于<table>元素内部，在浏览器上输出为表格的一行。如例1-19.表格和列表3.表格应用有时表格用于布局或者在表单中排列组件，不需要边框，一般<table>对齐方式用居中对齐，表单和表单控件就自然美观。具体开发实例如例1-20所示。表格和列表1.4.2列表页面中经常使用到的列表分为序列表和有序列表，分别用<ul>元素和<ol>元素来实现。1.无序列表<ul>元素用于创建一个含项目符号的列表，type属性能够用来设置项目符号的类型，type=”circle”项目符号为空心圆，type=”disc”项目符号为实心圆，type=”square”项目符号为为方块，type=”none”没有项目符号。<li>元素用来创建无序列表的列表项，<li></li>标签对只能在<ul></ul>（或者<ol></ol>）标签对之间使用。如例1-22。表格和列表2.有序列表<ol>元素用于创建一个标有数字的列表。<li>元素也可用来创建有序列表的列表项，<li></li>放在<ol></ol>之间。如例1-23.表格和列表3.自定义列表<dl></dl>用于创建一个自定义列表，<dt></dt>用于创建列表中的上层项目，<dd></dd>用于创建列表中最下层项目，<dt></dt>和<dd></dd>都必须放在<dl></dl>标签对之间。如例1-24.表格和列表4.列表应用列表常用于控制表单的控件摆放，在对要求分行摆放工整的表单，通常使用<ul>和<li>进行控件布局。如例1-25.常见的导航条很多都是使用<ul>和<li>元素完成效果（指的是什么效果），下例就是一个使用<ul>元素和<li>元素来完成导航条的一个例子，并且为了把其做成水平导航条，设置了<a>元素的style属性。如例1-26.表格和列表1.5超链接超链接是互联网赖以生成的一个基本原理，也是HTML语言的最基本的一个功能和特色，正因为有了它，我们对内容的浏览才能够具有灵活性和网络性。HTML语言中以<a>元素生成超链接。超链接的动作是点击该超链接时，页面的转向的页面或者执行的程序，用<a>元素的属性href来表示的。如例1-27.超链接1.6图文混排页面设计中，图文混排情况非常常见，主要通过<img>元素的设置来完成。1.6.1图像导入<img>元素向网页中嵌入一幅图像。从技术上讲，<img>元素并不会在网页中生成图像，而是从网页上链接图像。<img>元素创建的是被引用图像的占位空间。<img>元素有两个必需的属性：src属性
和alt属性。<img>标签的src属性是必需的。它的值是图像文件的URL，也就是引用该图像的文件的绝对路径或相对路径。<img>元素的alt属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。<img>标签的height和width也用于指定图像的高度和宽度，以设置图片大小。实例如例1-28。图文混排1.6.2页面的图文混排<img>元素是行内元素，即不会单独起行，如果和文字混在一起的话，<img>元素在默认的起始位置开始渲染，按height和width属性渲染完图片后，文字自动从图片同一行的后面开始显示，默认情况下，图片底部和同行文字底部对齐。具体实例如例1-29所示。图文混排第2章CSS3基础HTML设计时既关注页面的内容，又关注页面的格式，但随着页面内容越来越多，如果想通过设置HTML元素的属性来设置页面格式的话，页面将变得凌乱和复杂，这种情况下CSS被设计出来，用CSS来格式化HTML页面，使得页面的内容和格式进行了彻底分离，CSS现在已经发展到第3版本，简称CSS3。本章主要介绍CSS3的基础知识，包括CSS3概述、选择器、盒模型、样式、定位等内容。CSS3概述CSS(CascadingStyleSheet，层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（CascadingstyleSheetsLevel1）完成，成为w3c的推荐标准。1998年5月出版的CSS规范第二版。2001年5月W3C开始进行CSS3标准的制定,到目前为止该标准还没有最终定稿。CSS3概述2.1.2CSS3的特点1.丰富的样式定义CSS3提供了丰富的文档样式外观，以及设置文本和背景属性的能力2.易于使用和修改CSS3可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS3文件中，以供HTML页面引用。CSS3概述3.多页面应用CSS3样式表理论上可以不属于任何页面文件，在任何页面文件中都可以将其引用。4.层叠简单地说，层叠就是对一个元素多次设置同一个样式，将使用最后一次设置的属性值。5.页面压缩样式的声明单独放到CSS3样式表中，多页面共享，则大大压缩单个页面的大小。CSS3概述2.1.3CSS3的语法格式CSS3由一条一条的规则组成，每条规则又由一个或多个选择器加一个或多条声明组成。每条声明则是由属性和属性值组成。属性和属性值之间由冒号隔开。声明部分用大括号{}包裹，每条声明之间使用；分号隔开写：h1{color:red;font-size:14px;}写法也可以这样：h1{color:red;font-size:14px;}CSS3概述2.1.4CSS3的类型CSS3按照所放位置不同，分为内联样式、内部样式、外部样式表和导入样式表。1.内联样式表内联样式表是直接在HTML元素内插入style属性来定义要显示的样式，这是最简单的样式定义方法。不过，利用这种方法定义样式时，效果只可以控制该元素及其子元素，其语法如下：如：<bodystyle="color:#FF0000;">…</body>2.内部样式表内部样式表是在HTML的<head>元素中插入一个<style>元素，在<style>元素中书写CSS3样式规则。在内部样式表中定义的样式就应用到页面中：CSS3概述外部样式表外部样式表是在HTML文档外面定义好CSS3文件，然后在HTML页面中使用<link>元素把CSS3文件引入，具体如下：<linkhref="样式表地址"rel="stylesheet"type="text/css"/>
导入样式表输入样式表是指书写CSS3文件时用CSS3的@import声明将一个外部样式表文件导入进来，也可以使用@import声明将一个CSS3文件输入到网页文件的<style></style>标签对中，被导入的CSS3文件中的样式规则定义语句就成了<style></style>标签对中的语句。<style>
@importurl(http://……)
</stypel>CSS3概述2.1.5CSS3性质1.级联在编写CSS3代码的时候，可能在不同地方对HTML元素的同一属性添加了不同的样式。2.继承当给祖先元素设置了某些规则后，该祖先元素的所有后代子元素都将继承这个属性。CSS3概述3.层叠CSS3为什么叫层叠样式表，最大的原因就是CSS3的层叠特性。CSS3层叠性表现为：相同属性的不同值，按内联样式>内部样式>外联样式>缺省值（浏览器内置）的优先级顺序覆盖，不相同的属性直接叠加（合并）在一起，并作用于该元素。CSS3概述4.优先如果元素必须指定要以某些样式进行渲染，则可以用!important来指定样式。!important是CSS3的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，最终生效的属性一定是!important标注的属性。如例2-1.CSS3概述2.2选择器选择器是CSS3的非常重要的语法点，选择器主要是用来选中想要设置CSS3样式的元素，有元素选择器、类选择器、id选择器、伪类选择器等等。为了演示元素选择器、类选择器、id选择器等的作用，先建立一个HTML文件例2-2作为基础文件，然后逐步在其基础上使用选选择器，演示各种选择器的具体效果。例2-2.
选择器2.2.1CSS元素选择器元素选择器是通过元素名来选择想要设置样式的元素，如果对上面例2-2的HTML5脚本文件设置如下CSS样式：ul{height:30px;}div{width:400px;height:50px;border:1pxsolid#ccc;padding:10px;}
选择器2.2.2CSS通配符选择器通配符选择器用来选择所有元素，*选择器表示选择所有元素。在2.2.1节基础上增加如下样式设置：*{color:white;}其运行效果如图2-3所示。
选择器2.2.3CSS类名选择器在CSS中类选择器常用来选择一类该设置相同样式的元素，在使用类选择器时，需把需要设置相同样式的多个元素的class属性设置为相同的值。类选择器格式是：“.类名”。在2.2.1节基础上增加如下样式设置：.important{font-weight:bold;color:yellow;}其运行效果如图2-4所示.
选择器2.2.4id选择器id选择器可以为标有特定id的HTML元素指定样式。id选择器以"#id名称"来定义。在2.2.1节基础上增加如下样式设置：#first{color:blue;}其运行效果如图2-5所示。
选择器2.2.5后代选择器如果想F选择器选择的元素是E选择器选中元素的后代，不管是不是直接后代元素，都可以写作：EF{}。其中E和F之间有空格，在2.2.1节基础上增加如下样式设置如：div.items{font-size:30px;}
选择器2.2.6子元素选择器如果想F选择器选择的元素是E选择器选中元素的子元素，都可以写作：E>F{}。其中E和F之间用>号连接，在2.2.1节基础上增加如下样式设置：.clearfix>.items{background-color:white;}其运行效果如图2-2所示。
选择器如果想F选择器选择的元素是E选择器选中元素的后一个兄弟元素，且相邻，可以写作：E+F{}，其中E和F之间是用+号隔开。在2.2.1节基础上增加如下样式设置：.active+.items{background-color:white;}其运行效果如图2-7所示：
选择器2.2.8通用兄弟选择器如果想F选择器选择的元素是E选择器选中元素的兄弟元素，且F所选元素在后，可以写作：E~F{}，其中E和F之间是用~号隔开。在2.2.1节基础上增加如下样式设置：.active~.items{background-color:white;}其运行效果如图2-8所示。
选择器2.2.9群组选择器如果想把F选择器选择的元素和E选择器选中元素都设置相同的样式则使用群组选择器，可以写作：E,F{}，其中E和F之间是用,号隔开。在2.2.1节基础上增加如下样式设置：.first,.last{background-color:white;}其运行效果如图2-9所示。
选择器2.2.10属性选择器属性选择器是使用HTML元素属性当作选择器关键字的选择器。
常见的属性选择器包括以下几类：E[attr]:只使用属性名，但没有确定任何属性值E[attr="value"]:指定属性名，并指定了该属性的属性值E[attr~="value"]:指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的~不能不写E[attr^="value"]:指定了属性名。并且有属性值，属性值是以value开头的E[attr$="value"]:指定了属性名，并且有属性值，且属性值是以value结束的E[attr*="value"]:指定了属性名，并且有属性值，且属性值中包含了value为了演示各种属性选择器，先建立一个HTML文档例2-3，后面各种属性选择器都是在其基础上进行讲解。
选择器1．E[attr]选择含有attr属性的元素E，则使用写作：E[attr]{}，在例2-3基础上添加如下语句：.demoa[id]{background:blue;color:yellow;}其运行效果如图2-11所示。
选择器2．E[attr="value"]选择含有值为value的attr属性的元素E，则使用写作E[attr="value"]{}。在案例2-3基础上添加如下语句：.demoa[id="first"]{background:blue;}其运行效果如图2-13所示。
选择器3．E[attr~="value"]在案例2-3基础上添加如下语句：.demoa[title~="website"]{background:orange;}其运行效果如图2-15所示。
选择器4．E[attr^="value"]在案例2-3基础上添加如下语句：.demoa[href^="sites"]{background:#eee;}其运行效果如图2-16所示。
选择器5．E[attr$="value"]在案例2-3基础上添加如下语句：.demoa[href$="png"]{background:#070707;}其运行效果如图2-17所示：
选择器6．E[attr*="value"]在案例2-3基础上添加如下语句：.demoa[title*="site"]{background-color:violet;}其运行效果如图2-18所示。
选择器2.2.11伪类选择器同一个标签，根据其不同的种状态，有不同的样式，这就叫做“伪类”。伪类用冒号来表示。为了演示伪类选择器的功能，先建立一个HTML文档例2-4，所有的伪类选择器都是在其基础上进行演示。
选择器1．超级链接动态伪类超级链接的动态伪类只有当用户和网站交互的时候才能体现出来，因为超级链接分为几种状态，link：链接没有被访问时的样式，visited：链接被访问以后的样式，hover：鼠标悬浮时的样式，active：鼠标点中激活的瞬间的样式，在例2-4基础上添加如下语句：.demoa:link{color:gray;}.demoa:visited{color:yellow;}.demoa:hover{color:green;}.demoa:active{color:blue;}其运行效果如图2-20所示。
选择器2．:nth选择器在有的页面中，同样的元素出现多个，:nth选择器可按序选择哪些元素来设置样式。:first-child用来选择某个元素的第一个子元素，:last-child用来选择某个元素的最后一个子元素。在案例2-4基础上添加如下语句：.demoli:first-child{background:green;}.demoli:last-child{background:green;}其运行效果如图2-24所示。
选择器7．伪元素伪元素选择器可以选择逻辑意义上满足条件的元素部分。::first-line:选择元素的第一行，这个选择器主要是用在文字排版，用于把页面的首行文字渲染出不同效果。::first-letter:选择文本块的第一个字母，这个选择器主要是用在文字排版，可以用来强调第一个字符。::before和::after：主要用来在元素的前后插入内容。如在例2-3上添加：li:first-child::after{content:"hello";color:black;}其运行效果如图2-27所示。
选择器8．UI元素状态伪类选择器UI元素状态伪类选择器主要是指可选择元素不同状态下的选择器。UI元素状态伪类主要指type=text时的enable和disabled，type=radio和type=checkbox的checked和unchecked等。例2-5是对UI元素状态伪类的演示。
选择器2.3盒模型在CSS3中，所有通过CSS3进行布局的HTML元素都可以看成一个“盒子”，通过设置盒子的属性对元素进行大小和位置的控制。盒模型element表示元素的内容区。width和height属性定义内容区域的宽高。padding定义元素的内边距，即内容区离边框的距离。border定义元素的边框。margin定义元素与其他元素的距离。盒模型2.3.1外边距盒子的外边距margin，他是完全透明的。margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。margin-top：上边距；margin-buttom：下边距；margin-left：左边距margin-right：右边距。开发者也可以直接使用简写属性margin同时设置四条边的宽度。盒模型元素在父元素内居中对齐的设置如下：margin:0pxauto；像上面这样设置margin上下值为0，左右值为自动推算，从而元素盒子在父元素中居中对齐。居中对齐的必要条件：块元素并且必须固定宽度。盒模型2.3.2内边距盒子的内边距padding，与外边距不同，padding不一定完全透明，可以设置背景颜色和图片。与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。padding-top：上部填充padding-bottom：下部填充padding-left：左部填充padding-right：右部填充开发者也可以直接使用简写属性padding同时设置四条边的宽度。盒模型2.3.3边框盒子的边框Border，元素的border属性设置与margin、padding类似，也分为上下左右四个边界，可以通过设置四个边界的数值，来进行元素边框的粗细。border属性分别为border-top（上边界）、border-bottom（下边界）、border-left（左边界）、border-right（右边界）。如果Border属性的四边宽度、颜色均一致，那么可以将border属性进行简写。盒模型2.3.4圆角边框盒子的边界半径，也就是圆角，边界半径由属性border-radius进行控制，这是一个简写属性，同上面提到过的margin、padding等一样，可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。border-top-left-radius：左上角border-top-right-radius：右上角border-bottom-left-radius：左下角border-bottom-left-radius：右下角边界半径可以使用px、em等长度单位，也可以使用百分数。盒模型2.3.4圆角边框盒子的边界半径，也就是圆角，边界半径由属性border-radius进行控制，这是一个简写属性，同上面提到过的margin、padding等一样，可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。border-radius具体开发实例如例2-6所示。盒模型2.3.5盒子阴影在盒子的组成成分之外，CSS3给盒子添加了阴影。盒子的阴影由box-shadow属性控制，阴影的轮廓与盒子边界border的轮廓一样。该属性的正规语法如下：none|[inset?&&[<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]inset：默认阴影在边框外。使用inset后，阴影在边框内（即使是透明边框），背景之上内容之下。offset-x,offset-y：这是头两个长度值，用来设置阴影偏移量，相对于border外边线开始计算。offset-x设置水平偏移量，如果是负值则阴影位于元素左边。offset-y
设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。这时如果设置了
blur-radius或spread-radius则有模糊效果。具体开发实例如例2-7所示。盒模型2.4样式CSS3的核心是对各种HTML元素的样式设置，使得页面生动活泼，满足展示的各种需求。样式2.4.1长度单位CSS3样式中设置盒子宽度、高度和字体大小都要用到长度单位，故先介绍长度单位：绝对单位：1in=2.54cm=25.4mm=72pt=6pc各种单位的含义：in：英寸Inches(1英寸=2.54厘米)cm：厘米Centimetersmm：毫米Millimeterspt：点Points，或者叫英镑(1点=1/72英寸)pc.皮卡Picas(1皮卡=12点)相对单位：px：像素，具体大小和屏幕分辨率相关；em：相对默认字体大小的比值，1em默认相当于16个px；%：百分比，相对父元素文字的大小样式2.4.2字体属性页面需要显示出各种的字体以适应各种需求，为了演示字体样式的设置，先建立一个HTML文件例2-8，然后介绍各种不同的字体样式，对例2-8进行设置不同的字体样式后，得到整体效果图如图2-33。样式1．color字体颜色2．font-size字号大小3．font-family字体4．font-weight字体粗细5．font-style字体风格6.font-variant字体变形7.font属性简写样式8.自定义网页字体@font-face
在设计页面时，经常由于场景需要用到漂亮的艺术字体，此时@font-face就派上用长了，@font-face的作用是允许Web开发人员自己定义web页面的字体，浏览器从服务端下载并使用自定义字体，使页面显示字体不依赖用户的操作系统字体环境。@font-face语法自定义字体语法：@font-face{font-family:<webFontName>;src:<source>[<format>][,<source>[<format>]]*;[font-weight:<weight>];[font-style:<style>];}
其中：webFontName:引入的自定义字体名称，source:字体路径，format:字体格式，用于帮助浏览器识别字体格式，truetype|opentype|truetype-aatembedded-opentype|svg…；weight:字体是否粗体，style:字体样式。【例2-9】
自定义Web字体和使用字体开发实例样式2.4.3CSS常用文本属性页面中文本要进行排版，以满足不同场景需求，此时就需要使用到文本的一些属性，如文本的对齐方式、行高、缩进等。在演示文本属性的设置之前，先建立一个演示所需的基础HTML文件如例2-10。样式1.文本对齐属性(text-align)text-align属性用来设定文本的对齐方式。2.文本修饰属性(text-decoration)text-decoration属性是设定文本划线的属性。3.文本缩进属性(text-indent)text-indent属性设定文本首行缩进。4.行高属性(line-height)line-height属性用于设置行间距，就是行与行之间的距离（一行文字的高度），即字符的垂直间距，一般称为行高。5.文本溢出容器处理(text-overflow)text-overflow设置当文本溢出元素框时处理方式。6.转换大小写(text-transform)text-transform属性的作用是进行文本进行字母大小写转换。样式7.文本阴影(text-shadow)text-shadow属性为文本设置阴影。利用该属性可以制作一些艺术效果的字体，是前端开发技术中重要的一个属性。text-shadow:offset-xoffset-y
blur-radiuscolor；其中：offset-x为阴影水平位移，offset-y为垂直位移，这点跟box-shadow一致，并且这两个值必须有，缺一不可。允许负值，offset-x负值向左偏移，offset-y向上偏移。blur-radius，模糊半径，可选值。假如没有指定，那么该值的初始值为0，数值越大的值，那么它的模糊半径就越大。例2-13利用多层阴影制作艺术字的示例。样式2.4.4CSS背景属性1.背景颜色属性(background-color)background-color属性用于为HTML元素设定背景颜色，相当于HTML中bgcolor属性语法：background-color:color，其中color可以为rgb()，rgba()、预定义的颜色或者样色数值。【例2-14】设置背景颜色开发实例样式2.背景图片属性(background-image)background-image属性用于为HTML元素设定背景图片，相当于HTML中background属性。3.背景重复属性(background-repeat)background-repeat属性和background-image属性连在一起使用，决定背景图片是否重复。4.背景附着属性(background-attachment)background-attachment属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。5.背景位置属性(background-position)background-position属性和background-image属性连在一起使用，决定了背景图片的最初位置。6.背景尺寸(background-size)background-size属性规定背景图片的尺寸。7．背景定位(background-origin)background-origin属性规定背景图片的定位区域，用于指定在绘制背景时，从边框的左上角开始或者从内容的左上角开始。8．背景裁剪(background-clip)background-clip属性规定背景图片的裁剪到的区域。样式10．背景使用渐变在CSS3中背景图片设置，除了可以使用URL引入已有图片外，还可以使用渐变函数构建图片来设置背景。1）线性渐变线性渐变是指沿着某条直线朝一个方向产生渐变效果。语法：background:linear-gradient(direction,color1,color2[stop],color3...);【例2-16】
颜色线性渐变开发实例样式2）径向渐变径向渐变：指从一个中心点开始沿着四周产生渐变效果。语法：background:radial-gradient(shapesizeatposition,start-color,...,color[stop]...,last-color);【例2-17】径向渐变开发实例。样式2.4.5列表样式列表是页面常见的元素，既可以作为直接展示的要素，也可以作为导航或者布局的基础。列表的样式主要有项目符号类型、项目符号位置、图片作为项目符号等属性。1．项目符号类型（list-style-tpye）在CSS中，不管是有序列表还是无序列表，都统一使用list-style-type属性来定义列表项符号。语法：list-style-type：disc|circle|square|decimal|…样式2．图片作项目符号（list-style-image）不管是有序列表，还是无序列表，都有它们自身的列表项符号。但是默认的列表项符号表现形式单调，如果想自定义列表项符号，那么在CSS中我们可以使用list-style-image属性来自定义列表项符号。自定义列表项符号，实际上就是列表项符号改为一张图片，而引用一张图片就要给出它的引用路径。语法：list-style-image：none|URL，其中URL图片的路径。3.项目符号位置（list-style-image）list-style-position属性设置在何处放置列表项标记。语法：list-style-position：inside|outside.样式4．列表样式简写list-style）list-style是设置列表项目相关内容，依次写出list-style-image，list-style-position，list-style-type的取值，也可只写其中1个或者2个取值。语法：list-style：[list-style-image]||[list-style-position]||[list-style-type]【例2-19】列表样式开发实例样式2.4.6表格样式表格作为页面中展示数据的主要元素，表格的样式直接影响应用程序的界面直观性和美观度，表格样式属性主要有表格边框、表格尺寸、表格背景颜色、单元格对齐方式等。1．表格边框如需在CSS中设置表格边框，请使用border属性。如需给table、th、td等元素设置边框，可以通过设置border属性来实现。如下边代码设置了边框：table,th,td{border:1pxsolidblack;}【例2-20】表格边框设置开发实例样式2．表格尺寸、背景通过width和height属性定义表格的宽度和高度。这本质就是设置table元素这个盒子的高度和宽度。
border属性用于设置表格的边框颜色，background-color属性用于设置单元格内的颜色，color属性用于设置表格内文字的颜色。具体设置，见本节最后示例。3．单元格内边距和对齐方式如需控制表格中内容与边框的距离，请为td和th元素设置padding属性。text-align和vertical-align属性设置表格中文本的对齐方式，text-align属性设置水平对齐方式，比如左对齐、右对齐或者居中。具体设置，见本节最后示例。4．表格综合示例为了演示表格的各种属性设置，【例2-21】表格的综合开发实例样式2.5定位若希望页面中各元素在页面上摆放合理、美观，且不随页面缩放而发生位置的变化，那么就需要使用到CSS3的定位技术。2.5.1定位概述CSS使用position属性和float属性对元素进行定位，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成需要使用多个表格才能完成的任务。CSS有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。定位2.5.2四种定位通过使用position属性，CSS3可以选择四种不同类型的定位，这会影响元素框生成的方式。（1）static，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。这是position属性的默认值。（2）relative，元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。（3）absolute，元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个新的块级框，而不论原来它在正常流中生成何种类型的框。（4）fixed，元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。定位1．默认定位元素在浏览器中默认的定位方式。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。元素不设置position属性，自动使用该定位。定位2．相对定位设置为相对定位的元素框会偏移某个距离。元素仍然保持其默认未定位的形状，它原本所占的空间仍保留。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的默认起点进行移动。定位3．绝对定位设置为绝对定位的元素框从文档流完全删除，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。绝对定位相对于其已定位的包含块进行定位，包含块可能是文档中的另一个元素或者是初始包含块。绝对定位中，要除了使用position属性设置为absolute外，还需使用top、left、top、bottom、right等属性属性来设置本元素在最近一层已经定位的祖先元素中的位置.【例2-22】
相对定位和绝对定位开发实例定位4．固定定位固定定位是相对浏览器窗口进行定位，也即是常说的钉在浏览器窗口的定位方式。固定定位中，除了使用position属性设置为fixed外，还要用top、left、top、bottom、right等属性，用这些属性来设置本元素相对于浏览器窗口的上下左右位置。【例2-23】固定定位开发实例定位2.5.3浮动CSS使用float属性来设置浮动，被设置浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。如图2-56所示，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。浮动常用于使用宫格摆放多个属性相同的物件，如手机端的电商平台商品展示等，下面通过做一个在线计算器的界面来学习如何使用浮动进行宫格式摆放。【例2-24】浮动的综合开发实例。
定位第三章CSS3多彩渲染3.1变形CSS3中属性可以改变网页元素的形状、角度，进而制作出绚丽多彩的页面效果，通过设置transform属性，可以改变元素形状、角度等状态从而增加用户体验。3.1.1旋转元素的旋转是保持元素的形状变的前提下，绕着某个中心点旋转一定角度，旋转通过设置rotate()函数。rotate()函数通过对指定的角度参数设置，使元素相对原点进行旋转。该属性主要在二维空间内进行操作，设置一个角度值，用来改变页面元素的角度。若该数值为正值，元素相对原点中心顺时针旋转，若该数值为负值，则元素相对原点中心逆时针旋转。【例3-1】旋转rotate开发实例CSS3概述3.1.2扭曲扭曲是将一个元素以其中心位置围绕着X轴和Y轴按照一定的角度倾斜，实现函数为skew()。skew()函数与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。【例3-2】通过skew（）函数将长方形变成平行四边形开发实例。变形3.1.3缩放缩放是对元素进行尺寸进行等缩小或者放大，scale()函数可以使页面元素根据中心点对页面元素进行缩放操作。scale()函数的默认值为1，当值设置为0.01到0.99之间的数值时，其函数效果为缩小效果。若参数赋值为1.01以上，则对页面元素进行放大操作。缩放scale有以下三种情况：（1）scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放），例如：div:hover{transform:scale(1.5,0.5);}注意：Y是一个可选参数，如果没有设置Y值，则表示元素沿X轴与Y轴两个方向的缩放倍数是相同的。（2）scaleX(x)元素仅水平方向缩放（X轴缩放）。（3）scaleY(y)元素仅垂直方向缩放（Y轴缩放）。变形3.1.4平移平移是将元素向指定的方向移动，通过设置translate()函数完成，平移类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。translate分为三种情况：（1）transform：translateXY（X,Y）,水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。（2）transform：translateX（X）,仅水平方向移动（X轴移动）。（3）transform：translateY（Y）,仅垂直方向移动（Y轴移动）。【例3-4】平移开发实例。变形3.1.5变形矩阵元素的变形其实相当于对原有元素图像乘以一个变形矩阵，CSS3正是通过matrix()变换矩阵来指定一个2D变换，相当于直接对元素应用一个[abcdef]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素。下面介绍matrix函数中各个属性值的意义：（1）元素的水平伸缩量，1为原始大小；（2）纵向扭曲，0为不变；（3）横向扭曲，0为不变；（4）垂直伸缩量，1为原始大小；（5）水平偏移量，0是初始位置；（6）垂直偏移量，0是初始位置。【例3-5】通过matrix()函数来模拟transform中translate()位移的效果开发实例。变形3.1.6变形原点元素的变形必须基于一个变形原点，变形原点就是变形进行的坐标系原点。任何一个元素都有一个中心点，默认情况下，其中心点是居于元素X轴和Y轴的50%处，如图3-9所示。transform-origin取值和元素设置背景中的background-position取值类似，在横向分别有三个值：left、center、right，在纵向也有三个值：top、center、bottom。【例3-6】通过transform-origin改变元素原点到左上角，然后进行顺时旋转45度开发实例。变形3.2动画使用CSS3能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript。CSS3的动画分为过渡动画和关键帧动画。3.2.1过渡动画CSS3过渡动画其含义是使页面元素从一种状态或样式逐渐改变到另一种状态或样式的动画效果。在CSS3引入transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成，这显得很突兀，引入了过渡动画以后，属性的变化变成了有时间轴的动画。transition知道开始状态和终止状态后，可以自己推算中间值，在指定的时间内完成CSS属性过渡，从而形成了过渡动画。1．transition-property过渡属性该属性是描述发生过渡性动画的属性。语法：transition-property:width|height…|color动画2．transition-duration过渡时长该属性是描述发生过渡性动画的时长。语法：transition-property:ns，其中n为自然数，默认为0。时间单位为秒(s)。3．transition-timing-function过渡时间函数该属性是描述发生过渡性动画的时间函数，也即是该属性允许过渡效果随着时间来改变其速度。语法：transition-timing-function:timing-function，其中timing-function为时间函数名，默认为ease。动画4．transition-delay过渡延迟transition-delay属性规定过渡效果何时开始。语法：transition-property:ns，其中n为自然数，默认为0。时间单位为秒(s)。5．transition属性简写transition属性是一个用来设置过渡的简写属性，用于在一个属性中设置四个过渡属性。语法：transition:propertydurationtiming-functiondelay;其中property是应用过渡的CSS属性，duration是过渡完成的时长，timing-function是时间函数，delay是延迟。动画6．transition的案例1）经过鼠标触发的多属性过渡动画经常可以见到很多web程序中，当鼠标移至某个元素时，该元素的多个属性会发生变化，如放大、变色、旋转等。【例3-7】放大、变色、旋转开发实例2）由javascritpt触发的多个属性的过渡有时我们在web应用中可以看到只要点击某个元素，则该元素会发生一些的属性变化，整个过程就构成一个过渡动画，这种效果一般是通过JavaScript的事件进行触发的。【例3-8】用JavaScript触发多个属性的过渡开发实例动画3.2.2关键帧动画关键帧动画，就是给需要动画效果的属性准备一组与时间相关的值，这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比较流畅的动画效果。1．关键帧动画定义CSS3关键帧动画使用animation属性来设置。为了使用animation属性，必须先定义关键帧动画，CSS3使用@keyframes来定义关键帧动画。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间点的样式规则，也可认为是在关键时间点设定关键帧，这个概念类似于Flash中的关键帧。动画语法：@keyframes动画名称{0%{
开始样式集；}…n%{中间样式集n;}…100%{
最终样式集；;}}动画2．CSS3关键帧动画调用CSS3通过animation属性调用动画以及设置动画的各个属性，与transition相同animation有以下子属性。1）动画名2）动画播放的次数3）动画播放方向4）动画开始之前和结束之后发生的操作5）动画播放状态为了演示关键帧动画的用法，给出了例3-9和例3-10。动画3.3响应式布局响应式布局是EthanMarcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，响应式布局是大势所趋。CSS3中响应式布局的技术组要有百分比布局、媒体查询、弹性盒布局等技术。响应式布局3.3.1百分比布局在最初的固定布局中，设定元素宽度和高度的长度单位是px，这样的页面布局十分呆板，而且如果显示设备宽高比和设计时所用设备宽高比不一致时，则会导致页面元素出现显示不全的问题。【例3-11】长度单位设计为px的开发实例。【例3-12】对案例3-11进行修改，使用了百分比进行布局开发实例响应式布局3.3.1媒体查询布局提到响应式布局，就不得不提起CSS3中的MediaQuery（媒介查询）。媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定页面元素样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。响应式布局1．视口适配设置为了使用媒体查询，必须在页面添加<meta>标签，允许页面根据适口大小进行缩放。语法：<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>其中参数：（1）width=device-width：宽度等于当前设备的宽度。（2）initial-scale=1：初始的缩放比例，可以设置为大于或者小于1的数据，默认为1。（3）minimum-scale=1：允许用户缩放到的最小比例，可以设置为小于1的数据，默认为1。（4）maximum-scale=1：允许用户缩放到的最大比例，可设置为大于1的数据，默认为1。（5）user-scalable=no：用户是否可以手动缩放（默认为no）。响应式布局2.@media查询使用@media查询，可以针对不同的屏幕大小、宽高比率等定义不同的样式，特别是当我们需要设置设计响应式的页面时，@media是非常有用的。在重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试提供了极大的便利。语法：@mediamediaTypeand|not|only(mediafeature){/*CSS-Code;*/}其中，mediaType类型有很多【案例3-13】媒体查询开发实例响应式布局3.3.3弹性盒布局随着响应式用户界面的流行，Web应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置，以达到最佳的显示效果。随着终端尺寸增多，如果只是使用媒体查询技术，这将使得布局的逻辑变得非常复杂。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。响应式布局1．弹性盒布局基本概念图3-22弹性盒布局模型相关概念示意图响应式布局2.容器的属性容器上一共有flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content等6个属性。3.项目的属性项目一共有order、flex-grow、flex-shrink、flex-basis、flex、align-self等6个属性【例3-14】弹性布局开发实例响应式布局第四章
JavaScript基础知识JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，同时也是一种广泛应用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。JavaScript是客户端脚本语言，不同于服务端脚本语言的是，JavaScript是在用户的浏览器上运行的，不需要服务器支持就可以独立运行，所以在早期，程序员比较青睐于JavaScript，可以减少对服务器的负担。4.1认识JavaScript4.1.1JavaScript的特点由于JavaScript是运行在客户端的，因此其安全性是程序员最担忧的问题，尽管如此，JavaScript仍然以其跨平台、容易上手等优势大行其道。JavaScript是世界上最流行的编程语言，其优点如下：1）JavaScript是属于Web语言，它适用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备2）JavaScript是一种轻量级的编程语言；3）JavaScript是可插入HTML页面的编程代码4）JavaScript插入HTML页面后，可由所有的现代浏览器执行；5）JavaScript容易学习，几乎每个人都能将小的JavaScript片段添加到网页中；6）客户端脚本在客户端执行，减轻了服务器的负担JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释执行。这样的语言称为解释语言。解释语言也有着它们的弱点，其表现如下：1）安全性较差；2）如果一条JavaScript语句运行不了，那么其后续的语句也无法执行；3）每次重新加载都会重新解释，速度较慢。一个完整的JavaScript实现由以下3个不同部分组成：核心（ECMAScript）、文档对象模型（DocumentObjectMode，DOM）、浏览器对象（BrowserObjectModal，BOM）。JavaScript是一种程序语言，有着自己的变量、数据类型、语句、函数和对象，JavaScript程序是由若干语句组成的，语句是编写程序的指令。4.1.2JavaScript的构成JavaScript提供完整的基本编程语句，它们是渎职语句、Switch选择语句、while循环语句、for循环语句、foreach循环语句、do-while循环语句、break循环种植语句、continue循环终端语句、with语句、try-catch语句、if语句（if-else、if-else-if）。JavaScript虽然是弱类型的程序设计语句，但其内置的对象能够处理不同类型的数据，其常见的数据类型有对象、数组、数、布尔值、空值；而JavaScript可使用的数据处理有字符串处理、日期处理、数组处理、逻辑处理、算术处理等。程序设计语言中通常都有运算符的使用，JavaScript中的运算符与其他程序设计语言一样，有算术运算符、比较运算符、字符串连接符、逻辑运算符和三目运算符。JavaScript可以以语句的形式直接嵌入HTML内容，也可以在HTML中引用外部的JavaScript文件。HTML中的脚本必须位于<script>与</script>标签之间。脚本可被放置在HTML页面的<body>和<head>部分中。使用<script>标签。如下所示：<script>alert("我的第一个JavaScript");</script>4.2引入JavaScript方法【例4.1】<body>中的JavaScript<body><p>JavaScript能够直接写入HTML输出流中：</p><script>document.write("<h1>这是一个标题</h1>");document.write("<p>这是一个段落。</p>");</script><p>您只能在HTML输出流中使用<strong>document.write</strong>。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p></body>【程序运行效果】在本例中，JavaScript会在页面加载时向HTML的<body>写文本：图4.1案例4.1运行效果图【例4.2】<head>中的JavaScript函数<script>functionmyFunction(){ document.getElementById("demo").innerHTML="我的第一个JavaScript函数";}</script></head><body> <h1>我的Web页面</h1><pid="demo">一个段落。</p><buttontype="button"onclick="myFunction()">点击这里</button></body>或者在<body>中添加JavaScript函数<body> <h1>我的Web页面</h1><pid="demo">一个段落。</p><buttontype="button"onclick="myFunction()">点击这里</button><script>functionmyFunction(){document.getElementById("demo").innerHTML="我的第一个JavaScript函数";}</script></body>【程序运行效果】在本例中，我们把一个JavaScript函数放置到HTML页面的<body>部分。该函数会在点击按钮时被调用：图4.2案例4.2运行效果图【例4.3】外部的JavaScript<body><h1>我的Web页面</h1><pid="demo">一个段落。</p><buttontype="button"onclick="myFunction()">点击这里</button><p><b>注释：</b>myFunction保存在名为"myScript.js"的外部文件中。</p><scriptsrc="myScript.js"></script> </body>可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部JavaScript文件的文件扩展名是.js。如需使用外部文件，请在<script>标签的"src"属性中设置该.js文件，myScript.js文件代码如下：functionmyFunction(){document.getElementById("demo").innerHTML="我的第一个JavaScript函数";}【程序运行效果】与案例4.2的效果一致：图4.3案例4.3运行效果图程序都是由语句构成的，JavaScript也是一样，JavaScript语句是发给浏览器的命令。除了4.1节介绍的基本语句外，JavaScript中有着可直接调用的对象和函数，用来实现特定的功能。4.3JavaScript语句4.3.1JavaScript语句规则1）分号使用分号的另一用处是在一行中编写多条语句。a=5;b=6;c=a+b;以上实例也可以这么写:a=5;b=6;c=a+b;2）JavaScript对大小写敏感JavaScript对大小写是敏感的，例如getElementById()与getElementbyID()是不同的；变量myVariable和MyVariable也是不同的；3）空格JavaScript会忽略多余的空格，下面的两行代码是等效的：varperson="Hege";varperson="Hege";4）对代码行进行折行您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：document.write("你好\世界!");不过，您不能像这样拆行：document.write\
("你好世界!");5）JavaScript代码块JavaScript可以分批地组合起来。下面的代码是改变ID为“demo”和“myDIV”的元素的HTML值：functionmyFunction(){document.getElementById("demo").innerHTML="你好Dolly";document.getElementById("myDIV").innerHTML="你最近怎么样?";}您将在稍后的章节学到更多有关函数的知识。6）单引号和双引号在JavaScript中，单引号和双引号没有特殊的区别，都可以用来创建字符串，但是一般情况下JavaScript使用单引号。在JavaScript中，单引号里面可以有双引号，双引号里面也可以有单引号。特殊情况下JavaScript需要使用转义符号“\”，例如用（\”）表示（”），用（\’）表示（’），而在HTML中则是用"。7）JavaScript语句标识符JavaScript语句通常以一个
语句标识符
为开始，并执行该语句。语句标识符是保留关键字不能作为变量名使用。下表列出了JavaScript语句标识符（关键字）：语句描述break用于跳出循环。catch语句块，在try语句块执行出错时执行catch语句块。continue跳过循环中的一个迭代。do...while执行一个语句块，在条件语句为true时继续执行该语句块。for在条件语句为true时，可以将代码块执行指定的次数。for...in用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。function定义一个函数if...else用于基于不同的条件来执行不同的动作。return退出函数switch用于基于不同的条件来执行不同的动作。throw抛出（生成）错误。try实现错误处理，与catch一同使用。var声明一个变量。while当条件语句为true时，执行语句块。4.3.2JavaScript输出JavaScript没有任何打印或者输出的函数。JavaScript可以通过不同的方式来输出数据：使用window.alert()弹出警告框。使用document.write()方法将内容写到HTML文档中。使用innerHTML写入到HTML元素。使用console.log()写入到浏览器的控制台。【例4.4】使用window.alert()弹出警告框来显示数据：<script>window.alert(5+6);</script>【程序运行效果】在网页弹出窗显示如下效果：图4.4案例4.4运行效果图【例4.5】操作HTML元素<body> <h1>我的第一个Web页面</h1><pid="demo">我的第一个段落。</p><script>document.getElementById("demo").innerHTML="段落已修改。";</script></body>【程序运行效果】例子直接把id="demo"的<p>元素写到HTML文档输出中：图4.5案例4.5运行效果图【例4.6】写到HTML文档<script>document.write(Date());</script>【程序运行效果】document.write()可以将JavaScript直接写在HTML文档中：图4.6案例4.6运行效果图【例4.7】覆盖整个HTML页面<buttononclick="myFunction()">点我</button><script>functionmyFunction(){document.write(Date());}</script>使用document.write()向文档输出写内容。如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖。【程序运行效果】点击按钮，整个HTML页面的内容只剩下了时间：图4.7案例4.7运行效果图【例4.8】写到控制台<script>a=5;b=6;c=a+b;console.log(c);</script>如果您的
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 53模拟试卷初中地理八年级下册04专项素养综合全练(四)资源跨区域调配
- 七年级生物上册 1.1.2《生物学的基本研究方法》教案 （新版）苏教版
- 辽宁省沈阳市法库县八年级历史下册 第10课 建设有中国特色的社会主义教案 新人教版
- 安徽省繁昌县八年级物理上册 3.1科学探究：声音的产生与传播教案 （新版）沪科版
- 高中数学 第一章 统计 1.7 相关性教案 北师大版必修3
- 七年级生物上册 1.2.2 生物与环境组成生态统说课稿 （新版）新人教版
- 辽宁省大连市高中数学 第三章 不等式 3.1 不等式的性质教案 新人教B版必修5
- 七年级语文上册 第六单元 20天上的街市教案 新人教版
- 高中化学 专题2 化学反应与能量转化 2.4 太阳能、生物质能和氢能的利用教案 苏教版必修2
- 日本雇佣合同模板
- 兴趣为学习导航-心理课件
- 膝关节功能评分表
- （2023版）高中化学新课标知识考试题库大全（含答案）
- 机电类特种设备安装改造维修许可规则(试行)(完全版)
- 定向越野图例标志说明课件
- 部编版五年级上册四字词语汇总(全)
- 2023年河北省安全生产举报和奖励答试题及答案
- 【练习题】破十法借十法练习题
- 端午节英语（课件）通用版英语
- 2023年英语专业四级考试真题及答案
- 初中语文人教九年级上册人物形象群文阅读
评论
0/150
提交评论