目录




HTML 介绍

什么是 HTML

网页的构成：

  • ​​HTML​​：通常用来定义网页内容的含义和基本结构。
  • ​​CSS​​：通常用来描述网页的表现与展示效果。
  • ​​JavaScript​​：通常用来执行网页的功能与行为。

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦，它是一种用来告知浏览器如何组织页面的标记语言。

  • 所谓​​超文本（Hypertext）​​，是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。
  • 所谓​​标记（Markup）​​ ，是用来注明文本，图片等内容，以便于在浏览器中显示，例如 <head>、<body> 等。

HTML 发展简史：

  • HTML 1.0：在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）。
  • HTML 2.0：1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时。
  • HTML 3.2：1997 年 1 月 14 日，W3C 推荐标准。
  • HTML 4.0：1997 年 12 月 18 日，W3C 推荐标准。
  • HTML 4.01（微小改进）：1999 年 12 月 24 日，W3C 推荐标准。
  • ​​HTML5​​：2014 年 10 月 29 日，万维网联盟宣布，经过接近 8 年的艰苦努力，该标准规范终于制定完成，是目前最为流行的版本，提供了很多标签新特性，现代大多数浏览器已经具备了 HTML5 的支持。

W3C 简介：

HTML_html

W3C 是万维网联盟（World Wide Web Consortium，​​W3C​​），又称 W3C 理事会。1994 年 10 月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李，负责制定 Web 相关标准的制定。


HTML 的组成

HTML页面由一系列的​​元素​​（​​element​​）组成的，而元素需要使用​​标签​​创建。


标签

一对​​标签（tags）​​可以设置一段文字样式，添加一张图片或者添加超链接等等。

示例：

<h1>今天是个好日子</h1>


在 HTML 中，<h1>标签表示标题，那么，我们可以使用​​开始标签（Opening tag）​​和​​结束标签（Closing tag）​​包围文本内容，这样其中的内容就以标题的形式显示了。

HTML_控件_02

HTML_属性值_03


属性

HTML标签可以拥有​​属性（attribute）​​。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加属性通常以​​名称=值​​成对的形式出现。

示例：

<h1 align="center">今天是个好日子!!!</h1>


在 HTML 标签中，​​align​​属性表示水平对齐方式，我们可以赋值为​​center​​来表示 居中。

HTML_表单_04

HTML_属性值_05


HTML 整体结构

  2. ​​<!DOCTYPE html>​​：该标签表示声明文档类型，规定了 HTML 页面必须遵从的良好规则，从 HTML5 后， 是最短的有效的文档声明。

了解：早期的 HTML（大约 1991 年 2 月），文档类型声明类似于链接，能自动检测错误和其他有用的东西。使用如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

然而现在没有人再这样写，需要保证每一个东西都正常工作，已成为历史。

  2. <html>：该标签包裹了整个完整的页面，是一个根元素（顶级元素）。其他所有元素必须是此元素的后代，每篇 HTML 文档只有一个根元素。
  3. <head>：该标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于<head> 元素的内容。目前主要了解两个标签：
  2. ​​<meta charset="utf-8">​​：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容，能够避免页面乱码问题。
  3. ​​<title>​​：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。
  1. <body>：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。

HTML 基础语法

注释

如同大部分的编程语言一样，在 HTML 中有一种可用的机制来在代码中书写注释。

为了将一段 HTML 中的内容置为注释，需要将其用特殊的记号​​<!--注释内容-->​​包括起来。

示例：

<p>我在注释外！</p>

<!-- <p>我在注释内！</p> -->


标签

空元素

不是所有元素都拥有开始标签，内容和结束标记。一些元素只有一个标签，叫做空元素。它是在开始标签中进行关闭的。

示例：

第一行文档<br/>
第二行文档<br/>


嵌套元素

也可以把元素放到其它元素之中，这被称作嵌套。

比如，我们想要强调第一个，可以将 <b> 标签包围第一个，这样 b 标签就是嵌套在了 p 标签中：

<p>这是<b>第一个</b>页面</p>


