Web基礎 HTML CSS JS JQuery AJAX

時間 2019-11-30

標籤 web 基礎 html css jquery ajax 欄目 HTML 简体版

原文原文鏈接

1. Web基礎網頁的骨骼HTMLcss

什麼是HTML
超文本標記語言：Hyper Text Markup Languagehtml

這都不重要，重要的是：
HTML是Web網頁的基本組成部分
HTML中定義的元素，決定了網頁的內容和結構jquery

Python：編程語言，編寫程序
HTML：標記語言，像畫畫同樣，畫出網頁的內容編程

基本結構
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>canvas

經常使用標籤
單標籤、雙標籤
<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>session

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

元素的屬性
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