Web前端开发 课件全套 朱铁樱 第1-13章 Web开发基础 - JavaScript进阶_第1页
Web前端开发 课件全套 朱铁樱 第1-13章 Web开发基础 - JavaScript进阶_第2页
Web前端开发 课件全套 朱铁樱 第1-13章 Web开发基础 - JavaScript进阶_第3页
Web前端开发 课件全套 朱铁樱 第1-13章 Web开发基础 - JavaScript进阶_第4页
Web前端开发 课件全套 朱铁樱 第1-13章 Web开发基础 - JavaScript进阶_第5页
已阅读5页，还剩423页未读， 继续免费阅读

下载本文档

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

文档简介

使用HTML5创建网页使用CSS美化网页用JavaScript实现网页交互第01章HTML基本语法《Web前端开发》上课纪律要求座位固定，带走垃圾三带：带书，带笔记，带笔三不带：不带吃，不带喝，不带手机不破坏电脑不做其他事情课程考核方式考核方式：理实一体化考核成绩评定：总评成绩=平时（60%）+期末考核（40%）

平时成绩=学习通成绩（40%）+作业（20%）+智慧树（40%）要求：勤动手，多操作！W3school或菜鸟教程前端技术体系1.1Web概述Web（WorldWideWeb）即全球广域网，也称为万维网，是一种基于超文本和HTTP的、全球性动态交互的、跨平台分布式图形信息系统。它是一个由许多互相链接的网页组成的系统，通过互联网进行访问。万维网是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。1.2Web工作原理Web万维网是建立在B/S（浏览器/服务器）架构之上的，通过客户端和服务器之间的通信来实现网络上的信息传递和数据交换。Web的工作原理是一个复杂的过程，涉及到了用户交互、域名解析、HTTP请求发送、服务器处理和浏览器解析等多个环节。服务器客户端请求响应1.3Web相关概念Internet网络：就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。WWW：WWW（英文World

Wide

Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。URL：URL（英文Uniform

Resource

Locator的缩写）中文译为“统一资源定位符”

URL其实就是Web地址，俗称“网址”。DNS：DNS

（英文Domain

Name

System的缩写）是域名解析系统。HTTP和HTTPS：HTTP

(Hypertext

transfer

protocol的缩写)

中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。1.3Web相关概念Web：Web通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。W3C组织：W3C（英文World

Wide

Web

Consortium的缩写）中文译为“万维网联盟”。成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构，万维网联盟是国际最著名的标准化组织。W3C标准：由万维网联盟W3C组织制定的一系列标准，包括：结构化标准语言（HTML和XML），表现标准语言（CSS），行为标准语言（DOM和EMCAScript）。京东首页1、只有结构（HTML）单调2、加入样式（CSS）页面更加美观，但缺少交互3、加入行为（js）使网页具有交互效果1.4Web网页的构成网站：多个页面通过链接连在一起就组成了网站，网站是相关网页的集合，是一个虚拟空间，通过域名进行标识，通常由前端和后端技术组成，通过浏览器访问网址即可呈现出网站的内容。

网页一般包含HTML标签的纯文本文件，由两部分组成，分别是文字和图片，文字就是网页的内容，图片就是网页的外观，随着互联网技术的发展，网页还逐渐增加了动画、音乐、程序等更多的元素，整体页面也变得越来越美观。网页可以存放在世界上某一台计算机中，用户可以通过浏览器访问某台计算机中的页面，此时存放网页的计算机可以理解为Web服务器。所有的HTML文档都应该有一个<html>标签，<html>标签包含两个部分：<head>和<body>。<head>标签用于包含整个文档的描述信息，比如文档的标题（<title>元素用于包含标题），对整个文档的描述，文档的关键字等等。文档的具体内容则放在与head标签同级的<body>元素中。1.4Web网页的构成用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。静态网页更新不方便，但是访问速度快。静态网页动态网页显示的内容会随着用户操作和时间的不同而变化。动态网页可以和服务器数据库进行实时的数据交换。静动混合1.5Web前端开发技术Web前端开发是创建Web页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。1.VisualStudioCode（简称：VSCode）2.HBuilderX3.SublimeText4.WebStorm5.Notepad++1.6Web开发工具第2章HTML入门主讲教师：朱铁樱《Web前端开发》2.1认识HTML超文本标记语言（HyperTextMarkupLanguage，HTML）是一种用于构建网页的标准标记语言。它不仅仅定义了网页的结构，还影响了网页的外观和功能。HTML文档是由各种HTML标签组成的，这些标签描述了网页中的各个元素，如标题、段落、列表、图片、链接等。HTML是一种基础技术，通常与CSS（层叠样式表）和JavaScript一起使用，以设计出具有吸引力和交互性的网页。CSS用于美化网页的外观和格式，而JavaScript则可以添加各种交互效果，使网页更加生动和有趣。2.2HTML文档结构HTML文档包括头部和主体两大部分。HTML文档结构<head></head>文档头部信息<body></body>文档主体信息标记HTML文档的开始标记HTML文档的结束文档声明头<title></title>文档的标题<meta>元数据头部主要描述浏览器和搜索引擎所需要的信息，浏览器不会将这些信息呈现给访问者；主体是文档的正文，是网页中真正要传达的信息，这些信息将在浏览器窗口的正文部分呈现给访问者。2.2HTML文档结构标签名定义说明<html><html>HTML标签页面中最大的标签，根标签<head></head>文档的头部在head标签中必须要设置的标签是title<title></title>文档的标题让页面拥有一个属于自己的网页标题<body></body>文档的主体包含文档的所有内容，页面内容基本放到body里使用HbuilderX新建“基本HTML项目”将CSS和JS文件分别放入对应目录在html中输入代码任务1：创建一个站点HTML文档头部元素head标签用来设置HTML的文档标题和其它在网页中不显示的信息，比如direction方向、语言代码LanguageCode、指定字典中的元信息、等等head元素中包含的常用标签如下：标签名说明<title>代表HTML文档的标题<base>把相对URL转换为完整的绝对URL<meta>用于定义文件信息的名称、内容等信息<link>在文档中声明使用外接资源(如CSS)时使用此标签<style>在文档中声明样式时使用此标签<script>在文档中使用JavaScript脚本meta标签计算机要精确的处理各种字符文字，需要进行编码在HTML中使用meta标签描述字符集，告之浏览器此文档使用哪种字符集中文能够使用的字符集有两种字符集的比较优点缺点UTF8全面，包含了各个国家的语言文件尺寸大，比较臃肿gb2312(GBK)文件尺寸小，节省空间仅包含中文和少数英文和符号使用meta标签声明的字符集一定要和文档保存的类型保持一致，否则会出现乱码meta标签meta除了可以设置字符集，还可以设置页面描述信息和关键字description：页面描述，搜索引擎显示搜索结果时显示描述文字keywords：关键字，帮助搜索引擎提高搜索命中率HTML文档标题title标签用来设置页面标题有助于搜索引擎优化link标签、style标签、script标签link标签style标签<linkrel="stylesheet"href="reset.css"/><style>body{background-color：yellow;}p{color：blue;}</style>script标签<script>alert("Hello，world!");</script><script

