[石家庄]HTML&CSS - 黑马程序员技术交流社区

## Web概念概述
* 使用Java语言开发基于互联网的项目
## 软件架构
1,C/S :  Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序，在远程有一个服务器端程序
            * 如：QQ，迅雷...
            * 优点：
                  1. 用户体验好
            * 缺点：
                  1. 开发、安装，部署，维护麻烦
2,B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
            * 优点：
               1. 开发、安装，部署，维护简单
            * 缺点：
               1. 如果应用过大，用户的体验可能会受到影响
               2. 对硬件要求过高
## B/S架构的详解
*资源分类
1,静态资源:
* 使用静态网页开发技术发布的资源。
                        * 特点：
                  * 所有用户访问，得到的结果是一样的。
                  * 如：文本，图片，音频、视频, HTML,CSS,JavaScript
                  * 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2,动态资源:
* 使用动态网页技术发布的资源。
                  * 特点：
                  * 所有用户访问，得到的结果可能不一样。
                  * 如：jsp/servlet,php,asp...
                  * 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
      * 静态资源：
         * HTML：用于搭建基础网页，展示页面的内容
         * CSS：用于美化页面，布局页面
         * JavaScript：控制页面的元素，让页面有一些动态的效果
## HTML
1. 概念：是最基础的网页开发语言
      * Hyper Text Markup Language 超文本标记语言
         * 超文本:
            * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
         * 标记语言:
            * 由标签构成的语言。<标签名称> 如 html，xml
            * 标记语言不是编程语言
2. 快速入门：
      * 语法：
         1. html文档后缀名 .html 或者 .htm
         2. 标签分为
            1. 围堵标签：有开始标签和结束标签。如 <html> </html>
            2. 自闭和标签：开始标签和结束标签在一起。如 <br/>  -- 结束标签斜杆可以不写
         3. 标签可以嵌套：
            需要正确嵌套，不能你中有我，我中有你
            错误：<a><b></a></b>
            正确：<a><b></b></a>
         4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
         5. html的标签不区分大小写，但是建议使用小写。

[Java] 纯文本查看 复制代码

 * 代码：

            <html>

            

                <head>

                    <title>title</title>  -- 写标题

                </head>

                

                <body>

                    <FONT color='red'>Hello World</font><br/>

                    

                    <font color='green'>Hello World</font>

                

                </body>

        

            </html>

3. 标签学习：
      1. 文件标签：构成html最基本的标签
         * html:html文档的根标签
         * head：头标签。用于指定html文档的一些属性。引入外部的资源
         * title：标题标签。
         * body：体标签
         * <!DOCTYPE html>：html5中定义该文档是html文档
      2. 文本标签：和文本有关的标签
         * 注释：
         * <h1> to <h6>：标题标签
            * h1~h6:字体大小逐渐递减,自带换行
         * <p>：段落标签
         * <br>：换行标签  自闭标签
         * <hr>：展示一条水平线自闭标签
            * 属性：
                  * color：颜色
                  * width：宽度
                  * size：高度
                  * align：对其方式
                     * center：居中
                     * left：左对齐
                     * right：右对齐
         * <b>：字体加粗
         * <i>：字体斜体
         * <i>：字体下划线
         * <font>:字体标签
                  * 属性：
                  * color：颜色
                  * size：大小  1-7
                  * face：字体
         * <center>:文本居中
         * 特殊字符
            * &nbsb: 空格
            * lt: <
            * gt: >
* 属性定义：
            * color：
                  1. 英文单词：red,green,blue
                  2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
                  3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
            * width：
                  1. 数值：width='20' ,数值的单位，默认是 px(像素)
                  2. 数值%：占比相对于父元素的比例
3. 图片标签：
         * img：展示图片  自闭和标签
            * 属性：
                  * src：指定图片的位置
                        *width :宽度
                        *height : 高度
                        *alt : 规定图像的替换文本
         * 代码：
            <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
      4. 列表标签：
         * 有序列表：
            * ol: 定义一个有序列表
                  * type :规定列表的类型  例 type = "A"  --不建议使用
            * li: 定义一个列表项
         *** 无序列表：
            * ul: 定义一个无序列表
            * li:
         *列表的嵌套(内容都写在li中)
      5. ****链接标签：
         * a:定义一个超链接
            * 属性：
                  * href：指定访问资源的URL(统一资源定位符)  -- 支持互联网路径/本地路径
                  * target：指定打开资源的方式
                     * _self:默认值，在当前页面打开
                     * _blank：在空白页面打开
         * 代码：

[AppleScript] 纯文本查看 复制代码

<a  target="_self">点我</a>

                <br>

                <a  target="_blank">点我</a>

      6. div和span：
         * div:每一个div占满一整行。块级标签
         * span：文本信息在一行展示，行内标签内联标签

      7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
         1. <header>：页眉
         2. <footer>：页脚

      8. ******表格标签：
         * table：定义表格
            * width：宽度
            * border：边框
            * cellpadding：定义内容和单元格的距离
            * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
            * bgcolor：背景色
            * align：对齐方式
         * tr：定义行
            * bgcolor：背景色
            * align：对齐方式
         * td：定义单元格
            * colspan：合并列
            * rowspan：合并行
         * th：定义表头单元格
         * <caption>：表格标题
         * <thead>：表示表格的头部分
         * <tbody>：表示表格的体部分
         * <tfoot>：表示表格的脚部分
         *表格的嵌套
            <tr>
                  <td>
                     <table></table>
                  </td>
            </tr>

