Web基础 HTML CSS JS JQuery AJAX

时间：2022-12-29 07:45:45

1. Web基础 网页的骨骼HTML

什么是HTML
超文本标记语言：Hyper Text Markup Language

这都不重要，重要的是：
HTML是Web网页的基本组成部分
HTML中定义的元素，决定了网页的内容和结构

Python：编程语言，编写程序
HTML：标记语言，像画画一样，画出网页的内容

基本结构
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

常用标签
单标签、双标签
<meta charset="UTF-8"/>
<title>我是一个标题</title>

块级标签、內联标签
<h1>我是一号标题</h1>，块级
<h6>我是六号标题</h6>，块级
<p>我是一个默默无闻的段落</p>，块级
<a href="http://zhanghonglun.cn" target="_blank">带你去一个好地方</a>，内联
<img src="logo.png" width="200" height="200"/>，内联
<br/>
<div>我是块级元素</div>
<span>我是内联元素</span>

表格：table、tr、th、td
列表：ul、ol、li
下拉：<select><option></option></select>

元素的属性
id、class、style
<a href="#id">跳转到某个id的元素</a>

HTML注释
<!-- 这是一个注释 -->

表单
<form action="" method="post">
用户名 <input type="text" placeholder="默认文本" name="username"/>
密码 <input type="text" placeholder="密码" name="password"/>
一大段文本 <textarea rows="10" cols="10" placeholder="想说的话" name="content"></textarea>
<button type="submit">登陆</button>
</form>
input的type：button、checkbox、color、date、datetime、email、file、month、number、password、radio、range、submit、text、time

HTML颜色
十六进制：#FFF
RGB：rgb(255, 255, 255)，rgba(255, 255, 255, 1)
颜色名称：red，green，blue

DOM
文档对象模型：Document Object Model

HTML5
新标签：canvas、svg、audio、video、embed
svg：http://www.runoob.com/svg/svg-tutorial.html
canvas：http://zhanghonglun.cn/blog/canvas初探：基本语法

新的语义元素：header、nav、section、article、aside、figcaption、figure、footer

新功能：元素拖放、地理定位、video、audio、更丰富的input type、Web存储（localStorage和sessionStorage）

HTML补充学习
http://www.runoob.com/html/html-tutorial.html

2. Web基础 网页的血肉CSS

什么是CSS
层叠样式表：Cascading Style Sheets

这都不重要，重要的是：
CSS决定了如何显示HTML元素

基本结构
选择器 + 样式（key: value）
p {
color: red;
font-size: 20px;
}

使用CSS
引入外部.css文件
在html中定义css
在元素中使用内联css

常用选择器
元素名
id
class
后代选择器
子元素选择器
相邻兄弟选择器、普通相邻兄弟选择器
伪类

常用样式
背景：background-color、background-image、background-repeat、background-size、background-attachment、background-position
大小：width、height
大小单位：px、%、em
文本：color、text-align、text-decoration、text-indent、line-height、font-size、font-family
留白：margin、padding
边框：border、border-radius、box-shadow
显示：display
定位：static、fixed、relative、absolute、float

CSS注释
/* 这是一个注释 */

CSS3
新属性：渐变、transform（translate、rotate、scale、skew、matrix）、transition、animation（keyframes）
新功能：加载想要的字体

实例
美化一个button、添加hover动画效果

CSS补充学习
http://www.runoob.com/css/css-intro.html

什么是JS
HTML中的脚本编程语言：JavaScript，但和Java毛关系没有

这都不重要，重要的是：
JS决定了如何动态改变HTML元素

使用JS
在html中使用js
引入外部.js文件

内容
document.write()
变量var：数值、字符、数组、字典/对象
document.getElementById()
onclick="myFunction()"
innerHTML
console.log()
运算符、条件、循环
注释
函数
作用域
事件

3. Web进阶 比JS更方便的JQuery
简介
JQuery是一个JS库
极大地简化了JS编程
JQuery很容易学习

引入
下载下来并引入：http://jquery.com/download/
直接引用CDN： http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js

语法
$(document).ready(function(){});
$('选择器').action();

选择器可以是：元素名、id、class、子元素选择器、后代元素选择器、（相邻）兄弟选择器、属性选择器、this
action可以是：click、dbclick、mouseenter/leave/over/out、hover、keypress/up/down、change、focus、blur，效果和动画，DOM操作

效果：hide、show、toggle，fadeIn、fadeOut、fadeToggle、slideUp、slideDown、slideToggle
动画：animate
回调（callback）：完成某一函数之后再执行的操作
JQuery链（Chaining）：连续写多个action