src="engine.js"></script>HTML主体HTML主体为body元素，使用<body></body>标签，用于定义文档的正文内容，成对出现。在<body></body>之间的内容即为页面的主体内容，可以是文本、图像、音频、视频、表单及其他交互式内容，它们才是真正要在浏览器中显示，并让访问者看到的内容。由于HTML元素可以相互嵌套，通过元素层层嵌套，就构成了千变万化的网页。当一个元素包含另一个元素时，把外层元素称作父元素，内层元素称作子元素。子元素还可以再包含子元素，子元素中包含的任何元素，都是外层父元素的后代。2.3HTML基础语法HTML

对换行和tab均不敏感，仅通过标签来表示层次关系。在写代码时要求有整齐的缩进，使代码更容易阅读和维护，使用Ctrl+K格式化代码。HTML中如果出现多个空白字符（空格，tab，回车）都会被折叠为一个空格显示。标签要严格封闭，否则显示会出现错误。HTML标签是大小写无关的，<body>跟<BODY>或<Body>表示意思是一样的，标准推荐使用小写，这样符合XHTML标准1.HTML语法特性2.3HTML基础语法一个HTML元素由一个标签和一组属性组成。一个标签可以有一个或多个属性，属性以名称和值成对出现（键值对）。标签是HTML中最基本单位。1.标签的构成HTML标签是由尖括号（“<”和“>”）包围的关键词，如标签<html><p>等，标签名称不区分大小写，故<p>和<P>的含义相同，推荐大家使用小写。HTML标签分为两种类型：双标签和单标签。<br>双标签单标签2.3HTML基础语法2

标签中的属性HTML属性包含了元素的附加描述信息，定义在HTML开始标签中，通常以键/值对的形式出现，还有个别标签的属性为空属性，只有名称没有值。属性的名称和值无关大小写，推荐使用小写。<标签名属性名1="属性值"属性名2="属性值"…属性名N="属性值"></标签名>2.4文本控制标签标签分为容器级标签和文本级标签，容器级标签里可以放置任何标签，文本级标签里只能放置文字、图片、表单元素。h系列标签代表各级标题（h1—h6），h是容器级标签。p标签代表段落。水平分隔线标签hr。br标签。b标签。i标签。任务2HTML标签练习建立一个HTML文件，要求：设置p标签和h1-h6标签尝试在p标签中嵌套h标签，是否可行？尝试在h标签中嵌套p标签，是否可行？使用Chrome的开发者功能对此页面进行页面元素的查看和调试使用Chrome的开发者功能对百度首页进行页面元素的查看和调试尝试使用其它浏览器进行页面元素的查看和调试特殊字符标签特殊字符描述字符代码

空格符

