web阶段学习之HTML&CSS-优快云博客

C/S: Client/Server 客户端/服务器端（在用户本地有一个客户端程序，在远程有一个服务器端程序）【优点】用户体验好【缺点】开发、安装、部署、维护麻烦
B/S: Browser/Server 浏览器/服务器端（只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序）【优点】开发、安装、部署、维护简单【缺点】1. 如果应用过大，用户的体验可能会受到影响 2.对硬件要求过高

B/S架构详解：

【静态资源】

特点：

1.使用静态网页开发技术发布的资源、2.所有用户访问，得到的结果是一样的、3.如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

HTML：用于搭建基础网页，展示页面的内容

CSS：用于美化页面，布局页面

JavaScript：控制页面的元素，让页面有一些动态的效果

【动态资源】特点：

1.使用动态网页及时发布的资源、2.所有用户访问，得到的结果可能不一样、3.如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器（我们要学习动态资源，必须先学习静态资源）

HTML

概述

html是最基础的网页开发语言-->Hyper Text Markup Language 超文本标记语言-->超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本-->标记语言：由标签构成的语言。<标签名称> 如 html，xml 标记语言不是编程语言。

入门

【语法】

html文档后缀名 .html 或者 .htm

【标签】

围堵标签：有开始标签和结束标签。如 <html> </html>

自闭和标签：开始标签和结束标签在一起。如 <br/>

嵌套标签：需要正确嵌套，不能你中有我，我中有你（eg：<a><b></b></a>）

【注意】

在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)

html的标签不区分大小写，但是建议使用小写

标签学习

文件标签

构成html最基本的标签；1.html:html文档的根标签、2.head：头标签。用于指定html文档的一些属性。引入外部的资源、3.title：标题标签、4.body：体标签、5.<!DOCTYPE html>：html5中定义该文档是html文档。

文本标签

和文本有关的标签；1. <h1> to <h6>：标题标签（h1~h6:字体大小逐渐递减）、2.<p>：段落标签、3.<br>：换行标签、4.<hr>：展示一条水平线（color：颜色、width：宽度、size：高度、align：对其方式、center：居中）

    <hr color="green" width="200" size="10" align="left"/>
    <hr>
5.<b>：字体加粗、6.<i>：字体斜体、7.<font>:字体标签（color：颜色、size：大小、face：字体）、8.<center>:文本居中

    <font color="red" size="5" face="楷体">春蚕到死丝方尽，蜡炬成灰泪始干。</font>
    <br>
    <font color="#F00FFF" size="5" face="楷体">春蚕到死丝方尽，蜡炬成灰泪始干。</font>

图片标签

img：展示图片； 属性：src：指定图片的位置；相对路径：以.开头的路径（./：代表当前目录、../:代表上一级目录）

    <img src="../image/jingxuan_2.jpg"/>
    <img src="../image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>

列表标签

有序列表：ol li

<!-- 有序列表 ol-->
    早上起床干的事情：
    <ol type="A" START="5">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ol>

无序列表：ul li

 <!-- 无序列表 ul-->
    早上起床干的事情：
    <ul type="disc">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul>

链接标签

a:定义一个超链接；href：指定访问资源的URL(统一资源定位符) target：指定打开资源的方式（_self:默认值，在当前页面打开、_blank：在空白页面打开）

    <a href="http://www.itcast.cn">点我</a>
    <br>

    <a href="http://www.itcast.cn" target="_self">点我</a>
    <br>
    <a href="http://www.itcast.cn" target="_blank">点我</a>
    <br>

    <a href="./05_列表标签.html">列表标签</a>
    <br>
    <a href="mailto:itcast@itcast.cn">联系我们</a>
    <br>

    <a href="http://www.itcast.cn"><img src="../image/jiangwai_1.jpg"></a>

块标签

div和span；div:每一个div占满一整行，块级标签（自动换行） span：文本信息在一行展示，行内标签内联标签（不会自动换行）

    <span>黑马程序员</span>
    <span>传智播客</span>
    <hr>

    <div>黑马程序员</div>
    <div>传智播客</div>

语义化标签

html5中为了提高程序的可读性，提供了一些标签（<header>：页眉、<footer>：页脚）

表格标签

1.table：定义表格（width：宽度、border：边框、cellpadding：定义内容和单元格的距离、cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、bgcolor：背景色、align：对齐方式）

2.tr：定义行（bgcolor：背景色、align：对齐方式） 3.td：定义单元格（colspan：合并列、rowspan：合并行） 4.th：定义表头单元格 5.<caption>：表格标题 6.<thead>：表示表格的头部分 7.<tbody>：表示表格的体部分 8.<tfoot>：表示表格的脚部分
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="gray" align="center">
        <thead>
            <caption>学生信息表</caption>
            <tr>
                
                
                
                <th>编号</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>

        <tbody>
            <tr bgcolor="aqua" align="center">
                <td>1</td>
                <td>帅比华</td>
                <td>100</td>
            </tr>

            <tr>
                <td>2</td>
                <td>巴菌儿</td>
                <td>100</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>3</td>
                <td>乔巴儿</td>
                <td>100</td>
            </tr>
        </tfoot>
    </table>
    <hr>

表单标签

用于采集用户输入的数据的。用于和服务器进行交互；