##  HTML标签：表单标签
* 表单：
      * 概念：用于采集用户输入的数据的。用于和服务器进行交互。
      * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
         * 属性：
            * action：指定提交数据的URL  如果不写默认为当前页面
            * method:指定提交方式
                  * 分类：一共7种，2种比较常用
                     * get：
                        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
                     * post：
                        2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                        2. 请求参数的大小没有限制。
                        3. 较为安全。
4,文件上传请求方式只能是post

         * 表单项中的数据要想被提交：必须指定其name属性
      * 表单项标签：
         * input：可以通过type属性值，改变元素展示的样式
            * type属性：
                  ** text：文本输入框，默认值
                     * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
                  ** password：密码输入框
                  ** radio:单选框
                     * 注意：
                        1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
                        2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                        3. checked属性，可以指定默认值
                  ** checkbox：复选框
                     * 注意：
                        1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                        2. checked属性，可以指定默认值

                  ** file：文件选择框
                  ** reset : 重置
                  ** hidden：隐藏域，用于提交一些信息。必有有name,value
                  * date : 日期年月日
                  * datetime-local : 日期加时间
                  * email : 邮箱的添加
                  * number : 定义数字年龄
                  * 按钮：
                     ** submit：提交按钮。可以提交表单
                     ** button：普通按钮配合js使用
                     ** image：图片提交按钮
                        * src属性指定图片的路径

            * label：指定输入项的文字描述信息
               * 注意：
                     * label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
         * select: 下拉列表  需加name
            * 子元素：option，指定列表项
            * selected : 默认选项

         * textarea：文本域
            * cols：指定列数，每一行有多少个字符
            * rows：默认多少行。

## CSS：页面美化和布局控制
1. 概念： Cascading Style Sheets 层叠样式表
      * 层叠：多个样式可以作用在同一个html的元素上，同时生效

2. 好处：
      1. 功能强大
      2. 将内容展示和样式控制分离
         * 降低耦合度。解耦
         * 让分工协作更容易
         * 提高开发效率

3. CSS的使用：CSS与html结合方式
      1. 内联样式
         * 在标签内使用style属性指定css代码
         * 如：<div style="color:red;">hello css</div>
      2. 内部样式
         * 在head标签内，定义style标签，style标签的标签体内容就是css代码
         * 如：
            <style>
                  div{
                     color:blue;
                  }

            </style>
            <div>hello css</div>
      3. 外部样式
         1. 定义css资源文件。
         2. 在head标签内，定义link标签，引入外部的资源文件
         * 如：
            * a.css文件：
                  div{
                     color:green;
                  }
            <link rel="stylesheet" href="css/a.css">
            <div>hello css</div>
            <div>hello css</div>

      * 注意：
         * 1,2,3种方式 css作用范围越来越大
            * 第一种方式优先级最大,范围最小
         * 1方式不常用，后期常用2,3
         * 3种格式可以写为：
            <style>
                  @import "css/a.css";
            </style>

4. css语法：
      * 格式：
         选择器 {
            属性名1:属性值1;
            属性名2:属性值2;
            ...
         }
      * 选择器:筛选具有相似特征的元素
      * 注意：
         * 每一对属性需要使用；隔开，最后一对属性可以不加；

5. 选择器：筛选具有相似特征的元素
      * 分类：
         1. 基础选择器
            1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
                  * 语法：#id属性值{}
            2. 元素选择器：选择具有相同标签名称的元素
                  * 语法：标签名称{}
                  * 注意：id选择器优先级高于元素选择器
            3. 类选择器：选择具有相同的class属性值的元素。****
                  * 语法：.class属性值{}
                  * 注意：类选择器优先级高于元素选择器
         2. 扩展选择器：
            1. 选择所有元素：
                  * 语法： *{}
            2. 并集选择器：  ****
                  * 选择器1,选择器2{}

            3. 子选择器：筛选选择器1元素下的选择器2元素  ****
                  * 语法：  选择器1 选择器2{}
            4. 父选择器：筛选选择器2的父元素选择器1 ****
                  * 语法：  选择器1 > 选择器2{} 尽量不用div 有问题

            5. 属性选择器：选择元素名称，属性名=属性值的元素多用于input标签
                  * 语法：  元素名称[属性名="属性值"]{}
                  * 语法 :  元素名称[属性名]{} 指选择带这个属性名所有元素

            6. 伪类选择器：选择一些元素具有的状态
                  * 语法：元素:状态{}
                  * 如： <a>
                     * 状态：
                        * link：初始化的状态
                        * visited：被访问过的状态
                        * active：正在访问状态
                        * hover：鼠标悬浮状态