<小于号<>大于号>&和号&￥人民币¥©版权©®注册商标®°摄氏度°±正负号±×乘号×÷除号÷2.5图片标签HTML文档中允许插入的图片类型如下：图片类型特点BMP不进行任何压缩，占用空间较大GIF压缩格式，一个GIF文件中可以包含多张图片，快速切换形成动画效果PNG无损压缩，图片占用空间小，支持透明效果JPG(JPEG)有损压缩，不支持透明效果如果希望图片质量较好就用jpg格式如果希望图片文件占用空间比较小就用gif格式如果希望在二者之间平衡就用png格式。2.5图片标签HTML页面中不是直接插入图片，而是插入图片的链接地址，需要将图片文件上传至服务器<img/>为单标签图片标签的属性src：代表资源，其值为显示图片的路径alt：替代文字，当图片无法显示时，网页上显示替代文字widthheigth路径路径：指从树型目录中的某个目录层次到某个文件的一条道路。此路径的主要构成是目录名称，中间用“/”分开。绝对路径是指从“根”开始的路径，也称为完全路径。不依靠其他参考直接通过路径找到某个文件相对路径是从用户工作目录开始的路径。即使文件的目录发生变化，只要相对路径不变，则依然能够通过它找到对应的文件。路径思考文件夹与文件的层级关系如下图所示，如何在index.html中插入1.png图片并显示此图片？在HTML页面上显示三张图片，要求：HTML文件放置在文件夹web下图片1放置在与HTML文件同级的文件夹photo1下图片2放置在与web文件夹同级的文件夹photo2下图片3放置在web文件夹上层文件夹下2.6布局标签<div>和<span>标签常用作布局工具，我们俗称盒子，用于容纳内容，标签没有明确的语义，就是普普通通的盒子。1.<div>标签div：全称division，分割、区域、跨度的意思。俗称大盒子。<div>是双标签，是最经典的容器级标签，内部可以放置任意内容，不像<h1>等内部内容有限制，这是<div>标签的一个好处。div的作用：多用于划分网页区域，进行结构布局。一般使用<div>包裹起来，整体设置大的布局效果。2.<span>标签span：小区域、小跨度的意思，俗称小盒子。<span>也是双标签，文本级标签。span常被用来设置同一行文字内的不同格式。2.7案例-社会主义核心价值观第3章HTML列表主讲教师：朱铁樱《Web前端开发》3.1超链接的基本使用<a>标签定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性是href属性，它指示链接的目标。超链接的其它属性title属性：表示鼠标悬停在超链接上时显示的文本内容target属性：表示是否在新窗口打开超链接_self：

默认。在相同的窗口中打开被链接文档_blank：表示在新窗口中打开被链接文档3.2锚点在W3C标准字“Anchor”一词即为锚点，其解释为：资源中的某个区域，可以是零个、一个或多个链接的目标或源。锚点可以引用整个资源，或特定部分，或者资源的特定表现形式。锚点是一种超链接，它可以是页面内部的超链接。假如我们有一个网页很长很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。(例如：现在很多网站都使用的”回到顶部”按钮)页面内部的锚点如果一个a标签有name属性或者id属性，那么它是页面的一个锚点。可以让一个超链接指向页面中的锚点。锚点经常被用来快速定位到页面中的某一位置。<pid="top">顶部</p><h3>锚点的用法</h3><h3>锚点的用法</h3><h3>锚点的用法</h3>...<h3>锚点的用法</h3><h3>锚点的用法</h3><h3>锚点的用法</h3><ahref="#top">点我跳转到顶部</a>跨页面的锚点可以使用锚点实现从一个页面跳转到另一个页面的某个位置，而不是从页面顶部开始浏览。<ahref="anchors.html#bottom">跳转到anchors页面的底部</a><h3>锚点的用法</h3><h3>锚点的用法</h3><h3>锚点的用法</h3>...<h3>锚点的用法</h3><h3>锚点的用法</h3><h3>锚点的用法</h3><pid="bottom">底部</p>3.3图片与超链接结合使用在HTML页面上建立三个超链接，要求：点击第一个超链接可以跳转至百度主页，鼠标悬停时显示”百度主页“，并在新窗口中打开百度主页。点击第二个超链接可以跳转至当前页面的某一位置。点击第三个超链接可以跳转至另一页面的某一位置。<ahref="http:///"><imgsrc="img/baidu.jpg"></a>图片与超链接结合使用定义无序列表的基本语法格式<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>……</ul><ul>标签用于定义无序列表<li>标签用于描述具体的列表项每个<ul>标签中至少应包含一个<li>标签无序列表是网页中最常用的列表，之所以称为无序列表，是因为其各个列表项之间没有顺序级别之分，通常是并列的。3.4无序列表标签<ul>标签和<li>标签都拥有type属性，用于指定列表项目符号。列表项目符号是列表项前显示符号。当为type属性设置不同的属性值，可以呈现不同的符号。type属性值显示效果disc（默认值）●circle○square■3.4无序列表标签注意：1.HTML5不再支持<ul>标签的type属性，通常使用CSS样式设置。2.<ul>标签中需要嵌套<li>标签，不建议在<ul>标签中直接输入文本内容。3.4无序列表标签有序列表是指有排列顺序的列表，其各个列表项按照一定的顺序排列。例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。3.5有序列表标签定义有序列表的基本语法格式<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>……</ol><ol>标签用于定义有序列表<li>标签为具体的列表项每个<ol>标签中至少应包含一个<li>标签3.5有序列表标签在有序列表中，除了type属性之外，还可以为<ol>标签定义start属性、为<li>标签定义value属性。属性属性值/属性值类型描述type1（默认）项目符号显示为数字1、2、3……a或A项目符号显示为英文字母a、b、c……或A、B、C……i或I项目符号显示为罗马数字i、ii、iii……或I、II、III……start数字规定全部列表项的初始值value数字规定当前列表项的初始值reversedreversed（可以省略）规定列表顺序为降序3.5有序列表标签案例演示3.5有序列表标签定义列表常用于对名词进行解释和描述，与无序列表和有序列表不同，定义列表的列表项前没有任何项目符号。<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>……<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>……</dl><dl>标签用于指定定义列表<dd>标签用于对名词进行解释和描述一个<dt>标签可以对应多个<dd>标签<dt>标签用于指定名词3.6定义列表标签在网页设计中，定义列表常用于实现图文混排效果。其中，<dt>标签中插入图片，<dd>标签中放入对图片解释说明的文字。注意：1.<dl>、<dt>、<dd>三个标签之间不允许出现其他标签。2.<dl>标签必须与<dt>标签相邻。3.6定义列表标签商品分类子分类在网上购物商城中浏览商品时，经常会看到商品被分为若干类别，这些商品类别通常还包含若干的子类。同样，在使用列表时，列表项中也有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。列表的嵌套应用

