网页编程设计HTML&CSS&JS

墨绿623

已于 2023-04-20 23:21:31 修改

阅读量137

点赞数

文章标签： html 前端 javascript

于 2023-04-20 15:53:17 首次发布

本文链接：https://blog.csdn.net/weixin_59990602/article/details/130263414

版权

本文介绍了网页编程的基础，包括B/S架构，HTML用于结构，CSS用于样式，JavaScript和JQuery用于交互。还涉及HTTP状态码如200,304,401,403,404，以及表单元素如input类型和form属性。此外，讨论了DOM和BOM在处理网页内容和浏览器交互中的作用，提到了Chrome浏览器和开发者工具的使用，以及JavaScript的插入方式和数据类型。

摘要由CSDN通过智能技术生成

网页编程设计
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() {}