form 用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。属性（action：指定提交数据的UR、method:指定提交方式（一共7种，2种比较常用））

get：1. 请求参数会在地址栏中显示。会封装到请求行中 2. 请求参数大小是有限制的 3. 不太安全

post：1. 请求参数不会再地址栏中显示。会封装在请求体中 2. 请求参数的大小没有限制 3. 较为安全
<form action="#" method="post">
    用户名：<input name="username"><br>
    密码：<input name="password"><br>
    <input type="submit" value="登录">
    </form>

表单项标签

input：可以通过type属性值，改变元素展示的样式；

type属性：1.text：文本输入框，默认值 2.password：密码输入框 3.placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 4.radio:单选框（1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样、2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值、3. checked属性，可以指定默认值） 5.checkbox：复选框（1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值、2. checked属性，可以指定默认值）
<form action="#" method="get">
    <label for="username">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    <label for="password">密码：</label><input type="password" name="password" placeholder="请输入密码" id="password"><br>
    性别：<input type="radio" name="gender" value="male" checked="checked"> 男
         <input type="radio" name="gender" value="female"> 女
    <br>
    爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
         <input type="checkbox" name="hobby" value="java" checked> java
         <input type="checkbox" name="hobby" value="game"> 游戏
    <br>
    <input type="submit" value="登录">
6.file：文件选择框 7.hidden：隐藏域，用于提交一些信息 8. 按钮：（submit：提交按钮。可以提交表单、button：普通按钮、image：图片提交按钮） 9.label：指定输入项的文字描述信息（注：abel的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点）
图片：<input type="file" name="file">
    隐藏域：<input type="hidden" name="id" value="aa">
    <br>
    取色器：<input type="color" name="color">
    <br>
    生日：<input type="date" name="birthday">
    <br>
    生日：<input type="datetime-local" name="birthday">
    <br>
    邮箱：<input type="email" name="email">
    <br>
    年龄：<input type="number" name="age">
    <br>
    <input type="submit" value="登录">
    <input type="button" value="一个按钮"><br>
    <input type="image" src="../img/regbtn.jpg">
10.select: 下拉列表（子元素：option，指定列表项、textarea：文本域（cols：指定列数，每一行有多少个字符、rows：默认多少行））
省份：<select name="province">
        <option value="">--请选择--</option>
        <option value="1" selected>北京</option>
        <option value="2">上海</option>
        <option value="3">香港</option>
        </select>
    <br>
    自我描述：<textarea cols="20" rows="5" name="des"></textarea>

CSS

概念

css（页面美化和布局控制），Cascading Style Sheets 层叠样式表（层叠：多个样式可以作用在同一个html的元素上，同时生效）。

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

CSS与html结合方式

内联样式

在标签内使用style属性指定css代码（eg：<div style="color:red;">hello css</div>）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--内联样式 (不推荐)
       在标签内使用style属性指定css代码-->
<div style="color: yellow;">hello css</div>

</body>
</html>

内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <!--内部样式
       在head标签内，定义style标签，style标签的标签体内容就是css代码-->
    <div>hello css</div>
</body>
</html>

外部样式

1. 定义css资源文件 2. 在head标签内，定义link标签，引入外部的资源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--可以不通过link标签的引用-->
    <!--<link rel="stylesheet" href="../css/a.css">-->
    <style>
        @import "../css/a.css";
    </style>
</head>
<body>
    <!--外部样式
       1. 定义css资源文件。
		2. 在head标签内，定义link标签，引入外部的资源文件
       -->
<div>hello css</div>
<div>hello css</div>

<p>呀呼</p>

</body>
</html>

注：1,2,3种方式 css作用范围越来越大 1方式不常用，后期常用2,3。

css语法

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

基础选择器

1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一

2. 元素选择器：选择具有相同标签名称的元素（语法：标签名称{} （注意：id选择器优先级高于元素选择器））

3. 类选择器：选择具有相同的class属性值的元素（语法：.class属性值{} （注意：类选择器选择器优先级高于元素选择器））
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: red;
        }
        div{
            color: green;
        }
        .cls1{
            color: blue;
        }

    </style>
</head>
<body>



<div id="div1">传智播客</div>
<div>黑马程序员</div>




<p class="cls1">传智学院</p>

</body>

扩展选择器

1. 选择所有元素：（语法： *{}）

2. 并集选择器：（选择器1,选择器2{}）

3. 子选择器：筛选选择器1元素下的选择器2元素（语法：选择器1 选择器2{}）

4. 父选择器：筛选选择器2的父元素选择器1（语法：选择器1 > 选择器2{}）

5.属性选择器：选择元素名称，属性名=属性值的元素（语法：元素名称[属性名="属性值"]{}）

6. 伪类选择器：选择一些元素具有的状态（语法：元素:状态{}） link：初始化的状态、visited：被访问过的状态、active：正在访问状态、hover：鼠标悬浮状态

属性

1. 字体、文本（font-size：字体大小、color：文本颜色、text-align：对其方式、line-height：行高）

2. 背景（background） 3. 边框（border：设置边框，符合属性） 4. 尺寸（width：宽度、height：高度）

5. 盒子模型：控制布局（margin：外边距、padding：内边距（默认情况下内边距会影响整个盒子的大小、box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小） float：浮动（left、right））