6. 属性
      1. 字体、文本
         *** font-size：字体大小
         *** color：文本颜色
         * text-align：对其方式
         * line-height：行高
      2. 背景
         *** background： url(文件位置)  no-repeat不重复  center居中
      3. 边框
         *** border：设置边框，符合属性  参数:宽度  实线solid/虚线  颜色
      4. 尺寸
         * width：宽度
         * height：高度
      5. 盒子模型：控制布局 ***
         * margin：外边距
         *** padding：内边距
            * 默认情况下内边距会影响整个盒子的大小
            * box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

         * float：浮动 ****
            * left 左
            * right 右
        *****学生表格案例

[Java] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格</title>

</head>

<body>

    <!--  -->

    <table width="500" border="1" cellpadding="0" cellspacing="0" align="center">

        <caption>学生成绩表</caption>

        <tr align="center">

            <th>编号</th>

            <th>姓名</th>

            <th>性别</th>

            <th>成绩</th>

        </tr>

        <tr align="center">

            <td>1</td>

            <td>小龙女</td>

            <td>女</td>

            <td>100</td>

        </tr>

        <tr align="center">

            <td>2</td>

            <td>杨过</td>

            <td>男</td>

            <td rowspan="2">90</td>

        </tr>

        <tr align="center">

            <td>3</td>

            <td>金轮法王</td>

            <td>男</td>

        </tr>

        <tr align="center">

            <td>总成绩</td>

            <td colspan="3">190</td>

        </tr>

    </table>

</body>

</html>

*************Css注册页面案例

[Java] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

    <style>

        /*整体页面*/

        body {

            background: url("img/register_bg.png") no-repeat center;

            padding:25px;

            padding-left: 300px;

        }

        /*注册页面*/

        .d1{

            border: 5px solid darkgray;

            width: 700px;

            height: 500px;

            background: beige;

            padding-left: 15px;

        }

        /*右上角内容*/

        .d2{

            /*border: 2px solid red;*/

            float: left;

        }

        #p1{

            font-size: 20px;

            color: gold;

        }

        #p2{

            font-size: 20px;

            color: darkgray;

            line-height: 0px;

        }

        /*中间内容*/

        .d3{

            float: left;

            /*border: 2px solid red;*/

            margin-top: 20px;

        }

        .td{

            text-align: right;

            line-height: 50px;

            padding-left: 50px;

            padding-right: 10px;

        }

        #username,#password,#name,#email,#brithdaty,#tel{

            padding-left: 10px;

            border-radius: 5px;

            /*border: darkgray 1px solid;*/

            width: 200px;

            height: 30px;



        }

        #yan{

            width: 100px;

            padding-left: 10px;

            border-radius: 5px;

            /*border: darkgray 1px solid;*/

            height: 30px;

        }

        .ti{

            background: gold;

            width: 60px;

            height: 30px;

        }

        .tu{

            width: 70px;

            height: 30px;

        }

        .d4{

            float: right;

            /*border: 1px solid red;*/

            margin-right: 15px;

            margin-top: 18px;

        }

        .a1{

            color: pink;

        }

    </style>



</head>

<body>

    <div class="d1">

        <div class="d2">

            <p id="p1">新用户注册</p>

            <p id="p2">USER REGISTER</p>

        </div>

        <div class="d3">

            <form action="#" method="post">

                <table>

                    <tr>

                        <td class="td"><label for="username">用户名</label></td>

                        <td><input type="text" name="username" id="username" placeholder="请输入用户名"></td>

                    </tr>

                    <tr>

                        <td class="td"><label for="password">密码</label></td>

                        <td><input type="password" name="password" id="password" placeholder="请输入用密码"></td>

                    </tr>

                    <tr>

                        <td class="td"><label for="email">Email</label></td>

                        <td><input type="email" name="email" id="email" placeholder="请输入Email"></td>

                    </tr>

                    <tr>

                        <td class="td"><label for="name">姓名</label></td>

                        <td><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>

                    </tr>

                    <tr>

                        <td class="td"><label for="tel">手机号</label></td>

                        <td><input type="number" name="tel" id="tel" placeholder="请输入手机号"></td>

                    </tr>

                    <tr>

                        <td class="td">性别</td>

                        <td><input type="radio" name="gender" value="man"> 男

                            <input type="radio" name="gender" value="women"> 女

                        </td>

                    </tr>

                    <tr>

                        <td class="td" for="brithdaty">出生日期</td>

                        <td><input type="date" name="brithdaty" id="brithdaty"></td>

                    </tr>

                    <tr>

                        <td class="td">验证码</td>

                        <td><input type="text" name="code" id="yan"> <img src="img/verify_code.jpg" alt="" class="tu"></td>

                    </tr>

                    <tr>

                        <td colspan="2" align="center" ><input type="submit" value="注册" class="ti">

                        </td>

                    </tr>



                </table>

            </form>



        </div>

        <div class="d4">

            已有账号?<a href="./旅游网.html" target="_blank" class="a1"> 立即登录</a>

        </div>

    </div>

</body>

</html>