<ul><li>列表项1</li><li>列表项2</li><li>

<ol> <li>列表项1</li> <li>列表项2</li></ol></li></ul>列表的嵌套应用的语法格式列表的嵌套应用案例演示注意：在制作网页时，不建议直接使用列表标签的属性，通常使用CSS样式替代。列表的嵌套应用3.7案例-中国八大菜系第4章

表格与表单《Web前端开发》表格是怎样形成的？说到表格，其实大家并不陌生课程表排行榜查票4.1创建表格使用标签创建表格的语法格式<table><caption>表格标题</caption><tr> <td>单元格内的文字</td><td>单元格内的文字</td> ...</tr>...</table>在HTML中，所有的元素都是通过标签定义的，要想创建表格，就需要使用表格相关的标签。4.1创建表格用于定义表格的开始与结束。在<table>标签中，可放表格的标题、表格行和单元格等。<table>标签用于定义表格中的一行，必须嵌套在<table>标签中。<tr>标签用于定义表格的标题，该标签必须直接放置到<table>开始标签之后，不需要可省略。<caption>标签用于定义表格中的单元格，必须嵌套在<tr>标签。<td>标签表格标签的介绍4.1创建表格4.1创建表格应用表格时经常需要为表格设置表头，以使表格的格式更加清晰，方便查阅。表头一般位于表格的第一行或第一列，其文本加粗居中。设置表头多学一招:4.1创建表格只需用表头标签<th>替代相应的单元格标签<td>即可。<th>标签与<td>标签的属性、用法完全相同，但<th>标签具有语义性，特指表头，标签包含的文本默认加粗居中显示。而<td>标签只是普通的单元格，标签包含的文本为普通文本且水平左对齐显示。设置表头多学一招:4.1创建表格<thead>表格的结构用于定义表格的头部，必须位于<table>标签中，一般包含网页的logo和导航等头部信息。<tfoot>用于定义表格的页脚，位于<table>标签中<thead>标签之后，一般包含网页底部的企业信息等。<tbody>用于定义表格的主体，位于<table>标签中<tfoot>标签之后，一般包含网页中除头部和底部之外的其他内容。4.1创建表格表格标签属性中，较为常用的是colspan属性和rowspan属性，这两个属性书写在<td>标签中，用于合并单元格。21colspan属性用于设置单元格横跨的列数，也就是用于合并水平方向的单元格，取值为正整数。colspan属性rowspan属性用于设置单元格竖跨行数，也就是用于合并垂直方向的单元格，取值为正整数。rowspan属性4.2单元格的合并<table>标签属性如下表。属性描述常用属性值border设置表格的边框（默认border="0"为无边框）像素值cellspacing设置单元格与单元格之间的空间像素值（默认为2px）cellpadding设置单元格内容与单元格边缘之间的空间像素值（默认为1px）align设置表格在网页中的水平对齐方式left、center、rightbgcolor设置表格的背景颜色颜色值英文单词、十六进制#RGB、rgb(r,g,b)4.3美化表格和单元格<tableborder="10"><tableborder="2"><table>4.3美化表格和单元格4.3美化表格和单元格4.4表单的基本概念登录快递查询注册想想表单由哪些构成？在HTML中，一个完整的表单通常由表单控件、提示信息和表单域3个部分构成。4.4表单的基本概念对表单控件、提示信息和表单域的具体解释如下。包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。说明性的文字，提示用户进行填写和操作。用于采集用户的输入或选择的数据。如果不定义表单域，表单中的数据就无法传送到后台服务器。表单控件表单域提交信息4.4表单的基本概念在HTML5中，<form>标签用于创建表单，即定义表单域，以实现用户信息的收集和传递，<form>标签中的所有内容都会被提交给服务器。创建表单的语法格式<formaction="url地址"method="提交方式"name="表单名称">

各种表单控件</form><form>与</form>之间的表单控件是由用户自定义的action、method和name为表单标签<form>的常用属性4.4表单的基本概念action属性用于指定接收并处理表单数据的服务器程序的url地址1.action属性<form>标签的常用属性介绍如下。method属性用于设置表单数据的提交方式。2.method属性name属性用于指定表单的名称。3.name属性4.4表单的基本概念表单控件：表单控件有多种形式，主要用来收集用户数据，包括label、input、textarea、select等。最常使用的是input标签，根据功能的不同，input控件又分为text、password、radio、checkbox、file、submit、reset等类型。表单按钮：包括提交按钮、重置按钮和普通按钮。从本质上讲，表单按钮也是表单控件，之所以把它分离出来。单独介绍，是因为它的功能比较特别。4.4表单的基本概念提交按钮用于把表单数据发送到服务器重置按钮用于重置整个表单的数据普通按钮则需要开发者赋予它功能<formaction="login.php"method="post">

