1.HTML基础
1.1HTML简介
网页的构成
-
HTML:通常用来定义网页内容的含义和基本结构。
-
CSS:通常用来描述网页的表现与展示效果。
-
JavaScript:通常用来执行网页的功能与行为。
HTML(超文本标记语言)是一种用来告知浏览器如何组织页面的标记语言。
超文本:是指连接单个或者多个网站间的网页的链接。我们通过链接,就能访问互联网中的内容。
标记:是用来注明文本,图片等内容,以便于在浏览器中显示。
1.2HTML组成
HTML页面由一系列的元素(elements) 组成,而元素是使用标签创建的。
1.标签
一对标签( tags)可以设置一段文字样式,添加一张图片或者添加超链接等等。 例如:
<h1>今天是个好日子</h1>
<h1>:该标签表示标题,使用开始标签和结束标签包住索要表示的内容
2.属性
标签中可以拥有属性,属性可以为标签提供更多的信息。属性只能添加到标签中。
格式:属性名=属性值
<h1 align = 'center'>今天是个好日子</h1>
align属性:表示对齐方式
1.3第一个HTML操作
在项目下创建文件夹
文件夹中,创建HTML File文件
<!DOCTYPE html>:H5文档声明
<html lang="en">:根标签,一个HTML文件只能有一个根标签
<head>:头部标签
<meta charset="UTF-8">:设置字符集
<title>:标题,在浏览器标签上显示
<body> :身体标签,包含所有文档内容
运行结果
1.3总结
HTML是一种标记语言,使用元素和属性编写页面
元素:开始标签、结束标签与内容相结合,便是一个完整的元素。
开始标签:包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用
结束标签:与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。
内容:元素的内容,本例中就是所输入的文本本身。
属性:标签的附加信息。可以是标签内容具有特殊的样式
2.HTML基本语法
2.1注释
为了将一段HTML中的内容置为注释,你需要将其用特殊的记号<!--和-->包括起来
<p>我在注释外!</p>
<!-- <p>我在注释内!</p> -->
2.2标签
1.标签的分类
开始和结束标签:<h1></h1>(一级标题) <u></u>(下划线)
自闭和标签:<br/> (换行) <hr/>(水平分割线)
2.标签的嵌套
正确的格式:<h1><u>文本</u></h1>
错误的格式:<h1><u>文本</h1></u>
3.块级和行内元素
块级:独占一行 <p>,<hr>,<div>
行内:不会换行 <b>(加粗),<i>(斜体),<u>(下划线),<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.4属性
属性可以提供一些额外的信息,这些信息不会直接显示在内容中,但可以改变标签的样式或提供数据使用
定义格式:属性名=属性值
规范:同一个标签中,属性名不得重复。 属性和属性值对大小写不敏感。双引号是最常用的,不过使用单引号也没有问题。
属性名 | 作用 |
---|---|
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.5 特殊字符
原义字符 | 等价字符引用 |
---|---|
< | < |
> | > |
" | " |
' | ' |
& | & |
空格 | |
3.HTML案例
3.1新闻案例
3.1.1div样式布局
使用div将页面分割布局,在head标签中,通过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>
3.1.2文本标签
标签名 | 作用 |
---|---|
p | 表示文本的一个段落 |
h | 表示文档标题,<h1>–<h6> ,呈现了六个不同的级别的标题,<h1> 级别最高,而 <h6> 级别最低 |
hr | 表示段落级元素之间的主题转换,一般显示为水平线 |
li | 表示列表里的条目。 |
ul | 表示一个无序列表,可含多个元素,无编号显示。 |
ol | 表示一个有序列表,通常渲染为有带编号的列表 |
em | 表示文本着重,一般用斜体显示 |
strong | 表示文本重要,一般用粗体显示 |
font | 表示字体,可以设置样式(已过时) |
i | 表示斜体 |
b | 表示加粗文本 |
文本演示
<!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="disc">
<li>javaEE
<ul type="circle">
<li>javaEE</li>
<li>HTML</li>
</ul>
</li>
</ul>
<!--
有序列表:<ol>
属性:type-列表样式(1数字、A或a字母、I或i罗马字符) start-起始位置
列表项:<li>
-->
<ol type="1">
<li>chichichi</li>
<li>hehehe</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.1.3案例显示
<!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>
3.2头条页面
3.2.1div分块布局
区分div可以设置class的值,使用class属性值,可以帮助我们区分div,更加精确的设置标签的样式。
.class值{
属性名:属性值;
}
<标签名 class="class值">
提示: class是自定义的值
主体部分分为三列,而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%;
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>
3.2.2设置背景
/*背景色:*/
background-color: black;
/*背景图:*/
background-image: url("../img/bg.png");
3.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="1000px" height="1000px"/>
</body>
</html>
3.2.4超链接
标签名 | 作用 | 备注 |
---|---|---|
a | 表示超链接。 | href属性,表示超链接指向的URL地址。 |
属性名 | 作用 |
---|---|
target | 页面的打开方式(_self当前页 _blank新标签页)。 |
<!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.baidu.com" target="_blank">百度</a> <br/>
<a href="http://www.taobao.com" target="_self">淘宝</a> <br/>
<a href="http://www.weixin.com" target="_blank"><img src="../img/wx.png"/></a>
</body>
</html>
3.2.5头条实现
<!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;
}
/*鼠标悬浮的样式控制*/
a:hover{
color: red;
}
</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>
<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>
3.3注册页面
3.3.1表单标签
标签名 | 作用 | 备注 |
---|---|---|
form | 表示表单,是用来收集用户输入信息并向 Web 服务器提交的一个容器 |
<form >
//表单元素
</form>
表单的属性
属性名 | 作用 | 备注 |
---|---|---|
action | 处理此表单信息的Web服务器的URL地址 | 用于提交数据的路径 |
method | 提交此表单信息到Web服务器的方式 | 可能的值有get和post,默认为get |
autocomplete | 记录自动补全,指示表单元素是否能够拥有一个默认值,配合input标签使用 | HTML5 |
get:表单数据会显示在地址栏中,不安全,有长度限制
post:表单数据不会显示在地址栏中,安全,无长度限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--get方式的表单标签-->
<form action="#" method="get" onautocomplete="off">
用户名:<input type="text" name="username1"/>
<button type="submit">提交</button>
</form>
<!--post方式的表单标签-->
<form action="#" method="post" onautocomplete="off">
用户名:<input type="text" name="username2"/>
<button type="submit">提交</button>
</form>
</body>
</html>
3.3.2表单项元素
表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。
标签名 | 作用 | 备注 |
---|---|---|
label | 表单元素的说明,配合表单元素使用 | for属性值为相关表单元素的id属性值 |
input | 表单中输入控件,多种输入类型,用于接受来自用户数据 | type属性值决定输入类型 |
button | 页面中可点击的按钮,可以配合表单进行提交 | type属性值决定按钮类型 |
-
label标签:表单的说明。
-
for属性值:匹配input标签的id属性值
-
-
input标签:输入控件。
-
type属性:表示输入类型,text值为普通文本框
-
id属性:表示标签唯一标识
-
name属性:表示标签名称
-
value属性:表示标签数据
-
placeholder属性:默认的提示信息
-
required属性:是否必须
-
autocomplete属性:自动补全,记录字段
-
-
button标签:表示按钮。
-
type属性:表示按钮类型,submit提交、reset重置、button普通按钮
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项标签</title>
</head>
<body>
<form action="#" method="get" onautocomplete="off">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请在此处输入用户名" required/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
</body>
</html>
3.3.3type属性值
name:<input>的名字,在提交整个表单数据时,可以用于区分属于不同<input>
value:这个<input>元素当前的值,允许用户通过页面输入
text:普通文本框
password:密码框
email:邮箱框,用于验证
radio:单选框,其中必须有相同的name属性值,value属性设置实际提交值,checked属性代表默认选中
checkbox:复选框,其中必须有相同的name属性值,value属性设置实际提交值,checked属性代表默认选中
date:输入日期
time:输入时间
datetime-local:输入日期时间
number:输入浮点数
range:滚挡条
search:可清除文本框
tel:输入电话号码
url:输入URL字段
file:提交文件
hidden:用户页面不可见,但是值会被提交到服务器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>type属性值</title>
</head>
<body>
<form action="#" method="get" onautocomplete="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="man"/>男
<input type="radio" name="gender" value="women"/>女
<br/>
<label for="hoppy">爱好:</label>
<input type="checkbox" id="hoppy" name="hoppy" value="sing" checked/>唱
<input type="checkbox" name="hoppy" value="jump"/>跳
<input type="checkbox" name="hoppy" value="rap"/>rap
<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">滚动条:</label>
<input type="range" id="range" name="range" min="1" max="10"/>
<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="ggg"/>
<br/>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
select:下拉选项
optgroup:下拉列表分组(labal属性,设置分组名称)
option:表示下拉列表项
textarea:文本域标签(rows属性代表行数,cols属性代表列数)
<!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>
3.3.4案例实现
<!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>
注册详情
<hr/>
</div>
<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="tal">手机:</label>
<input type="tal" id="tal" name="tal" 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="moive"/>电影
<input type="checkbox" name="hobby" value="game"/>游戏
<input type="checkbox" name="hobby" value="swim"/>游泳
</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>
</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>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</div>
</body>
</html>
4.CSS学习
4.1介绍
CSS (层叠样式表——Cascading Style Sheets,缩写为 CSS),简单的说,它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如,调整内容的字体,颜色,大小等样式,设置边框的样式,调整模块的间距等。
CSS组成:
选择器:指定将要添加样式的 HTML元素的方式。可以使用标签名,class值,id值等多种方式。
声明:用于设置特定元素的属性信息。格式:属性名:属性值
选择器 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
h1 {
color: red;
font-size: 5px;
}
4.2入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入门案例</title>
<style>
h1{
color: red;/*颜色*/
font-size: 100px;/*字体大小*/
}
</style>
</head>
<body>
<h1>今天依然很开心!</h1>
</body>
</html>
4.3基本语法
4.3.1引入方式
1.内联样式
内联样式是CSS声明在元素的style
属性中,仅影响一个元素:
<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
Hello World!
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入方式</title>
</head>
<body>
<h1 style="color: red;font-size: 20px">嘿嘿嘿</h1>
<h1 style="color: blue;font-size: 30px">哈哈哈</h1>
</body>
</html>
2.内部样式
内部样式表是将CSS样式放在style
标签中,通常style标签
编写在HTML 的head
标签内部。
<head>
<style>
选择器 {
属性名: 属性值;
属性名: 属性值;
}
</style>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入方式2</title>
<style>
div{
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
3.外部样式
外部样式表是CSS附加到文档中的最常见和最有用的方法,因为您可以将CSS文件链接到多个页面,从而允许您使用相同的样式表设置所有页面的样式。在<head>标签中通过<link>标签来引入独立cs文件。可以影响不同的文件
<link rel="stylesheet" href="css文件">
rel:表示“关系 (relationship) ”,属性值指链接方式与包含它的文档之间的关系,引入css文件固定值为stylesheet。
href:属性需要引用某文件系统中的一个文件。
01.css
div{
color: blueviolet;
font-size: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入方式4</title>
<!--外部样式-->
<link rel="stylesheet" href="css/01.css">
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
4.3.2注释
CSS中的注释以/*
和开头*/
。在下面的代码块中,我已使用注释标记了不同的不同代码段的开始。
4.3.3选择器
为了样式化某些元素,我们会通过选择器来选中HTML文档中的这些元素。如果你的样式没有生效,那很可能是你的选择器没有像你想象的那样选中你想要的元素。
分类 | 名称 | 符号 | 作用 | 示例 |
---|---|---|---|---|
基本选择器 | 元素选择器 | 标签名 | 基于标签名匹配元素 | div{ } |
类选择器 | . | 基于class属性值匹配元素 | .center{ } | |
ID选择器 | # | 基于id属性值匹配元素 | #username{ } | |
属性选择器 | 属性选择器 | [] | 基于某属性匹配元素 | [type]{ } |
伪类选择器 | 伪类选择器 | : | 用于向某些选择器添加特殊的效果 | a : hover{ } |
组合选择器 | 后代选择器 | 空格 | 使用空格符号 结合两个选择器,基于第一个选择器,匹配第二个选择器的所有后代元素 | .top li{ } |
子级选择器 | > | 使用 > 结合两个选择器,基于第一个选择器,匹配第二个选择器的直接子级元素 | .top > li{ } | |
同级选择器 | ~ | 使用 ~ 结合两个选择器,基于第一个选择器,匹配第二个选择器的所有兄弟元素 | .l1 ~ li{ } | |
相邻选择器 | + | 使用 + 结合两个选择器,基于第一个选择器,匹配第二个选择器的相邻兄弟元素 | .l1 + li{ } | |
通用选择器 | * | 匹配文档中的所有内容 | *{ } |
1.基本选择器
通用的选择器优先级更低
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style>
/*元素选择器*/
div{
color: red;
}
/*类选择器*/
.cls{
color: blue;
}
/*id选择器*/
#d1{
color: green;
}
#d2{
color: aqua;
}
</style>
</head>
<body>
<div>div1</div>
<div class="cls">div2</div>
<div class="cls">div3</div>
<div id="d1">div4</div>
<div id="d2">div5</div>
</body>
</html>
2.属性选择器
<!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>
3.伪类选择器
伪类选择器,用于选择处于特定状态的元素,例如,一些元素中的第一个元素,或者某个元素被鼠标指针悬停。
格式:标签名:伪类名{ }
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标悬停链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
<!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="http://www.baidu.com" target="_blank">百度一下</a>
<br/>
<a href="http://www.taobao.com" target="_blank">淘宝</a>
</body>
</html>
4.组合选择器
后代选择器
.l1 li{
background-color: aqua;
}
子类选择器
.l1 li{
background-color: aqua;
}
同级选择器
.l1 ~ li{
background-color: aqua;
}
相邻选择器
.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>
4.4头条案例
4.4.1语义化标签
标签 | 名称 | 作用 | 备注 |
---|---|---|---|
header | 标头元素 | 表示内容的介绍 | 块元素,文档中可以定义多个 |
nav | 导航元素 | 表示导航链接 | 常见于网站的菜单,目录和索引等,可以嵌套在header中 |
article | 文章元素 | 表示独立内容区域 | 标签定义的内容本身必须是有意义且必须独立于文档的其他部分 |
footer | 页脚元素 | 表示页面的底部 | 块元素,文档中可以定义多个 |
4.4.2边框样式
边框名称 | 作用 | 属性值 |
---|---|---|
border | 设置所有边框 | solid-实现 double-双实线 dotted-圆点 dashed-虚线 |
border-top | 设置上边框 | |
border-left | 设置左边框 | |
border-right | 设置有边框 | |
border-bottom | 设置下边框 | |
border-radius | 设置边框弧度 |
<!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 green;
border-radius: 25px;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="d1"></div>
<br/>
<div id="d2"></div>
</body>
</html>
4.4.3文字样式
样式名称 | 作用 | 属性值 |
---|---|---|
color | 文字颜色 | 颜色单词,RGB值 |
font-family | 字体 | 宋体、仿宋 |
font-size | 字体大小 | 像素点 20px |
text-decoration | 文字下划线 | none:无 underline:下划线 oveline:上划线 line-through:删除线 |
text-align | 水平对齐方式 | left:居左 right:居右 center:居中 |
line-height | 行间距 | 像素点:20px |
vertical-align | 垂直对齐方式 | top:居上 botton:居下 百分比调节 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style>
div{
/*颜色*/
/*color: red;*/
color: #ff0000;
/*字体*/
font-family: 宋体;
/*大小*/
font-size: 25px;
/*下划线 none:无 underline:下划线 overline:上划线 line-through:删除线*/
text-decoration: line-through;
/*水平对齐方式 left:居左 center:居中 right:居右*/
text-align: center;
/*行间距*/
line-height: 60px;
}
span{
/*文字垂直对齐 top:居上 bottom:居下 middle:居中 百分比*/
vertical-align: 50%;
}
</style>
</head>
<body>
<div>
文字1
</div>
<div>
文字2
</div>
<img src="../img/wx.png" width="38px" height="38px"/>
<span>微信</span>
</body>
</html>
4.4.4实现头条新闻
new01.css
/*顶部*/
.top{
background: black;
line-height: 40px;
text-align: right;
font-size: 20px;
}
.top a{
color: white;
}
a{
color: black;
text-decoration:none;
}
a:hover{
color: red;
}
/*导航*/
.nav{
line-height: 20px;
}
.nav a{
color: black;
}
/*左侧内容*/
.left{
width: 20%;
float:left;
text-align: center;
}
.left img{
width: 40px;
height: 40px;
}
.left span{
vertical-align: 70%;
}
/*中间内容*/
.center{
width: 60%;
float: left;
}
/*右侧内容*/
.right{
width: 20%;
float: left;
}
/*底部内容*/
.footer{
clear: both;
background: blue;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.footer a{
color: white;
}
.footer a:hover{
color: red;
}
<!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>
4.5登陆页面
4.5.1表格标签
标签名 | 作用 | 备注 |
---|---|---|
table | 表示表格,是数据单元的行和列的两维表 | 容器,默认无样式 width-宽度 height-高度 border-边框 align-对齐方式 |
tr | table row,表示表中单元的行 | align-对其杠十 |
td | table data,表示表中一个单元格 | rowspan-合并行 colspan-合并列 |
th | table header,表格单元格的表头,通常字体样式加粗居中 |
标签名 | 作用 | 备注 |
---|---|---|
thead | 定义表格的列头的行 | 一个表格中仅有一个 |
tbody | 定义表格的主体 | 用来封装一组表行(tr元素) |
tfoot | 定义表格的各列汇总行 | 一个表格中仅有一个 |
<!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 align="center">
<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>
</tr>
<tr align="center">
<td>李四</td>
<td>24</td>
<td>95</td>
<td>98</td>
</tr>
<tr align="center">
<td>王五</td>
<td>女</td>
<td>22</td>
<td>99</td>
<td>99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">总分数:</td>
<td>373</td>
</tr>
</tfoot>
</table>
</body>
</html>
4.5.2样式控制
样式名称 | 作用 | 属性 |
---|---|---|
background-repeat | 控制背景重复 | no-repeat:不重复 repeat-x:水平重复 repeat-y:垂直重复 repeat:水平+垂直重复 |
outline | 控制轮廓 | double:双实线 dotted:圆点 dashed:虚线 none:无 |
display | 控制元素 | inline:内联元素(无换行、无长款) block:块级元素(有换行) inline-block:内联元素(有长宽) 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.5.3盒子模型
盒子模型是通过设置元素框与元素内容和外部元素的边距,而进行布局的方式。
外边距名称 | 作用 | 举例 |
---|---|---|
margin-top | 上外边距 | margin-top:50px; |
margin-left | 左外边距 | margin-left:50px; |
margin-right | 右外边距 | margin-right:50px; |
margin-bottom | 下外边距 | margin-bottom:50px; |
margin | 通用上下左右外边距 | margin:50px; |
margin | 通用独立上右下左外边距 | margin:70px 35px 30px 65px |
margin | 自动计算外边距并剧中 | margin:auto |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.wai{
border:1px solid red;
width: 200px;
height: 200px;
}
.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.5.4登录页面
login01.css
/*背景*/
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; /*轮廓*/
}
/*表行设置*/
tr{
line-height: 60px;
}
/*表底确定按钮*/
tfoot button{
border:1px solid red;
border-right: 5px;
width: 95%;
height: 40px;
background: crimson;
color: white;
font-size: 20px;
}
/*底部控制*/
.footer{
width: 40%;
margin: auto;
font-size: 15px;
color: gray;
text-align: center;
}
/*超链接样式*/
a{
text-decoration: none;
color: blue;
}
a:hover{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
<link rel="stylesheet" href="../css/login01.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="text" 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>
在上一个案列中将登录的条状页面设置为该页面
<a href="../案例二/04登陆页面.html" targ="_self">登录 </a>
5.Nginx服务器
5.1下载Nginx
进入http://nginx.org/网站,下载nginx-1.17.5.tar.gz文件
5.2上传到虚拟机
使用客户端将刚下载好的nginx-1.17.5.tar.gz文件上传到home目录下。
上传压缩包:put d:/nginx-1.17.5.tar.gz
解压压缩包:tar -zxvf nginx-1.17.5.tar.gz
进入解压目录:cd nginx-1.17.5
安装Nginx依赖环境,‐y表示所有提示默认选择y
yum -y install pcre pcre-devel
yum -y install zlib zlib-devel
yum -y install openssl openssl-devel
现在安装Nginx:
执行:./configure
在新装的centos7上面安装nginx到时候,执行./config 时候 出现错误。
checking for OS
+ Linux 2.6.32-431.el6.x86_64 x86_64checking for C compiler ... not found
解决
执行下面命令解决问题
yum -y install gcc gcc-c++ autoconf automake make
再执行:make
再执行:make install
启动Nginx
cd /usr/local/nginx/sbin
启动
./nginx
停止
./nginx -s stop
重启
./nginx -s reload
查看服务状态:ps -ef | grep nginx
测试Nginx服务是否成功启动:http://ip地址:80
5.3发布项目
1.创建一个toutiao目录
cd /home
mkdir toutiao
2.将项目上传到toutiao目录
3.解压项目
unzip web.zip
4.编辑Nginx配置文件:vi /home/nginx-1.17.5/conf/nginx.conf
将文件中下面的位置,location的root地址修改
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /home/toutiao;
index index.html index.htm;
}
5.到该目录下:/usr/local//nginx/sbin/
6.关闭nginx服务:./nginx -s stop
7.启动服务并加载配置文件:/usr/local/nginx/sbin/nginx -c /home/nginx-1.17.5/conf/nginx.conf
8.浏览器打开网址:http://192.168.175.175
---------------------------------------------------------------------------------------------------------------------------------
内容有部分存在书籍、课堂、网络记录,如有雷同纯属巧合