DOM操作
获取和设置内容：text()、html()、val()
获取属性：attr()
添加元素：append()、prepend()、before()、after()
删除元素：remove()、empty()
获取和设置属性：css()
遍历和关系：each()、parent()、children()、find()、siblings()

AJAX
异步 JavaScript 和 XML（Asynchronous JavaScript and XML）

JQuery补充学习
http://www.runoob.com/jquery/jquery-tutorial.html

Web基础 HTML CSS JS JQuery AJAX的更多相关文章

  1. 了解HTML&sol;CSS&sol;JS&sol;JQuery&sol;ajax等前端知识

    什么是HTML 超文本标记语言 浏览器通过识别相应的标签来加载页面 通过HTTP协议传输,不是编程语言 HTML常用标签 title script style link meta link body ...

  2. JS jquery ajax 已看1 有用

    4.form中的input可以设置为readonly和disable,请问2者有什么区别? readonly不可编辑,但可以选择和复制:值可以传递到后台 disabled不能编辑,不能复制,不能选择: ...

  3. 实现简单的PHP接口，以及使用js&sol;jquery ajax技术调用此接口

    主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[‘ ...

  4. NodeJ node&period;js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  5. 基于原生的 html css js php ajax做的一个 web登录和注册系统

    完整代码下载: 百度网盘地址 https://pan.baidu.com/s/1D1gqHSyjgfoOtYCZm7ofJg 提取码 :nf0b 永久有效 注意: 1 如果要正常运行此示例, 本地需要 ...

  6. web基础（五）Jquery

    jQuery是一个快速的,简洁的javaScript库(占空间特别小,但功能强大!兼容性极强!),这个库里封装了一些方法,使用户能更方便地处理HTMLdocuments.events.实现动画效果,并 ...

  7. css&comma;js&comma;jquery的载入方式和属性控制

    本文章主要总结了css,js,jQuery在编写程序时的载入方式,与属性控制方式html和css共同组成了一个最基础的网页,js为标签样式提供动态效果 一,css的载入方式与属性控制 1.1,css引 ...

  8. jQuery&period;form&period;js jQuery ajax异步提交form

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...

  9. JAVA WEB基础巩固之Json、Ajax

    一.Json(Json介绍)json校验工具 Json是JavaScript object notation的缩写,优点是易读易编写易于解析: 例如:Object: { "name&quot ...

随机推荐

  1. MVVM模式下弹出窗体

    原地址:http://www.cnblogs.com/yk250/p/5773425.html 在mvvm模式下弹出窗体,有使用接口模式传入参数new一个对象的,还有的是继承于一个window,然后在 ...

  2. Apache Spark源码走读之23 -- Spark MLLib中拟牛顿法L-BFGS的源码实现

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本文就拟牛顿法L-BFGS的由来做一个简要的回顾,然后就其在spark mllib中的实现进行源码走读. 拟牛顿法 数学原理 代码实现 L-BFGS算法中使 ...

  3. 剑指Offer&colon;面试题20——顺时针打印矩阵&lpar;java实现&rpar;

    题目描述: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数 字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1, ...

  4. &lbrack;Git&rsqb; Github上传新repository后自动合并

    原因是新repository中有个与老repository一模一样的名字为".git"的隐藏文件夹,删去后即可: 将整个工程直接复制粘贴出此错误...好蠢: Github控制项目的 ...

  5. JS 无提示关闭当前窗口

    function teseClose() { window.opener = null; window.open('','_self'); window.close(); }

  6. Omi框架学习之旅 - Hello World 及原理说明

    学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello e ...

  7. python 发包爬取中国移动充值页面---可判断手机号是否异常

    1.用requests.Session()的方式,可以实现自动化管理cookie.session等. 2.具体流程可以抓包分析. 所有请求的参数如要搞清楚需要分析js源码.只能提示一下,一共分为三步: ...

  8. BZOJ1951 &lbrack;Sdoi2010&rsqb;古代猪文 中国剩余定理 快速幂 数论

    原文链接http://www.cnblogs.com/zhouzhendong/p/8109156.html 题目传送门 - BZOJ1951 题意概括 求 GM mod 999911659 M=∑i ...

  9. Cookie深度解析

    最近在公司做了Web端单点登录(SSO)功能,基于Cookie实现,做完之后感觉有必要总结一下,本文着重讲解Cookie,下文会说明单点登录的实现方案. Cookie简介 众所周知,Web协议(也就是 ...

  10. vue实例生命周期详解

    每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实 ...

相关文章