响应式Web开发（HTML5+CSS3+Bootstrap）课件全套 姜华 第1-10章 HTML基础 -综合案例-咖啡商城

第1章HTML基础响应式Web开发（HTML5+CSS3+Bootstrap）重难点重点:（1）HTML文档的结构（2）HTML的语法（3）HTML中相关标签难点:（1）表单控件的使用目录01HTML基本认识03表格标签02文本与标签04表单元素05列表和超链接01HTML基本认识

当畅游Internet时，通过浏览器看到的网站是由HTML语言所构成的。HTML（HypertextMarkupLanguage）超文本标记语言，它的作用是告诉浏览器如何显示文档的内容，如文本、图像和其它媒体，还可以通过超链接把文档与其它互联网资源连接起来。HTML网页文件可以使用记事本、写字板或者Dreamweaver等编辑工具来编写，以.htm或.html为文件后缀名保存。将HTML网页文件用浏览器打开显示，若测试没有问题则可以放到网站服务器上，供各类客户端访问。HTML文档的主要结构可划分为3个部分：标头区<head>……</head>、内容区<body>……</body>和网页区<html>……</html>。（1）<html>……</html><html>标签用于HTML文档的最前边，用来标识HTML文档的开始。</html>标签放在HTML文档的最后边，用来标识HTML文档的结束，两个标签必须一块使用。1.HTML文档基本结构（2）<head>……</head><head>和</head>构成HTML文档的开头部分，用来描述HTML文档相关信息的，<head>和</head>标签对之间的内容是不会在浏览器的框内显示出来的，两个标签必须一块使用。（3）<body>…...</body><body>和</body>是HTML文档的主体部分，定义的文本、图像等将会在浏览器的框内显示出来。（4）<title>……</title>在<title></title>标签对之间加入需要显示的文本即可将网页的主题显示到浏览器的顶部。1.1HTML文档基本结构1.2HTML基本语法一个HTML文档是由一系列的元素组成。HTML元素指的是从开始标签（starttag）到结束标签（endtag）的所有代码，大多数HTML元素可以嵌套，HTML文档由嵌套的HTML元素构成。HTML标签是由“<”和“>”所括住的指令标签，用于向浏览器发送指令。HTML标签分单标签和成对标签两种。成对标签是由开始标签<标签名>和结尾标签</标签名>组成的，例如<html></html>，其作用域只作用于这对标签中间的文档。成对标签必须有开头和结尾部分，但浏览器具有一定的容错性，即使没有配对，通常也不会报错。1.2HTML基本语法在书写HTML页面时，标签是不区分大小写的，所以实际网页中大写和小写的标签都存在。为了便于理解，将HTML标签语言大致分为基本标签、格式标签、文本标签、图像标签、表格标签、链接标签、表单标签和帧标签等。属性是标签里的参数项。大多数标签都有自己的一些属性，属性要写在开始标签内，属性用于进一步改变显示的效果，各属性之间无先后次序，属性是可选的，也可以省略而采用默认值。其格式如下：<标签名属性1="值"属性2="值"属性3="值"……>内容</标签名>属性值可以不加双引号，但是为了适应XHTML规则，提倡对属性值全部加双引号。1.3第一个HTML页面编写第一个HTML页面，在页面中显示“我们开始学习HTML”。在浏览器中查看和展示页面。页面。（1）编写网页打开Windows自带的文本编辑器“记事本”，第一个HTML页面代码如例1-2.html所示。<html> <head> <metacharset=”utf-8”> <title>第一个网页</title> </head> <body>

我们开始学习HTML </body></html>1.3第一个HTML页面（2）保存网页在记事本中单击左上角的【文件】->【另存为】，保存时注意修改文件的扩展名为.htm或.html，保存类型选择“所有文件”，Encoding选择UTF-8。（3）运行网页双击“例1-2.html”文件，会自动弹出一个浏览器窗口显示这个网页的内容，运行效果如图所示。1.3第一个HTML页面（4）修改网页在刚才的文件“例1-2.html”上用鼠标右键点击，在弹出的菜单中选择【打开方式】->【记事本】，就可以在记事本中打开并编辑文件。

(5)中文乱码问题<metacharset=”utf-8”>是告诉浏览器以UTF-8字符集显示文字，保存的时候也需要把文件保存为UTF-8格式，否则如果文档中所声明的字符集与保存的不一致，就会发生乱码。02文本与标签HTML文本就是网页上显示的主要内容，需要用到的主要标签有如下几类：标题标签、段落标签、水平线标签、特殊符号标签。这些标签都在body标签内部。2.1标题标签HTML提供了6个等级的标题，即<h1>~<h6>，代表六个级别的标题，<h1>代表最大的标题，<h6>代表最小的标题。 <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> </body>2.2段落标签段落标签是一个文本级的标签，只能放文字、图片、表单元素。在HTML网页中设计段落<p></p>标签时，浏览器页面会自动为每一个段落的前后添加空行。在使用过程中，千万不要漏掉段落的结束标签，以免浏览器会出现无法正确解析HTML页面的问题。 <body> <p>这是第一段</p> <p>这是第二段</p> </body>2.3水平线标签在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr/>就是创建横跨网页水平线的标签。<body> <p>第一个水平线标签与段落标签在一行</p> <hr/> <p>第二个水平线标签另起一行</p> <hr/> <p>第三个水平线标签没有斜线</p> <hr> <p>效果是一样的!</p></body>2.4特殊符号标签1.换行标签在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br>。<body> <h1>换行标签</h1> <p>换行标签可以在任意一个你想换行<br>的位置进行换行</p> <p>这是第二段</p></body>2.4特殊符号标签