块级和行内

概念

在 HTML 中有两种重要的元素类别，块级元素和行内元素。

​​块级元素：独占一行​​

  • 块级元素（block）在页面中以块的形式展现。相对于其前面的内容，它会出现在新的一行，其后的内容也会被挤到下一行展现。
  • 比如 <p>、<hr>，<li>、<div> 等。

​​行内元素：行内显示​​

  • 行内元素不会导致换行，通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。
  • 比如 <b>、<a>、<i>、<span> 等。
  • 注意：一个块级元素不会被嵌套进行内元素中，但可以嵌套在其它块级元素中。

div 和 span

div 和 span 在页面布局中有重要作用。

  • <div>：是一个块级元素，是通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。
  • <span>：是一个行内元素，是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。


属性

标签的属性，主要用于拓展标签的内容。属性包含了元素的额外信息，这些信息不会出现在实际的内容中，但是可以改变标签的一些行为或者提供数据。属性总是以​​name=value​​的格式展现。

  • 属性名：同一个标签中，属性名不得重复。
  • 大小写：属性和属性值对大小写不敏感。不过 W3C 标准中，推荐使用小写的属性/属性值。
  • 引号：双引号是最常用的，不过使用单引号也没有问题。

常用属性：

属性名

作用

class

定义元素类名，用来选择和访问特定的元素

id

定义元素唯一标识符，在整个文档中必须是唯一的

name

定义元素名称，可以用于提交服务器的表单字段

value

定义在元素内显示的默认值

style

定义 CSS 样式，这些样式会覆盖之前设置的样式


特殊字符

在 HTML 中，字符​​<​​, ​​>​​,​​"​​,​​'​​和​​&​​属于特殊字符，它们是 HTML 语法自身的一部分：

原义字符

等价字符引用

<

​​&lt;​​

>

​​&gt;​​

"

​​&quot;​​

'

​​&apos;​​

&

​​&amp;​​

空格

​​&nbsp;​​


案例：新闻文本

HTML_表单_06

重点讲解：

  2. div 布局的基本方式
  3. 文本标签的基本使用

文本结构的页面基本是由标题和段落构成的，内容结构化会使读者的阅读体验更轻松。

案例分析

div 样式演示

文本由几部分构成，我们可以先使用 div 将页面分割布局。例如，在 head 标签中，通过 style 标签加入样式：

<!-- 单个属性 -->
<style>
    标签名{
        属性名:属性值;
    }
</style>

<!-- 多个属性 -->
<style>
    标签名{
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
    }
</style>

<!-- 一个属性还可以含有多个值，即同时设置多种样式 -->
<style>
    标签名{
        属性名:属性值1 属性值2 属性值3; 
    }
</style>


示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式演示</title>
<style>
div{
/*显示边框*/
border: 1px solid red;

/*宽度 占屏幕的60%*/
width: 60%;

/*高度 500像素*/
height: 500px;

/*边框外边距*/
margin: auto;
        }
</style>
</head>
<body>
<div>第一个div</div>
</body>
</html>


效果如下：

HTML_支付宝_07

【提示】
为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面。

文本标签演示

使用文本内容标签，设置文字的基本样式：

标签名

作用

p

表示文本的一个段落

h

表示文档标题，​​<h1>–<h6>​​ ，呈现了六个不同的级别的标题，​​<h1>​​ 级别最高，而 ​​<h6>​​ 级别最低

hr

表示段落级元素之间的主题转换，一般显示为水平线

li

表示列表里的条目

ul

表示一个无序列表，可含多个元素，无编号显示

ol

表示一个有序列表，通常渲染为有带编号的列表

em

表示文本着重，一般用斜体显示

strong

表示文本重要，一般用粗体显示

font

表示字体，可以设置样式（已过时）

i

表示斜体

b

表示加粗文本

li 的不换行效果：

li{ display: inline;}  // 内联样式,有宽度,无高度
li{ display: inline-block;}  // 内联样式,有宽度,有高度


