美文网首页
Web基础(08-29~08-30)

Web基础(08-29~08-30)

作者: 迷人的酋长 | 来源:发表于2018-08-31 15:30 被阅读0次

08-29

1. HTML简介

概述: Hyper Text MarkUp Language, 超文本标记语言.
    超文本:  
        比普通文本的功能更加强大, 里边可以放: 图片, 音频, 视频等.
    标记语言: 
        由标签组成, 可以被浏览器识别.
作用:
    用来设计(静态)页面的.
        静态页面: 指的是页面中的内容是固定不变的, 不管什么时候看到的内容都是一样的.
            //例如: html, js
        动态页面: 指的是页面中的内容是 由程序自动生成(读取数据库, 然后展示)   , 不同时间点看到的数据不一样.
            //例如: 12306卖票
            //JSP, Servlet这些技术是用来开发动态页面的.
特点:
    1) HTML不区分大小写, 但是为了阅读方便, 建议小写.
    2) HTMl是由标签组成, 可以被浏览器识别.
        //例如: <font color="red" size='6'>我是字体标签</font>
    3) 上述的标签中, 前边的标签叫: 开始标签(也叫开放标签),  后边的标签叫结束标签(也叫闭合标签)
    4) 没有闭合标签的标签叫: 自闭合标签.
        //例如: <br />, <hr />
    5) 标签可以有属性, 属性值用引号引起来.  //单双引均可.
    6) html文件的后缀名可以是.htm, .html, 前者是老的命名规范, 后者是新的命名规范.
    7) HTML的基础格式是: 有<html>标签包裹, 由头标签<head>和体标签<body>组成.
        <html>
            <head>
                <title>这里写标题</title>
            </head>
            <body>
                //俗称的页面的大白部分
                这里写的是给用户展示信息的地方
            </body>
        </html>
    8) HTML中注释的写法:
        <!--注释的内容-->
    9) 如果涉及到标签的嵌套了, 建议包裹嵌套, 不建议交叉嵌套.

2. HTML标签之字体标签: <font>

属性:
    size:   设置字体大小的, size的值的范围是:1-7, 字体最小的是1.
            //实际开发中, 我们都是通过样式去设置字体大小的, 上述的设置方式一般不用.
    color:  设置字体颜色.
            //可以通过 英文字母 进行设置.
            //也可以通过 RGB 三原色进行设置.  Red:红色, Green:绿色, Blue:蓝色
    face:   设置字体格式的.

3. HTML标签之排版标签:

<h数字>:  标题标签, 数字的范围是:1-6
<p>:        段落标签
<b>:        加粗
<i>:        斜体
<u>:        下划线
<br />      换行符
<hr />      分割线(自带换行功能)

4. HTML标签之列表标签: <ul>,<ol>

无序列表: <ul>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul>

type属性:
        disc:   实心圆点.
        circle: 空心圆点.
        square: 实心正方形.
        
有序列表: <ol>
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ol>

    属性:
        type:
            数字,
            大小写字母,
            大小写罗马数字.
            
        strat: 设置从哪个数字开始, 只针对数字类型有效.
5. HTML标签之图片标签: <img>
属性:
    src:    设置图片的路径.
        注意: 图片路径的问题.
            如果图片在该html文件的上级:    ../表示上一级.
            如果图片和该html文件在同一级: 直接文件名即可.
            如果图片是该html文件的子集:   也是直接写路径即可.
    border: 设置图片的边框.
    height: 设置图片的高度.
    width:  设置图片的宽度.
    alt:    图片不存在的时候显示的内容.
6. HTML标签之超链接标签: <a>
属性:
    href: 超链接的路径.
        相对路径:   跳转项目内部的页面.
        绝对路径:   跳转到外部页面. 需要写: http://
    
    target: 页面的打开方式
        _self:  在自身页面中打开.
        _blank: 新建页面打开.
        _parent:在指定的界面中打开.
            注意: parent是标签名字, 写哪个名字就在哪个标签中打开.
7. HTML标签之表格标签: <table>
属性:
    border:
    height:
    width:
    align: 设置表格居中(center),左对齐(left), 右对齐(right).
    bgcolor: 设置表格的背景色
    
    <tr>:   表示行
    <td>:   表示列
        colspan: 跨列.
        rowspan: 跨行.
    <th>:   表示列, 在<td>的基础上,多了居中和加粗的功能.
    
案例:
    单表格标签的使用. 
    
    表格的嵌套使用.
8. HTML标签之框架标签: <frameset>
<frameset>
属性:
    cols: 纵向切割.
    rows: 横向切割.
    
    <frame>: 切割后的每一个模块.

    
页面布局:
    &nbsp;  空格
    &gt;    大于号
    &lt;    小于号

