网页编程设计HTML&CSS&JS

网页编程设计
    B/S架构    Browser浏览器    Server服务器

HTML-CSS-JavaScript-JQuery

注意：(jquery是对js的封装)     

        html：请求头

200 (OK): 找到了该资源，并且一切正常。
◆304 (NOT MODIFIED): 该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。
◆401 (UNAUTHORIZED): 客户端无权访问该资源。这通常会使得浏览器要求用户输入用户名和密码，以登录到服务器。
◆403 (FORBIDDEN): 客户端未能获得授权。这通常是在401之后输入了不正确的用户名或密码。
◆404 (NOT FOUND): 在指定的位置不存在所申请的资源
————————————————
版权声明：本文为CSDN博主「popAnt」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kfanning/article/details/6062118

HTML锚点
设置两个a标签（底部的a标签的herf指向想要跳转的a标签位置）
<img>图片标签</img>

form表单--向服务器提交数据
<form></form>
    <form标签常用属性>
        id属性用来标识元素的唯一性（所有标签都有的属性）
        name属性提交数据时的参数名
        class属性设置元素的样式名
        action属性=“提交的地址”        
        method=提交的方式
            POST提交（参数不会跟在地址栏后边）
            GET提交不那么安全（参数会跟在地址栏后边）GET请求有缓存所以请求速度比POST请求快

    
form表单中的元素

    input标签
    文本框<input  type="text" value= "lisisi" readonly="readonly"></input>
        name属性    （单选框和复选框需要通过设置一样的name设置为一组）
        type是元素的类型
        value元素的值
        readonly只读状态
        mxlength最多输入的长度
        disabled禁用标签
        没有name属性无法提交数据
        type=:
            (文本框text
            密码框password
            单选框radio
            复选框checkbox
            隐藏域：hidden
            文件域：file
            普通按钮button
            提交按钮submit
            重置按钮reset
            日期框date）
            
    如果是上传文件的表单需要设置一个属性
        enctype="multionparrt/form-data"提交方式为POST

            下拉框select：下拉框的标签
            下拉框的选项option
                multiple设置下拉框可多选
                size下拉框可见选项数
                selectd默认选中项
                disabled禁用某个选项
                option：常用属性
                value：提交给服务器的值，如果没有设置value那么提交的提交的是option属性的文本值

<table bordr="1" width = 500px  style="border-collapse:collapse">
        <tr>
                <th></th>
        </tr>
</table>


    table    表示表格
    
        tr表示表格中的行 (每一行可以包含多一个或者多个td或者th)
     
        td表示表格中的标准单元格
    
        th表示表格中的表头单元格（具有标题效果，字体加粗，居中显示）

    table常用属性：
            bordr表格边框
            width表格宽度
            style="border-collapse:collapse"合并边框

CSS掠过

JavaScript语言     

        面向对象的解释型语言，客户端脚本语言，主要目的是验证发往服务器的数据，增加web互动，加强用户体验度

        ECMAScript(基础语法)

                JavaScript的核心语法ECMAScript 描述了该语言的语法和基本对象

        DOM(文档对象模型 )

                文档对象模型（DOM） —— 描述了处理网页内容的方法和接口

        BOM(浏览器对象模型 )

                浏览器对象模型（BOM） —— 描述了与浏览器进行交互的方法和 接口

浏览器： Chrome

2. 开发工具： Hbuilder X  cs

3. 进入浏览器控制台 Console ： F12

控制台的作用 :

console 对象代表浏览器的 JavaScript 控制台，用来运行

avaScript 命令，常常用来显示网页运行时候的错误信息。

Elements 用来调试网页的 html 和 css 代码。

JS 需要和 HTML 一起使用才有效果，我们可以通过直接或间接的方式将JS 代码嵌入在 HTML 页面中。

行内JS : 写在标签内部的js代码

        

<button onclick="alert('you clicked hered!!!')">
click here</button>

内部JS : 定义在script标签内部的js代码

<script type="text/javascript" charset="utf-8">
 alert('this is inner js code')
</script>

外部JS : 单独的js文件，在HTML中通过script标签引入

        注意：如果srcipt标签设置了src属性，则在srcipt标签中写的js代码无效

<!-- 在需要使用js的html页面中引入 -->
<script src="js/hello.js" type="text/javascript"
charset="utf-8"></script>

        我们可以将JavaScript 代码放在 html 文件中任何位置，但是我们一般放在网页的 head 或者 body 部分。由于页面的加载方式是 从上往下依次加载 的，而这个对我们放置的 js 代码运行是有影响的。 放在部分，最常用的方式是在页面中 head 部分放置

        

数据类型

虽说 JS 是弱类型语言，变量没有类型，但数据本身是有类型的。针

对不同的类型，我们可以进行不同的操作。

JavaScript 中有 6 种数据类型，其中有五种简单的数据类型：

Undefifined 、 Null 、 布尔 、 数值 和 字符串 。一种复杂数据类型 Object    

        数 值（ Number ）： 整数和小数（比如 1 和 3.14 ）

        字符串（String ）： 字符组成的文本（比如 "Hello World" ）

        布尔值（Boolean ）： true （真）和 false （假）两个特定值

        Undefined：       表示 “ 未定义 ” 或不存在，即此处目前没有 任何值

        Null：   表示空缺，即此处应该有一个值，但目前 为空

        对象（object ） ( 引用 ) ： 各种值组成的集合

          1、对象（ object ） {name:”zhangsan”,age:”18”}

          2、数组（ array ） [1,2,3]

          3、函数（ function ） function test() {}