示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签演示</title>
</head>
<body>
<!--
段落标签：<p>
-->
<p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
<p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:</p>

<!--
标题标签：<h1> ~ <h6>
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<!--
水平线标签：<hr/>
属性：
size-大小
color-颜色
-->
<hr size="4" color="red"/>

<!--
无序列表：<ul>
属性：type-列表样式(disc实心圆、circle空心圆、square实心方块)
列表项：<li>
-->
<ul type="circle">
<li>javaEE</li>
<li>HTML</li>
</ul>

<!--
有序列表：<ol>
属性：type-列表样式(1数字、A或a字母、I或i罗马字符)   start-起始位置
列表项：<li>
-->
<ol type="1" start="10">
<li>有序1</li>
<li>有序2</li>
</ol>

<!--
斜体标签：<i>    <em>
-->
<i>我倾斜了</i>
<em>我倾斜了</em>
<br/>

<!--
加粗标签：<strong>  <b>
-->
<strong>加粗文本</strong>
<b>加粗文本</b>
<br/>
<!--
文字标签：<font>
属性：
size-大小
color-颜色
-->
<font size="5" color="yellow">这是一段文字</font>
</body>
</html>


效果：

HTML_表单_08

案例实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻文本</title>
<style>
div{
/*宽度  60%*/
width: 60%;

/*外边距*/
margin: auto;
        }
</style>
</head>
<body>
<!--标题-->
<div>
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
</div>

<!--作者信息-->
<div>
<i><font size="2" color="gray">作者：itheima 2088-08-08</font></i>
<hr/>
</div>

<!--副标题-->
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>

<!--正文内容-->
<div>
<p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
<p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
</p>
<p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p>
<p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯</p>
<p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。</p>
<p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？</p>
<p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p>

</div>
</body>
</html>


案例：头条页面

HTML_html_09

案例分析

div 布局

HTML_表单_10

想要将 div 布局成案例效果，首先需要对多个 div 进行区分，再分别设置每一个 div 自身的效果。

div 的 class 值

首先编写三个 div，设置边框样式：

<style>
/* 给div标签添加边框 */
div{ border: 1px solid blue;}
</style>

<div>left</div>
<div>center</div>
<div>right</div>


HTML_表单_11

发现通过 div 设置的样式都是一致的，无法个性化布局。

那么如何区分不同的 div 呢？ 可以使用 class 的值，格式：


<head>
<style>
.class值{
      属性名:属性值;
    }
</style>
</head>

<body>
<标签名 class="class值">
<!-- class 是自定义的值 -->
</body>


示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式演示</title>

<style>
/* 给div标签添加边框 */
div{
border: 1px solid red;
      }

/* 左侧图片的div样式 */
.left{
width: 20%;
height: 500px;
      }

      / *中间正文的div样式 */
.center{
width: 59%;
height: 500px;
      }

/* 右侧广告图片的div样式 */
.right{
width: 20%;
height: 500px;
      }
</style>

</head>

<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>

</html>


效果：

HTML_控件_12

所以，使用 class 属性值，可以帮助我们区分 div，更加精确的设置标签的样式。

浮动布局和清除

主体部分分为三列，而 div 是独占一行的，所以想要使用 div 布局，就还需要加入​​浮动​​属性。

浮动（float）：指定一个元素应沿其容器的左侧或右侧放置，允许文本或者内联元素环绕它。该元素从网页的正常流动中移除，其他部分保持正常文档流顺序。

格式：

<!-- 加入浮动 -->
float：none；不浮动
float：left；左浮动
float：right；右浮动

<!-- 清除浮动 -->
clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。


示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式演示</title>
<style>
/*给div标签添加边框*/
div{
border: 1px solid red;
        }

/*左侧图片的div样式*/
.left{
width: 20%;
height: 500px;
float: left;
        }

/*中间正文的div样式*/
.center{
width: 59%;
height: 500px;
float: left;
        }

/*右侧广告图片的div样式*/
.right{
width: 20%;
height: 500px;
float: left;
        }