08-30

1. HTML标签之表单标签: <form>

概述: 就是将现实生活中的表单变为"页面形式"的表单.

A: 表单标签是<form>标签, 写在<form>标签中的标签是: 表单项.
B: 表单项必须放在<form>标签中才能提交.

表单项分类:
    1.输入项:  //输入项都是<input>标签, 根据输入项的类型不同, 输入项也不同.
        //格式: <input type="输入项的类型"/>
        text: 文本框
        password: 密码框
        radio: 单选框      //根据name属性区分是否是同一组数据.
        checkbox: 复选框   //根据name属性区分是否是同一组数据.
        file: 文件框(就是让你选择文件的路径的)
        
        submit: 提交按钮
        reset: 重置按钮
        image: 图片按钮
        button: 普通按钮, 没有任何自带的功能, 功能需要用户自定义.
        hidden: 隐藏域, 例如: 某些信息是指向给后台(程序员)看, 不想提示给用户, 就可以用该输入项.

    2.下拉列表: <select>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>
    
    
    3.文本输入域: <textarea>
        属性: rows:设置行数  cols:设置列数
2. 表单项的属性:
name: 表单项的名称(用于接收数据)
value: 表单项的值.
readonly:只读
默认被选中:
    单选框和复选框: checked
    下拉列表: selected
3. 表单标签的属性:
action: 要提交数据到哪个页面, 默认是提交到当前页面.
    路径的划分:
        绝对路径: 网站外部的页面, 必须写http://
        相对路径: 网站内部的页面.

method: 提交方式
    get:    提交方式不安全, 数据会显示在地址栏中.
            提交的数据有大小限制.
    post:   提交方式相对安全, 数据封装在"请求体"中.
            提交的数据没有大小限制.
扩展:
    标准Http协议支持六种请求方法,即:

    1、GET
    2、POST
    3、PUT
    4、Delete
    5、HEAD
    6、Options

   但其实我们大部分情况下只用到了GET和POST。如果想设计一个符合RESTful规范的web应用程序,则这六种方法都会用到。不过即使暂时不想涉及REST,了解这六种方法的本质仍然是很有作用的。大家将会发现,原来web也是很简洁明了的。下面依次说明这六种方法。

   1,GET:GET可以说是最常见的了,它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现据(如HTML文本,或者图片或者视频等)返回给客户端。GET请求中,永远不会包含呈现数据。

   2,HEAD:HEAD和GET本质是一样的,区别在于HEAD不含有呈现数据,而仅仅是HTTP头信息。有的人可能觉得这个方法没什么用,其实不是这样的。想象一个业务情景:欲判断某个资源是否存在,我们通常使用GET,但这里用HEAD则意义更加明确。

   3,PUT:这个方法比较少见。HTML表单也不支持这个。本质上来讲, PUT和POST极为相似,都是向服务器发送数据,但它们之间有一个重要区别,PUT通常指定了资源的存放位置,而POST则没有,POST的数据存放位置由服务器自己决定。

   举个例子:如一个用于提交博文的URL,/addBlog。如果用PUT,则提交的URL会是像这样的”/addBlog/abc123”,其中abc123就是这个博文的地址。而如果用POST,则这个地址会在提交后由服务器告知客户端。目前大部分博客都是这样的。显然,PUT和POST用途是不一样的。具体用哪个还取决于当前的业务场景。

  4,DELETE:删除某一个资源。基本上这个也很少见,不过还是有一些地方比如amazon的S3云服务里面就用的这个方法来删除资源。

  5,POST:向服务器提交数据。这个方法用途广泛,几乎目前所有的提交操作都是靠这个完成。

  6,OPTIONS:这个方法很有趣,但极少使用。它用于获取当前URL所支持的方法。若请求成功,则它会在HTTP头中包含一个名为“Allow”的头,值是所支持的方法,如“GET, POST”。

  以上的六种方法,我们可以跟数据库的CRUD增删改查操作对应起来: CREATE :PUT READ:GET UPDATE:POST DELETE:DELETE 这样一来就实现了HTTP和数据库操作(其实不光是数据库,任何数据如文件图表都是这样)的完美统一,这也是REST的精髓之一
4. CSS的简介
概述: Cascading Style Sheets, 层叠样式表.
作用:
    用来美化页面的.
    //html相当于人的骨骼, css是给人化妆, js是让人(局部)动起来.
分类:
    行内样式:   //直接写在元素(html的标签)中的样式.
    内部样式:   //写在<head>标签的,<style>标签中.
    外部样式:   //写在后缀名为.css的文件中.
