JavaEE-v4.0-HTML
1 HTML入门
1.1 初识HTML
1.1.1 概述
网络世界已经跟我们息息相关，当我们打开一个网站，首先映入眼帘的就是一个个华丽多彩的网页。这些网页，不仅呈现着基本的内容，还具备优雅的布局和丰富的动态效果，这一切都是如何做到的呢？前端入门课程，为您一层层的揭开网页的面纱。
- 网页的构成
- 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是万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李，负责制定web相关标准的制定。
1.1.2 HTML的组成
HTML页面由一系列的元素（elements） 组成，而元素是使用标签创建的。
1）标签
一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。 例如：
<h1>今天是个好日子</h1>
在HTML中，<h1>标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。
显示效果如下：
2）属性
HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值成对的形式出现，比如：name=‘value’。例如：
<h1 align="center">今天是个好日子!!!</h1>
在HTML标签中，align 属性表示水平对齐方式，我们可以赋值为 center 表示 居中 。
显示效果如下：
1.2 入门案例
1.2.1 初始页面
1）创建一个标准的初始化页面
-
右键点击创建新页面
-
自定义文件名字，比如index
-
点击ok，页面创建成功。
2）页面说明
<!DOCTYPE html>: 声明文档类型。规定了HTML页面必须遵从的良好规则，从HTML5后，<!DOCTYPE html>是最短的有效的文档声明。
文字作为了解资料
很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，能自动检测错误和其他有用的东西。使用如下：
然而现在没有人再这样写，需要保证每一个东西都正常工作已成为历史。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>：这个标签包裹了整个完整的页面，是一个根元素（顶级元素）。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。<head>：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于<head>元素的内容。目前主要了解两个标签：<meta charset="utf-8">：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容，能够避免页面乱码问题。<title>：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。
<body>：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。
1.2.2 案例实现
- 在初始化页面的
<body>标签中，加入一对<p>标签。<p>标签表示文本的一个段落，具有整段文本之间相分离的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
</body>
</html>
- 在一对
<p>标签中，编写文本内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p>这是第一个页面</p>
</body>
</html>
- 打开浏览器查看，效果如下：
1.3 总结
- HTML是一种标记语言，用来组织页面，使用元素和属性。
- 这个元素的主要部分有：
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 属性（Attribute）：标签的附加信息。
- 在学习HTML时，要抓住两个方面：
- 掌握标签所代表的含义。
- 掌握在标签中加入的属性的含义。
2 基本语法
2.1 关于注释
如同大部分的编程语言一样，在HTML中有一种可用的机制来在代码中书写注释。
为了将一段HTML中的内容置为注释，你需要将其用特殊的记号包括起来， 比如：
<p>我在注释外！</p>
<!-- <p>我在注释内！</p> -->
2.2 关于标签
2.2.1 空元素
不是所有元素都拥有开始标签，内容和结束标记。一些元素只有一个标签，叫做空元素。它是在开始标签中进行关闭的。例子如下：
第一行文档<br/>
第二行文档<br/>
2.2.2 嵌套元素
你也可以把元素放到其它元素之中——这被称作嵌套。比如，我们想要强调第一个，可以将<b>标签包围第一个，这样b标签就是嵌套在了p标签中：
<p>这是<b>第一个</b>页面</p>
2.2.3 块级和行内
1）概念
在HTML中有两种重要元素类别，块级元素和内联元素。
- 块级元素：
独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<p>，<hr>，<li>，<div>等。 - 行内元素
行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如<b>，<a>，<i>，<span>等。
注意：一个块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
2）div和span
<div>是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。<span>是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。
注意：div和span在页面布局中有重要作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
<!--
标签分类
开始和结束标签
自闭和标签
-->
<h1>一级标题</h1>
<br/>换行
<hr/>水平分割线
<!--标签的嵌套-->
<h2><u>二级标题</u></h2>
<!--块级元素和行内元素-->
<div>第一个div</div>
<div>第二个div</div>
<span>第一个span</span>
<span>第二个span</span>
</body>
</html>
2.3 关于属性
【重点讲解】
属性作为HTML的重要部分，这里强调属性的格式和作用。
标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以name = value的格式展现。
- 属性名：同一个标签中，属性名不得重复。
- 大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。
- 引号：双引号是最常用的，不过使用单引号也没有问题。
- 常用属性：
| 属性名 | 作用 |
|---|---|
| class | 定义元素类名，用来选择和访问特定的元素 |
| id | 定义元素唯一标识符，在整个文档中必须是唯一的 |
| name | 定义元素名称，可以用于提交服务器的表单字段 |
| value | 定义在元素内显示的默认值 |
| style | 定义CSS样式，这些样式会覆盖之前设置的样式 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
</head>
<body>
<div class="cls">第一个div</div>
<div class="cls">第二个div</div>
<div id="d1">第三个div</div>
<div id="d2">第四个div</div>
<div style="background-color: red">第五个div</div>
</body>
</html>
2.4 特殊字符
在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ’ | ' |
| & | & |
| 空格 | |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊字符</title>
</head>
<body>
本网站有 最终解释权 <br/>
本网站有 最终解释权
</body>
</html>
2.5 总结
HTML的基本语法比较简单，在使用的过程中注意写法即可。
3 HTML案例-新闻文本
重点讲解：
- div布局的基本方式
- 文本标签的基本使用
文本结构的页面基本是由标题和段落构成的，内容结构化会使读者的阅读体验更轻松。
3.1 案例效果
显示新闻文本。
3.2 案例分析
3.2.1 div样式布局
文本由几部分构成，我们可以使用div将页面分割布局。先来了解一下，使用div如何进行简单的布局。
在head标签中，通过style标签加入样式。
基本格式：
格式:
<style>
标签名{
属性名:属性值;
}
</style>
多个属性名格式：
<style>
标签名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值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>
效果如下：
div的多样式：
一个属性名可以含有多个值，同时设置多样式。
格式:
<style>
标签名{
属性名:属性值1 属性值2 属性值3;
}
</style>
【提示】
为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面。
3.2.2 文本标签
使用文本内容标签设置文字基本样式。
| 标签名 | 作用 |
|---|---|
| p | 表示文本的一个段落 |
| li | 表示列表里的条目。 |
| 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>传智播客</li>
<li>黑马程序员</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>
3.3 使用标签
- 简单布局，使用div标签。
- 文本样式，使用基本文本标签。
3.4 实现步骤
- 创建初始页面。
- 使用div标签划分区域（标题，作者，副标题，正文），设置div样式。
- 编辑正文。
- 使用h1标签加入标题。
- 使用em标签加入作者信息。
- 使用hr标签加入分割线。
- 使用h3标签加入副标题。
- 使用p标签加入正文。
- 使用ol标签，li标签加入列表信息。
- 使用strong标签，加入文字强调效果。
<!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>
4 HTML案例-头条页面
4.1 案例效果
4.2 案例分析
4.2.1 div布局的进阶
想要将div布局成案例效果，首先需要对多个div进行区分，再分别设置每一个div自身的效果。
1）div的class值
首先编写三个div，设置边框样式
<style>
div{ border: 1px solid blue;}
</style>
<div >left</div>
<div >center</div>
<div>right</div>
发现通过div设置的样式都是一致的，无法个性化布局。如何区分不同的div呢？
使用class的值，格式：
.class值{
属性名:属性值;
}
<标签名 class="class值">
提示: class是自定义的值
所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式。
2）浮动布局和清除
主体部分分为三列，而div是独占一行的，所以想要使用div布局，就还需要加入浮动 属性。
- 概念
float：指定一个元素应沿其容器的左侧或右侧放置，允许文本或者内联元素环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序。
格式：
<!-- 加入浮动 -->
float：none；不浮动
float：left；左浮动
float：right；右浮动
<!-- 清除浮动 -->
clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。
- 加入三部分div
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
- 浮动布局
.left{
width: 20%;
float: left;
}
.center{
width: 59%;
float: left;
}
.right{
width: 20%;
float: left;
}
至此完成左中右三部分的布局。
- 加入
footer部分
.footer{
border: 5px solid blue;
}
<div class="footer">footer</div>
发现蓝色footer的div，延续正常文档流布局，摆放在navbar的下方，与浮动元素重叠。想要清除浮动影响，所以要设置清除浮动属性clear。
.footer{
border: 5px solid blue;
clear: both;
}
<div class="footer">footer</div>
- 设置
center
增加center 高度，完成基本的布局效果。
.center{
width: 59%;
float: left;
height: 600px;
}
<!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;
height: 500px;
}
/*中间正文的div样式*/
.center{
width: 59%;
float: left;
height: 500px;
}
/*右侧广告图片的div样式*/
.right{
width: 20%;
float: left;
height: 500px;
}
/*底部超链接的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>
4.2.2 设置背景
- 设置背景的格式：
背景色:
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>
4.2.3 图片标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| img | 可以显示一张图片(本地或网络) | src属性，这是一个必需的属性，表示图片的地址。 |
其他属性：
| 属性名 | 作用 | 备注 |
|---|---|---|
| title | 鼠标悬停（hover）时显示文本。 | |
| alt | 图形不显示时的替换文本。 | |
| height | 图像的高度。 | |
| width | 图像的宽度。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签演示</title>
</head>
<body>
<!--
图片标签：<img>
属性：
src-图片的路径
title-鼠标悬浮时显示的内容
alt-图片找不到时显示的内容
width-图片的宽度
height-图片的高度
-->
<img src="../img/ad1.jpg" title="广告" alt="图片找不到啦" width="150px" height="150px"/>
</body>
</html>
4.2.4 超链接
| 标签名 | 作用 | 备注 |
|---|---|---|
| a | 表示超链接。 | href属性，表示超链接指向的URL地址。 |
| 属性名 | 作用 |
|---|---|
| target | 页面的打开方式(_self当前页 _blank新标签页)。 |
去掉下划线
根据某些样式的布局需求，去除下划线更为美观。
a {
text-decoration:none; // none 表示不显示
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签演示</title>
<style>
a{
/*去掉超链接的下划线*/
text-decoration: none;
/*超链接的颜色*/
color: black;
}
/*鼠标悬浮的样式控制*/
a:hover{
color: red;
}
</style>
</head>
<body>
<!--
超链接标签：<a>
属性：
href-跳转的地址
target-跳转的方式(_self当前页面、_blank新标签页)
-->
<a href="01案例二：样式演示.html" target="_blank">点我跳转到样式演示</a> <br/>
<a href="http://www.itcast.cn" target="_blank">传智播客</a> <br/>
<a href="http://www.itheima.com" target="_self">黑马程序员</a> <br/>
<a href="http://www.itheima.com" target="_blank"><img src="../img/itheima.png" width="150px" height="50px"/></a>
</body>
</html>
4.3 使用标签
- 使用div标签，设置布局，背景和浮动等。
- 基本文本标签
- 图片标签
- 超链接标签
4.4 实现步骤
- 创建初始页面，拷贝图片等素材。
- 整体布局。
- 实现顶部条（图片）。
- 实现导航条（图片）。
- 实现左侧分享区域（图片）。
- 实现中间正文区域（文本+图片）。
- 实现右侧广告区域（图片）。
- 实现底部页脚（链接）。
4.5.2 实现顶部条
HTML代码
<div class="top_bar">
<img src="../img/j1.png">
</div>
样式代码
img{
width: 100%;
}
效果如下：
4.5.3 实现导航条
HTML代码
<div class="nav_bar">
<img src="../img/j2.png" width="100%">
</div>
<!-- 加入分割线 -->
<hr size="1"/>
样式代码
hr {
color: lightgrey;
size: 1px;
}
效果如下：
4.5.4 实现左部分享
HTML代码
<div class="left">
<img src="../img/j3.png" />
</div>
效果如下：
4.5.5 实现中部正文
HTML代码
<div class="center">
<div >
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
</div>
<div>
<font color="gray" size="2"> <em> 作者 2019-11-11 11:11:11</em></font> <br/>
<hr/>
</div>
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>
<div>
<p>
这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。
</p>
<p>
支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、
车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系 下的产品多多，我们对比以下几个产品看看区别:
<ol type="1">
<li>
蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。
</li>
<li>
微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大
</li>
<li>
蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆
</li>
</ol>
<img src="../img/1.jpg" />
</p>
<p>
说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当
我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。
</p>
<p>
<strong>一、芝麻分600以上福利之信用购。</strong>
网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯
</p>
<p>
<strong>二、芝麻分600以上福利之信用免押。</strong>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。
</p>
<img src="../img/2.jpg" />
<p>
<strong> 三、芝麻分600以上福利之国际驾照。</strong>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？
</p>
<p>
随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？
</p>
</div>
</div>
样式代码
.center {
width: 60%; /*最后去除边框宽度恢复为60%*/
float: left;
}
4.5.6 实现右侧广告
HTML代码
<div class="right">
<div class="right_ad">
<img src="../img/ad1.jpg" >
</div>
<div class="right_ad">
<img src="../img/ad2.jpg" >
</div>
<div class="right_ad">
<img src="../img/ad3.jpg" >
</div>
<div class="right_ad">
<img src="../img/ad1.jpg" >
</div>
<div class="right_ad">
<img src="../img/ad2.jpg" >
</div>
<div class="right_ad">
<img src="../img/ad3.jpg" >
</div>
</div>
效果如下：
4.5.7 实现底部页脚
HTML代码
<div class="footer">
<a href="#">关于黑马 </a>
<a href="#">帮助中心 </a>
<a href="#">开放平台 </a>
<a href="#">诚聘英才 </a>
<a href="#">联系我们 </a>
<a href="#">法律声明 </a>
<a href="#">隐私政策 </a>
<a href="#">知识产权 </a>
<a href="#">廉正举报 </a>
</div>
样式代码
.footer {
clear: both;
background-color: cornflowerblue;
text-align: center;
}
a{
text-decoration: none;
color: white;
}
5 HTML案例-登录页面
5.1 案例效果
5.2 案例分析
5.2.1 表单标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| form | 表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器 |
举例：
<form >
//表单元素
</form>
表单的属性
| 属性名 | 作用 | 备注 |
|---|---|---|
| action | 处理此表单信息的Web服务器的URL地址 | |
| method | 提交此表单信息到Web服务器的方式 | 可能的值有get和post，默认为get |
| autocomplete | 自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用 | HTML5 |
举例：
<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>
<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签的演示</title>
</head>
<body>
<!--
表单标签：<form>
属性：
action-提交的路径
method-提交的方式(get和post)
autocomplete-记录补全(on和off)
-->
<!--get方式的表单-->
<form action="#" method="get" autocomplete="off">
用户名：<input type="text" name="username"/>
<button type="submit">提交</button>
</form>
<!--post方式的表单-->
<form action="#" method="post" autocomplete="off">
用户名：<input type="text" name="username"/>
<button type="submit">提交</button>
</form>
</body>
</html>
GET与POST说明：
post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。
GET方式举例：
GET与POST对比：
| 地址栏可见 | 数据安全 | 数据大小 | |
|---|---|---|---|
| GET | 可见 | 不安全 | 有限制（取决于浏览器） |
| POST | 不可见 | 相对安全 | 无限制 |
5.2.2 表单元素入门
表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。
| 标签名 | 作用 | 备注 |
|---|---|---|
| **label ** | 表单元素的说明，配合表单元素使用 | for属性值为相关表单元素的id属性值 |
| input | 表单中输入控件，多种输入类型，用于接受来自用户数据 | type属性值决定输入类型 |
| button | 页面中可点击的按钮，可以配合表单进行提交 | type属性值决定按钮类型 |
1）简单的文本输入框
- label标签：表单的说明。
- for属性值：匹配input标签的id属性值
- input标签：输入控件。
- type属性：表示输入类型，text值为普通文本框
- id属性：表示标签唯一标识
- name属性：表示标签名称
- value属性：表示标签数据值
代码实现：
<form action="" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="tom">
</form>
效果如图：
2）提交用户名的表单
- 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>
5.2.3 关于属性值
1）NAME和VALUE属性
| 属性名 | 作用 |
|---|---|
| name | <input> |
的名字，在提交整个表单数据时，可以用于区分属于不同<input> | |
| 的值 | |
| value | 这个<input> |
| 元素当前的值，允许用户通过页面输入 |
使用方式：
以name属性值作为键，value属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用&进行分隔。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项标签</title>
</head>
<body>
<!--
表单项标签：<label> 表单元素说明
属性：for属性，属性值必须和表单项标签id属性值一致
表单项标签：<input> 多种类型数据
属性：
type-数据类型
id-唯一标识
name-提交服务器的标识
value-默认的数据值
placeholder-默认的提示信息
required-是否必须
按钮标签：<button>
属性：
type-按钮的类型(submit提交、reset重置、button普通按钮)
-->
<form action="#" method="get" autocomplete="off">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" value="" placeholder=" 请在此处输入用户名" required/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
2）TYPE属性
- input标签的type属性
【建议】
这是今天的重点讲解内容，type的值决定输入的类型
- 基本的文本属性
| 属性值 | 作用 | 备注 |
|---|---|---|
| text | 单行文本字段 | |
| password | 单行文本字段，值被遮盖 | |
| 用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验 | HTML5 |
举例：
<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: </label>
<input type="email" id="email" name="email"><br/>
<button type="submit"> login</button>
</form>
- 单选多选属性
举例：
| 属性值 | 作用 |
|---|---|
| radio | 单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。 |
| checkbox | 复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器 |
<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>
- 按钮属性
| 属性值 | 作用 |
|---|---|
| button | 无行为按钮，用于结合JavaScript实现自定义动态效果 |
| submit | 提交按钮，用于提交表单数据。 |
| reset | 重置按钮，用于将表单中内容恢复为默认值。 |
| image | 图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。 |
- HTML5新增的type值
| 属性值 | 作用 | 备注 |
|---|---|---|
| date | HTML5 用于输入日期的控件 | 年，月，日，不包括时间 |
| time | HTML5 用于输入时间的控件 | 不含时区 |
| datetime-local | HTML5 用于输入日期时间的控件 | 不包含时区 |
| number | HTML5 用于输入浮点数的控件 | |
| tel | HTML5 用于输入电话号码的控件 | |
| range | HTML5 用于输入不精确值控件 | max-规定最大值min-规定最小值 step-规定步进值 value-规定默认值 |
| search | HTML5 用于输入搜索字符串的单行文本字段 | 可以点击x清除内容 |
| tel | HTML5 用于输入电话号码的控件 | |
| url | HTML5 用于编辑URL的字段 | 可以校验URL地址格式 |
| 属性值 | 作用 | 备注 |
|---|---|---|
| file | 此控件可以让用户选择文件，用于文件上传。 | 使用 accept 属性可以定义控件可以选择的文件类型。 |
| hidden | 此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值 |
- button标签的type属性
| 属性值 | 作用 | 备注 |
|---|---|---|
| submit | 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。 | 同 <input type="submit"/> |
| reset | 此按钮重置所有组件为初始值。 | 同<input type="reset"/> |
| button | 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。 | 同<input type="button"/> |
3）HTML5新增属性
| 属性名 | 作用 | 备注 |
|---|---|---|
| placeholder | 提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。 | 仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。 |
| required | 这个属性指 定用户在提交表单之前必须为该元素填充值 | 1. 布尔属性，可省略属性值表示true 2. 当type属性是hidden,image或者button类型时不可使用 |
| autocomplete | 自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。 | 1. 开启为on，关闭为off2. 可以设置指定的字段为off，关闭自动补全 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>type属性演示</title>
</head>
<body>
<!--
type属性
<input type="text"/> 普通文本输入框
<input type="password"/> 密码输入框
<input type="email"/> 邮箱输入框
<input type="radio"/> 单选框。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中
<input type="checkbox"/> 多选框。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中
<input type="date"/> 日期框
<input type="time"/> 时间框
<input type="datetime-local"/> 本地日期时间框
<input type="number"/> 数字框
<input type="range"/> 滚动条数值框 min-最小值 max-最大值 step-步进值
<input type="search"/> 可清除文本框
<input type="tel"/> 电话框
<input type="url"/> 网址框
<input type="file"/> 文件上传框
<input type="hidden"/> 隐藏域 value属性设置实际提交的值
-->
<form action="#" method="get" autocomplete="off">
<label for="username">用户名：</label>
<input type="text" id="username" name="username"/> <br/>
<label for="password">密码：</label>
<input type="password" id="password" name="password"/> <br/>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"/> <br/>
<label for="gender">性别：</label>
<input type="radio" id="gender" name="gender" value="men"/>男
<input type="radio" name="gender" value="women"/>女
<input type="radio" name="gender" value="other"/>其他<br/>
<label for="hobby">爱好：</label>
<input type="checkbox" id="hobby" name="hobby" value="music" checked/>音乐
<input type="checkbox" name="hobby" value="game"/>游戏 <br/>
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday"/> <br/>
<label for="time">当前时间：</label>
<input type="time" id="time" name="time"/> <br/>
<label for="insert">注册时间：</label>
<input type="datetime-local" id="insert" name="insert"/> <br/>
<label for="age">年龄：</label>
<input type="number" id="age" name="age"/> <br/>
<label for="range">心情值(1~10)：</label>
<input type="range" id="range" name="ran ge" min="1" max="10" step="1"/> <br/>
<label for="search">可全部清除文本：</label>
<input type="search" id="search" name="search"/> <br/>
<label for="tel">电话：</label>
<input type="tel" id="tel" name="tel"/> <br/>
<label for="url">个人网站：</label>
<input type="url" id="url" name="url"/> <br/>
<label for="file">文件上传：</label>
<input type="file" id="file" name="file"/> <br/>
<label for="hidden">隐藏信息：</label>
<input type="hidden" id="hidden" name="hidden" value="itheima"/> <br/>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
5.2.4 更多表单元素
| 标签名 | 作用 | 备注 |
|---|---|---|
| **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服务器
-->
textarea举例：
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他常用表单项标签演示</title>
</head>
<body>
<!--
下拉列表标签：<select>
列表项标签：<option>
列表项分组标签：<optgroup> 属性：label设置分组名称
文本域标签：<textarea>
属性：
rows-行数
cols-列数
-->
<form action="#" method="get" autocomplete="off">
所在城市：<select name="city">
<option>---请选择城市---</option>
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
</optgroup>
<optgroup label="省会市">
<option>杭州</option>
<option>武汉</option>
</optgroup>
</select>
<br/>
个人介绍：<textarea name="desc" rows="5" cols="20"></textarea>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
5.3 使用标签
- 简单布局，使用div标签
- 基本文本标签
- 表单标签
- 图片标签
5.4 实现步骤
- 设置背景图。
- 基本上下两部分布局。
- 实现上部（图片）
- 实现下部（表单）
- 实现页面跳转，从案例2跳转到案例3。
<!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"/>男
<input type="radio" name="gender" value="women"/>女
</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>
JavaEE-v4.0-Css+Nginx
1 CSS入门
1.1 初识CSS
1.1.1 概述
在学习了基本HTML标签和样式后，接下来学习前端开发的第二门技术。
我们发现，虽然标签的属性可以调整一些样式，但是效果不够理想，而我们更愿意把样式编写在<style> 标签中，让页面设计更美观更丰富，实际上，这是通过CSS实现的。那么什么是CSS呢？
如果说，HTML是网页的"素颜"，那么CSS就是页面的"美妆师"，它就是让网页的外观更漂亮！
CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。
所谓层叠 : 是指样式表允许以多种方式规定样式信息。可以规定在单个元素中，可以在页面头元素中，也可以在另一个CSS文件中，规定的方式会有次序的差别（讲解引入时说明）。
所谓样式：是指丰富的样式外观。拿边框距离来说，允许任何设置边框，允许设置边框与框内元素的距离，允许设置边框与边框的距离等等。
- CSS发展简史【了解】
- CSS1：1994 年，Hkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。1996 年 12 月，W3C 推出了 CSS 规范的第一版本。
- CSS2：1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。
- CSS3：2005 年 12 月，W3C 开始 CSS3 标准的制定，并遵循模块化开发，所以没有固定的发布时间，而是一段时间发布一些特性模块。
图片了解资料：
1.1.2 CSS的组成
CSS是一门基于规则的语言 — 你能定义用于你的网页中特定元素的一组样式规则。这里面提到了两个概念，一是特定元素，二是样式规则。对应CSS的语法，也就是选择器（selects）和声明（eclarations）。
- 选择器：指定将要添加样式的 HTML元素的方式。可以使用标签名，class值，id值等多种方式。
- 声明：形式为属性(property):值(value)，用于设置特定元素的属性信息。
- 属性：指示文体特征，例如
font-size，width，background-color。 - 值：每个指定的属性都有一个值，该值指示您如何更改这些样式。
- 属性：指示文体特征，例如
格式：
选择器 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
举例：
h1 {
color: red;
font-size: 5px;
}
格式简介：语法由一个 选择器(selector)起头。 它 选择(selects) 了我们将要用来添加样式的 HTML元素。 在这个例子中我们为一级标题添加样式。
接着输入一对大括号
{ }。 在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明(eclarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。冒号之前是属性，冒号之后是值。不同的CSS 属性(properties) 对应不同的合法值。在这个例子中，我们指定了
color属性，它可以接受许多 颜色值(lor values)。 还有font-size属性， 它可以接收许多 size units 值。
1.2 入门案例
- 在初始页面的
<body>标签中，加入一对<h1>标签。<h1>标签规定的固定的标题样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>今天开始变漂亮!!!</h1>
</body>
</html>
- 在
<head>标签中加入一对<style>标签中，表示准备应用样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
<!-- 加入style标签 -->
<style>
</style>
</head>
<body>
<h1 color="red">今天开始变漂亮!!!</h1>
</body>
</html>
- 编写样式
<style>
h1{
color: red; /* 设置颜色为红色*/
font-size:100px; /* 设置字体大小为100像素*/
}
</style>
- 打开浏览器查看，文字的颜色和大小都发生改变，应用了新的样式，效果如图：
1.3 Chrome开发者工具
-
打开开发者工具
打开浏览器，点击键盘F12键，显示开发者工具窗口。
-
查看开发者工具
演示选择元素
演示修改样式
1.4 总结
CSS是对HTML的补充，指定页面如何展示的语言。
CSS的主要部分有：
- 选择器：用来选择页面元素的方式。
- 声明：用来设置样式，格式
属性名：值。
在学习CSS时，要抓住两个方面：
- 掌握多种选择器，能够灵活的选择页面元素。
- 掌握样式的声明，能够使用多种属性来设置多样的效果。
2 基本语法
2.1 引入方式
2.1.1 内联样式
了解,几乎不用,维护艰难
内联样式是CSS声明在元素的style属性中，仅影响一个元素：
- 格式：
<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>
- 举例：
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
Hello World!
</h1>
- 效果如下：
虽然格式简单，但是样式作用无法复用到多个元素上，不利于维护，此格式了解即可。
2.1.2 内部样式表
内部样式表是将CSS样式放在[style](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style)标签中，通常style标签编写在HTML 的[head](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/head)标签内部。
- 格式：
<head>
<style>
选择器 {
属性名: 属性值;
属性名: 属性值;
}
</style>
</head>
- 举例：
<head>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
</style>
</head>
-
效果如下：
内部样式只能作用在当前页面上，如果是多个页面，就无法复用了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入方式2</title>
<!--内部样式-->
<style>
div{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
2.1.3 外部样式表
外部样式表是CSS附加到文档中的最常见和最有用的方法，因为您可以将CSS文件链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。
外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link> 元素引用它，通常link标签编写在HTML 的[head](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/head)标签内部。：
- 格式：
<link rel="stylesheet" href="css文件">
rel：表示“关系 (relationship) ”，属性值指链接方式与包含它的文档之间的关系，引入css文件固定值为stylesheet。
href：属性需要引用某文件系统中的一个文件。
- 举例：
- 创建styles.css文件
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
- link标签引入文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
- 效果如下：
当然也可以把CSS文件放在其他地方，并调整指定的路径以匹配，例如：
<link rel="stylesheet" href="css/styles.css">
为了保证CSS文件的管理，建议在项目中创建一个css文件夹，专门保存样式文件。
注意：引入样式的优先级问题。
规则层叠于一个样式表中，其中数字 4 拥有最高的优先权：
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 标签内部）
- 内联样式（在 HTML 元素内部）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入方式3</title>
<!--外部样式-->
<link rel="stylesheet" href="css/01.css"/>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
div{
color: red;
font-size: 20px;
}
2.2 关于注释
与HTML一样，鼓励您在CSS中进行注释，以帮助您理解几个月后返回的代码工作方式，并帮助其他使用该代码的人对其进行理解。
CSS中的注释以/*和开头*/。在下面的代码块中，我已使用注释标记了不同的不同代码段的开始。
格式：
/* 设置h1的样式 */
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
2.3 关于选择器
选择器作为CSS的重要部分，这里强调基本选择器的使用和其他选择器的基本格式。
讲到CSS就不得不说到选择器，为了样式化某些元素，我们会通过选择器来选中HTML文档中的这些元素。如果你的样式没有生效，那很可能是你的选择器没有像你想象的那样选中你想要的元素。
每个CSS规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。
接下来我们将要详细的学习各种选择器的使用。
选择器的分类：
| 分类 | 名称 | 符号 | 作用 | 示例 |
|---|---|---|---|---|
| 基本选择器 | 元素选择器 | 标签名 | 基于标签名匹配元素 | div{ } |
| 类选择器 | . | 基于class属性值匹配元素 | .center{ } | |
| ID选择器 | # | 基于id属性值匹配元素 | #username{ } | |
| 属性选择器 | 属性选择器 | [] | 基于某属性匹配元素 | [type]{ } |
| 伪类选择器 | 伪类选择器 | : | 用于向某些选择器添加特殊的效果 | a : hover{ } |
| 组合选择器 | 后代选择器 | 空格 | 使用空格符号结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素 | .top li{ } |
| 同级选择器 | ~ | 使用 ~结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素 | .l1 ~ li{ } | |
| 相邻选择器 | + | 使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素 | .l1 + li{ } |
2.2.1 基本选择器
1）元素选择器
页面元素：
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
选择器：
选择所有li标签,背景变成蓝色
li{
background-color: aqua;
}
2）类选择器
页面元素：
<div>
<ul>
<li class="ulist l1">List item 1</li>
<li class="l2">List item 2</li>
<li class="l3">List item 3</li>
</ul>
<ol>
<!--class 为两个值-->
<li class="olist l1">List item 1</li>
<li class="olist l2">List item 2</li>
<li class="olist l3">List item 3</li>
</ol>
</div>
选择器：
选择class属性值为l2的,背景变成蓝色
.l2{
background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{
color: wheat;
}
3）ID选择器
页面元素：
<div>
<ul>
<li class="l1" id="one">List item 1</li>
<li class="l2" id="two">List item 2</li>
<li class="l3" id="three">List item 3</li>
</ul>
<ol>
<li class="l1" id="four">List item 1</li>
<li class="l2" id="five">List item 2</li>
<li class="l3" id="six">List item 3</li>
</ol>
</div>
选择器：
#tow{
background-color: aqua;
}
效果如图：
4）通用选择器
页面元素：
<div>
<ul>
<li class="l1" id="one">List item 1</li>
<li class="l2" id="two">List item 2</li>
<li class="l3" id="three">List item 3</li>
</ul>
<ol>
<li class="l1" id="four">List item 1</li>
<li class="l2" id="five">List item 2</li>
<li class="l3" id="six">List item 3</li>
</ol>
</div>
选择器：
所有标签
*{
background-color: aqua;
}
2.2.2 属性选择器
页面元素：
<ul class="l1">
<li >List item 1</li>
<li >List item 2</li>
<li >List item 3</li>
</ul>
<ul class="l2">
<li id="four">List item 1</li>
<li id="five">List item 2</li>
<li id="six">List item 3</li>
</ul>
<p class="">
p item
</p>
选择器和效果图，示例1
[属性名]{ }
选择器和效果图，示例2
标签名[属性名]{ }
选择器和效果图，示例3
标签名[属性名='属性值']{ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
[type]{
color: red;
}
[type=password]{
color: blue;
}
</style>
</head>
<body>
用户名：<input type="text"/> <br/>
密码：<input type="password"/> <br/>
邮箱：<input type="email"/> <br/>
</body>
</html>
2.2.3 伪类选择器
伪类选择器，用于选择处于特定状态的元素，例如，一些元素中的第一个元素，或者某个元素被鼠标指针悬停。
格式：
标签名:伪类名{ }
常用伪类:
- 锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
代码示例：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标悬停链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意：
伪类顺序 link ，visited，hover，active，否则有可能失效。
HTML 代码 ：
<div>
<a class="red" href="http://www.itheima.com">黑马</a> <br/>
<a class="blue" href="http://www.itheima.com">传智</a>
</div>
CSS 代码 ：
/* 选择a标签,class值为red ,设置访问后为红色链接*/
a.red:visited {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
a{
text-decoration: none;
}
/*未访问的状态*/
a:link{
color: black;
}
/*已访问的状态*/
a:visited{
color: blue;
}
/*鼠标悬浮的状态*/
a:hover{
color: red;
}
/*已选中的状态*/
a:active{
color: yellow;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
2.2.4 组合选择器
页面元素：
<div>
<ul class="l1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<ul class="l2">
<li id="four">List item 1</li>
<li id="five">List item 2</li>
<li id="six">List item 3</li>
</ul>
</ul>
</div>
1）后代选择器
选择器：
.l1 li{
background-color: aqua;
}
2）子级选择器
选择器：
.l1 > li{
background-color: aqua;
}
3）同级选择器
选择器：
.l1 ~ li{
background-color: aqua;
}
4）相邻选择器
选择器：
.l1 + li{
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
/*后代选择器*/
.center li{
color: red;
}
/*分组选择器*/
span,p{
color: blue;
}
</style>
</head>
<body>
<div class="top">
<ol>
<li>aa</li>
<li>bb</li>
</ol>
</div>
<div class="center">
<ol>
<li>cc</li>
<li>dd</li>
</ol>
</div>
<span>span</span> <br/>
<p>段落</p>
</body>
</html>
2.4 总结
- CSS的引入方式有三种，建议使用外部样式表。
- 注释类似于java多行注释。
- 选择器是CSS的重要部分：
- 基本选择器：可以通过元素，类，id来选择元素。
- 属性选择器：可以通过属性值选择元素
- 伪类选择器：可以指定元素的某种状态，比如链接
- 组合选择器：可以组合基本选择器，更加精细的划分如何选择
3 CSS案例-头条页面
3.1 案例效果
3.2 案例分析
3.2.1 语义化标签
了解讲解：
简单介绍作用即可，后续在案例中使用。
为了更好的组织文档，HTML5规范中设计了几个语义元素，可以将特殊含义传达给浏览器。
| 标签 | 名称 | 作用 | 备注 |
|---|---|---|---|
| header | 标头元素 | 表示内容的介绍 | 块元素，文档中可以定义多个 |
| nav | 导航元素 | 表示导航链接 | 常见于网站的菜单，目录和索引等，可以嵌套在header中 |
| article | 文章元素 | 表示独立内容区域 | 标签定义的内容本身必须是有意义且必须独立于文档的其他部分 |
| footer | 页脚元素 | 表示页面的底部 | 块元素，文档中可以定义多个 |
标签结构示例如图：
3.2.2 常见样式属性
其他属性：
| 分类 | 属性名 | 作用 |
|---|---|---|
| 边框 | border | 边框 |
| border-top | 底部边框 | |
| border-radius | 设置边框圆角 | |
| 文本 | color | 颜色 |
| font-family | 字体样式 | |
| font-size | 字体大小 | |
| text-decoration | 下划线 | |
| text-align | 文本水平对齐 | |
| line-height | 行高，行间距 | |
| vertical-align | 文本垂直对齐 |
1）边框样式
在这里插入图片描述
在之前学习了简写属性来设置边框样式，接下来我们将研究如何创造性地使用边框。
<!--回顾简写样式 -->
div {
border: 1px solid black;
}
- 单个边框
设置一个方向边框的宽度、样式和颜色，例如：
.box {
border-top: 1px solid black;
border-left: 5px double yellow;
border-bottom: 5px dotted green;
border-right: 5px dashed red;
}
border-top: 上边框
border-left: 左边框
border-bottom: 底边框
border-right: 右边框
- 无边框
当border值为none时，可以让边框不显示，用于特殊效果。
div {
width: 200px;
height: 200px;
border: none;
}
- 圆角
通过使用[border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)属性设置盒子的圆角，虽然能分别设置四个角，但是通常我们使用一个值，来设置整体效果，例如
div {
width: 200px;
height: 200px;
border: 10px solid blue;
border-radius: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框样式演示</title>
<style>
#d1{
/*设置所有边框*/
/*border: 5px solid black;*/
/*设置上边框*/
border-top: 5px solid black;
/*设置左边框*/
border-left: 5px double red;
/*设置右边框*/
border-right: 5px dotted blue;
/*设置下边框*/
border-bottom: 5px dashed pink;
width: 150px;
height: 150px;
}
#d2{
border: 5px solid red;
/*设置边框的弧度*/
border-radius: 25px;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="d1"></div>
<br/>
<div id="d2"></div>
</body>
</html>
2）文本样式
- 颜色
该[color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)属性设置所选元素的前景色的颜色
颜色的值，可以由多种方式赋值，常见的有颜色单词，RGB十六进制，例如：
p {
color: red;
}
-
字体种类
使用[font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)属性-这允许您指定一种字体 -
字体大小
字体大小使用[font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)属性设置，可以采用常见单位：
px：像素，文本高度像素绝对数值。
em：1em等于我们要设置样式的当前元素的父元素上设置的字体大小，这是相对数值，能看懂即可。 -
文本修饰
[text-decoration](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration):设置字体上的文本装饰线。
-
文本对齐
该[text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)属性用于控制文本如何在其包含的内容框中对齐。可用值如下，它们的工作方式与常规字处理器应用程序中的工作方式几乎相同：left：左对齐文本。right：右对齐文本。center：使文本居中。justify：使文本散布，改变单词之间的间距，以使文本的所有行都具有相同的宽度。
-
行高
该[line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)属性设置每行文本的高度，也就是行距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式演示</title>
<style>
div{
/*文本颜色*/
color: /*red*/ #ff0000;
/*字体*/
font-family: /*宋体*/ 微软雅黑;
/*字体大小*/
font-size: 25px;
/*下划线 none：无 underline：下划线 overline：上划线 line-through：删除线*/
text-decoration: none;
/*水平对齐方式 left：居左 center：居中 right：居右*/
text-align: center;
/*行间距*/
line-height: 60px;
}
span{
/*文字垂直对齐 top：居上 bottom：居下 middle：居中 百分比*/
vertical-align: 50%;
}
</style>
</head>
<body>
<div>
我是文字
</div>
<div>
我是文字
</div>
<img src="../img/wx.png" width="38px" height="38px"/>
<span>微信</span>
</body>
</html>
3.3 使用技术
- 使用语义化标签，header，footer，article，nav。
- 使用CSS常见属性
3.4 实现步骤
- 创建初始页面，拷贝图片素材。
- 编写css文件，引入css样式，实现整体布局。
- header部分
- 实现顶部条。
- 实现导航条。
- 实现中部
- 实现左侧分享区域。
- 实现中间正文区域。
- 实现右侧广告区域。
- 实现底部页脚。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头条页面</title>
<link rel="stylesheet" href="../css/news.css"/>
</head>
<body>
<!--顶部登录注册更多-->
<div class="top">
<a href="../案例二/04案例二：登录页面.html" target="_self">登录 </a>
<a href="#">注册 </a>
<a href="#">更多 </a>
</div>
<!--导航条-->
<div class="nav">
<img src="../img/logo.png"/>
<a href="#">首页 </a>/
<a href="#">科技 </a>/
<font color="gray">正文</font>
<hr/>
</div>
<!--左侧分享-->
<div class="left">
<a href="#"> <img src="../img/cc.png"/> <span> 评论</span> </a>
<hr/>
<a href="#"> <img src="../img/repost.png"/> <span> 转发</span> </a> <br/>
<a href="#"> <img src="../img/weibo.png"/> <span> 微博</span> </a> <br/>
<a href="#"> <img src="../img/qq.png"/> <span> 空间</span> </a> <br/>
<a href="#"> <img src="../img/wx.png"/> <span> 微信</span> </a> <br/>
</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>
<a href="#">帮助中心</a>
<a href="#">开放平台</a>
<a href="#">诚聘英才</a>
<a href="#">联系我们</a>
<a href="#">法律声明</a>
<a href="#">隐私政策</a>
<a href="#">知识产权</a>
<a href="#">廉政举报</a>
</div>
</body>
</html>
/*顶部样式*/
.top{
background: black; /*背景色*/
line-height: 40px; /*行高*/
text-align: right; /*文字水平右对齐*/
font-size: 20px; /*字体大小*/
}
/*顶部超链接样式*/
.top a{
color: white; /*超链接颜色*/
}
/*导航条样式*/
.nav{
line-height: 40px; /*行高*/
}
/*左侧分享样式*/
.left{
width: 20%; /*宽度*/
text-align: center; /*文字水平居中对齐*/
float: left; /*浮动*/
}
/*左侧分享图片样式*/
.left img{
width: 38px;
height: 38px;
}
/*左侧文字*/
.left span{
vertical-align: 50%; /*文字垂直居中对齐*/
}
/*中间正文样式*/
.center{
width: 60%; /*宽度*/
float: left; /*浮动*/
}
/*右侧广告图片样式*/
.right{
width: 20%; /*宽度*/
float: left; /*浮动*/
}
/*底部页脚超链接样式*/
.footer{
clear: both; /*清除浮动*/
background: blue; /*背景色*/
text-align: center; /*文字水平居中对齐*/
line-height: 25px;
}
/*底部页脚超链接文字颜色*/
.footer a{
color: white;
}
/*超链接样式*/
a{
text-decoration: none; /*去除下划线*/
color: black; /*超链接颜色*/
}
/*超链接悬浮样式*/
a:hover{
color: red; /*悬浮颜色*/
}
4 CSS案例-登录页面
4.1 案例效果
4.2 案例分析
4.2.1 Table标签
1）什么是表格
表格是由行和列组成的结构化数据集(表格数据)。
2）表格标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| table | 表示表格，是数据单元的行和列的两维表 | 容器，默认无样式 |
| tr | table row，表示表中单元的行 | |
| td | table data，表示表中一个单元格 | |
| th | table header，表格单元格的表头，通常字体样式加粗居中 |
通过表格标签，我们可以创建出一张表格，代码如下
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
3）跨行跨列========
让我们使用 colspan 和 rowspan 来改进现有的表格。
<table>
<tr>
<th rowspan="2">GROUP</th>
<th colspan="2"> name</th>
</tr>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td rowspan="2">G1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
<tr>
<td rowspan="3">G2</td>
<td>Aohn</td>
<td>Doa</td>
</tr>
<tr>
<td>Bane</td>
<td>Dob</td>
</tr>
<tr>
<td>Cane</td>
<td>Doc</td>
</tr>
</table>
4）表格结构【了解】
了解讲解：
表格布局标签，作为了解内容，案例中的使用部分，可以省略
| 标签名 | 作用 | 备注 |
|---|---|---|
| thead | 定义表格的列头的行 | 一个表格中仅有一个 |
| tbody | 定义表格的主体 | 用来封装一组表行（tr元素） |
| tfoot | 定义表格的各列汇总行 | 一个表格中仅有一个 |
示例：
<table>
<thead>
<tr>
<th>项目</th>
<th >金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>手机</td>
<td>3,000</td>
</tr>
<tr>
<td>电脑</td>
<td>18,000</td>
</tr>
</tbody>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签演示</title>
</head>
<body>
<!--
表格标签：<table>
属性：
width-宽度
height-高度
border-边框
align-对齐方式
行标签：<tr>
属性：
align-对齐方式
单元格标签：<td>
属性：
rowspan-合并行
colspan-和并列
表头标签：<th> 自带居中和加粗效果
表头语义标签：<thead>
表体语义标签：<tbody>
表脚语义标签：<tfoot>
-->
<table width="400px" border="1px" align="center">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>数学</th>
<th>语文</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>张三</td>
<td rowspan="2">男</td>
<td>23</td>
<td colspan="2">90</td>
<!--<td>90</td>-->
</tr>
<tr align="center">
<td>李四</td>
<!--<td>男</td>-->
<td>24</td>
<td>95</td>
<td>98</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">总分数：</td>
<!--<td></td>
<td></td>
<td></td>-->
<td>373</td>
</tr>
</tfoot>
</table>
</body>
</html>
4.2.2 常见样式属性
1）背景
CSS [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)属性用来设置背景相关的样式。
- 背景色
该[background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)属性定义CSS中任何元素的背景色。
.box {
background-color: #567895;
}
- 背景图
该[background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)属性允许在元素的背景中显示图像。使用url函数指定图片路径。
控制背景重复
该[background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)属性用于控制图像的平铺行为。可用值为：
body {
background-image: url(bg.jpg);
}
-
no-repeat-停止完全重复背景。 -
repeat-x—水平重复。repeat-y—反复重复。repeat—默认值；双向重复。
body {
background-image: url(star.png);
background-repeat: no-repeat;
}
2）轮廓
轮廓outline：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
<style>
input {
outline: dotted;
}
</style>
<body>
<input type="text">
</body>
设置为none时，可以取消默认轮廓样式，用于特殊效果。
input {
outline: none;
}
3）显示
display属性，用来设置一个元素应如何显示。可以设置块级和行内元素的切换，也可以设置元素隐藏。
- 元素显示
/* 把列表项显示为内联元素，无长宽*/
li {display:inline;}
/* 把span元素作为块元素，有换行*/
span {display:block;}
/* 行内块元素，结合的行内和块级的优点，既可以行内显示，又可以设置长宽，*/
li {display:inline-block;}
代码演示：
li {
display: inline-block;
width: 200px;
}
- 元素隐藏
当设置为none时，可以隐藏元素。
li {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式演示</title>
<style>
/*背景图片重复 no-repeat：不重复 repeat-x：水平重复 repeat-y：垂直重复 repeat：水平+垂直重复*/
body{
background: url("../img/bg.jpg");
background-repeat: repeat;
}
/*轮廓控制 double：双实线 dotted：圆点 dashed：虚线 none：无*/
input{
outline: none;
}
/*元素显示 inline：内联元素(无换行、无长宽) block：块级元素(有换行) inline-block：内联元素(有长宽) none：隐藏元素*/
div{
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
用户名：<input type="text"/> <br/>
<div>春季</div>
<div>夏季</div>
<div>秋季</div>
<div>冬季</div>
</body>
</html>
4.2.3 盒子模型
万物皆"盒子"。盒子模型是通过设置元素框与元素内容和外部元素的边距，而进行布局的方式。
- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。
基本布局
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
<style>
div{
border: 2px solid blue;
}
.big{
width: 200px;
height: 200px;
}
.small{
width: 100px;
height: 100px;
margin: 30px;/* 外边距 */
}
</style>
<div class="big">
<div class="small">
</div>
</div>
增加内边距会增加元素框的总尺寸。
<style>
div{
border: 2px solid blue;
}
.big{
width: 200px;
height: 200px;
padding: 30px;/*内边距 */
}
.small{
width: 100px;
height: 100px;
}
</style>
<div class="big">
<div class="small">
</div>
</div>
外边距
单独设置边框的外边距，设置上、右、下、左方向：
margin-top
margin-right
margin-bottom
margin-left
值含义：
- 一个值时
/* 所有 4 个外边距都是 10px */
margin:10px;
- 两个值时
/* 上外边距和下外边距是 10px
右外边距和左外边距是 5px */
margin:10px 5px;
margin:10px auto;
auto 浏览器自动计算外边距，具有居中效果。
- 三个值时
/* 上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px*/
margin:10px 5px 15px;
- 四个值时
/*上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px*/
margin:10px 5px 15px 20px;
内边距
与外边距类似，单独设置边框的内边距，设置上、右、下、左方向：
padding-top
padding-right
padding-bottom
padding-left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型演示</title>
<style>
.wai{
border: 1px solid red;
width: 200px;
height: 200px;
/*设置内边距,会导致外框的变化*/
/*padding: 50px;*/
}
.nei{
border: 1px solid blue;
width: 100px;
height: 100px;
/*设置外边距*/
/*margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 50px;*/
/*margin: 50px;*/
/*上、右、下、左*/
/*margin: 70px 35px 30px 65px;*/
}
</style>
</head>
<body>
<div class="wai">
<div class="nei">
</div>
</div>
</body>
</html>
4.3 使用技术
- div盒子布局
- form标签和table标签
- input button
- thead， tbody ，tfoot，th，tr，td
- 设置背景，字体等css样式
4.4 实现步骤
- 设置背景
- 整体布局，上中底三部分
- 上部
- logo设置
- 中部
- 表单表格布局
- 加入表头
- 加入输入框
- 加入按钮
- 底部
- 底部布局
- 其他方式分割线
- 其他方式图片
- 底部文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="../css/login.css"/>
</head>
<body>
<!--顶部公司图标-->
<div>
<img src="../img/logo.png"/>
</div>
<!--中间表单-->
<div class="center">
<form action="#" method="get" autocomplete="off">
<table width="100%">
<thead>
<tr>
<th colspan="2">账 密 登 录<hr/></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label for="username">账号</label>
</td>
<td>
<input type="text" id="username" name="username" placeholder=" 请输入账号" required/>
</td>
</tr>
<tr>
<td>
<label for="password">密码</label>
</td>
<td>
<input type="password" id="password" name="password" placeholder=" 请输入密码" required/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="submit">确 定</button>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
<!--底部页脚-->
<div class="footer">
<br/><br/>
登录/注册即表示您同意
<a href="#" target="_blank">用户协议</a>
和
<a href="#" target="_blank">隐私条款</a>
<a href="#" target="_blank">忘记密码?</a>
</div>
</body>
</html>
/*背景图片*/
body{
background: url("../img/bg.png");
}
/*中间表单样式*/
.center{
background: white; /*背景色*/
width: 40%; /*宽度*/
margin: auto; /*水平居中外边距*/
margin-top: 100px; /*上外边距*/
border-radius: 15px; /*边框弧度*/
text-align: center; /*文本水平居中*/
}
/*表头样式*/
thead th{
font-size: 30px; /*字体大小*/
color: orangered; /*字体颜色*/
}
/*表体提示信息样式*/
tbody label{
font-size: 20px; /*字体大小*/
}
/*表体输入框样式*/
tbody input{
border: 1px solid gray; /*边框*/
border-radius: 5px; /*边框弧度*/
width: 90%; /*输入框的宽度*/
height: 40px; /*输入框的高度*/
outline: none; /*取消轮廓的样式*/
}
/*表底确定按钮样式*/
tfoot button{
border: 1px solid crimson; /*边框*/
border-radius: 5px; /*边框弧度*/
width: 95%; /*宽度*/
height: 40px; /*高度*/
background: crimson; /*背景色*/
color: white; /*文字的颜色*/
font-size: 20px; /*字体大小*/
}
/*表行高度*/
tr{
line-height: 60px; /*行高*/
}
/*底部页脚样式*/
.footer{
width: 35%; /*宽度*/
margin: auto; /*水平居中外边距*/
font-size: 15px; /*字体大小*/
color: gray; /*字体颜色*/
}
/*超链接样式*/
a{
text-decoration: none; /*去除超链接的下划线*/
color: blue; /*超链接颜色*/
}
5 HTML案例-网站发布
将网站部署到服务器，浏览器通过URL地址访问页面
5.1 案例效果
在地址栏输入URL地址，访问服务器上的页面。
5.2 案例分析
5.2.1 Nginx服务器概述
Nginx是一种服务器软件，其最主要，最基本的功能是可以与服务器硬件(电脑)结合，让程序员可以将程序发布在Nginx服务器上，让成千上万的用户可以浏览。
除此之外，Nginx还是一种高性能的HTTP和反向代理服务器，同时也是一个代理邮件服务器。也就是说，我们在Nginx上可以：
- 可以发布网站(静态, html,css,js)
- 可以实现负载均衡,
- 代理服务器
- 可以作为邮件服务器实现收发邮件等功能
本课程我们只讨论Nginx发布网站的功能，其它的功能后续课程会深入学习.
5.2.2 在Linux上使用Nginx
1）下载Nginx
进入http://nginx.org/网站，下载nginx-1.17.5.tar.gz文件
2）上传到虚拟机
使用客户端将刚下载好的nginx-1.17.5.tar.gz文件上传到home目录下。
使用命令查看
3）准备依赖环境
#安装Nginx依赖环境，‐y表示所有提示默认选择y
yum -y install pcre pcre-devel
yum ‐y install zlib zlib‐devel
yum ‐y install openssl openssl‐devel
4）解压和编译安装
# 进入home目录,解压
tar -zxvf nginx-1.17.5.tar.gz -C /home
# 进入 nginx目录
cd nginx-1.17.5
# 编译并安装【已经有gcc编译环境】
./configure
make
make install
# 安装成功之后,就会在/usr/local下多出了一个nginx目录.
5）启动服务器
#进入nginx的sbin目录
cd /usr/local/nginx/sbin
#在sbin目录下启动
./nginx
#在sbin目录下停止
./nginx ‐s stop
#在sbin目录下重写加载
./nginx ‐s reload
#开放linux的对外访问的端口80，在默认情况下，Linux不会开放80端口号
#需要编辑iptables文件,参考 4.5 操作
#查看是否有nginx的线程是否存在
ps ‐ef | grep nginx
6）浏览器访问
浏览器输入虚拟机ip地址，默认80端口
5.3 实现步骤
- 发布项目
- 配置Nginx服务器
- 浏览器访问
5.4 操作实现
5.4.1 发布项目
在/home目录下，创建toutiao目录
# 进入home目录
cd /home
# 创建目录
mkdir toutiao
上传项目文件到toutiao目录
项目文件:
220)
toutiao目录:
5.4.2 配置 nginx.conf 文件
5.4.3 启动服务器
#启动服务器 ， 加载配置文件
/usr/local/nginx/sbin/nginx -c /home/nginx-1.17.5/conf/nginx.conf
5.4.4 浏览器访问
-
浏览器输入虚拟机ip地址，默认80端口，访问首页 index.html
-
跳转登录页面
http://172.16.17.99/login/login.html
3014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