/*底部超链接的div样式*/
.footer{
/*清除浮动效果*/
clear: both;
/*文本对齐方式*/
text-align: center;
/*背景颜色*/
background: blue;
        }
</style>
</head>
<body>
<!--顶部登陆注册-->
<div>top</div>

<!--导航条-->
<div>navibar</div>

<!--左侧图片-->
<div class="left">left</div>

<!--中间正文-->
<div class="center">center</div>

<!--右侧广告图片-->
<div class="right">right</div>

<!--底部页脚超链接-->
<div class="footer">footer</div>
</body>
</html>


效果：

HTML_表单_13


设置背景

背景色：​​background-color: black;​​

背景图：​​background-image: url("../img/bg.png");​​

  <!-- 简化版-->
<style>
div{
height: 666px;
background-color: gray;
        }
/*左侧分享*/
.left {
width: 10%;
float: left;
        }

/*中间文本*/
.center {
width: 80%;  /*最后去除边框宽度恢复为60%*/
float: left;
background-image: url("../img/star.gif");
        }

/*右侧广告*/
.right {
width: 10%;
float: left;
        }
</style>

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>


图片标签

标签名

作用

备注

img

可以显示一张图片(本地或网络)

src 属性是一个必需的属性，表示图片的地址

其他属性：

属性名

作用

备注

title

鼠标悬停（hover）时显示文本


alt

图形不显示时的替换文本


height

图像的高度


width

图像的宽度



超链接

标签名

作用

备注

a

表示超链接

href 属性表示超链接指向的URL地址。

属性名

作用

target

页面的打开方式：_self 表示当前页，_blank 表示新标签页

去掉下划线：

根据某些样式的布局需求，去除下划线更为美观。

a { 
text-decoration:none;  /* none 表示不显示 */
}


案例使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头条页面</title>
<style>
/*给div标签添加边框*/
/*div{
            border: 1px solid red;
        }*/

/*左侧图片的div样式*/
.left{
width: 20%;
float: left;
        }

/*中间正文的div样式*/
.center{
width: 60%;
float: left;
        }

/*右侧广告图片的div样式*/
.right{
width: 20%;
float: left;
        }

/*底部超链接的div样式*/
.footer{
/*清除浮动效果*/
clear: both;
/*文本对齐方式*/
text-align: center;
/*背景颜色*/
background: blue;
        }

/*超链接的样式控制*/
a{
color: white;
text-decoration: none;
        }
</style>
</head>
<body>
<!--顶部登陆注册-->
<div>
<img src="../img/j1.png" width="100%"/>
</div>

<!--导航条-->
<div>
<img src="../img/j2.png" width="100%"/>
<hr/>
</div>

<!--左侧图片-->
<div class="left">
<img src="../img/j3.png" width="100%"/>
</div>

<!--中间正文-->
<div class="center">
<div>
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
</div>

<!--作者信息-->
<div>
<i><font size="2" color="gray">作者：itheima 2088-08-08</font></i>
<hr/>
</div>

<!--副标题-->
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>

<!--正文内容-->
<div>
<p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
<p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
<img src="../img/1.jpg" width="100%"/>
</p>
<p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p>
<p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯</p>
<p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。</p>
<img src="../img/2.jpg" width="100%"/>
<p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？</p>
<p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p>
</div>
</div>

<!--右侧广告图片-->
<div class="right">
<img src="../img/ad1.jpg" width="100%"/>
<img src="../img/ad2.jpg" width="100%"/>
<img src="../img/ad3.jpg" width="100%"/>
<img src="../img/ad1.jpg" width="100%"/>
<img src="../img/ad2.jpg" width="100%"/>
<img src="../img/ad3.jpg" width="100%"/>
</div>

<!--底部页脚超链接-->
<div class="footer">
<a href="#">帮助中心</a> &nbsp;
<a href="#">开放平台</a> &nbsp;
<a href="#">诚聘英才</a> &nbsp;
<a href="#">联系我们</a> &nbsp;
<a href="#">法律声明</a> &nbsp;
<a href="#">隐私政策</a> &nbsp;
<a href="#">知识产权</a> &nbsp;
<a href="#">廉政举报</a> &nbsp;
</div>
</body>
</html>


