版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
网页设计与制作HTML5+CSS3任务1
制作第一个HTML页面第1章网页制作入门知识目标技能目标素质目标（1）了解网页相关的概念与术语（2）熟悉HTML的发展历史（3）掌握HTML文档的结构（1）掌握SublimeText的基本操作（2）能够创建简单的网页（1）培养勤奋学习的态度（2）培养逻辑思维能力及实训操作能力（3）通过课前课中课后的行为规范，使学生养成良好的行为习惯网页相关知识常用的开发工具——SublimeTextHTML5基础任务实现第1章网页制作入门1.网页相关知识1.1网页与网站的相关概念1.2网页分类第1章网页制作入门1.1网页与网站的相关概念网
页1.网页相关知识网页究竟是什么？浏览新闻（信息）查询信息网上购物1.1网页与网站的相关概念以江西工业工程职业技术学院一个页面为例认识网页：1.网页相关知识打开谷歌浏览器，在地址栏输入/info/1031/11291.htm/info/1031/11291.htm文本图片文本超链接为了快速了解网页是如何形成的，在谷歌浏览器中按下F12，即可看到网页的源码1.1网页与网站的相关概念网页通常由文字、图像、链接、音频、视频等元素构成，通常是HTML文件。常见的网页文件是以.html或.htm为扩展名的，因此俗称为THML文件。网页是构成网站的基本元素1.网页相关知识网站是万维网上一组相关网页和有关文件的集合（本质是文件夹），实行分类管理，即用不同的文件夹管理。网页（WebPage）是网站中的一个页面，通常是HTML文件，它要通过浏览器来阅读。网站中一般有一个特殊的网页作为浏览的起始点，称为主页（或首页）。主页的文件名为index.html，其它页面称为内面或子页。1.2网页分类依据网页的位置：1.主页2.内页1.网页相关知识依据表现形式：1.静态网页2.动态网页网页相关知识常用的开发工具——SublimeTextHTML5基础任务实现第1章网页制作入门2.常用的开发工具——SublimeTextHTML5文档实质是一个文本文件，扩展名为.htm或者.html，常用的工具有Sublimetext、Hbuilder、Dreamweaver、NotePad++等等。2.1下载并安装2.2中文设置第1章网页制作入门2.1下载并安装2.常用的开发工具——SublimeTextWindows32位操作系统选择“Windows”64位操作系统选择“Windows64bit”下载安装包
官网下载链接：/32.1下载并安装2.常用的开发工具——SublimeText安装
双击安装包，点击next，注意勾选“Addtoexplorercontextmenu”，即添加右键菜单的选项，后续文档都可以使用SublimeText打开。点击“install”安装，直到“Finish”。2.2中文设置2.常用的开发工具——SublimeTextSublimeText操作界面默认的语言是全英文，根据需求可选择性地将sublimetext设置成中文。打开软件，点击Preference，选择最底部的PackageControl搜索框中输入关键字Install，选择PackageControl:InstallPackage2.2中文设置2.常用的开发工具——SublimeText等待插件列表加载完成，在搜索框中输入chinese，选择下拉框中的ChineseLocalizations，完成安装。网页相关知识常用的开发工具——SublimeTextHTML5基础任务实现第1章网页制作入门3.HTML5基础用户浏览网页时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。3.1HTML5文档基本格式3.2HTML5标签及属性3.3代码的注释第1章网页制作入门3.1HTML5文档基本格式3.HTML5基础HTML5文档的基本格式如下：<!DOCTYPEhtml><html>
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
</body></html>文档类型声明根标记头部标记主体标记3.1HTML5文档基本格式3.HTML5基础<!DOCTYPE>标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。<html>标签<!DOCTYPE>标签之后，也被称为根标签，用于告知浏览器其自身是一个HTML文档，<html>标志HTML文档的开始，</html>标志着HTML文档的结束。<head>标签用于定义HTML文档的头部信息，也被称为头部标签，紧跟在<html>标签之后。<body>标签用于定义HTML文档所要显示的内容，也成为主体标签。浏览器中显示的所有文本、图像、表单与多媒体元素等信息都必须位于<body>标签内。3.2HTML5标签及属性3.HTML5基础
HTML标签是由尖括号括起来的关键词，也称为HTML元素。分为两大类，分别是“双标签”与“单标签”。双标签
双标签是指由开始和结束两个标签符号组成的标签。语法：<标签名>内容</标签名>解释：<标签名>表示标签作用开始，一般称作“开始标签”。</标签名>表示标签作用结束，一般称作“结束标签”。例如：<h1>学院介绍</h1>3.2HTML5标签及属性3.HTML5基础单标签
单标签也称空标签，是指用一个标签符号即可完整的描述某个功能的标签。语法：<标签名/>例如：<br/> 用于实现换行。3.2HTML5标签及属性3.HTML5基础属性
使用HTML标签的属性来给HTML提供更多的信息语法：<标签名属性1="属性值1"属性2="属性值2"…/>内容</标签名>注意：一个标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。任何标签的属性都有默认值，省略该属性则取默认值。例如：单标签<hr/>表示在文档当前位置画一条水平线。3.3代码的注释3.HTML5基础注释HTML5代码注释采用<!--...-->标签。例如:<!--这是一段注释。注释不会在浏览器中显示。--><p>这是一段普通的段落。</p>网页相关知识常用的开发工具——SublimeTextHTML5基础任务实现第1章网页制作入门4.任务实现本节对前面所学知识点进行检测，引导学生独立自主完成任务1：制作第一个HTML网页。第1章网页制作入门网页设计与制作HTML5+CSS3任务2美化第一个HTML页面第1章网页制作入门知识目标技能目标素质目标（1）掌握CSS的概念并了解CSS的发展史。（2）熟悉网页CSS样式的创建流程。（3）掌握网页设计过程中的结构和表现的概念。（1）掌握使用SublimeText编写简单的CSS样式。（2）能够对网页进行简单的美化。（1）遵循WEB开发规范。（2）培养分析和解决问题的能力。（3）培养自学能力。初识CSS3WEB标准任务实现第1章网页制作入门1.初识CSS31.1CSS概念1.2CSS发展史第1章网页制作入门1.1CSS概念CSS(CascadingStyleSheet)层叠样式表，通常被称为CSS样式或样式表。1.初识CSS3控制网页的外观:设置HTML页面中的文本内容(字体、大小、对齐方式等)；图片的外形(宽高、边框样式、边距等)；版面的布局等外观显示样式。1.1CSS概念CSS(CascadingStyleSheet)层叠样式表，通常被称为CSS样式或样式表。1.初识CSS3CSS非常灵活:既可以嵌入在HTML文档中;也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名。W3C鼓励使用HTML来定义网页的结构，而使用CSS来控制网页的外观，功能明确，语义清晰。1.2CSS发展史1.初识CSS3CSS规范的第一版本CSS1.0CSS2CSS31996年12月1997年1998年2005年12月
初识CSS3WEB标准任务实现第1章网页制作入门2WEB标准WEB标准的优点2.WEB标准（1）让Web的发展前景更广阔。（2）内容能被更广泛的设备访问。（3）更容易被搜寻引擎搜索。（4）降低网站流量费用。（5）使网站更易于维护。（6）提高页面浏览速度。2WEB标准WEB标准最核心的思想：结构、表现、行为分离2.WEB标准（1）结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。HTML的主要功能是定义网页的结构。（2）表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。CSS主要功能是定义网页的外观。（3）行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。JavaScript脚本的主要功能是定义网页的行为。初识CSS3WEB标准任务实现第1章网页制作入门3.任务实现本节对前面所学知识点进行检测，引导学生独立自主完成任务2：美化第一个HTML网页。第1章网页制作入门网页设计与制作HTML5+CSS3任务3制作“学习资料”子页面第2章网页的基本结构实现知识目标技能目标素质目标（1）掌握HTML基本的结构元素。（2）掌握HTML元素的分类。（3）掌握HTML注释标签与文档类型标签的用法。（1）能够正确使用基本的结构元素。（2）能够正确使用注释标签进行注释。（3）能够正确使用文档类型标签对文档进行声明。（1）掌握并遵循Web开发并标准。（2）培养勤奋学习的态度。（3）培养严谨的编程习惯。HTML基本结构元素HTML元素类型任务实现第2章网页的基本结构实现1.HTML基本结构元素1.1html元素1.2head元素1.3body元素第2章网页的基本结构实现1.1html元素1.HTML基本结构元素HTML元素是构成HTML文档的基本对象，是通过HTML标签进行定义的，是从开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容；每个HTML网页文档都包含html、head和body元素这三个元素，并且只能出现一次。HTML基本结构元素包括html、head、title、body、meta、link、style、script等;1.1html元素1.HTML基本结构元素
html元素是网页文件的根元素，网页文件内容都要放置在html的起始标签和结束标签内，它告诉浏览器整个文件是HTML格式，按照HTML规范解析并显示HTML文件。1.2head元素1.HTML基本结构元素head元素包含网页的头部信息，用于定义文档的头部，它是所有头部元素的容器。主要包括网页的标题、网页介绍、关键词、样式文件、脚本文件、字符编码等内容。head常用元素如下：1）title元素
2）link元素3）script元素 4）meta元素1.2head元素1.HTML基本结构元素title元素：网页的标题，应尽可能地短，并具有可描述性。例如：<title>学习资料</title>link元素：引入外部样式文件。例如：<linkrel="stylesheet"type="text/css"href="style.css">script元素：引入外部脚本文件和内置脚本。例如：<script>document.write("HelloWorld!");</script>meta元素：设置网页关键词、描述、作者等信息，与SEO优化有关。例如：<metaname="keywords"content="江西工业工程职业技术学院"/>1.3body元素1.HTML基本结构元素body元素包含网页文档的所有内容，是网页文档的主体元素。具体标签包括：1）段落p 2）标题h1~h63）超链接a 4）图像img5）表单form 6）列表ul元素HTML基本结构元素HTML元素类型任务实现第2章网页的基本结构实现2.HTML元素类型2.1行内元素、块状元素和行内块状元素2.2替换元素与不可替换元素2.3注释标签和文档类型标签第2章网页的基本结构实现2.1行内元素、块状元素和行内块状元素2.HTML元素类型根据元素的显示（能不能在同一行显示）类型，HTML元素分为行内元素、块状元素和行内块状元素。1.行内元素(也称内联元素)，具有以下特点：（1）和其他元素都在一行上。（2）元素的高度、宽度、行高及顶部和底部边距不可设置，左右边距可以设置。（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。（4）只可以容纳行内元素。常用的内联元素有:a、span、br、i、em、strong、label、q、textarea等。其中a、span是最典型的行内元素。2.1行内元素、块状元素和行内块状元素2.HTML元素类型2.块状元素(也称块级元素)，具有以下特点：（1）总是在新行上开始，独立占一行，两个相邻块状元素不会出现并列显示的现象，会按顺序自上而下排列。（2）高度、高度、行高以及边距都可控制。（3）元素宽度在不设置的情况下，是它本身容器的100%。（4）它可以包含内联元素和部分块元素。常见的块状元素有div、p、h1、h2、h3、h4、h5、h6、ul、li、ol、dl、form、table等；其中div是最典型的块状元素，被广泛地应用到了网页布局中。2.1行内元素、块状元素和行内块状元素2.HTML元素类型3.行内块状元素(也称内联块级元素)，本质上是行内元素，具有以下特点：（1）默认宽度是它本身内容的宽度，但是可以设置宽度、高度和内外边距。（2）可以与其他行内元素、内联元素共处一行，但是之间会有空白缝隙。常见的行内块元素有img、input、td。2.2替换元素与不可替换元素2.HTML元素类型1.替换元素(也称置换元素)，浏览器会根据元素的标签和属性，来决定元素的具体显示内容。常见的替换元素有img、input、textarea、select、object等。例如：浏览器会根据img标签的src属性的值来读取图片信息并显示出来。<inputtype="text"/>2.不可替换元素(也称非置换元素)，其内容直接表现在浏览器。例如：段落P就是一个不可替换元素，文字段落的内容全部被显示。2.3注释标签和文档类型标签2.HTML元素类型1.注释标签：可以在HTML文档中添加注释，增加代码的可读性，便于维护和修改。在浏览器中对用户透明，只有在用代码编辑器打开文档源代码时才可见。格式：<!--注释内容-->例如：<p>这是一段普通的段落。</p><!--这是一段注释，不会在浏览器中显示。-->2.文档类型标签：正确声明HTML的版本，使浏览器就能正确显示网页内容，可以使用的是文档类型标签<!DOCTYPE>。HTML基本结构元素HTML元素类型任务实现第2章网页的基本结构实现3.任务实现本节对前面所学知识点进行检测，引导学生独立自主完成任务3：制作“学习资料”子页面。第2章网页的基本结构实现网页设计与制作HTML5+CSS3任务4制作“学习动态”子页面第2章网页的基本结构实现知识目标技能目标素质目标（1）掌握常用块元素的用法。（2）掌握常用行元素的用法。（1）能够熟练使用段落、标题、列表、通用块标签。（2）能够熟练使用超级链接、图像、通用行标签。（3）能够使用合适的HTML标签创建图文并茂的网页。（1）培养自主学习能力。（2）培养具一反三的能力和吃苦耐劳的精神。（3）培养学生从知识到实践的的程序思维。常用的块元素常用的行元素任务实现第2章网页的基本结构实现1.常用的块元素1.1段落与标题1.2通用块元素1.3常用列表块元素1.4语义块元素第2章网页的基本结构实现1.1段落与标题1.常用的块元素HTML网页中一篇文章要结构清晰，就需要有标题和段落。段落标签：<P>格式：<palign="对齐方式">段落文本</p>注：align属性规定段落中文本的对齐方式。属性值有left，right，center，justify。但不建议使用，建议使用样式取代。段落标签：<pre>与<p>标签用法基本相同，区别是<pre>内文本内容将保留空格和换行符。1.1段落与标题1.常用的块元素<body><p>这是段落文字这是段落文字这是段落文字这是段落文字</p><hr><pre>这是段落文字这是段落文字这是段落文字这是段落文字</pre></body>1.1段落与标题1.常用的块元素HTML网页中一篇文章要结构清晰，就需要有标题和段落。标题标签：<h1>~<h6>标签可定义标题元素。注：<h1>定义最大的标题。<h6>定义最小的标题。1.2通用块元素1.常用的块元素<div>标签：<div>标签用来定义文档中的分区或节（division/section），把文档分割为独立的、不同的部分。<div>标签是一个容器标签，其中的内容可以是任何HTML元素。id和class是div标签最重要的两个属性，区别在于class用于元素组（某一类元素），而id用于标识单独的唯一的元素1.3常用列表块元素1.常用的块元素HTML支持有序、无序和定义列表，本质是组织文本的一种方式。有序列表：特定顺序的列表项集合格式：<ol
type=编号类型
start=value><li>第一项</li><li>第二项</li><li>第三项</li></ol>type值描述1阿拉伯数字：1、2、3……A大写英文字母：A、B、C……a小写英文字母：a、b、c……I大写罗马数字：I、II、III……i小写罗马数字：i、ii、iii……表2-1有序列表type属性取值1.3常用列表块元素1.常用的块元素...<ol><li>苹果</li><li>香蕉</li><li>菠萝</li></ol><oltype="a"start="3"><li>咖啡</li><li>牛奶</li><li>茶</li></ol>...1.3常用列表块元素1.常用的块元素HTML支持有序、无序和定义列表，本质是组织文本的一种方式。无序列表：列表中列表项的前导符合没有一定的次序，而是黑点、圆圈、方框等一些特殊符号标识。格式：<ultype=编号类型><li>第一项</li><li>第二项</li><li>第三项</li></ul>type值描述disc表示实心圆(默认)circle表示表示空心圆square表示小方块表2-2无序列表type属性取值1.3常用列表块元素1.常用的块元素...<body><ul><li>首页</li><li>学校概况</li><li>教学在线</li><li>院系设置</li><li>党的建设</li></ul></body>...1.3常用列表块元素1.常用的块元素HTML支持有序、无序和定义列表，本质是组织文本的一种方式。定义列表：又称为释义列表或字典列表，主要用到3个HTML标签：<dl>标签、<dt>和<dd>标签。格式：<dl><dt>名词1</dt><dd>名词解释1</dd><dt>名词2</dt><dd>名词解释2</dd>…</dl>1.3常用列表块元素1.常用的块元素...<body><dl><dt>Web前端课程</dt><dd>这里有html教程</dd><dd>这里有css教程</dd><dt>Java课程</dt><dd>这里有java开发教程</dd></dl></body>...1.4语义块元素1.常用的块元素语义元素是拥有语义的元素，它清楚地向浏览器和开发者描述其意义。例如，form、table以及img能清晰地定义其内容。标签名描述<header>表示页面中一个内容区块或整个页面的标题<section>页面中的一个内容区块比如章节、页眉、页脚或页面的其他部分可以和h1、h2…等元素结合起来使用表示文档结构<article>表示页面中一块与上下文不相关的独立内容比如一篇文章<aside>表示<article>标签素内容之外的、与<article>标签内容相关的辅助信息可用作文章的侧栏<hgroup>表示对整个页面或页面中的一个内容区块的标题进行组合<figure>表示一段独立的流内容一般表示文档主体流内容中的一个独立单元<figcaption>定义<figure>标签的标题<nav>表表示页面中导航链接的部分<footer>表示整个页面或页面中一个内容区块的脚注一般来说它会包含创作者的姓名、创作日期以及创作者的联系信息表2-3语义块元素1.4语义块元素1.常用的块元素header元素：具有引导和导航作用，通常放在页面头部。<header><h1>网页主题</h1>…</header>nav元素：用于定义导航链接，将具有导航性质的链接归纳在一个区域中。<nav><ul><li><ahref＝"＃">首页</li><li><ahref＝"＃">公司概况</li></ul></nav>article元素：经常被用于定义一篇日志、一条新闻或用户评论等。<article><header><h2>第二章</h2></header></article>1.4语义块元素1.常用的块元素aside元素：定义页面内容以外的某些内容。section元素：素定义文档中的节，即文档的各个部分。例如章节，页眉。<section>
<h1>第1节</h1>
<p>第1节内容</p></section><section>
<h1>第2节</h1>
<p>第2节内容</p></section>1.4语义块元素1.常用的块元素footer元素：定义一个页面或者区域的底部，通常包含文档的作者、版权信息、使用条款链接、联系信息等等。figure和figcaption元素：搭配使用，定义<figure>标签的标题。<figure><imgsrc="images/img_1.jpg"alt="pic"width="304"height="228"><figcaption>学习贯彻党的二十大精神</figcaption></figure>常用的块元素常用的行元素任务实现第2章网页的基本结构实现2.常用的行元素2.1超链接a2.2通用行内元素span2.3图像img2.4文本格式化元素第2章网页的基本结构实现2.1超链接a2.常用的行元素超链接：点击超链接跳转到新的文档或者当前文档中的某个部分，本质上是网页的一部分，通过<a></a>标签环绕链接对象创建。格式：<a
href=""
target=“"
title="">链接对象</a>href属性定义了这个链接所指的目标地址；title属性定义链接提示文字；target属性定义指定打开链接的目标窗口的方式；2.1超链接a2.常用的行元素超链接的分类：根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等；根据超链接的对象不同，超链接可分为文字超链接、图像超链接和图像映射等。2.1超链接a2.常用的行元素<ahref="URL">超链接文字</a>文字超链接图像超链接<ahref="链接地址"><imgsrc="源文件地址"></a>电子邮件链接<ahref="mailto:E-mail地址">超链接文本</a>锚点链接：先定义锚点，再通过id名标注跳转到锚点目标的位置。<aid="锚点名称">文字</a><ahref=“#锚点的名称"＞链接的文字</a>图像映射<imgsrc="图像地址"usemap=“#影像地图名称"><mapname="影像地图名称"><areashape="热区形状"coords="热区坐标"href="链接地址“/></map>2.2通用行内元素span2.常用的行元素span元素：在网页的效果上看不出什么意义，但是通过id属性、style属性、class属性设置和JavaScript可以改变span元素内容的排版布局。格式:<span>文本和其他内联元素</span>特点：（1）<span>标签没有特定的含义，可用作文本的容器，用来组合文档中的行内元素。（2）当与CSS一起使用时，<span>元素可为部分文本设置样式属性。（3）<span>标签只能包含文本和其他内联元素，不能将块级元素放入其中。2.3图像img2.常用的行元素HTML网页中经常需要插入图片，使页面更加美观，表达更加清晰。格式：<imgsrc="被引用图片的地址"alt="图片的代替文本">img标签属性：2.3图像img2.常用的行元素图像路径：绝对路径
是主页上的文件或目录在硬盘上的真正路径或网址。例如：“c:/website/img/photo.jpg”相对路径是以当前文件所在路径为起点，进行相对文件的查找。例如：2.4文本格式化元素2.常用的行元素在网页中有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记使文字以特殊的方式显示。文本格式化元素包括sup元素、sub元素、b元素、i元素、em元素、strong元素、mark元素和br元素等。<b>：定义粗体文本；<i>：定义斜体文本；<em>：定义强调文本，实际效果与斜体文本差不多；<strong>：定义粗体文本；<sup>：定义上标文本；<sub>：定义下标文本；<mark>：定义带有记号的文本；常用的块元素常用的行元素任务实现第2章网页的基本结构实现3.任务实现本节对前面所学知识点进行检测，引导学生独立自主完成任务4：制作“学习动态”子页面。第2章网页的基本结构实现网页设计与制作HTML5+CSS3任务5制作“在线留言”子页面第2章网页的基本结构实现知识目标技能目标素质目标（1）理解表单的工作原理。（2）掌握表单相关标签及属性。（3）掌握表单及表单元素的应用方法。（1）能够制作出符合网站需求的各种表单页面。（2）能够创建具有相应功能的表单元素。（3）能够灵活运用常用的表单元素。（1）培养自主学习和解决问题的能力。（2）培养精益求精的工匠精神。（3）培养严谨的编程习惯。表单及其相关元素任务实现第2章网页的基本结构实现1.表单及其相关元素1.1表单的基本概念1.2常用的表单元素1.3表单按钮1.4表单元素的属性1.5表单元素的分组第2章网页的基本结构实现1.1表单的基本概念1.表单及其相关元素表单：用于收集用户的信息和意见，是网站管理者与浏览者之间沟通的桥梁。表单的创建：（1）确定表单的目的和内容。需要搜集用户的哪些数据。（2）建立表单。选择合适的表单元素控件。（3）设计表单处理程序。即接受表单所收到的数据并进一步处理数据，通常由ASP.NET、JSP、PHP等技术实现）。1.1表单的基本概念1.表单及其相关元素表单基本组成：表单标签、表单元素、表单按钮1.1表单的基本概念1.表单及其相关元素表单标签：<form>表单是一个包含表单元素的容器，可以使用<form>标签在网页中创建表单。格式：<formaction="url"method="get|post"name="value">…</form>action属性：提交的地址；method属性：提交的方式；name属性：用于指定表单的名称，以区分同一个页面的多个表单；1.1表单的基本概念1.表单及其相关元素<form
action="http://localhost/action.php"
method="post"><!--表单域-->账号：
<!--提示信息--><inputtype="text"name="zhanghao"/>
<!--表单控件-->密码：
<!--提示信息--><inputtype="password"name="pwd"/>
<!--表单控件--><inputtype="submit"value="提交"/>
<!--表单控件--></form>1.2常用表单元素1.表单及其相关元素表单元素：即表单域，也叫表单控件。包括常用的输入框、文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉菜单、文件上传框和按钮等。“input”输入框：是最重要的表单元素。input有很多种形态，通过type属性区分。（1）单行文本输入框：允许用户输入一些简短的单行信息，如用户姓名。格式：<inputtype="text"name="name"maxlength="value"size="value"value="text"/>（2）密码输入框：用于保密信息的输入，如密码。用户输入的时候显示的是“*”号。格式：<inputtype="password"name="name"maxlength="value"size="value"/>（3）单选按钮：用于单项选择，例如问卷调查中的单选，或者选择性别等。格式：<inputtype="radio"name="field_name"value="value"checked>1.2常用表单元素1.表单及其相关元素（4）复选框：允许用户在一组选项中选择多个。例如问卷调查中的多选，或者选择兴趣爱好等。格式：<inputtype="checkbox"name="name"value="value">（5）隐藏域：对于用户是不可见的，主要用于后台编程时使用。格式：<inputtype="hidden"name="name"value="value"/>（6）文件域：选择文件，并上传文件的表单元素。格式：<inputtype="file"name="name"/>（7）email类型：email类型的input元素是一种专门用于输入电子邮件地址的文本输入框，可以用来验证email输入框的内容是否符合email邮件地址格式。格式：<inputtype＝"email"/>（8）url类型：url类型的input元素是一种用于输入URL地址的文本框，如果所输入的内容是URL地址格式的文本，则会提交数据到服务器。格式：<inputtype＝"url"/>1.2常用表单元素1.表单及其相关元素（9）tel类型：tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式，因此，tel类型通常会和pattern属性配合使用。pattern属性的值是通过其检查输入值的正则表达式。格式：<inputtype＝"tel"pattern="正则表达式"/>（10）search类型：专门用于输入搜索关键词的文本框它能自动记录一些字符，例如站点搜索或者Google搜索，在用户输入内容后其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。格式：<inputtype＝"search"/>（11）color类型：用于提供设置颜色的文本框实现一个RGB颜色输入。格式：<inputtype＝"color"value="value"/>1.2常用表单元素1.表单及其相关元素<formaction="#"method="post">用户账号：<inputtype="text"/><br/><br/>用户密码：<inputtype="password"/><br/><br/>用户性别：<inputtype="radio"name="sex"checked="checked"/>男<inputtype="radio"name="sex"/>女<br/><br/>兴趣：<inputtype="checkbox"/>唱歌<inputtype="checkbox"/>跳舞<inputtype="checkbox"/>游泳<br/><br/>上传头像：<inputtype="file"/><br/><br/><inputtype="hidden"/></form>1.2常用表单元素1.表单及其相关元素<formaction="#"method="get">请输入您的邮箱：<inputtype="email"name="formmail"/><br/>请输入个人网址：<inputtype="url"name="user_url"/><br/>请输入电话号码：<inputtype="tel"name="telphone"pattern="^\d{11}$"/><br/>输入搜索关键词：<inputtype="search"name="searchinfo"/><br/>请选取一种颜色：<inputtype="color"name="color1"/><inputtype="color"name="color2"value="#FF3E96"/><inputtype="submit"value="提交"/></form>1.2常用表单元素1.表单及其相关元素“选择”表单元素：由<select>、<option>标签来定义的。其中<select>用来定义下拉列表，<option>用来定义列表选项。格式：<selectname="name"size="value"multiple><optionvalue="value"selected>选项1</option><optionvalue="value">选项2</option>…</select>表2-8“选择”表单元素属性1.2常用表单元素1.表单及其相关元素<body>出生年月：<selectname="year"size="1"><optionvalue="">请选择年份</option><optionvalue="2011">2011</option><optionvalue="2012">2012</option><optionvalue="2013">2013</option><optionvalue="2014">2014</option><optionvalue="2015">2015</option><optionvalue="2016">2016</option><optionvalue="2017">2017</option><optionvalue="2018">2018</option><optionvalue="2019">2019</option><optionvalue="2020">2020</option><optionvalue="2021">2021</option><optionvalue="2022">2022</option><optionvalue="2023">2023</option></select>年</body>1.2常用表单元素1.表单及其相关元素“文本域”表单元素：文本域既表示一个文本的区域，通俗来说就是可以一个区域内输入多行文本。格式：<textareaname="textfield_name"cols="value"rows="value"wrap=”soft|hard”>…</textarea>表2-9textarea的属性1.2常用表单元素1.表单及其相关元素<body>个人简介：<textareaname="description"cols="30"rows="10">
此处描述信息</textarea></body>1.3表单按钮1.表单及其相关元素从本质上讲，表单按钮也是表单元素。提交按钮用于把表单数据发送到服务器，重置按钮用于重置整个表单的数据，普通按钮则需要开发者赋予它功能。提交按钮：定义提交表单数据至表单处理程序的按钮。格式：<inputtype＝"submit"name=”...”value=”...”/>实例代码：<inputtype="submit"value="立即购买"/>重置按钮：填完表单信息后，发现填写错误，希望将表单数据还原为页面加载时的状态。可以在表单上创建一个重置按钮，可清除表单中的所有数据。格式：<inputtype＝"reset"name=”...”value=”...”/>实例代码：<inputtype="reset"value="取消"/>1.3表单按钮1.表单及其相关元素图像按钮：默认的图像按钮不美观，可以创建一幅漂亮的图像，再把<input>标签的type属性设置为“image”，把src属性设置为图像的URL，使用图像按钮时，input元素没有value属性。格式：<inputtype＝"image"name=”...”src=”...”alt=”...”/>实例代码：<inputtype="image"src="images/dl.jpg"alt="登录"/>普通按钮：定义可单击按钮，多数情况下，用于JavaScript启动脚本。格式：<inputtype＝"button"name=”...”value=”...”/><button>标签：用于定义一个按钮，在标签内部可以放置内容，比如文本或图像等。格式：<buttontype＝"button"name=”...”value=”...”/>...</button>实例代码：<buttontype="button"onclick="alert('欢迎学习！')">点我!</button>1.4表单元素的属性1.表单及其相关元素表单元素除了type、name属性之外还定义很多其他的属性以实现不同的功能。1.value属性value属性规定输入字段的初始值，也是表单被提交时被发送到服务器的值。2.autofocus属性autofocus属性是布尔属性，用于指定页面加载后是否自动获取焦点，将标记的属性值所在位置。3.placeholder属性placeholder属性用于为input类型的输入框提供相关提示信息以描述输入框期待用户输入何种内容。placeholder属性适用于以下输入类型：text、search、url、tel、email以及password。1.4表单元素的属性1.表单及其相关元素<formaction="#"method="post"><inputtype="search"name="user_search"placeholder="请输入你要搜素的内容"/><inputtype="submit"/></form>1.4表单元素的属性1.表单及其相关元素4.required属性required属性是布尔属性，用于规定输入框填写的内容不能为空。适用于以下输入类型：text、search、url、tel、email、password、number、checkbox、radio、file。<formaction="#"method="post">用户名:<inputtype="text"name="usr_name"required="required"/><inputtype="submit"value="提交"/></form>1.4表单元素的属性1.表单及其相关元素5.readonly属性readonly属性规定输入字段为只读（不能修改），readonly只对text、password以及textarea有效。6.disabled属性disabled属性规定输入字段是禁用的。disabled属性不需要值。它等同于disabled="disabled"。该属性对text、password、textarea、select、radio、checkbox、hidden、option等表单元素都有效。7.pattern属性pattern属性规定用于验证输入字段的模式。模式指的是正则表达式。pattern属性适用于的类型是:text、search、url、tel、email和password类型的input元素。1.4表单元素的属性1.表单及其相关元素<formaction="#"method="get">账号：<inputtype="text"name="username"pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$"/>（以字母开头，允许5-16字节，允许字母数字下划线）<br/>
密码：<inputtype="password"name="pwd"pattern="^[a-zA-Z]\w{5,17}$"/>（以字母开头，长度在6~18之间，只能包含字母、数字和下划线）<br/>Email地址：<inputtype="email"name="myemail"pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/><inputtype="submit"value="提交"/></form>1.5表单元素的分组1.表单及其相关元素4.required属性表单元素分组可以使用<fieldset>和<legend>标签定义，它们相当于一个容器，该标签本身不参与数据的交互操作。<fieldset>标签将表单内容的一部分打包，生成一组相关表单的字段；<legend>标签用于定义分组的标题；<fieldset>标签中的第一个元素一般是<legend>标签。格式：<fieldset><legend>...</legend>...</fieldset>1.5表单元素的分组1.表单及其相关元素<h2>手机移动支付问卷调查</h2><formaction="#"method="post"><fieldset>
<legend>个人信息</legend>
姓名：<inputtype="text"placeholder="请输入真实姓名"><br>
E-mail邮箱地址：<inputtype="email"placeholder="请输入完整有效的E-mail地址"><br>
你的电话号码：<inputtype="tel"name=""value=""placeholder="请输入电话号码"></fieldset></form>表单及其相关元素任务实现第2章网页的基本结构实现3.任务实现本节对前面所学知识点进行检测，引导学生独立自主完成任务5：制作“在线留言”子页面。第2章网页的基本结构实现网页设计与制作HTML5+CSS3任务6设计“学习资料”子页面第3章网页的表现标准知识目标技能目标素质目标（1）掌握CSS的相关概念。（2）掌握CSS的定义与使用方法。（3）掌握CSS文本修饰的常用属性。（1）能够书写规范的CSS样式,引用CSS样式。（2）能够使用CSS设置页面中不同的文本样式。（3）能够灵活运用CSS选择器（1）掌握并遵循Web开发标准，培养严谨的工作作风。（2）培养归纳思维能力。（3）加强实践教育，提升实践能力。CSS基础与语法CSS字体、段落与文本修饰设置任务实现第3章网页的表现标准1.CSS基础与语法1.1CSS样式设置规则1.2引用CSS样式表1.3CSS选择器1.4选择器的优先级第3章网页的表现标准1.1CSS样式设置规则1.CSS基础与语法CSS：是CascadingStyleSheet的缩写，即层叠样式表，是用来美化网页的。通过CSS样式设置网页页面的格式，可以实现结构标准与表现标准的分离，即页面的内容与页面的格式分离。只要修改CSS样式表文件，就可以改变整个网站的风格，使得网站维护格式方便、高效，还可以统一整个网站站点的风格。1.1CSS样式设置规则1.CSS基础与语法样式表的每个规则都有两个主要部分：选择器和声明部分。CSS样式规则的语法格式如下：选择器｛属性1:属性值1;属性2:属性值2;属性3:属性值3;……｝选择器用于指定CSS样式要应用在哪个对象上。大括号中是具体CSS属性的设置，用来给指定的元素设置具体的样式。声明则用于定义样式属性，声明由属性和属性值两部分组成；属性是指对指定的对象设置的样式属性，如字体大小、文本颜色等；属性和属性值以“键值对”的形式出现的；属性和属性值之间用英冒号“：”连接；多个属性的设置用英文分号“；”隔开。1.1CSS样式设置规则1.CSS基础与语法书写CSS样式时，除了要遵循CSS样式规则外，还必须注意以下几点。（1）CSS样式中的选择器严格区分大小写，但属性和属性值不区分大小写;建议选择器、属性和属性值都采用小写的方式。（2）属性的设置之间用英文逗号隔开，最后一个属性分号可以省略；建议保留。（3）属性值由多个单词组成且中间包含空格，必须为属性值加上英文引号；例如：h1{font-family:"arialblack";}（4）在编写CSS代码时，为了提高代码的可读性，通常需要加上CSS注释。1.2引用CSS样式表1.CSS基础与语法要使用CSS修饰网页，就需要在HTML文件中引入CSS样式表。通常引用CSS样式表有3种引用方式。1.行内样式表也称为内联样式表，是直接在HTML标签中添加的style标签属性，属性的内容就是CSS属性的设置。格式：<标签名style=”属性1:属性值1;属性2:属性值2……”>内容</标签名>例如：<pstyle=”color:red;font-size:24px;”>文本内容</p>行内样式表用法简单，效果直观；但不能做到网页的结构标准（网页内容）与表现标准（样式）的分离，不利于后期网站的维护，不推荐使用。1.2引用CSS样式表1.CSS基础与语法2.内部样式表内部样式表是将CSS样式表嵌入到HTML文件的文件头<head>。格式：<head><styletype="text/css">选择器{样式属性:属性值;……}</style></head>type的属性值为"text/css"，让浏览器知道<style>标签包含的是CSS代码1.2引用CSS样式表1.CSS基础与语法内部样式表中的所有代码都集中到head标签对中，便于查找和修改；看上去好像实现了网页的结构标准（网页内容）与表现标准（样式）的分离；但此方法只适合于单个页面的制作，若某网站中的网页页面数量庞大，当需要对页面进行统一改变时，需要一个页面一个页面地修改，工作量大，不推荐使用。<styletype="text/css">h1{color:red;text-align:center;}</style><body><h1>这是一个一级标题</h1></body>1.2引用CSS样式表1.CSS基础与语法3.外部样式表将所有的样式规则放在一个或多个以“.css”为扩展名的外部样式表文件中，在HTML文档中的<head></head>标签中加入link标签来引用外部样式表文件。link标签的语法格式如下：<linkhref="CSS文件的路径"rel="stylesheet"type="text/css"/>1.2引用CSS样式表1.CSS基础与语法link标签需要包含在head标签中使用，它的3个标签属性分别为：（1）href：指定CSS文件的路径，可以使用相对路径，也可以使用绝对路径。（2）rel="stylesheet"：指定当前文档与被链接文档之间的关系，此处stylesheet表示被链接的文档是一个样式表文件。（3）type="text/css"：用来规定被链接文档的类型，此处“text/css”表示链接的外部文件为CSS样式表。1.2引用CSS样式表1.CSS基础与语法example2.html页面如下<head><linkrel="stylesheet"type="text/css"href="exampe2.css"></head><body><h1>这是一个一级标题</h1></body>exampe2.css样式如下h1{color:red;/*设置颜色为红色*/text-align:center;/*水平居中*/}1.3CSS选择器1.CSS基础与语法1.基础选择器基础选择器有四种:元素选择器、类选择器、id选择器和通用选择器。（1）元素选择器：用HTML元素名作为选择器，其语法格式如下：元素名{属性1：属性值1；属性2：属性值2；……}将CSS样式应用于指定的HTML元素，首先需要找到该目标标签，在CSS中，能够完成这一任务被称为选择器。CSS选择器分类：基础选择器、复合选择器、伪类选择器、伪元素选择器、属性选择器。1.3CSS选择器1.CSS基础与语法<body><h1>信息工程学院党总支开展党的二十大精神宣讲暨入党申请人集体谈话</h1><div><p>为学习宣传贯彻党的二十大精神，做好入党申请人的教育培养工作，3月30日晚，信息工程学院党总支在报告厅开展党的二十大精神宣讲暨入党申请人集体谈话，活动由信息工程学院党总支组织委员姚玲洁主持。</p></div></body><styletype="text/css">h1{color:red;/*设置颜色为红色*/text-align:center;/*水平居中*/}div{width:500px;/*宽度500px*/height:500px;/*高度500px*/margin:0auto;/*设置div标记居中*/}p{text-indent:2em;/*设置段落标记的内容首行缩进2字符*/}</style>1.3CSS选择器1.CSS基础与语法（2）class类选择器class类选择器也称为自定义选择器，它能够把相同元素分类定义成不同的样式。类选择器使用“.”(英文点号)开头，后面紧跟类名，语法格式如下：.类名{属性1:属性值1;属性2:属性值2;……}要注意以下几点：1）类选择器严格区分大小写，属性和值不区分大小写，一般将“选择器、属性和值”都采用小写的方式。2）尽量使用英文，英文简写或者统一使用拼音。不能数字开头，建议以字母开头。3）尽量不要使用缩写，除非一看就懂的单词。1.3CSS选择器1.CSS基础与语法（3）id选择器id选择器是用来对某个单一元素定义单独的样式，使用时以“#”开头，后面紧跟id名称。语法格式如下：#id名{属性1:属性值1;属性2:属性值2;……}id选择器要慎用。由于id是页面中唯一的，一般会留给页面里的JavaScript使用；而class选择器一般用来定义元素公用的规则，更具有通用性，复用性强，从某种程度上来说，还能减少代码量，维护起来也方便。1.3CSS选择器1.CSS基础与语法（4）通用选择器通用选择器是一种特殊的选择器，用“*”来表示，可以定义页面上的所有的HTML元素的样式。语法格式如下：*{属性1:属性值1;属性2:属性值2;……}例如，通常在制作网页时首先将页面中所有元素的外边距和内边距设置为0，代码如下：*{margin:0px;/*外边距设置为0*/padding:0px;/*内边距设置为0*/}通用选择器在实际开发中很少使用。1.3CSS选择器1.CSS基础与语法2.复合选择器复合选择器是由基础选择器组合形成的，也叫组合选择器。通常是由两个或者多个基础选择器通过不同的方式组合而成。常用的复合选择器有：后代选择器、子选择器、并集选择器、交集选择器、伪类选择器等等。（1）后代选择器后代选择器又称为包含选择器，派生选择器。用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间使用“空格”分割。语法格式如下：选择器1选择器2{属性1:属性值1;……}1.3CSS选择器1.CSS基础与语法<styletype="text/css">/*使用后代选择器为div元素里的所有p元素加下划线*/divp{text-decoration:underline;}</style><body><h1>信息工程学院党总支开展党的二十大精神宣讲暨入党申请人集体谈话</h1><div><p>为学习宣传贯彻党的二十大精神，做好入党申请人的教育培养工作，3月30日晚，信息工程学院党总支在报告厅开展党的二十大精神宣讲暨入党申请人集体谈话，活动由信息工程学院党总支组织委员姚玲洁主持。</p></div></body>1.3CSS选择器1.CSS基础与语法（2）子选择器子选择器只能选择某个元素的子元素，使用时用“>”连接。语法格式如下：选择器1>选择器2{属性1:属性值1;属性2:属性值2;……}与后代选择器相比子选择器只能选择作为某元素子元素的元素，如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，就可以使用子选择器。1.3CSS选择器1.CSS基础与语法<div><divclass="style1">让我们看看<p><span>子选择器</span>的使用方法</p></div><divclass="style2">让我们看看<p><span>子选择器</span>的使用方法</p></div></div><styletype="text/css">.style1span{font-size:24px;text-decoration:underline;}.style2>span{font-size:24px;text-decoration:underline;}</style>1.3CSS选择器1.CSS基础与语法（3）并集选择器并集选择器也叫分组选择器，可以选择多组标签（元素）并定义相同的样式。使用时用英文逗号连接。语法格式如下：选择器1,选择器2{属性1:属性值1;属性2:属性值2;……}例如代码：h1,.box{color:#f000;font-size:24px;}h1{color:#f000;font-size:24px;}.box{color:#f000;font-size:24px;}等同于1.3CSS选择器1.CSS基础与语法（4）交集选择器交集选择器是指选中同时符合多个选择器条件的元素，使用时不用任何符号连接。其中第一个为元素选择器，第二个为类选择器或者id选择器。两个选择器之前不能有空格。语法格式如下：选择器1选择器2{属性1:属性值1;属性2:属性值2;……}1.3CSS选择器1.CSS基础与语法<styletype="text/css">/*选择既是span，同时类名又是number的元素*/span.number{text-decoration:underline;}</style><body><p>这是一个普通的段落</p><spanclass="number">45</span><divclass="number">100</div><span>这是普通的span</span></body>1.3CSS选择器1.CSS基础与语法（5）相邻兄弟选择器相邻兄弟选择器选择紧贴在元素之后的另一个元素，而且它们具有相同的父元素。语法格式如下：选择器1+选择器2{属性1:属性值1;属性2:属性值2;……}1.3CSS选择器1.CSS基础与语法<styletype="text/css">div+p{text-decoration:underline;}</style><h1>相邻兄弟选择器</h1><p>选择所有作为指定元素的相邻的同级元素。</p><div><p>div中的段落1。</p><p>div中的段落2。</p></div><p>段落3。不在div中。</p><p>段落4。不在div中。</p>1.3CSS选择器1.CSS基础与语法（6）通用兄弟选择器通用兄弟选择器选择指定元素后面的所有兄弟元素，而且它们具有相同的父元素。语法格式如下：选择器1~选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;……}1.3CSS选择器1.CSS基础与语法3.伪类选择器伪类之所以名字中有个“伪”字，是因为它所指定的对象在文档中并不存在，它指定的是一个或者与其相关的选择器的状态。为元素添加对应样式时，这个状态是根据用户行为而动态变化的。使用伪类时用英文冒号来表示，伪类的分为状态伪类和结构性伪类。状态伪类：是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。超级链接伪类是最应用最广泛的状态伪类。链接能够以不同的方式显示。常见的超级链接伪类主要包括：（1）:link应用于未访问过的链接状态，即超链接点击之前；（2）:visited应用于已访问过的链接状态，即超链接被访问过之后；（3）:hover应用于鼠标悬停到链接上的状态，也就是鼠标放到页面的某个元素上时或划过某个元素时；（4）:active应用被激活的链接状态，即鼠标点击页面中的某个链接但是不松手时；1.3CSS选择器1.CSS基础与语法<styletype="text/css">a:link{color:red;}a:visited{color:green;}a:hover{text-decoration:none;}a:active{color:blue;}</style><body><ahref="#">
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 清洗地面合同范本
- 烟叶生产用工合同范本
- bimco 光租合同范本
- 别墅如何洽谈合同范本
- 庆典布展合同范本
- 自驾活动合同范本
- 多式联运合同（6篇）
- 音乐初步知识点
- 淘宝后台操作流程
- 山东建筑大学《书法创作》2023-2024学年第二学期期末试卷
- 中国神话故事绘本火神祝融
- 五星级酒店前厅管理常用表格
- 《养老护理员》-课件：老年人安全防范及相关知识
- 茶楼棋牌经营管理方案
- 水准测量记录数据自动生成表
- 2024年宜都市高新技术产业投资有限公司招聘笔试参考题库含答案解析
- 2024年英语专业四级考试真题及详细答案
- 初中数学八年级下册 一次函数的概念 全市获奖
- 肺占位性病变查房
- 水平三(五年级)体育《障碍跑-红军长征路》教学设计及教案
- 弹性计算：无处不在的算力
评论
0/150
提交评论