5. CSS的引入方式之: 行内样式.
格式:
    <div style="属性名:属性值; 属性名:属性值"></div>
    
    作用: 只针对于当前元素有效.
6. CSS的引入方式之: 内部样式.
格式: //写在<head>标签的,<style>标签中.
    选择器{
        属性名:属性值;
        属性名:属性值;
    }
作用: 针对于当前页面内的部分元素有效.
7. CSS的引入方式之: 外部样式.
格式: //后缀名为.css的文件中
    选择器{
        属性名:属性值;
        属性名:属性值;
    }
作用: 可以用来统一整个网站的风格.
8. CSS中的选择器:
元素选择器:
    格式:
        元素名{
            属性名: 属性值;
            属性名: 属性值;
        }
    作用: 针对于该类元素有效.

id选择器:
    格式:
        #选择器名{
            属性名: 属性值;
            属性名: 属性值;
        }

    作用: 给指定id(id名和选择器名一样的元素)设置样式的.  
    //记忆: 每个标签都有id属性, id属性尽量保证唯一.

类选择器:
    格式:
        .选择器名{
            属性名: 属性值;
            属性名: 属性值;
        }
    作用: 用来设置某类元素(class属性的值为 选择器名的元素)的样式的.
    
后代选择器:      //理解
    (元素,id,类)选择器 元素名{
        //样式
    }
    作用: 设置指定的元素内的 指定的"子标签"的样式的.
    
伪类选择器:  //理解
    a:link{}        //未选中连接
    a:active{}      //选定的链接
    a:visited{}     //已访问的链接
    a:hover{}       //鼠标移动到链接上
    
    作用: 主要用来操作超链接的.
9. CSS的样式
背景: 
    background-color: 设置背景色 
字体:
    font-size: 设置字体大小
文本:
    text-decoration:将其值设置为:none,可以取消超链接字体的下划线.
    color: 设置字体的颜色
边框:
    border: 1px solid blue;     //1像素, 蓝色实线
        //solid: 单实线, double:双实线  dotted:(点)虚线 dashed:(-)虚线
    width: 设置标签的宽度
    height: 设置标签的高度
10. CSS的浮动
概述: 通常情况下页面的布局: 从上往下逐行分布. 有些时候我们需要页面中的布局方式是从左往右, 或者从右往左之类的自定义页面布局, 
      就需要用到: 窗体浮动.
    float: //设置浮动.
        属性值: left, right
    clear: //清除浮动.
        属性值: both
11. CSS的盒子模型
概述: 也是用于布局的. 正常的一个页面可能有多个div, 每个div的里边可能有其他元素
     (元素和div之间的间距叫内边距), div与div之间有可能也是有间隙的(外边距).
外边距: margin
内边距: padding

margin: 值1 值2 值3 值4;        //离上,右,下,左的间距分别是: 值1 值2 值3 值4;
margin: 值1(上下) 值2(左右);  //离上,右,下,左的间距分别是: 值1 值2 值1 值2;
margin: 值1;                 //离上,右,下,左的间距分别是: 值1 值1 值1 值1;
如果说不足以满足四个边距的值, 参考: 上左.

相关文章

  • Web基础(08-29~08-30)

    08-29 1. HTML简介 概述: Hyper Text MarkUp Language, 超文本标记语言. ...

  • java web目录

    java web目录 web编程基础web编程进阶(一)web编程进阶(二)web编程原理

  • Web页面制作基础

    Web页面制作基础 说明:仅作为学习辅助 那么Web页面制作基础,能让你掌握什么呢? 第一节掌握Web基础知识。 ...

  • Web页面制作基础

    Web页面制作基础 说明:仅作为学习辅助 那么Web页面制作基础,能让你掌握什么呢? 第一节掌握Web基础知识。 ...

  • 08-29

    真的要努力啊!看着别人都在进步,该着急起来了!!很多事都要学会拒绝,没有这个金刚钻,就不要揽瓷器活。不然就要蜜汁尴...

  • 08-30

    怎么办,怎么办,怎么办...... 心里慌的一绝。 现在下午2点了。 今天的文章还没有写。 上午看ps教程,练p图...

  • 图解HTTP-Web和网络基础

    Web和网络基础 Web(Web就是在Http协议基础之上, 利用浏览器进行访问的网站)使用Http的协议作为规范...

  • web前端入门基础

    web前端基础笔记 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了...

  • HTML基础学习笔记

    原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...

  • Web 测试(1) | Web 原理与 Web 测试基础

    Web测试基础 I. 如何开展Web测试 Web测试的对象 Web的页面元素 Web的业务逻辑 Web的数据行为 ...

网友评论

      本文标题:Web基础(08-29~08-30)

      本文链接:https://www.haomeiwen.com/subject/zfwswftx.html