案例：登录页面

HTML_控件_14

案例分析

表单

元素名

作用

form

表单属性，用来收集用户输入信息并向 Web 服务器提交的一个容器

示例：

<form >
    //表单元素
</form>


表单常用属性

属性名

作用

备注

action

处理此表单信息的 Web 服务器的 URL 地址


method

提交此表单信息到 Web 服务器的方式

常用的值有 get 和 post，默认为 get

autocomplete

自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。配合 input 标签使用

开启为 on，关闭为 off

placeholder

提示用户输入框的作用

1. 用于提示的占位符文本不能包含回车或换行

2. 仅适用于当 type 属性为 text、search、tel、url or email 时，否则会被忽略

required

指定用户在提交表单之前必须为该元素填充值

1. 布尔属性

2. 当 type 属性是 hidden、image 或者 button 类型时不可使用

示例：

<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>

<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>


表单常用元素

表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。

元素名

作用

备注

label

表单元素的说明，配合表单元素使用

for 属性值为相关表单元素的 id 属性值

input

表单中输入控件，多种输入类型，用于接受来自用户数据

type 属性值决定输入类型

button

页面中可点击的按钮，可以配合表单进行提交

type 属性值决定按钮类型

表单元素的属性值

输入框和按钮的属性值
  • label 元素：表单的说明
  • for 属性值：匹配 input 标签的 id 属性值
  • input 元素：输入控件
  • type 属性：表示输入类型，text 值为普通文本框
  • id 属性：表示标签唯一标识
  • name 属性：表示标签名称
  • value 属性：表示标签数据值
  • button 元素：表示按钮
  • type 属性：表示按钮类型，submit 值为提交按钮

示例：

<form action="" method="post">
<label for="username">Username:</label>
<input type="text" id="username"  name="username" value="tom">
<button type="submit" >login</button>
</form>


效果：

HTML_支付宝_15

input 的 name 和 value 属性

属性名

作用

name

表示 <input> 元素的名称。在提交整个表单数据时，可以用于区分属于不同的 <input>

value

表示 <input> 元素的输入值。允许用户通过页面输入

使用方式：

以 name 属性值作为键，value 属性值作为值，构成键值对提交到服务器，多个键值对则使用​​&​​进行分隔。

示例：

HTML_html_16

input 的 type 属性值

属性值

作用

备注

text

单行文本字段


password

单行文本字段，值被遮盖


email

用于编辑 e-mail 的字段，可以对 e-mail 地址进行简单校验

HTML5

radio

单选按钮

1. 在同一个“单选按钮组”中，所有单选按钮的 name 属性使用同一个值，因为同一时间只能有一个单选按钮被选择；

2. 必须使用 value 属性定义此控件被提交时的值；

3. 使用 checked 属性可以指示控件的缺省选择

checkbox

复选框

1. 必须使用 value 属性定义此控件被提交时的值；

2. 使用 checked 属性可以指示控件的缺省选择；

3. 选中多个值时，所有的值会构成一个数组而提交到 Web 服务器

file

此控件可以让用户选择文件，用于文件上传

使用 accept 属性可以定义控件可以选择的文件类型

hidden

此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值


date

HTML5 用于输入日期的控件

年、月、日

time

HTML5 用于输入时间的控件

时、分、秒

datetime-local

HTML5 用于输入日期时间的控件

不包含时区

number

HTML5 用于输入浮点数的控件


range

HTML5 用于输入不精确值控件

max 参数规定最大值

min 参数规定最小值

step 参数规定步进值

value 参数规定默认值

search

HTML5 用于输入搜索字符串的单行文本字段

可以点击​​x​​清除内容

tel

HTML5 用于输入电话号码的控件


url

HTML5 用于编辑 URL 的字段

可以校验URL地址格式

示例：

  <form action="#" method="get">
