html css

 

目录

web概念概述

           HTML

                  1.概念

                  2.快速入门

                  3. 标签学习

                  4.表单标签

            CSS

                             1. 概念

                             2. 好处

                             3. CSS的使用

                             4. css语法

                             5. 选择器

                             6. 属性

 


web概念概述

软件构造

   1.C/S:Client/Server

           在用户本地有一个客户端程序,在远程由一个服务器端程序

                优点: 用户体验好

                缺点:开发、安装,部署,维护 麻烦

   2.B/S:Browser/Server    浏览器/服务器端

           只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序

                 优点: 开发、安装,部署,维护 简单

                 缺点: 如果应用过大,用户的体验可能会受到影响;对硬件要求过高

 

B/S架构

     资源分类:

           1.静态资源          使用静态网页开发技术发布的资源

                    特点:

                         所有用户访问,得到的结果是一样的    如:HTML,CSS,JavaScript

                         如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态链接

               静态资源

           HTML

                               用于搭建基础网页,展示页面的内容

                  1.概念

                                    Hyper Text Markup Language 超文本标记语言

                             超文本:

                                     超文本是用超链接的方法,将各种不同空间的文字信息组织再一起的网状文本

                             标记语言:

                                     由标签构成的语言。<标签名称>  如html,xml

                                     标记语言不是编程语言

                  2.快速入门

                             语法:                            

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

                                     2. 标签分为

                                         1. 围堵标签:有开始标签和结束标签。如

                                         2. 自闭和标签:开始标签和结束标签在一起。如
(换行标签)

                                     3.标签可以嵌套:

                                         需要正确嵌套,不能你中有我,我中有你 

                                         错误:;正确:

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

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


			
				
					title
				
				
				
					Hello World
Hello World

                  3. 标签学习

                                     1. 文件标签:构成html最基本的标签

                                         * html:html文档的根标签

                                         * head:头标签。用于指定html文档的一些属性。引入外部的资源

                                         * title:标题标签

                                         * body:体标签

                                         * :html5中定义该文档是html文档

                                         *  改编码表

                                     2. 文本标签:和文本有关的标签

                                         * 注释:

                                         *

to

:标题标签

                                                 * h1~h6:字体大小逐渐递减

                                         *

:段落标签

                                         *
:换行标签

                                         *


:展示一条水平线

                                              * 属性:

                                                   * color:颜色

                                                   * width:宽度

                                                   * size:高度

                                                   * align:对其方式

                                                       * center:居中

                                                       * left:左对齐

                                                      * right:右对齐

                                         * :字体加粗

                                         * :字体斜体

                                        *

:文本居中

                                        * :字体标签

                                              * 属性:

                                                 * color:颜色

                                                 * size:大小

                                                 * face:字体

                                         * 属性定义:

                                            * 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:指定图片的位置

                

代码:



			    古镇
			

			    
			
			    

                                     4. 列表标签:

                                         * 有序列表:

                                           * ol:

                                           * li:

 代码:

  1. xxx

                                         * 无序列表:

                                          * ul:

                                          * li:

                                     5. 链接标签:

                                         * a:定义一个超链接

                                            * 属性:

                                                * href:指定访问资源的URL(统一资源定位符) 

                                               * target:指定打开资源的方式

                                                     * _self:默认值,在当前页面打开

                                                     * _blank:在空白页面打开

 

* 代码:




    点我

    
    点我     
    点我     
    列表标签
    联系我们     
    

                                      6. div和span:

                                          * div:每一个div占满一整行。块级标签

                                          * span:文本信息在一行展示,行内标签 内联标签

                                      7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。

                                          1.

:页眉

                                          2.

