使用HTML5和CSS3开发电子商务网站——（四）

目录：

第一章：HTML5基础

1.1 HTML5文件的基本结构和W3C标准

1.2 网页的基本标签

1.3 图像标签

1.4 超链接标签

第二章：列表、表格与媒体元素

2.1 列表

2.2 表格

2.3 HTML5的媒体元素

2.4 HTML5的结构元素

2.5 <iframe>框架

第三章：表单

3.1 表单概述

3.2 表单的高级应用

3.3 表单的初级验证

第四章：初识CSS3

4.1 CSS概述

4.2 CSS3的基本语法

4.3 在HTML中引入CSS样式

4.4 CSS3的选择器

第五章：CSS3美化网页元素

5.1 编辑网页文本

5.2 设置超链接和列表样式

5.3 背景样式

第六章：盒子模型

6.1 盒子模型

6.2 圆角边框

6.3 盒子阴影

第七章：浮动

7.1 网页布局

7.2 display属性

7.3 浮动概述

7.4 清除浮动

第八章：定位网页元素

8.1 定位在网页中的应用

8.2 position属性

8.3 z-index属性

第九章：利用CSS3制作网页动画

9.1 CSS3变形

9.2 CSS3过渡

9.3 CSS3动画

 

 

第一章：HTML5基础

1.1 网页的基本信息

 1.1.1DOCTYPE声明

    约束HTML文档结构，检验是否符合相关Web标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。

    <! DOCTYPE html>

 1.1.2 < meta> 标签

      使用 <meta> 标签描述网页的摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签描述的内容并不现实，其目的是方便浏览器解析或利于搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。

       <meta   charset="UTF-8" />

     当遇到页面发生乱码时，可以先观察页面中是否有些编码方式的语句，然后使用记事本打开该乱码文件，单机“另存为”按钮，在弹出的“另存为”对话框中修改编码方式，使其与页面中的编码方式一致。

     搜索关键字：

      <meta  name="keywords" content=“2017” />

      内容描述信息：

      <meta   name ="description"  content=“今天是2017年9月21日”/>

1,2 网页的基本标签

      标题标签 <h1>~<h6>

      段落标签：<p>   </p>

      换行标签：<br/>

      水平线标签：<hr/>

      字体样式标签：<strong>字体加粗</strong>  <em>字体倾斜</em>

      特殊符号：

特殊符号	字符实体
空格	 
大于号（>）	>
小于号（<）	&lt;
引号（"）	&quot;
版权符号（）	&copy;

 

  1.3 图像标签

     图像标签的基本语法：

     <img  src ="图片地址"  alt = " 图像的替代文字"  title="鼠标悬停提示文字"  width="图片宽度"  height="图片高度" />

  1.4 超链接标签

      1.4.1 超链接的基本用法

      <a  href="链接地址"  target="目标窗口位置">链接文本或图像</a>

       根据连接地址是指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径

       绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。例如：<a  href="http:// www.sohu.com/index.html">搜狐</a>

       相对路径：相对于当前页面的路径，一般指向本站点内的文件，所以一般不需要一个完整的URL地址的形式。例如：<a href="login/login.html">登录</a>表示链接地址为当前页面所在路径的login目录下的login.html页面

        另外："../"表示当前目录的上级目录；“../../”表示当前目录的上上级目录。

     1.4.2 超链接的应用场合

      ① 页面间链接：A页到B页

      ② 锚链接：A页甲位置到A页乙位置或A页甲位置到B页乙位置

      ③ 功能性链接：在页面中调用其他程序功能，如电子邮件、QQ/MSN等。

       锚链接语法：

       <a  name="marker">目标位置乙</a>

       <a href="#marker">当前位置甲</a>

        功能性链接语法：

        <p><img src="image/logo.jpg"  alt="logo"/>[<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>] </p>

 第二章：列表、表格与媒体元素
      2.1 定义列表及其应用

        <dl>

              <dt>标题</dt>

             <dd><dd>

        </dl>

      2.2 表格的基本语法

      <table>

           <tr>  <th></th><th></th></tr>

           <tr><td></td><td></td></tr>

       </table>

        表格的跨列与跨行：

        表格的跨列：

        <table><tr><td colspan="所跨的列数">单元格内容</td></tr></table>

         表格的跨行：

        <table><tr><td  rowspan="所跨的行数">单元格内容</td></tr></table>

      2.3 HTML5的媒体元素

       2.3.1 视频元素

      <video controls>

              <source  src="video/video.webm"/>

              <source src="video/video.mp4"/>

      </video>

       设置<video  autoplay>后，不需要与用户进行任何交互，就可以让视频文件加载完成后自动播放。

        2.3.2 音频元素

    <audio controls>

              <source  src="music/music.mp3"/>

              <source src="music/music.ogg"/>

      </audio>

       可以使用Loop属性实现视频的循环播放。

         2.4 <iframe> 框架

         语法：<iframe src="引用页面地址"  name="框架标识名"></iframe>

         <iframe>属性的使用

        <iframe name="mainFrame"   src="subframe/the_second.html"/>

       < a href="subframe/the_second.html"   target="mainFrame">下面显示第二页</a>

第三章：表单

     最基本的表单：

     

<form   method="post"  action="result.html">
    <p>  名字： <input name="name" type="text" />  </p>
    <p>  密码： <input name="pass" type="password" />  </p>
    <p>
          <input  type="submit"  name="Button"   value="提交"/>
          <input  type="reset"  name="Reset"  value="重填"/>
    </p>
</form>

 get方式提交和post方式提交的区别：

（1）post方法提交方式不会改变地址栏状态，表单数据不会被显示

（2）使用get方法提交方式，地址栏状态发生变化，表单数据会在URL信息中显示。

表单类型：

type	说明
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
select[option]	列表框
reset	重置按钮
button	普通按钮
submit	提交按钮
textarea(cols="显示的列数"  rows="显示的行数"	多行文本域
files(form中必须有enctype="multipart/form-data")	文件域
email	邮箱
url	网址
number	数字
range	滑块
search	搜索框
hidden	隐藏域

readonly:只读              disabled:禁用

表单元素的标注

      对表单元素进行标注，是为了增强鼠标的可用性。

      语法： <label  for="表单元素的id">标注的文本</label>

      

<form>
      请选择性别：
      <label  for="male">男</label>
      <input   type="radio"  name="gender"    id="male"/>
      <label  for="female"> 女</label>
      <input  type="radio"   name="gender"   id="female"/>
</form>

3.3表单的初级验证

1、placeholder

     

<form action="#" method="post">
      <p> 请输入搜索的关键词：
       <input  type="search"  name="sousou" placeholder="请输入要搜索的关键字"/>
       <input  type="submit"   value="Go"/>
       </p>
</form>

2、required  验证表单元素非空

3、pattern  验证input类型文本框中用户输入的内容是否与自定义的正则表达式想匹配

<form  action="#"  method="post">
       <p>
           电话号码:
           <input  type="text"   name="tel"   required    pattern="^  1[358]\d{9}"/>  *以13、15、18开头的11位数字
          <br/>
          <input  type="submit"  value="提交"/>
        </p>
</form>
  

^:开始

$:结束

\d:数字

\D:非数字

\s:空字符
\S：非空字符

\w:文字

\W:非文字

*:任意字符，0~N次

+:任意个字符  1~N次

？：是否有(0次或者1次)

{n}:N次重复

{n,}:至少n次

{n,m}  n到m次

.：除了换行之外的所有字符，当需要用"."时，应写为："\."