<label for="username">Username:</label>
<input type="text" id="username"  name="username"> <br/>

<label for="password">Password:</label>
<input type="password" id="password"  name="password"><br/>

<label for="email">Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type="email" id="email"  name="email"><br/>
<button type="submit"> login</button>
</form>


HTML_支付宝_17

示例：单选/多选框

<form action="#" method="get">
<label for="gender">性别:</label>
<input type="radio" id="gender" name="gender" value="boy"/>男
<input type="radio" name="gender" value="girl" checked="checked"/>女

<hr/>
<label for="hobby">爱好: </label>
<input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育
<input type="checkbox"  name="hobby" value="tech"/> 科技
<input type="checkbox" name="hobby" value="fun" /> 娱乐
<input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频
</form>


HTML_表单_18

button 的 type 属性值

属性值

作用

button

无行为按钮，用于结合 JavaScript 实现自定义动态效果

submit

提交按钮，用于提交表单数据。

reset

重置按钮，用于将表单中内容恢复为默认值。

image

图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小

更多表单元素

标签名

作用

备注

select

表单的控件，下拉选项菜单

与 option 配合实用

optgroup

option 的分组标签

与 option 配合实用

option

select 的子元素，表示一个选项


textarea

表示多行纯文本编辑控件

rows 表示行高度， cols 表示列宽度

fieldset

用来对表单中的控制元素进行分组(也包括 label 元素)


legend

表示 fieldset 内容的标题

fieldset 的子元素

select 示例：

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>

<!--  
select 的 name 属性值，与 option 的 value 属性值，构成键值对，提交到 Web 服务器
-->


HTML_属性值_19

textarea 示例：

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>


HTML_控件_20

fieldset 示例：

<form action="#" method="post">
<fieldset>
<legend>是否同意</legend>
<input type="radio" id="radio_y" name="agree" value="y"> 
<label for="radio_y">同意</label>
<input type="radio" id="radio_n" name="agree" value="n"> 
<label for="radio_n">不同意</label>
</fieldset>
</form>


HTML_支付宝_21


案例实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{
background: url("../img/bg.png");
        }

.center{
/*背景颜色*/
background: white;
/*宽度*/
width: 400px;
/*文本对齐方式*/
text-align: center;
/*外边距*/
margin: auto;
        }
</style>
</head>
<body>
<!--顶部-公司图标-->
<div>
<img src="../img/logo.png"/>
</div>

<!--中间-注册信息-->
<div class="center">
<div>注册详情</div>
<hr/>

<!--表单标签-->
<form action="#" method="get" autocomplete="off">
<div>
<label for="username">姓名：</label>
<input type="text" id="username" name="username" value="" placeholder=" 在此输入姓名" required/>
</div>

<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password" value="" placeholder=" 在此输入密码" required/>
</div>

<div>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" value="" placeholder=" 在此输入邮箱" required/>
</div>

<div>
<label for="tel">手机：</label>
<input type="tel" id="tel" name="tel" value="" placeholder=" 在此输入手机" required/>
</div>
<hr/>

<div>
<label for="gender">性别：</label>
<input type="radio" id="gender" name="gender" value="men"/>男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="gender" value="women"/>女 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>

<div>
<label for="hobby">爱好：</label>
<input type="checkbox" id="hobby" name="hobby" value="music"/>音乐
<input type="checkbox" name="hobby" value="movie"/>电影
<input type="checkbox" name="hobby" value="game"/>游戏
</div>

<div>
<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday" value=""/>
</div>

<div>
<label for="city">所在城市：</label>
<select id="city" name="city">
<option>---请选择所在城市---</option>
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</optgroup>
<optgroup label="省会市">
<option>西安</option>
<option>杭州</option>
<option>郑州</option>
<option>武汉</option>
</optgroup>
</select>
</div>
<hr/>
<div>
<label for="desc">个性签名：</label>
<textarea id="desc" name="desc" rows="5" cols="40" placeholder=" 请写下您的与众不同"></textarea>
</div>
<hr/>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</div>
</body>
</html>