Web编程笔记–前端篇

最新推荐文章于 2025-12-25 14:15:18 发布

原创最新推荐文章于 2025-12-25 14:15:18 发布 · 323 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web编程

本文是关于Web前端编程的笔记，涵盖HTML、CSS、JavaScript和jQuery的基础知识。讨论了网页与网站的区别，静态与动态网页，DOM树的概念，以及HTML语法中的图片插入、超链接、iframe、表单创建等。还提到了Data URI方案作为图片内嵌的解决方案，并对比了GET和POST方法。

Web编程笔记–前端篇

本文参考链接：https://blog.csdn.net/shadow_zed/article/details/93848314
这是根据老师给的资料和自己查找的资料整理出来的笔记，期末复习自用。因为博主是信息安全专业，所以内容有一些会和本专业相关。

Web前端语言

HTML和带样式的HTML

构成一个最基本的网页，已经包含了网页常见的元素，HTML3.0中引入了对网页样式的定义。

CSS

CSS，又称叠层样式表，能够对网页中的对象的位置排版进行像素级的精确控制，实现基础的静态的交互设计；而CSS目前的最新版本CSS3能够真正做到网页表现与内容分离。

JavaScript

Javascript就是用来给HTML网页增加动态功能，实现更丰富的交互。

jQuery

是一个优秀的Javascript库。使用户能更方便地处理HTML，保持代码和内容分离,通过jQuery，可以不用在HTML里面插入一堆JS来调用命令，只需要定义ID即可。

网页与网站的区别

网页
Web页面，即在浏览器上显示的页面。
网站
一系列由通过各种链接关系关联起来的有共同主题的网页的集合体，包括主页以及由主页或子网页所跳转到的所有子网页
主页
网站的入口页面，其中包含指向其他页面的超链接。通常主页的名称是固定的，例如：index.html或default.html

静态网页与动态网页

静态网页
由HTML直接书写，不能够在客户端与服务器端进行交互的网页
静态网页的扩展名为.html或.htm
动态网页
包含需由Web服务器执行的代码的静态网页包，能够在客户端与服务器端进行交互；
网页的扩展名依据所用的服务端编程语言来定，如.php, .jsp, .aspx
全部由静态页面组成的网站称为静态网站；包含有动态网页的网站称为动态网站

DOM树

DOM 是 JavaScript 与页面内容进行交互的接口。
HTML 文档可描述成一个 DOM 树，如图：
在这里插入图片描述

HTML

HTML语法笔记

文档类型声明<!DOCTYPE>

文档类型由<!DOCTYPE>标签来声明，该标签主要用于说明所使用的HTML是什么版本以及声明用于浏览器进行页面解析用的DTD(文档类型定义)文件。例如：

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  
     4.01 Transitional//EN"  
    "http://www.w3.org/TR/html4/loose.dtd">

当然也可以简写为：

<!doctype html>

另：HTML标签不区分大小写

标签：插入图片

基本语法： <img src=”图片文件路径”>
常用属性:

属性	描述
src	指定图片源文件所在路径(必设属性)
alt	设置图片替换信息，当图片不能显示时，显示该信息
title	设置图片描述信息，当鼠标移到图片上时弹出该信息
width	设置图片的宽度，单位主要是像素
height	设置图片的高度，单位主要是像素
hspace	设置图片与相邻对象之间的左右间距
vspace	设置图片与相邻对象之间的上下间距
align	设置垂直方向对齐方式

图片文件路径

相对路径
指相对于当前文件的路径

图片和当前文件在同一目录下：输入图片文件名
图片和当前文件的下一级目录：下一级目录名/图片文件名
图片在当前文件的上一级目录：…/图片文件名

绝对路径
指文件的完整路径

观察下面三种文件url路径

src= "https://www.example.com/1.jpeg"
src="http://www.example.com/1.jpeg"
src="www.example.com/1.jpeg"

它们使用的协议不同。
其中，HTTP协议属于**明文传输**的协议，可能导致网页传输的对象被恶意节点篡改。

解决方案：Data URI 方案

你可以在这个网址中拖入一张图片生成Data URL。
通常情况下我们在 HTML 页面中表示一张图片，会用一个 img 标签，然后将其 src 属性指向服务端的一个地址，每个 img 标签都会是一次请求；
但是用了 Data URI 技术，将图片编码成字符串 “内嵌” 入 HTML 代码中，然后在客户端完成解码工作，就不用进行 HTTP 请求了。
Data URI 不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次，可以把 Data URI 用在 CSS 文件的background-image，使其随css文件一同被浏览器缓存起来。
缺点

Base64 编码的数据体积通常是原数据的体积 4/3，也就是 Data URL 形式的图片会比二进制格式的图片体积大 1/3
移动端不宜使用 Data URI 技术（解码耗 CPU）

超链接和iframe

浮动框架iframe标签

基本语法：<iframe src="http://www.baidu.com" ></iframe>
注意此处要使用闭合标签，否则后面的代码均会失效

超链接

基本语法：<a href="目标端点">源端点</a>
源端点：指网页中的提供链接单击的对象，如链接文本或链接图像
目标端点：指链接跳过去的页面或位置，如某网页、书签等

实例代码：

    <!--外部链接-->
        <a href="https://isabella-swan.github.io" title="open my blog" id="blog">my blog</a>
    </br>
    <!--脚本链接-->
        <a href="javascript:alert('welcome to my site!')">Welcome</a>
    </br>
    <!--文件下载链接-->
    <a href="image/some notes.docx">download</a>

超链接中有一个target属性，可以设置超链接目标窗口。将target值设置为iframe的name值，就可以连接到网页中浮动窗口。

创建表单

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）
novalidate	规定浏览器不验证表单
target	规定 action 属性中地址的目标（默认：_self）

GET和POST方法的比较

	GET	POST
提交方式	将表单数据以HTTP头的形式附加到URL地址后	以HTTP正文体形式发送
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）
对数据长度的限制	有限制	GET 方法向 URL 添加数据，而URL 的长度是受限制的
对数据类型的限制	只允许 ASCII 字符	没有限制，也允许二进制数据
安全性	安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
历史	参数保留在浏览器历史中	参数不会保存在浏览器历史中
可见性	数据在 URL 中对所有人都是可见的	数据不会显示在 URL 中
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存

输入标签

基本语法：<input type="type_name" name="field_name"/>
type属性值

属性值	描述
text	设置单行文本框元素
password	设置口令元素，输入的口令将被加密。
file	设置文件元素
hidden	设置隐藏元素
radio	设置单选按钮元素
checkbox	设置复选按钮元素
button	设置普通按钮元素，响应用户自定义的事件,如果不指定onclick等事件处理函数，它不做任何事情。
submit	设置提交按钮元素，单击后将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理
reset	设置重置按钮元素
image	设置图像提交按钮元素

button示例代码：

<input type="button" name="add" value="新增" onclick="add()"/>
        <input type="button" name="delete" value="删除" onclick="delete()"/>

显示结果：
在这里插入图片描述

(未完待续）

标签

#web #html #css #js