Web基础 HTML CSS JS JQuery AJAX
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
相关文章
- JS框架_(JQuery.js)动画效果鼠标跟随
- JS框架_(JQuery.js)点赞按钮动画
- JS框架_(JQuery.js)带阴影贴纸标签按钮
- JS框架_(JQuery.js)图片相册掀开切换效果
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
- 解决同一页面jQuery多个版本或和其他js库冲突方法
- 三角形垂点坐标js算法(三点定圆求圆心)
- 当当网上书店头部和尾部——JS源码
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
- A2D JS框架 - AOP封装
- js/jquery/插件表单验证
- [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
- jQuery温习篇---强大的JQuery选择器
- js点击 随机跳转
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- atitit.判断时间重叠方法总结 java c++ c#.net js php
- 原生js实现随机验证码HTMl-JS
- js_jQuery【下拉菜单联动dom操作】
- js 分页插件(jQuery)
- jquery属性的相关js实现方法
- Moment.js获取当前时间格式化
- 2022年最新最详细的安装Node.js以及cnpm(详细图解过程、绝对成功)
- js-jquery-SweetAlert2【二】配置与方法
- js-jquery-SweetAlert【一】使用
- FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题
- 正则js
- i18n 和 基于js的网页多语言框架 jquery.i18n的介绍