用户名：<inputtype="text"name="username"/>

密码：<inputtype="password"name="password"/><inputtype="submit"value="登录"/><inputtype="reset"></form>4.4表单的基本概念浏览网页时经常会看到输入框、单选按钮、提交按钮、重置按钮等，这些输入框和按钮都属于表单控件。要想在网页中定义这些表单控件就需要使用<input/>标签。input控件的语法格式<inputtype="控件类型"/>type属性取值有多种，用于指定不同的表单控件类型。4.5input表单控件<input/>标签的常用属性如下。属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域4.5input表单控件color类型<inputtype="color"/>number类型<inputtype="number"/>range类型<inputtype="range"/>Datepickers类型<inputtype=date,month,week…"/>email类型<inputtype="email"/>url类型<inputtype="url"/>tel类型<inputtype="tel"/>search类型<inputtype="search"/>（1）（2）（3）（4）（5）（6）（7）（8）新的input控件类型4.5input表单控件属性属性值描述name由用户自定义input控件的名称value由用户自定义input控件中的默认文本内容size正整数input控件在页面中的显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数<input/>标签的常用属性如下。4.5input表单控件案例演示4.5input表单控件通过<textarea>标签可以轻松地创建多行文本输入框。textarea控件的语法格式<textareacols="每行中的字符数"rows="显示的行数">

文本内容</textarea>cols属性用来定义多行文本输入框每行的字符数。rows属性用来定义多行文本输入框显示的行数。4.6其他表单控件textarea控件可选属性：disabled、name和readonly。可选属性属性值描述name由用户自定义控件的名称readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）4.6其他表单控件浏览网页时，经常会看到包含多个选项的下拉菜单。例如，选择所在的城市、出生年月、兴趣爱好等。<select>标签4.6其他表单控件使用select控件可以制作下拉菜单效果。使用<select>标签定义下拉菜单的基本语法格式<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select><select>标签用于在表单中添加一个下拉菜单。<option>标签用于定义下拉菜单中的具体选项。4.6其他表单控件在HTML5中，可以为<select>标签和<option>标签定义属性，以改变下拉菜单的外观显示效果。<select>标签和<option>标签的常用属性如下。标签名常用属性描述<select>size指定下拉菜单的可见选项数，取值为正整数multiple使下拉菜单将具有多项选择的功能，按住“Ctrl”键的同时选择多项。取值为multiple<option>selected定义selected="selected"时，当前项即为默认选中项4.6其他表单控件4.7案例-学生信息登记表第5章

HTML5进阶《Web前端开发》HTML5未来(2012)分化点分歧HTML

1.01993年(IETF)HTML

2.01995年(W3C)HTML

3.21996年(W3C)HTML

4.01997年(W3C)HTML

4.011999年(W3C)XHTML

1.02000年(W3C)XHTML

1.12001年(W3C)XHTML2.0?（W3C）HTML5草案2004年(WHATWG)HTML5正式版草案2008年(合并)5.1HTML语言版本变迁HTML5的文档声明HTML5没有指定的具体的版本，表示最新的

html版本5.2HTML5新特性HTML5中的一些有趣的新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search5.2HTML5新特性HTML5文档结构同样是由头部和主体两部分组成，只是新增了一些结构元素，如header、nav、article、section、aside、footer六个结构元素，这些元素都是块级元素。13.2.1HTML5页面结构图13-2HTML4.01页面布局图13-3HTML5结构元素布局5.3HTML5新增结构元素HTML5页面结构元素语法：<body><header> <nav>...</nav></header><article> <section>...</section></article><aside>...</aside><footer>...</footer></body>5.3HTML5新增结构元素1．header标记header标记定义文档和区域的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。通常<header>标记至少包含（但不局限于）一个标题标记（h1～h6），也可以包括hgroup（标题组合）标记、表格标识、搜索表单、导航等。<header> <hgroup> <h1>HTML5是下一代的HTML。</h1> <h3>什么是HTML5？</h3> <h5>HTML5将成为HTML、XHTML以及HTMLDOM的新标准。</h5> </hgroup></header>5.3HTML5新增结构元素2．nav标记nav标记代表页面的一个部分，是一个可以作为页面导航的链接组。建议不要在footer元素中使用nav元素，否则易造成页面显示不正确。配置相应的CSS代码可以实现水平导航。<body><header><nav><ul><li><ahref="#">HTML参考手册</a></li><li><ahref="#">HTML实例</a></li><li><ahref="#">HTML测验</a></li></ul></nav></header></body>5.3HTML5新增结构元素3.article标记article标记是一个特殊的section标记，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用，可包含header，footer。例如论坛帖子、博客文章、新闻故事、评论等。<article><header><hgroup><h1>HTML5结构元素的简介</h1><h2>HTML5的诞生</h2></hgroup><timedatetime="2017-04-28">2017-04-28</time></header><p>HTML5引入了许多新元素，包括几个用于更好地描述文本结构的元素……</p></article>5.3HTML5新增结构元素4．section标记section标记定义文档中的节。例如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。section元素不是一个普通的容器元素，它表示一段专题性的内容，可以带有标题。<section><h1>section标记</h1><p>用来定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。</p></section><article><h1>article标记</h1><p>article标记标识了Web页面中的主要内容。以博客为例，每篇帖子都构成一个重要内容。</p></article>5.3HTML5新增结构元素5．aside标记aside（侧栏，也称为旁注）标记用来说明其所包含的内容与页面主要内容相关，但不是该页面的一部分，类似于使用括号对正文进行注释（就像这样）。括号中的内容提供关于该元素的一些附加信息，例如广告、成组的链接、侧栏等。<header>我的博客</header><section><article><p>这是页面上重要的内容部分。也许是博客文章。带aside元素。</p><aside><p>这是第一篇博客文章。</p></aside></article><article><p>这是页面上重要的内容部分。也许是博客文章。不带aside元素</p></article></section>5.3HTML5新增结构元素6．footer标记footer标记定义section或文档的页脚，包含了与页面、文章或部分内容有关的信息，例如文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它与页眉header标记用法相同，在一个页面中可以多次使用，若在一个区段的最后使用footer标记，那么它就相当于该区段的页脚。<footerstyle="text-align:center;"><section><ahref="/"target="_blank">CAICT中国信通院</a><a>……</a><a>……</a></section><spanstyle="padding:2px5px;">京ICP备12046007号-5</span><spanstyle="padding:2px5px;">HTML5中国产业联盟版权所有</span></footer>5.3HTML5新增结构元素1.输入框占位符placeholder属性用于为input类型的输入框提供相关提示信息，以提示用户输入何种内容。在输入框为空时显式提示信息，当输入框获得焦点时，提示信息消失。案例演示5.4