2.文本格式化标签标签显示效果<b></b>和<strong></strong>文字以粗体方式显示<i></i>和<em></em>文字以斜体方式显示<s></s>和<del></del>文字以加删除线方式显示<u></u>和<ins></ins>文字以加下划线方式显示<small></small>定义小号字体，标签包含的文本比周围小一号，下限1号文本<big></big>定义大号字体，标签包含的文字比周围大一号，上限7号文本定义下标文本，以当前文本流中字符高度一半显示，但是与文本流中字符字体字号一致定义上标文本，以当前文本流中字符高度一半显示，但是与文本流中字符字体字号一致2.4特殊符号标签<body> <h2>文本标签示例</h2> <p><strong>粗体标签strong,</strong><b>粗体标签b，</b>这是正常文字</p> <p><i>斜体标签strong,</i><em>斜体标签em，</em><cite>斜体标签cite</cite>,</cite>这是正常文字</p> <p>上标标签：aⁿ+bⁿ=cⁿ</p> <p>下标标签：水的化学表达式为H2₂O</p> <p><s>中划线也叫删除线，</s><u>下划线是这样的。</u></p> <p><big>这是大字体，</big><small>这是小字体，</small>这是正常字体。</p></body>03表格标签在HTML中使用<table>标签来创建表格，<table>标签内包含了表名和表格本身内容的代码。表格是由特定数目的行和列组成的，其中行用<tr>标签表示，行由若干单元格构组成。单元格是表格的基本单元，用<td>标签表示，<td>标签定义了一个列，嵌套于<tr>标签之中。多个单元格结合在一起构成了行，多个行结合在一起就构成了一个表格。3.1表格标签HTML中有多个与表格相关的标签，各标签的含义及作用如下所示。<table>标签：定义HTML表格。<caption>标签：定义表格的标题，必须直接放置到<table>标签之后，且每个表格只能定义一个标题。<th>标签：定义HTML表格中的表头单元格，文本通常呈现为粗体并且居中。<tr>标签：定义HTML表格中的行。<td>标签：定义HTML表格中的标准单元格，包含在<tr>标签中。<thead>标签：用于组合HTML表格的表头内容。3.1表格标签<tbody>标签：用于组合HTML表格的主体内容。<tbody>元素应该与<thead>and<tfoot>元素结合起来使用，用来规定表格的各个部分（主体、表头、页脚）。<tfoot>标签：用于组合HTML表格的页脚内容。<colgroup>标签：用于对表格中的列进行组合，以便对其进行格式化。<col>标签：规定了<colgroup>元素内部的每一列的列属性。通过使用<col>标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。表格标签的实例代码见例1-9.html。3.1表格标签表格属性说明border此属性定义表格的边框。bgcolor表格的背景色。取值方法举例：bgcolor=#ff0000或bgcolor=red。background表格的背景图。其值为一个有效的图片地址。<td>也有此属性。width表格的宽度。取值从0开始，还可以使用百分比。height表格的高度，取值方法同width。align表格的对齐方式，值有left（左对齐，默认）、center（居中）以及right（右对齐）。cellspacing单元格间距。若表格有多个单元格，各单元格的距离就是cellspacing，如若表格只有一个单元格，则这个单元格与表格上、下、左、右边框的距离是cellspacing。cellpadding单元格衬距。指该单元格里的内容与cellspacing区域的距离，如果cellspacing为0，则表示单元格里的内容与表格周边边框的距离。colspan单元格水平合并，值为合并的单元格的数目rowspan单元格垂直合并，值为合并的单元格的数目表格属性实例代码见例1-10.html04表单元素表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：①表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。②表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等表单输入控件；③表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的工作。表单标签（<form></form>）用于声明表单，定义采集数据的范围，同时包含了处理表单数据的应用程序以及数据提交到服务器的方法。其语法结构为：<formaction="url"method="get/post"enctype="mime"target="...">......</form>4.1表单标签4.1表单标签属性值描述acceptMIME_type规定服务器接收到的文件的类型。accept-charsetcharacter_set规定服务器可处理的表单数据字符集。actionURL指定处理表单中用户输入数据的URL（URL可为Servlet、JSP或ASP等服务器端程序），也可以将输入数据发送到指定的E-Mail地址等。enctypeapplication/x-www-form-urlencoded、multipart/form-data、text/plain指定了数据发送时的编码类型，默认值是application/x-www-form-urlencoded，用于常规数据的编码。multipart/form-data：将表单数据编码为一条消息，每一个表单控件的数据对应消息的一部分，以二进制的方式发送给服务器端。这种方法比较适合传递复杂的用户输入数据，如文件的上传操作。methodget、post指定向服务器传递数据的HTTP方法，主要有Get和Post两种方法，默认值是Get。nametext规定表单的名称。target_blank、_self、_parent、_top用于指定在浏览器中哪个frame中显示服务器的响应HTML，默认值是当前frame。_blank：在一个新的浏览器窗口调入指定的文档；_self：在当前框架中调入文档；_parent：把文档调入当前框架的直接父框架集中，这个值在当前框架没有父框架集时等价于_self；_top：把文档调入原来的最顶部的浏览器窗口中。表单标签属性表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等。1.文本框<input>标签规定了用户可以在其中输入数据的输入字段。在<form>元素中使用，用来声明允许用户输入数据的是input控件，输入字段可通过多种方式改变，取决于type属性。其语法结构为：<inputtype="..."name="..."size="..."maxlength="..."value="..."/>4.2表单域

