Java-JavaWeb—（2）HTML+CSS+Nginx

最新推荐文章于 2022-06-29 06:03:38 发布

小程来求学

最新推荐文章于 2022-06-29 06:03:38 发布

阅读量673

点赞数 2

文章标签： java

本文链接：https://blog.csdn.net/qq_33513145/article/details/119730097

版权

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>：头部标签

<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> &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;
        <a href="#">廉政举报</a> &nbsp;
    </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"/>男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="women"/>女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </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：居下 middle：居中百分比调节

<!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">登录&nbsp;&nbsp;</a>
        <a href="#">注册&nbsp;&nbsp;</a>
        <a href="#">更多&nbsp;&nbsp;</a>
    </div>

    <!--导航条-->
    <div class="nav">
        <img src="../img/logo.png"/>
        <a href="#">首页&nbsp;&nbsp;</a>/
        <a href="#">科技&nbsp;&nbsp;</a>/
        <font color="gray">正文</font>
        <hr/>
    </div>

    <!--左侧分享-->
    <div class="left">
        <a href="#"> <img src="../img/cc.png"/> <span>&nbsp;评论</span> </a>
        <hr/>
        <a href="#"> <img src="../img/repost.png"/> <span>&nbsp;转发</span> </a>  <br/>
        <a href="#"> <img src="../img/weibo.png"/> <span>&nbsp;微博</span> </a>  <br/>
        <a href="#"> <img src="../img/qq.png"/> <span>&nbsp;空间</span> </a>  <br/>
        <a href="#"> <img src="../img/wx.png"/> <span>&nbsp;微信</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> &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;
        <a href="#">廉政举报</a> &nbsp;
    </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：隐藏元素

样式名称

作用

属性

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">账&nbsp;密&nbsp;登&nbsp;录<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/>
        登录/注册即表示同意&nbsp;&nbsp;
        <a href="#" target="_blank">用户协议</a>&nbsp;&nbsp;
        和&nbsp;&nbsp;
        <a href="#" target="_blank">隐私条款</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#" target="_blank">忘记密码</a>
    </div>
</body>
</html>

在上一个案列中将登录的条状页面设置为该页面

<a href="../案例二/04登陆页面.html" targ="_self">登录&nbsp;&nbsp;</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_64

checking 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

---------------------------------------------------------------------------------------------------------------------------------

内容有部分存在书籍、课堂、网络记录，如有雷同纯属巧合

小程来求学

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Java-JavaWeb—（2）HTML+CSS+Nginx

1.HTML基础1.1HTML简介网页的构成 HTML：通常用来定义网页内容的含义和基本结构。 CSS：通常用来描述网页的表现与展示效果。 JavaScript：通常用来执行网页的功能与行为。 HTML（超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。超文本：是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。标记：是用来注明文本，图片等内容，以便于在浏览器中显示。1.2HTML组成HTML页面由一系列的元素（ele
复制链接

扫一扫