HTML5表单2.输入框自动获取焦点autofocus属性用于指定页面加载后是否自动获取焦点，将autofocus属性的属性值指定为true时，页面加载完毕后会自动获取该焦点。案例演示5.4

HTML5表单3.输入框浏览器历史用户输入的浏览历史数据的展示，HTML5之前需要使用ul之类的列表配合CSS完成，HTML5中只需要使用datalist标签并在内部添加若干个option标签即可实现。例如：5.4

HTML5表单<inputlist="product"><datalistid="product">

<optionvalue="苹果">

<optionvalue="香蕉">

<optionvalue="橘子"></datalist>（1）email类型<inputtype="email"/>email类型的input控件是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。5.4

HTML5表单4.新增input标签类型（2）url类型<inputtype="url"/>url类型的input控件是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器；如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。5.4

HTML5表单4.新增input标签类型（3）日期输入表单<inputtype="date"/>5.4

HTML5表单4.新增input标签类型（4）日期输入表单<inputtype="time"/>（5）月份输入表单<inputtype="month"/>5.4

HTML5表单4.新增input标签类型（6）周日期输入表单<inputtype="week"/>（7）number类型<inputtype="number"/>5.4

HTML5表单（7）number类型<inputtype="number"/>number类型的input控件用于提供输入数值的文本框。在提交表单时，number类型的input控件会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。number类型具体属性说明如下。value：指定输入框的默认值。max：指定输入框可以接受的最大的输入值。min：指定输入框可以接受的最小的输入值。step：输入域合法的间隔，如果不设置，默认值是1。5.4

HTML5表单（8）tel类型<inputtype="tel"/>tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此tel类型通常会和pattern属性配合使用，验证输入的电话号码格式正确与否。5.4

HTML5表单(9)search类型<inputtype="search"/>search类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符。例如，站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。5.4

HTML5表单（10）color类型<inputtype="color"/>color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。颜色采用十六进制颜色值，基本形式是#RRGGBB，默认颜色值为#000，通过value属性值可以更改默认颜色。案例演示5.4

HTML5表单属性说明autocomplete属性规定表单或输入字段是否应该自动填充，自动填充上一次的值autofocus布尔类型，自动获取焦点form可以在<form>标签之外使用<input>，通过此属性指定<form>的id，此<input>属于指定<form>formaction适用于type=submit，当有多个submit，可以通过此属性指定不同的请求urlformenctype当把表单数据（form-data）提交至服务器时如何对其进行编码，仅针对method="post"的表单，formenctype属性覆盖<form>元素的enctype属性。formmethod适用于type=submit，定义请求方式，会覆盖<form>中的method，可以在有多个submit时使用formnovalidate规定在提交表单时不对

<input>元素进行验证formtarget相当于<a>的target属性，是否打开新的页面height和width宽高尺寸，仅适用于type="image"list引用<datalist>，一个单独的<datalist>不会显示min和max规定value的最大、最小值，适用于number、range、date、datetime、datetime-local、month、time以及weekmultiple布尔类型，允许用户在

<input>元素中输入一个以上的值，适用于type=file和emailpattern规定用于检查

<input>元素值的正则表达式placeholder预期提示文字required是否必填/必选step规定合法数字间隔，适用于number、range、date、datetime、datetime-local、month、time以及week5.4