4.2表单域属性值描述acceptaudio/*video/*image/*MIME_type规定通过文件上传来提交的文件的类型。(只针对type="file")alignLeft/right/top/middle/bottom规定图像输入的对齐方式。(只针对type="image")alttext定义图像输入的替代文本。(只针对type="image")checkedcheckedchecked属性规定在页面加载时应该被预先选定的<input>元素。(只针对type="checkbox"或者type="radio")disableddisabled disabled属性规定应该禁用的<input>元素。name textname属性规定<input>元素的名称。sizenumbersize属性规定以字符数计的<input>元素的可见宽度。srcURLsrc属性规定显示为提交按钮的图像的URL。(只针对type="image")typebutton、checkbox、color、date、datetime、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week、datetime-localtype属性规定要显示的<input>元素的类型。value text指定<input>元素value的值。maxlengthnumber属性规定<input>元素中允许的最大字符数。文本框属性列表2.多行文本框多行文本框（文本域）是一种用来输入较长内容的表单对象。文本区域中可容纳无限数量的文本。可以通过cols和rows属性来规定textarea的尺寸大小，其语法结构为：<textareaname="..."cols="..."rows="..."wrap="VIRTUAL"></textarea>4.2表单域4.2表单域属性值描述colsnumber定义多行文本框的宽度，单位是单个字符宽度。nametext指定文本域的名称。rowsnumber规定文本区域内可见的行数。disableddisabled规定禁用文本区域。readonlyreadonly规定文本区域为只读。多行文本框属性列表3.密码框密码框是一种用于输入密码的特殊文本域。当访问者输入文字时，文字会被星号或其它符号代替，从而隐藏输入的真实文字，其语法结构为：<inputtype="password"name="..."size="..."maxlength="..."/>其中：type="password"：定义密码框；name：指定密码框的名称；size：定义密码框的宽度，单位是单个字符宽度；maxlength：定义最多输入的字符数。4.2表单域4.隐藏框隐藏域是用来收集或发送信息的不可见元素，网页的访问者无法看到隐藏域，但是当表单被提交时，隐藏域的内容同样会被提交。其语法结构为：<inputtype="hidden"name="..."value="..."/>其中：type="hidden"定义隐藏域；name：同text的name属性；value：定义隐藏域的值。4.2表单域5.复选框复选框允许在待选项中选中一个以上的选项。每个复选框都是一个独立的元素。其语法结构为：<inputtype="checkbox"name="..."value="..."/>其中：type="checkbox"定义复选框；name：同text的name属性；value：定义复选框的值。通常情况下，对于一组复选框的name值推荐使用相同的值，这样提交表单后，在服务器端便于数据的处理。4.2表单域6.单选按钮单选按钮只允许访问者在待选项中选择唯一的一项。该控件用于一组相互排斥的值，组中每个单选按钮控件的名字相同，用户一次只能选择一个选项。其语法结构为：<inputtype="radio"name="..."value="..."/>其中：type="radio"：定义单选按钮；name：同text的name属性，name相同的单选按钮为一组，一组内只能选中一项；value：定义单选按钮的值，在同一组中，单选按钮的值不能相同。4.2表单域7.文件上传框文件上传框用于用户上传文件，文件上传框与其他文本域类似，但它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。其语法结构为：<inputtype="file"name="..."size="15"maxlength="100"/>其中：type="file"：定义文件上传框；name：同text的name属性；size：定义文件上传框的宽度，单位是单个字符宽度；maxlength：定义最多输入的字符数。4.2表单域8.下拉选择框下拉选择框可以让浏览者快速、方便、正确的选择一些选项，同时可以节省页面空间，它通过<select>标签实现，该标签用于显示可供用户选择的下拉列表。每个选项由一个<option>标签表示，<select>标签至少包含一个<option>标签，语法结构为：<selectname="..."size="..."multiple> <optionvalue="..."selected>...</option> ...</select>4.2表单域8.下拉选择框4.2表单域属性值描述disableddisabled当该属性为true时，会禁用下拉列表。multiplemultiple当该属性为true时，可选择多个选项。namename定义下拉列表的名称。sizenumber规定下拉列表中可见选项的数目。<select>属性列表8.下拉选择框4.2表单域属性值描述disableddisabled规定此选项应在首次加载时被禁用。labeltext定义当使用<optgroup>时所使用的标注。selectedselected规定选项（在首次显示在列表中时）表现为选中状态。valuetext定义送往服务器的选项值。<option>属性列表9.表单按钮表单按钮主要分为三类：提交按钮，复位按钮和普通按钮。提交按钮提交按钮用来将输入的表单信息提交到服务器。其语法结构为：<inputtype="submit"name="..."value="..."/>其中：type="submit"：定义提交按钮；name：定义提交按钮的名称；value：定义按钮的显示文字。4.2表单域复位按钮复位按钮用来重置表单。其语法结构为：<inputtype="reset"name="..."value="..."/>其中：type="reset"：定义复位按钮；name属性定义复位按钮的名称；value属性定义按钮的显示文字。复位按钮并不是清空表单信息，只是还原成默认值。4.2表单域普通按钮普通按钮通常用来响应javascript事件（如onclick），用来调用相应的javascript函数来实现各种功能。其语法结构为所示：<inputtype="button"name="..."value="..."onclick="..."/>属性解释：type="button"：定义普通按钮；name：定义按钮的名称；value：定义按钮的显示文字；onclick：通过指定脚本函数来定义按钮的行为。表单实例：通过创建用户注册页面，演示HTML表单的综合应用，要求用户输入关于个人的基本信息并提交到服务器。表单标签的实例代码见例1-11.html4.2表单域05列表和超链接在HTML5中，列表标签和超链接是构建网页内容的基本元素。列表标签包括有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>），它们用于有效地组织和展示信息，使内容更易于阅读和理解。有序列表用于显示按顺序排列的项目，无序列表则用于显示没有特定顺序的项目，而定义列表则用于描述术语及其定义。超链接（<a>标签）则用于创建指向其他网页或资源的链接，允许用户通过点击链接文本跳转到指定的URL。通过使用这两个标签，网页可以更加结构化和互动，提升用户体验。HTML语言中列表可分为四类：无序列表（<ul>）、有序列表（<ol>）、定义列表（<dl>）和嵌套列表。1.无序列表无序列表是一个项目的列表。列表中的项目可以以任何顺序进行排列，无序列表项开始于<ul>标签，结束于</ul>标签。每个列表项开始于<li>标签，结束于</li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。无序列表实例代码见例1-12.html5.1列表标签2.有序列表有序列表也是一列项目，列表中的项目是按照先后顺序排列的，列表项目使用数字、字母等进行标记。有序列表开始于<ol>标签，结束于</ol>标签。每个列表项始于<li>标签，结束于</li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等。有序列表实例代码见例1-13.html5.1列表标签3.定义列表定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始，结束于</dl>标签。每个自定义列表项以<dt>开始，结束于</dt>标签。每个自定义列表项的定义以<dd>开始，结束于</dd>标签。自定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。定义列表实例代码见例1-14.html5.1列表标签4.嵌套列表嵌套列表就是有序列表或无序列表组合在一起使用的列表。在使用嵌套列表时，嵌套列表必须和一个特定的列表项<li>相联系，即嵌套列表通常包含在某个列表项中，用来表示该嵌套列表和该列表项之间的联系。嵌套列表实例代码见例1-15.html5.1列表标签超级链接是网站中被频繁使用的HTML元素，超级链接完成了网站页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段。常见的超链接形式有如下几种：文字超链接：在文字上建立超链接；图像超链接：在图像上建立超链接；热区超链接：在图像的指定区域上建立超链接。5.2超链接超级链接的标签是<a></a>，其语法如下：<ahref=”url”target=”...”title=”...”id=”..”>内容</a>href属性：用于定义超链接的跳转地址，其取值url可以是本地地址或远程地址，url可以是一个网址、一个文件甚至可以是HTML文件的一个位置或E-mail的地址，url可以是绝对路径也可以是相对路径。target属性：用于指定目标文件的打开位置。title属性：鼠标悬停在超链接上的时候，显示该超链接的文字注释。id属性：在目标文件中定义一个“锚”点，标识超链接跳转的位置。内容：就是所定义的超链接的一个外套，浏览者只需点击内容就可以跳转到url所指定的位置。5.2超链接5.2超链接值说明_self在当前窗口中打开目标文件，这是target的默认值_blank在新窗口中打开目标文件_top在顶层框架中打开网页_parent在当前框架中的上一层框架打开网页属性的取值方式1.绝对路径和相对路径

绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。在网络中，以http开头的链接都是绝对路径，绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。5.2超链接2.站内链接站内链接也称内链，网站域名下的页面之间的互相链接,自己网站的内容链接到自己网站的内部页面，也称之为站内链接。其语法如下：<ahref=”相对路径”>内容</a>3.站外链接站外链接也称为外链，它是互联网的血液。没有链接，信息都是孤立的。其语法与站内链接很相似，但站外链接必须使用绝对路径。其语法如下：<ahref=”绝对链接路径”>内容</a>5.2超链接4.锚链接锚链接一般用于本页面的跳转，比如页面太长，到了尾部要瞬间到顶部，就可以用锚链接,锚链接实际上就是链接文本，又叫锚文本。可以理解为：关键词上带超链接的一种链接方式。锚链接由建立锚点和链接到锚点两部分组成。锚点就是将要链接到的位置。其语法如下：<aname=”锚点名称”></a>建立锚点之后，就可以创建到锚点的链接。其语法如下：<ahref=”链接到网页的地址#锚点名称”>内容</a>当锚点链接的是在当前页面中的锚点时，可以省略掉“链接到网页的地址”：<ahref=”#锚点名称”>内容</a>5.2超链接5.图像标签<img>元素向网页中嵌入一幅图像，<img>标签有两个必需的属性：src和alt。其语法为：<imgsrc=”url”/>url表示图片的路径和文件名，其值可以是绝对路径，如：“http://localhost/images/123.tif”，也可以是相对路径，如“../images/123.tif”。5.2超链接5.2超链接属性说明alt浏览器如果没有载入图片的功能，浏览器就会转而显示alt属性的值align设置图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)height设置图片的高度，缺省则显示图片原始高度width设置图片的宽度，缺省则显示图片原始宽度图像标签的属性项目实操本项目属于综合项目中的首页中的全部商品分类部分的实现，需要用到本章所学的列表、超链接等标签：1.使用列表标签定义每一个商品分类；2.使用超链接标签呈现每一项商品分类和分类子项。✎作业要求完成图书统计表的设计与制作课后作业ThankYou！响应式Web开发（HTML5+CSS3+Bootstrap）第2章HTML5新增元素和属性响应式Web开发（HTML5+CSS3+Bootstrap）重难点重点:（1）HTML5主体结构元素（2）HTML5非主体结构元素（3）HTML5表单中新增加的属性与元素难点:（1）HTML5表单新的输入类型目录01HTML的新版本03HTML5主体结构元素02HTML5页面结构04HTML5非主体结构元素06HTML5表单新的输入类型05HTML5表单新功能07HTML5表单的新属性01HTML的新版本HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

02HTML5页面结构HTML5的页面结构主要包括<!DOCTYPE>文档类型声明、<html>根标签、<head>头部标签、<meta>标签、<body>主体标签、<title>标题标签。2.1HTML5页面结构1.<!DOCTYPE>标签<!DOCTYPE>是一个声明，用来指定web浏览器关于页面使用哪个HTML版本进行编写，一个指示Web浏览器有关HTML页面的信息的指令。<!DOCTYPE>不是HTML标签，是没有结束标签</>的，且对大小写不敏感；它必须出现在HTML文档的第一行，<html>标签之前。2.<html>标签<html>标签位于<!DOCTYPE>之后，称为根标签。<html>与</html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。2.1HTML5页面结构3.<head>标签<head>标签用于定义文档的头部，它是所有头部元素的容器，描述了文档的各种属性和信息。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。4.<meta>标签<meta>标签用来描述文档的元数据，所谓的元数据就是描述数据的数据。<meta>就是用来描述html文件的。它被放置在<head></head>之中，<meta>标签不需要设置结束标签，一个尖括号就是一个meta标签的内容。所呈现的数据不会在页面中显示，仅仅只能说明页面的信息，包括关键字、作者、版权等等。它作用于浏览器、搜索引擎以及其他的网络服务。2.1HTML5页面结构<meta>标签主要的属性有三种，分别是name、http-equiv和charset。（1）name属性用来定义元数据的名称，与content属性包含的值相关联，主要用于描述网页，以便于搜索引擎的查找。（2）http-equiv属性指示服务器在发送实际的文档之前先在要传输给浏览器的MIME文档头部包含名称/值对。（3）charset属性声明当前文档所使用的字符编码，可以被具有lang属性的元素覆盖。值必须是一个符合由IANA所定义的字符编码首选MIME名称（preferredMIMEname）之一。2.1HTML5页面结构5.<body>标签<body>标签是HTML的子元素表示HTML网页的主体部分，网页中所有可见的内容,是做给用户看的。一个HTML文件只能存在一个<body>标签。6.<title>标签<title>标签中的内容会显示在网页的标题栏上，搜索引擎会主要根据title中的内容来判断网页的主要内容。HTML5的页面基本结构如例2-1.hmtl所示。03HTML5主体结构元素HTML5中包含的所有元素均具有结构性，HTML5定义了一组新的语义化标签来描述元素的内容，明确表示网页的结构，这样搜索引擎就能轻易抓到网页的重点。HTML5新增结构元素分为主体结构元素和非主体结构元素。HTML5主体结构元素包括article、section、nav、aside、time等5种标签。3.1article标签article标签，从语义化上看为文档、页面，其用法如下：

<article>...</article>通常是一篇文章、一个页面、一个独立完整的内容模块一般会带个标题，并放在header标签中article元素可以互相嵌套使用频率极高，强调独立性。article标签通常与section标签、header标签组合使用，一个页面中article标签可以出现多次。article标签的示例代码如例2-2.html所示。3.2section标签section标签定义文档中的节、区段，比如章节、页眉、页脚或其他部分。一个section通常由内容及其标题组成。其语法结构为：<section>内容</section>section标签的示例代码如例2-3.html所示。3.3nav标签nav标签用于页面导航的链接组。例如导航栏，翻页和页面内移动。但在页脚时，不建议使用nav元素，建议使用footer。其语法结构为：<nav>内容</nav>nav标签的示例代码如例2-4.html所示。3.4aside标签aside标签定义其所处内容之外的内容,其内容应该与附近的内容相关。用于侧边栏，广告栏或引用等方面。aside标签的使用分为article标签内与article标签外两种情况：（1）article标签内：作为主要内容的附属信息。（2）article标签外：作为页面或者全局的附属信息部分，主要以侧边栏形式出现。其语法结构为：<aside>内容</aside>aside标签的示例代码如例2-5.html所示。3.5time标签<time>标签定义日期或时间，时间和时区偏移是可选的。该标签不会在页面上呈现出特殊效果，但是该标签能够以机器可读的方式对日期和时间进行编码，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。其语法结构为：<time></time><time>标签包含两个属性：datetime和pubdate，具体属性如表所示：time标签的示例代码如例2-6.html所示。属性属性值描述datetimedatetime规定日期或时间。不定义该属性时，由标签的内容给定时间或日期pubdatepubdate用于定义<time>标签中的日期或时间是文档的发布日期04HTML5非主体结构元素HTML5非主体结构元素包括header、hgroup、footer、address等标签。4.1header标签header标签可以包含所有通常需要放置在页面头部的内容，常用于存放页面或者一个内容区块的标题，但除了标题以外也可以存放logo图片和搜索表单等。其语法结构为：<header>内容</header>header标签的示例代码如例2-7.html所示。注意：header标签不是head标签，在HTML5中不限制header标签的个数，一个header标签可以有多个header标签，但是只可以有1个head标签。4.2hgroup标签hgroup标签用来将多个标题进行组合形成一个标题组，通常将它与h1～h6标签组合使用，并写在header标签内。但是，在只有一个标题元素时，不建议使用hgroup标签。其语法结构为：<hgroup><hx>标题一</hx></hgroup>hx表示h1～h6标签。hgroup标签的示例代码如例2-8.html所示。4.3footer标签footer标签可以作为页面页脚或者页面的一个区块的注脚，一般用于这个页面或区块相关的信息，如作者，版权信息等。与header标签相同，一个页面内也可以包含多个footer标签。其语法结构为：<footer>页脚内容</footer>footer标签的示例代码如例2-9.html所示。4.4address标签用于文档中呈现的联系信息通常内容为作者、网站链接、电子邮箱、地址、电话号码等使用频率低。一般被包含在footer元素内，若<address>被包含在<body>的<footer>中则表示网页的联系信息。若<address>被包含在<article>的<footer>中则表示文章作者的联系信息。其语法结构为：<address>地址</address>address标签的示例代码如例2-10.html所示。05HTML5表单新功能在HTML5中，除了对input元素新增了许多类型以外，还增加了表单元素，例如datalist、output等元素。这些元素的增加，丰富了表单的操作，提高了用户体验。5.1datalist元素datalist元素规定了<input>元素中可能的选项列表，<datalist>标签被用来在为<input>元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。datalist元素的示例代码如例2-12.html所示。5.2output元素output元素用于在页面上显示计算结果的输出。name属性：定义对象的唯一名称。（表单提交时使用）form属性：定义所属的一个或多个表单。for属性：定义输出域相关的一个或多个元素。oninput表单事件：当用户对元素数据的输入时触发。parseInt():解析一个字符串，并返回一个整数。output元素的示例代码如例2-13.html所示。类型描述emaile-mail输入文本框search搜索关键字的输入文本框date日期选择器time时间选择器datetime日期和时间选择器range自定义滑动条url网址输入文本框color颜色选择器number数字输入文本框，可定义取值范围HTML5表单新的输入类型06HTML5表单新的输入类型在HTML5中，input标签在原有输入类型的基础上，新增了很多新的输入类型，如表所示。通过这些新增的输入类型，可以轻松完成HTML4中需要JavaScript代码才能实现的功能。

6.1email类型在HTML5中将某一输入框的input类型设置为email时，表示这个输入框是一个email类型的输入框。在浏览器中运行时，浏览器会按照email格式自动校验用户输入的文本类型是否符合email格式。如果用户输入的格式错误，将会弹出提示信息，并且阻止表单的提交。email类型的示例代码如例2-14.html所示。6.2search类型在HTML5中将某一输入框的input类型设置为search时，表示该输入框用于对用户输入的文字进行检索。search类型的输入框在无关键字输入时与普通input元素相似，不同的时，在输入框内输入关键字后，会在输入框的右侧出现叉号。search类型的示例代码如例2-15.html所示。6.3range类型在HTML5中将某一输入框的input类型设置为search时，会在页面上生成一个数字滑动条，可以让用户输入特定范围内的数值。其语法结构为：<inputtype="range"min="最小值"max="最大值"step="步长">input类型的示例代码如例2-16.html所示。6.4url类型在HTML5中将某一输入框的input类型设置为url时，表示这个输入框是一个url类型的输入框，要求必须在该输入框内输入一个包含相关访问协议的完整url地址。当提交表单时，会自动检测输入内容，如果输入的不是正确格式的url地址，将会出现错误提示。其语法结构为：<inputtype="url"name="…">url类型的示例代码如例2-17.html所示。6.5color类型在HTML5中将某一输入框的input类型设置为color时，在浏览器会生成一个颜色选择器。用户在颜色选择器选中某个颜色后，输入框会自动显示选中的颜色。其基本语法结构为：<inputtype="color"name="color"/>color类型的示例代码如例2-18.html所示。6.6number类型在HTML5中将某一输入框的input类型设置为number时，在页面中生成一个只允许用户输入数字类型的输入框，可以通过输入框内的上、下按钮调节大小。其基本语法结构为：<inputtype="number"min="最小值"max="最大值"step="步长"/>min属性：指定可输入的最小数值，默认时将不限制最小输入值。max属性：指定可输入的最大数值，默认时将不限制最大输入值。step属性：指定输入框的值在单击上、下按钮时增加或减小的数值，默认值为1。number类型的示例代码如例2-19.html所示。07HTML5表单的新属性html5中新增的与表单相关的属性包括form、required、placeholder、autofocus、autocomplete、pattern、multiple等属性。7.1form属性HTML5为所有的表单元素新增了form属性，用于定义表单元素和表单之间的隶属关系。如需定义表单元素和表单之间的隶属关系，只需对表单元素的form属性赋予某个表单的id值即可。其基本语法结构为：<formid="form1">…</form><inputtype="submit"form="form1"/>7.2required属性在HTML5中，required属性用于验证表单元素信息是否为空，如果给某一表单元素添加required属性则该元素为必填项，不可以为空。其基本语法结构为：<inputtype="text"required="required"/>required属性的示例代码如例2-20.html所示。7.3placeholder属性placeholder属性用于在文本框或者文本域内提供输入提示，增强界面互动的友好型。当文本框或者文本域内获得焦点时，提示信息自动消失；当文本框或者文本域内没有输入内容且没有获得焦点，提示信息自动显示。其基本语法结构为：<inputtype="text"placeholder="提示信息"/>或<textarearows=""cols=""placeholder="提示信息"/>placeholder属性的示例代码如例2-21.html所示。7.4autofocus属性autofocus属性规定当页面加载时表单元素将自动获得焦点。一个页面中最多只能设置一个autofocus属性，否则该功能失效，建议将第一个input元素设置设置该属性。其基本语法结构为：<inputtype="text"autofocus="autofocus"/>或<textarearows="..."cols="..."autofocus="autofocus">autofocus属性的示例代码如例2-22.html所示。7.5autocomplete属性autocomplete属性用于对设置了该属性的元素进行自动补全。自动完成允许浏览器预测对字段的输入。当用户在字段开始输入时，浏览器根据之前输入过的数据，显示出在元素中填写的选项。其基本语法结构为：<inputautocomplete="on|off">autocomplete属性的示例代码如例2-23.html所示。7.6pattern属性pattern属性是input元素的校验属性，它的值为正则表达式，通过表达式完成对输入内容有效性的验证。其基本语法结构为：<inputtype="text"pattern="正则表达式"/>pattern属性的示例代码如例2-24.html所示。7.7multiple属性multiple属性规定输入字段可选择多个值。如果使用该属性，则字段可接受多个值。其基本语法结构为：<inputtype="text"multiple="multiple"/>multiple属性的示例代码如例2-25.html所示。项目实操本项目属于综合项目中的用户注册部分的实现，需要用到本章所学的表单、input以及上一章所学img等标签。1.使用input标签中的单行文本输入框定义用户名文本框；2.使用input标签中的密码输入框定义密码文本框；3.使用input标签中的提交按钮定义注册按钮；4.使用img标签定义注册背景图。✎作业要求理解HTML5新增元素和属性使用表单完成页面设计课后作业ThankYou！响应式Web开发（HTML5+CSS3+Bootstrap）第3章CSS基础响应式Web开发（HTML5+CSS3+Bootstrap）重难点重点:（1）CSS样式语法规则（2）样式三种常用存储位置的创建和应用（3）常用选择器的创建和应用（4）常用网页元素的样式应用难点:（1）三种常用位置样式的创建和应用（2）常用选择器的创建和应用目录01CSS基本认识03字体属性02CSS选择器04文本属性06背景属性05边框属性07样式优先级别01CSS基本认识没有使用CSS我们以前是如何控制字体的颜色和大小以及所使用的字体的？在一个页面里频繁地更替字体的颜色、大小等内容，生成的HTML代码长度会臃肿不堪，CSS为了简化这样的工作诞生了，当然其功能决非这么简单。

网页设计时采用CSS技术，可以快速统一地对网站页面的布局、字体、颜色、背景和其它效果实现更加精确的修改和控制。CSS技术在几乎所有的浏览器上都可以使用，服务器字体、图标文字使页面字体变得更漂亮；以前通过设计图片或动画实现的功能，现在只要用CSS就可以轻松创建和修改，从而更快地下载页面。界面美化的界面CSS1.1

为什么使用CSS1.2CSS语法格式熟练地使用CSS样式对网页进行修饰，首先需要了解CSS样式规则，根据CSS样式定义的位置和种类不同，规则语句格式会不同。语法格式:选择器{属性:属性值;}选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}1.2CSS语法格式英文大括号{}左侧的名称被称为选择器，{}内的内容称为声明，声明由一个或多个属性和属性值定义，两者合起来称为CSS规则。选择器：选择器用于指定CSS样式作用于哪个HTML元素，{}是对该元素设置的具体样式内容。属性和属性值：属性和属性值通常以“键值对”的形式出现，指定元素设置的样式属性，也有省略写法，如视频的自动循环播放可直接写属性值。属性和属性值之间用英文冒号“:”连接，多个“键值对”之间用英文分号“;”进行区分。1.3CSS引入位置常用的三种CSS样式引入的方式:（1）行内式在<body>标签内的任一元素标签内添加style属性，定义属性及属性值，样式效果只作用于改元素。语法格式:<标签style="属性1:属性值1;属性2:属性值2;属性3:属性值3;…"></标签>1.3CSS引入位置（2）内嵌式样式定义在HTML文档<head>或<body>中的<style>标签中，内嵌式样式与行内式样式不同的是内嵌式可以同时修改多个元素的样式属性。语法格式:<styletype="text/css">选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}</style>1.3CSS引入位置（3）外链式使用<link>标签将以“.CSS”为扩展名定义的外部样式文件，链接到HTML文档<head>标签内，具体选择器和属性等样式内容按照规则格式写入外部文件。语法格式:<linkrel="stylesheet"type="text/css"href="样式文件.css"/>02CSS选择器选择器用于选择要应用样式的一个或多个元素。常用的CSS选择器有哪些呢？2.1选择器1.元素选择器根据HTML元素标签名称来选择元素，自动应用样式。语法格式:标签名称{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}2.ID选择器根据HTML元素id属性选择元素，调用该属性应用样式。由于id属性在页面的唯一性，选择器可以选择一个唯一元素。定义样式时选择器名称前面添加“#”。语法格式:#选择器名{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}2.1选择器3.类选择器根据HTML元素class属性来选择元素，应用样式。语法格式:.选择器名{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}4.交集选择器根据HTML元素class属性来选择元素，应用样式。语法格式:标签名称.选择器名{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}标签名称#选择器名{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}2.1选择器5.通用选择器根据HTML元素class属性来选择元素，应用样式。语法格式:*选择器名{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}6.并集选择器多个元素共用一个样式。语法样式：选择器名1,选择器名2,选择器名3{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}2.1选择器7.后代选择器根据文档上下文结构选择元素，应用样式。语法格式：选择器名1,选择器名2,选择器名3{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}8.子代选择器根据文档上下文里紧挨着的位置选择多个元素，应用样式。语法结构：选择器1>选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}2.1选择器9.相邻兄弟选择器根据文档上下文里平行的位置选择多个元素，应用样式。语法结构：选择器1+选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}10.属性选择器根据元素的某个属性选择元素，应用样式。语法样式：例如选择包含href属性的<a>元素应用文字颜色绿色样式:a[href]{color:red;text-decoration:none;}03字体属性字体设置是网页设计中的重要组成部分，添加相应属性的字体会使页面更加美观，提升用户体验，CSS中提供了一系列用于设置文本字体样式的属性。3.1字体属性1.font-family属性选择器{font-family:字体名称;}2.font-style属性选择器{font-style:normal|italic|oblique;}3.font-weight属性选择器{font-weight:normal|bold;}4.font-variant属性选择器{font-variant:normal|small-caps;}5.font-size属性选择器{font-size:px|em|%|vw;}3.2服务器字体服务器字体@font-face{font-family：name；src:url()format();}04文本属性网页中的文本除了设置如字体大小的字体属性外，还需设置字体颜色、对齐方式等文本属性美化网页效果。4.1文本属性1.color属性color:颜色英文名称|十六进制值|RGB值；2.text-align属性text-align:left|center|right|justify；3.vertical-align属性vertical-align:top|middle|bottom；4.text-decoration属性text-decoration:none|overline|line-through|underline；5.text-transform属性text-transform:uppercase|lowercase|capitalize；6.间距属性text-indent:em|像素；letter-spacing:em|像素；word-spacing:像素；line-height:倍数|像素；white-space:normal|nowrap|pre|pre-wrap|pre-line|break-spaces；7.text-shadow属性text-shadow:h-shadowv-shadowblurcolor；4.1文本属性05边框属性设置网页文档中的元素边框样式，包含宽度、线形和颜色等属性，边框属性和四个方向属性可以分别设置，也可以合起来简写定义。5.1边框属性1.简写边框属性border:border-widthborder-styleborder-color；2.边框宽度属性border-width:像素|thin|medium|thick；3.边框线型属性border-style:none|solid|dotted|dashed|double|groove|ridge|inset|outset；4.边框颜色属性border-color:颜色英文名称|十六进制值|rgb()|rgba()|transparent；5.圆角边框属性border-radius:像素|%；6.图形边框属性border-image:border-image-source|border-image-slice|border-image-width|border-image-outset|border-image-repeat；06背景属性设置网页文档中的元素背景，背景属性不具备继承性。6.1背景属性1.background-color属性background-color:颜色英文名称|十六进制值

|rgb()|rgba()|transparent；2.background-image属性background-image:url();3.background-size属性border-radius:像素|%；4.background-position属性background-position:x|y；5.background-repeat属性background-repeat:no-repeat|repeat-x|repeat-y；background-repeat:no-repeat;6.background-attachment属性background-attachment:scroll|fixed；07样式优先级别!important可以获得最高优先级别行内样式>内嵌样式>外链式样式ID选择器>类选择器>标签选择器后设置样式>前设置样式项目实操通过多个案例的设计和制作，大家可以熟练掌握CSS在网页中的常用操作。本项目属于综合项目，所需知识点主要包含:1.嵌套结构布局网页；2.样式定义网页外观和内容。✎作业要求理解CSS的基本用法使用三种方式引用CSS使用多种选择器美化网页引入课后作业ThankYou！响应式Web开发（HTML5+CSS3+Bootstrap）第4章CSS布局响应式Web开发（HTML5+CSS3+Bootstrap）重难点重点:（1）HTML文档的盒子（2）网页元素的常用布局（3）不同布局方法的常用样式难点:（1）position定位的使用（2）flex弹性布局和@media响应式布局的使用目录01认识盒子03位置定位02浮动定位04弹性布局06隐藏与显示05媒体查询01认识盒子CSS样式提供了三种常用方式设置网页中元素的位置，分别是标准文档流、浮动和定位。其中浮动可以设置盒子的水平方向，定位通过设置基准和偏移量属性可以将元素位置精确到像素级别的网页中任一位置。padding属性设置盒子四个方向的内边距；margin属性设置盒子四个方向的外边距。（1）padding属性设置元素与边框之间的距离。方向取值设置与边框一样。语法格式：padding:px|%|inherit（从父元素继承）（2）margin属性设置边框外围的距离。方向取值设置与边框一样。语法格式：margin:auto（水平居中）|px|%|inherit（从父元素继承）1.1

内边距和外边距1.2块级元素与行内元素（1）块级元素每个块级元素占一行，垂直方向排列，可以容纳行内元素和其他块级元素；常用的元素有<html>、<body>、<nav>等（2）行内元素每个行内元素占同一行，直到一行排不下才会换行，水平方向排列，只能容纳文本或者其他行内元素；常用的元素有<a>、<img>、<input>、<br>1.2块级元素与行内元素（3）块级元素和行内元素转换给元素添加display属性可以调整其显示级别，块级元素可以变为行内元素，行内元素也可以变为块级元素。语法格式：display:block;|display:inline;（4）块级元素和行内元素区别一般情况下，块级元素可以设置width和height属性，行内元素设置width和height属性无效。块级元素可以设置margin和padding属性，行内元素设置内边距有效，设置外边距的margin-left和margin-right有效，margin-top和margin-bottom无效。02浮动定位CSS样式提供了三种常用方式设置网页中元素的位置，分别是标准文档流、浮动和定位。其中浮动可以设置盒子的水平方向，定位通过设置基准和偏移量属性可以将元素位置精确到像素级别的网页中任一位置。2.1

浮动定位1.float属性设置元素在网页中的水平方向显示效果。语法格式：float:left|right|none|inherit

2.clear属性设置哪些元素的浮动被清除。浮动按照方向清除。语法格式：clear:none|left|right|both|inherit03位置定位CSS样式提供了三种常用方式设置网页中元素的位置，分别是标准文档流、浮动和定位。其中浮动可以设置盒子的水平方向，定位通过设置基准和偏移量属性可以将元素位置精确到像素级别的网页中任一位置。3.1位置定位1.position属性position属性和top、bottom、left和right四个偏移量属性可以