:页脚

                                      8. 表格标签:

                                         * table:定义表格

                                              * width:宽度

                                              * border:边框

                                              * cellpadding:定义内容和单元格的距离

                                              * cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、

                                              * bgcolor:背景色

                                              * align:对齐方式

                                         * tr:定义行

                                              * bgcolor:背景色

                                              * align:对齐方式

                                         * td:定义单元格

                                              * colspan:合并列

                                              * rowspan:合并行

                                         * th:定义表头单元格

                                         * :表格标题

                                         * :表示表格的头部分

                                         * :表示表格的体部分

                                         * :表示表格的脚部分

如果某一行只有一个单元格,则使用

 如果某一行有多个单元格,则使用

                  4.表单标签

                             表单:

                                  * 概念:用于采集用户输入的数据的。用于和服务器进行交互。
                                  * form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围

                                       * 属性:
                                           * action:指定提交数据的URL
                                           * method:指定提交方式
                                              * 分类:一共7种,2种比较常用
                                                 * get:
                                                     1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                                                     2. 请求参数大小是有限制的。
                                                     3. 不太安全。
                                                * post:
                                                     1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                                                     2. 请求参数的大小没有限制。
                                                     3. 较为安全。

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

                    * checkbox:复选框
                        * 注意
                            1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
                            2. checked属性,可以指定默认值                    

                    * file:文件选择框
                    * hidden:隐藏域,用于提交一些信息。

                    * 按钮:
                        * submit:提交按钮。可以提交表单
                        * button:普通按钮
                        * image:图片提交按钮
                            * src属性指定图片的路径    

               * label:指定输入项的文字描述信息
                   * 注意
                       * label的for属性一般会和 input 的 id属性值对应。如果对应了,则点击label区域,会让input输入框获取焦点。
            * select: 下拉列表
                * 子元素:option,指定列表项
                
            * textarea:文本域
                * cols:指定列数,每一行有多少个字符
                * rows:默认多少行。
 

            CSS

                             用于美化页面,布局页面

                             1. 概念

                                    Cascading Style Sheets 层叠样式表
                                          * 层叠:多个样式可以作用在同一个html的元素上,同时生效

                             2. 好处


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

                             3. CSS的使用

                                 CSS与html结合方式
                                   1. 内联样式
                                       * 在标签内使用style属性指定css代码
                                       * 如:

hello css

                                   2. 内部样式
                                        * 在head标签内,定义style标签,style标签的标签体内容就是css代码
                             * 如:         

                    
                             
hello css


                             3. 外部样式
                                 1. 定义css资源文件。
                                 2. 在head标签内,定义link标签,引入外部的资源文件
                           * 如:
                              * a.css文件:

                      div{
                        color:green;
                    }
                
                
hello css
                
hello css

                              * 注意:
                                   * 1,2,3种方式 css作用范围越来越大
                                   * 1方式不常用,后期常用2,3
                                   * 第3种格式可以写为:

                             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{}

                                               5. 属性选择器:选择元素名称,属性名=属性值的元素
                                                    * 语法:  元素名称[属性名="属性值"]{}

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


                             6. 属性

                                 1. 字体、文本
                                      * font-size:字体大小
                                      * color:文本颜色
                                      * text-align:对其方式
                                      * line-height:行高 
                                 2. 背景
                                      * background:

                                       background:url(" ");
                                 3. 边框
                                      * border:设置边框,符合属性
                                 4. 尺寸
                                      * width:宽度
                                      * height:高度
                                 5. 盒子模型:控制布局
                                      * margin:外边距
                                      * padding:内边距
                                                    * 默认情况下内边距会影响整个盒子的大小
                                                    * box-sizing: border-box;  设置盒子的属性,让width和height就是最终盒子的大小

                                      * float:浮动
                                         * left
                                         * right

                   JavaScript:

                            控制页面的元素,让页面有一些动态的效果

            2.动态资源            使用动态网页及时发布的资源

                     特点:

                         所有用户访问,得到的结果可能不一样  如:jsp/servlet,php,asp...

                         如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器

                         

 

 

 

 

 

你可能感兴趣的:(javaWEB,html)