HTML5表单5.5HTML5音频与视频在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。在网络传输速度越来越快的今天，音频和视频技术已经被越来越广泛的应用在网页设计中。在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。复杂冗长运用HTML5中新增的video标签和audio标签可以避免这样的问题。5.5HTML5音频与视频视频和音频编解码器由于视频和音频的原始数据一般都比较大，如果不对其进行编码就放到互联网上，传播时会消耗大量时间，无法实现流畅的传输或播放。通过视频和音频编解码器对视频和音频文件进行压缩，就可以实现视频和音频的正常传输和播放。5.5HTML5音频与视频多媒体格式运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。视频格式视频格式包含视频编码、音频编码和容器格式。音频格式音频格式是指要在计算机内播放或是处理音频文件。5.5HTML5音频与视频视频格式OggMPEGWebM多媒体格式音频格式VorbisMP3Wav5.5HTML5音频与视频5.5.1audio标签在HTML5中，audio标签用于定义播放音频文件的标准。基本语法格式<audiosrc="音频文件路径"controls="controls"></audio>src属性用于设置音频文件的路径，controls属性用于为音频提供播放控件。可在<audio>和</audio>之间也可以插入文字，用于不支持audio元素的浏览器显示。5.5HTML5音频与视频音频控件，用于控制音频文件的播放状态播放进度条声音5.5HTML5音频与视频5.5.1audio标签属性值描述autoplayautoplay当页面载入完成后自动播放音频。looploop音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。注意：以上列举的audio元素的属性和video元素是相同的，这些相同的属性在嵌入音视频时是通用的。5.5HTML5音频与视频5.5.1audio标签虽然html5支持Ogg、MPEG4和WebM的视频格式以及Vorbis、MP3和Wav的音频格式，但各浏览器对这些格式却不完全支持视频格式格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0Ogg

支持支持支持

MPEG4支持

支持支持WebM

支持支持支持

音频格式OggVorbis

支持支持支持

MP3支持

支持支持Wav

支持支持

支持视频音频文件的兼容性问题5.5HTML5音频与视频5.5.1audio标签在HTML5中，运用source元素可以为video元素或audio元素提供多个备用文件。基本语法格式<audiocontrols="controls"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> ……</audio>src用于指定媒体文件的URL地址。type指定媒体文件的类型。5.5HTML5音频与视频5.5.1audio标签在HTML5中，video标签用于定义播放视频文件的标准。基本语法格式<videosrc="视频文件路径"controls="controls"></video>src属性用于设置视频文件的路径，controls属性用于为视频提供播放控件，这两个属性是video元素的基本属性。5.5HTML5音频与视频5.5.2video标签浏览器添加的视频控件，用于控制视频播放的状态播放进度条声音全屏5.5HTML5音频与视频5.5.2video标签属性值描述autoplayautoplay当页面载入完成后自动播放视频。looploop视频结束时重新开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。posterurl当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。5.5HTML5音频与视频5.5.2video标签在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。注意：通过width和height属性来缩放视频，这样的视频即使在页面上看起来很小，但它的原始大小依然没变，因此在实际工作中要运用视频处理软件（如“格式工厂”）对视频进行压缩。5.5HTML5音频与视频5.5.2video标签使用音频和视频注意事项1.

浏览器支持的音频和视频格式不同，需要在<source>标签中提供不同格式的文件来兼容不同的浏览器。2.

在设置src属性时，应该使用相对路径或绝对路径，避免使用相对于当前页面的路径。3.

使用controls属性会显示默认的播放器控件，但是在移动设备上默认控件可能无法显示或不够友好。此时可以使用JavaScript自定义控件。4.

在不同的浏览器和操作系统下，对于媒体的支持情况也可能不同，因此需要在不同的浏览器和设备上进行测试。5.

如果使用自定义控件，需要注意控件的可用性和兼容性，避免在某些浏览器或设备上无法使用。6.

浏览器默认情况下不会自动播放媒体文件，需要用户手动点击播放按钮。如果希望实现自动播放的效果，需要在设置<audio>或<video>标签时添加autoplay属性。7.

使用媒体文件会占用网站的带宽，需要注意使用合适的压缩方法来减小文件大小，避免对网站性能造成负面影响。总之，在使用<audio>和<video>标签时，需要进行充分的测试和优化，以提供良好的用户体验和兼容性。5.5HTML5音频与视频5.6绘图HTML5中增加了用于绘制图形的canvas技术，此项技术可以在不借助于插件的情况下，绘制任意的图形，目前在网页游戏领域、数据可视化领域应用的非常广泛。若要使用canvas绘制图形，仅仅依靠标签是达不到效果的，此项技术还需要配合js才能完成。5.6绘图5.6.1基本用法绘制图形前，首先需要在页面中添加canvas标签，并添加id属性，以便js获取到canvas节点。可以通过width与height属性修改canvas标签的宽度和高度，canvas标签会形成一个绘制区域，用于绘制图形，也可以将canvas形成的区域理解为画布。<canvasid="canvas"width="500"height="300">您的浏览器不支持canvas</canvas>5.6绘图5.6.1基本用法绘图标签设置好以后，接下来使用js获取到canvas节点对象，并获取绘图环境通过getElementById()方法获取到canvas节点对象，并调用了节点对象的getContext方法，获取到对应的2d绘图环境，后续所有的绘图操作都需要基于此绘图环境，有些地方称绘图环境为绘图上下文。varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");5.6绘图5.6.2路径canvas在绘制图形时均是根据路径进行绘制，首先需要调用绘图环境对象的beginPath方法创建一个绘图路径，接下来基于此路径，可以调用不同的绘图方法进行绘制，最后再调用closePath方法封闭路径。ctx.beginPath();ctx.rect(10，30，200，100);ctx.closePath();在调用了beginPath方法开启了路径后，调用了rect方法可以在页面上绘制一个矩形，其中rect中四个参数分别表示，矩形左上角的xy坐标，矩形的宽度与高度。5.6绘图需要注意的是canvas中的坐标系不同于数学中的坐标系，其坐标系的原点在左上角，x轴沿着水平方向向右增长，y轴沿着垂直方向向下增长。坐标轴5.7案例-电影影评网第6章CSS基础主讲教师：朱铁樱《Web前端开发》

思维导图6.1CSS概述随着网页制作技术的不断发展，陈旧的CSS特性和标准已经无法满足现今的交互设计需求，开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS3的出现，在不需要改变原有设计结构的情况下，增加了许多新特性，极大地满足了开发者的需求。

6.1CSS概述代码繁琐格式的一致性差可维护性差网页现实效果缺乏动态性与交互性HTML标记的不足之处不利于代码的阅读维护困难

6.1CSS概述CSS提供了丰富的样式font:属性值;字体属性颜色属性背景属性浮动属性边框属性color:属性值;background:属性值;float:属性值;border:属性值;CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

6.1CSS概述

6.1CSS概述1996年CSS1定义了网页的基本属性：字体、颜色、补白、基础选择器等1998年在CSS1的基础上添加了高级功能：浮动和定位、部分高级选择器2004年修改CSS2中的错误，增加一些扩展内容发布时间是一个时间段，还没定稿。各主流浏览器已经支持其中的绝大部分特性。遵循模块化开发CSS1CSS2CSS2.1CSS3CSS发展史

6.1CSS概述由于各浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明确的情况下，会用厂商的前缀加以区分，通常把这些加上私有前缀的属性称之为“私有属性”。各主流浏览器都定义了自己的私有属性，以便让用户更好的体验CSS的新特性。私有前缀相关浏览器-msIE浏览器-webkitChrome浏览器、Safari（苹果）-mozFirefox浏览器-oOpera浏览器推荐写法：把带前缀的写在前面，最后再写一个不带私有前缀的。

6.1CSS概述由于功能的加强，CSS3能够用更少的图片或脚本制作图形化网站。在进行网页设计时，减少标签的嵌套和图片的使用数量，网页页面加载也会更快。CSS3的新功能帮我们摒弃了冗余的代码结构，远离很多JavaScript脚本或者Flash代码。网页设计者不再需要花大把时间去写脚本，极大的节约了开发成本。节约成本提高性能CSS3优势如今大多数网页都是遵循Web标准开发的，即用HTML编写网页结构和内容，而相关版面布局、文本或图片的显示样式都使用CSS控制。6.2结构与表现分离结构与表现相分离是指在网页设计中，HTML标签只用于搭建网页的基本结构，不使用标签属性设置显示样式，所有的样式交由CSS来设置。HTML身体CSS衣服6.3CSS语法基础选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。选择器属性属性值属性属性值属性属性值声明声明声明CSS样式规则的结构示意图

6.3CSS语法基础CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。

6.3CSS语法基础如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。呈现效果一样代码块1：代码块2：可读性更高代码块3：

6.4CSS注释CSS注释使用"/*"和"*/"符号表示注释，符号之间的内容不会被浏览器解析，主要用于对程序进行补充说明，CSS注释有多行注释和单行注释两种，都必须以/*开始、以*/结束，中间加入注释内容。

6.5在网页中嵌入CSS行内式也称为内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下:行内式内嵌式链入式<标记名style="属性1:属性值1;属性2:属性值2;>

内容

</标记名>内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标签定义，其基本语法格式如下:<head><styletype="text/css">

选择器{属性1:属性值1;属性2:属性值2;}</style></head>行内式内嵌式链入式

6.5在网页中嵌入CSS链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文档中，其基本语法格式如下:<head><linkhref="CSS文件的路径"

type="text/css"rel="stylesheet"/></head>

6.5在网页中嵌入CSS行内式内嵌式链入式

6.6CSS三大特性CSS是层叠式样式表的简称，层叠性和继承性是其基本特征。所谓层叠性是指多种CSS样式的叠加。相同选择器设置相同的样式会覆盖另一种冲突样式。层叠性原则：样式冲突，遵循就近原则样式不冲突，不会层叠

6.6CSS三大特性所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式。htmlheadstyletitlebodyh1h1ppppemememimg

6.6CSS三大特性当使用

p元素作为选择器编写一个字体相关的样式规则时，规则将应用于文档中所有的段落和这些段落包含的内联文本。与字体相关的属性不能应用于图像。htmlheadstyletitlebodyh1h1ppppemememimg

6.6CSS三大特性以下属性不具有继承性边框属性内/外边距属性背景属性定位属性布局属性元素宽高属性01、文字控制属性基本都可以继承；02、标题文本h不会继承父级的文字大小，因为自身有默认字号样式；03、超链接a标签不能继承父级元素的颜色color，因为自身有颜色属性；04、应用于具体元素的任何属性将覆盖该属性的继承值。

6.6CSS三大特性定义CSS样式时，使用两个或更多规则在同一元素上，就会产生优先级。选择器相同，则执行层叠性选择器不同，则根据选择器权重执行定义一个!important命令，该命令被赋予最大的优先级，大于一切。综述：•行内样式>内嵌样式>外部链入样式>浏览器默认样式•!important>内联>ID>伪类|类|属性>标签>伪元素>通配符>继承如果优先级

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论