淺談HTML.CSS與JS

一 HEML簡(jiǎn)要分析

1.HTML介紹

HTML:超文本標(biāo)記語(yǔ)言源请,主要作用是用來(lái)編寫網(wǎng)站頁(yè)面。

超文本:文本是含有完整含義的文字組成的段落或者文件川无,超文本是在表達(dá)形式上超出文字范圍:

超鏈接,含有跳轉(zhuǎn)的對(duì)象,圖片悦昵,聲音,視頻

標(biāo)記:指的的HTML的代碼風(fēng)格晌畅,HTML依賴標(biāo)簽進(jìn)行內(nèi)容的表述:

標(biāo)簽:分為單標(biāo)簽和雙標(biāo)簽

單標(biāo)簽

<標(biāo)簽名稱?屬性=”值”>

雙標(biāo)簽

<標(biāo)簽名稱?屬性=”值”></標(biāo)簽名稱>

HTML基本結(jié)構(gòu):

創(chuàng)建一個(gè)txt文件

在index.txt當(dāng)中輸入下面的代碼

<html>

?????????<head>

???????????????????<title>

?????????????首頁(yè)

???????????????????</title>

?????????</head>

?????????<body>

?????????????????<h1> hello world </h1>

?????????</body>

</html>

修改index.txt的后綴為.html

雙擊但指,在瀏覽器里看到了hello?world的界面

1、 html標(biāo)簽是HTML文件的最大一個(gè)標(biāo)簽抗楔,也被稱為根標(biāo)簽

2棋凳、 html的標(biāo)簽通過(guò)嵌套來(lái)聲明層級(jí)

3、 在html標(biāo)簽內(nèi)部把整個(gè)html分為了頭部(head標(biāo)簽)和內(nèi)容部分(body部分)

4连躏、頭部負(fù)責(zé)聲明頁(yè)面的屬性剩岳,title就是頁(yè)面的標(biāo)題

5、 內(nèi)容部分負(fù)責(zé)頁(yè)面上的內(nèi)容

編寫的規(guī)范:

1入热、 html標(biāo)簽大小寫不區(qū)分拍棕,約定俗成使用小寫

2、 寫標(biāo)簽的時(shí)候勺良,先寫完整再填充內(nèi)容

2.常用的HTML標(biāo)簽

1)h標(biāo)簽

標(biāo)題標(biāo)簽绰播,一共是h1-h6六個(gè)等級(jí),再html當(dāng)中代表標(biāo)題尚困。

2)文本常用標(biāo)簽

p標(biāo)簽,文本標(biāo)簽蠢箩,通常用來(lái)存放文字,一個(gè)p占一行,html當(dāng)中大段的文字通常是用p標(biāo)簽表示的谬泌。

<br> 換行標(biāo)簽(單標(biāo)簽)

<hr>獨(dú)立一行的一條線

&nbsp; HTML空格的代表符號(hào)滔韵,一次代表一共空格,文本當(dāng)中敲多少個(gè)連續(xù)的空格呵萨,都代表一個(gè)空格奏属。

&lt; >, &gt; <

3)文本修飾標(biāo)簽

i?傾斜具有語(yǔ)句含有潮峦,表示強(qiáng)調(diào)囱皿。

em 傾斜只是傾斜

b?加粗只是加粗,沒(méi)有特殊函數(shù)忱嘹,只是文本樣式

strong?加粗嘱腥,這個(gè)加粗帶有強(qiáng)烈的強(qiáng)調(diào)涵義。

u 下劃線下劃線

del 刪除線

案例:

<h1>有一些鏡頭溫暖洋溢h1><hr>10月16日拘悦,皮海云在江西新干黎山林場(chǎng)連坑分場(chǎng)向記者介紹林地情況齿兔。<br>今年<strong>49歲strong>的皮海云是江西省吉安市新干縣黎山林場(chǎng)的護(hù)林員,<u>1989年u>起開始從事護(hù)林础米、育林工作分苇。他在林區(qū)巡視平均每天要走<strong>20多公里strong>,30年的時(shí)間里累計(jì)行走<strong>20余萬(wàn)公里strong>屁桑,黎山林場(chǎng)處處留下他的足跡医寿。<br>30年來(lái),皮海云看護(hù)的林區(qū)從未發(fā)生過(guò)大面積森林病蟲害蘑斧,以及重大侵占林地等案件靖秩。皮海云多次被林場(chǎng)評(píng)為勞動(dòng)模范、優(yōu)秀共產(chǎn)黨員竖瘾,<i>還于2018年榮獲新干縣“十佳最美職工”稱號(hào)i>沟突。

4)盒子標(biāo)簽

Html布局歷史:

在最初html流行表格布局類似于現(xiàn)在的簡(jiǎn)歷模板,將整個(gè)頁(yè)面看成一共表格捕传,然后進(jìn)行表格的合并惠拭,最后形成網(wǎng)頁(yè)布局。

后來(lái)隨著網(wǎng)絡(luò)的發(fā)展乐横,表達(dá)的形式越來(lái)越復(fù)雜求橄,表格布局有寫蒼白,就有了新的布局方式葡公,盒子布局罐农,將整個(gè)頁(yè)面看作一共盒子,在里面嵌套小盒子催什,通過(guò)描述盒子的位置涵亏,邊框,邊距進(jìn)行布局。

div?就是盒子模型一個(gè)元素气筋,頻繁使用在網(wǎng)頁(yè)布局中

span?文本標(biāo)簽拆内,和p標(biāo)簽相比,span不換行

不寫標(biāo)簽宠默,文字也不換行麸恍,但是當(dāng)我們的一行文字有多種樣式:

Hello

這個(gè)時(shí)候就需要用到span對(duì)文字做劃分

5)圖片(image)標(biāo)簽(單標(biāo)簽)

Image 圖片,鏡像搀矫,html當(dāng)中的圖片標(biāo)簽采用的是image的縮寫img

和上面的標(biāo)簽相比抹沪,我們?cè)趫D片標(biāo)簽就要接觸到標(biāo)簽的屬性了。

<img>

src?圖片地址

可以使用絕對(duì)路徑

Windows下以盤符開頭 D:\\

Linux下以根開頭/usr/root/

也可以使用相對(duì)路徑

指的是以當(dāng)前文件為參照瓤球,其他文件的位置

./當(dāng)前路徑默認(rèn)可以不寫

../代表上一層

/ 項(xiàng)目的根目錄

當(dāng)前代碼中的路徑指的是當(dāng)前文件目錄下的img下的bk.jpg圖片

alt?圖片加載失敗的提示文字

title?圖片的提示文字

height?圖片高度

weight 圖片寬度

1融欧、 單獨(dú)設(shè)置圖片的高度或者寬度,html會(huì)自動(dòng)的對(duì)圖片進(jìn)行等比例縮放卦羡,圖片不會(huì)發(fā)生變形

2噪馏、高度和寬度的設(shè)置單位通常是像素(px),但是也可以用百分比绿饵,但是需要借助樣式

6)超鏈接標(biāo)簽

我們單純文本表述欠肾,就不需要有過(guò)多的屬性,比如:span,h,p,br,hr

如果是超文本就需要屬性:圖片需要地址拟赊,標(biāo)題董济,錯(cuò)誤提示,高寬

在HTML當(dāng)中a標(biāo)簽是超鏈接標(biāo)簽要门,a標(biāo)簽是一共雙標(biāo)簽

<a></a>

超鏈接也是超文本,所以a標(biāo)簽也是需要參數(shù):

href:超鏈接的地址廓啊,鏈接到哪里(超鏈接不只可以使用文本作為內(nèi)容欢搜,也可以是其他類型)

target: 代表打開鏈接的方式

https://www.baidu.com/

Target參數(shù)默認(rèn)a標(biāo)簽打開網(wǎng)頁(yè)是在當(dāng)前頁(yè)面打開當(dāng)target=”_blank”就會(huì)先打開一個(gè)空白頁(yè),在空白頁(yè)上打開鏈接

href在網(wǎng)頁(yè)開發(fā)當(dāng)中谴轮,還可以進(jìn)行錨點(diǎn)操作

1炒瘟、在需要跳轉(zhuǎn)到的標(biāo)簽上設(shè)置id屬性,id是標(biāo)簽的標(biāo)識(shí)屬性第步,在一個(gè)頁(yè)面當(dāng)中疮装,id值不可以重復(fù)

2、 給a標(biāo)簽的href屬性使用#id名稱的形成進(jìn)行指出

3粘都、]這樣就達(dá)成了效果

7)列表標(biāo)簽

有序列表

<ol type="a" start="2"> ? <li></li> ? </ol>

有序列表廓推,之所以被稱為有序列表,因?yàn)榍懊娴臉?biāo)識(shí)是有順序的序列翩隧,默認(rèn)使用數(shù)字樊展,也可以通過(guò)type屬性進(jìn)行跳轉(zhuǎn)

Type:

a ?代表小寫字母

i ?代表小寫羅馬數(shù)字

A??代表大寫字母

I??代表大寫的羅馬數(shù)字

1??代表數(shù)字默認(rèn)

有序列表的前面的符號(hào)只有以上幾種,不可以自定義,但是可以自定義前面標(biāo)識(shí)的開始字符专缠,需要用到start屬性

無(wú)序列表

<ul> ? <li></li> ? </ul>

無(wú)序列表也有type屬性雷酪,

disc?實(shí)心圓點(diǎn)

circle 空心圓點(diǎn)

square?實(shí)現(xiàn)方塊

自定義列表

<dl>

? ? ? ? <dt></dt>

</dl>

1、 自定義列表沒(méi)有前面的字符

2涝婉、自定義列表可以按照需求進(jìn)行縮進(jìn)

3哥力、通常會(huì)用作導(dǎo)航欄

4、有序或者無(wú)序列表是可以嵌套的

8)表格標(biāo)簽

table這里學(xué)習(xí)表格正是上午講述的表格墩弯。

tr 行

td 列

在html當(dāng)中吩跋,我們通常說(shuō)一行幾列,就代表著行里面包含著列

1最住、table標(biāo)簽钞澳,本身有caption標(biāo)簽,作為表格的標(biāo)題涨缚,標(biāo)題居中顯示

2轧粟、 table有一系列的屬性

????1、 cellspacing 單元格和單元格之間的距離

????2脓魏、 cellpadding?單元格和內(nèi)容的距離

????3兰吟、 width?表格的寬度

????4、 height?表格的高度茂翔,由于數(shù)據(jù)條數(shù)不固定混蔼,所以通常不設(shè)置高度

html標(biāo)簽屬性之間用空格分開

3、 tr和td也有參數(shù)

????align?水平對(duì)齊?left?center?right 左中右

????valign 垂直對(duì)齊top middle bottom 上中下如果表格沒(méi)有設(shè)置高度珊燎,展示不明顯

4惭嚣、 th是一種特殊的td,通常用來(lái)寫字段名稱悔政,相比較一般的td晚吞,th對(duì)文字自動(dòng)執(zhí)行居中加粗

5、表格合并

colspan 跨列合并(水平合并)設(shè)置當(dāng)前單元格占用幾列高度

rowsapn 跨行合并(垂直合并)設(shè)置當(dāng)前單元格占用幾行寬度

9)表單標(biāo)簽

之前的內(nèi)容都是為了在html上向用戶展示數(shù)據(jù)谋国,但是沒(méi)有獲取用戶數(shù)據(jù)的地方槽地,問(wèn)題是web開發(fā)要實(shí)現(xiàn)用戶和網(wǎng)站的交互。表單技術(shù)就是獲取用戶反饋的一個(gè)重要手段芦瘾。

比如問(wèn)卷就是由表單完成的捌蚊。

表單和表格有類似,首先需要有表單標(biāo)簽近弟。

<form></form>

Form有很多參數(shù)缅糟,但是這些參數(shù)大部分是描述表單數(shù)據(jù)提交的,在后端開發(fā)的時(shí)候會(huì)用藐吮,前端不長(zhǎng)用

action: 就是數(shù)據(jù)提交的地址溺拱。

method: 提交的方式逃贝,參數(shù)是http請(qǐng)求方式,通常用到的有g(shù)et和post兩種迫摔。

enctype: 提交數(shù)據(jù)的格式沐扳。

然后需要有表單當(dāng)中的元素標(biāo)簽。

Input元素 默認(rèn)是一個(gè)文本框句占,但是可以通過(guò)type屬性進(jìn)行設(shè)置

type參數(shù)描述

默認(rèn)就是沪摄,Text文本框,是

<input type="text" placeholder="請(qǐng)輸入您要的信息">

Password密碼框,輸入內(nèi)容以*代替纱烘,不可見

<input type="password">

Radio單選框杨拐,依賴name確定一組單選框

男:<input type="radio" name="gender" checked>女:<input type="radio" name="gender">

Checkbox復(fù)選框,依賴name確定一組擂啥,在后端開發(fā)可以看到效果

python:<input type="checkbox" name="gender">

php:<input type="checkbox" name="gender">

java:<input type="checkbox" name="gender">

c:<input type="checkbox" name="gender">

c++:<input type="checkbox" name="gender">

File文件框哄陶,用來(lái)上傳文件

<input type="file">

hidden隱藏域,不顯示哺壶,但是可以提交屋吨,后端校驗(yàn)使用居多

<input type="hidden>

submit提交按鈕,自動(dòng)提交表單里的數(shù)據(jù)山宾,沒(méi)有后臺(tái)沒(méi)有效果至扰,需要value參數(shù)來(lái)定義按鈕上的內(nèi)容

button只是個(gè)按鈕

<input type="submit" value="提交按鈕>

<input type="button" value="正常按鈕">

<input type="reset" value="重置按鈕">

reset重置按鈕 清空當(dāng)前表單的所有輸入

??Input可以構(gòu)造按鈕,但是也可以用button標(biāo)簽來(lái)定制按鈕

這個(gè)button按鈕的內(nèi)容可以更豐富资锰,input的value只能是字符串敢课,但是button的內(nèi)容可以很豐富

<button type="button">常規(guī)按鈕button>

<button type="submit">提交按鈕button>

<button type="reset">重置按鈕button>

<button type="button"> <img src="img/bike.jpg" width="100px"> ? button>

select標(biāo)簽,下拉框绷杜,需要結(jié)合option使用你

<select>

<option>河北option>????????????????????????????<

option>山東option>

<option selected>河南option>

<option>陜西option>

<option>山西option>

select>

Textarea 雙標(biāo)簽多行文本框直秆,用于大段的文字

<textarea>????????????????????????textarea>

?表單控件常用的屬性:

Placeholder,再文本框當(dāng)中展示提示字符

checked?代表選項(xiàng)選中

selected下拉框默認(rèn)選中項(xiàng)

readonly?只讀

通常用于修改信息部分

disabled 禁用,通常使用再按鈕鞭盟,不滿足條件切厘,不可以提交

單標(biāo)簽Doctype meta br hr img input

雙標(biāo)簽Html?head body title h p span b I em strong?u del?a table canption tr td th ul li ol dd dt dl form button select textarea div span

二、CSS的常用屬性

1.CSS顏色

在css當(dāng)中懊缺,顏色有三種表達(dá)方式:

計(jì)算機(jī)的顏色是按照工業(yè)三原色進(jìn)行配色的,工業(yè)三原色:

R red 紅色 ? G green?綠色 ? B blue?藍(lán)色

理論上通過(guò)這三種顏色的混搭培他,通過(guò)不同比例可以形成所有的顏色

1鹃两、單詞

常用的顏色單詞

Red(紅)white(白) ?black(黑) green(綠) ?blue(藍(lán)色)

Yellow(黃) purple(紫色) ?gray(灰)

實(shí)際上用單詞描述我們所有想要的顏色是不現(xiàn)實(shí)的。

2舀凛、 十六進(jìn)制數(shù)

16進(jìn)制數(shù):0-F

使用6位16進(jìn)制數(shù)表達(dá)顏色俊扳,沒(méi)兩位代表一種顏色

#?????FF ?FF ?FF

標(biāo)識(shí)位??紅?綠?藍(lán)

16進(jìn)制的顏色準(zhǔn)確度高,通常需要借助取色工具進(jìn)行取色猛遍。比如ps

3馋记,十進(jìn)制數(shù)

在css當(dāng)中号坡,也可以用10進(jìn)制數(shù)來(lái)表達(dá)顏色,還是三原色:

每個(gè)顏色是0-255比如:

(255梯醒,255宽堆,255)白色

2.?文字的樣式

文字比其他元素的樣式還是有不同的,在之前的舉例過(guò)程當(dāng)中茸习,我們使用了文字的顏色:color

文字常用的樣式:

大小

Font-size 使用px

粗細(xì)

Font-weight

????Normal 正常粗細(xì)

????Bold?粗

????Bolder?更粗

????lighter 更細(xì)

????自定義粗細(xì),是指具體的數(shù)值 100-900

字體

Font-family 可以采用系統(tǒng)擁有的字體

文字樣式

Font-style

文字傾斜畜隶,三個(gè)參數(shù),只有italic是傾斜

首行縮進(jìn)

Text-indent px

水平位置

Text-align

Left? center? right

垂直位置

Line-height

3.CSS背景

Background

背景其實(shí)可以細(xì)分

Background-color?背景顏色

Background-image 背景的圖片

Background-position 背景圖片定位

????Left?左

????Center 中

????Right 右

????Top 上

????Botoom 下

Background-repeat 背景重復(fù)

????No-repeat 不重復(fù)

????Repeat-x?水平重復(fù)

????Repeat-y 垂直重復(fù)

Background-size 背景圖片的大小

4号胚,邊框(border)

邊框分為4個(gè)方向

Left?左

Right 右

Top上

Bottom下

直接寫border代表4個(gè)方向籽慢。

三種參數(shù)

顏色,顏色的設(shè)置和CSS當(dāng)中其他的顏色設(shè)置一樣猫胁,單詞箱亿,十六進(jìn)制數(shù),十進(jìn)制數(shù)

線條類型solid實(shí)線??dotted點(diǎn)狀線???dashed虛線

線條粗細(xì)弃秆,像素px

border-radius 圓角

5届惋,邊距

Html的邊距分為兩種

內(nèi)邊距:當(dāng)前標(biāo)簽距離內(nèi)部嵌套標(biāo)簽的距離。Padding

外邊距:當(dāng)前標(biāo)簽距離自己父標(biāo)簽的距離驾茴。margin

邊距和邊框一樣也是分為4個(gè)方向的盼樟。

CSS將標(biāo)簽按照布局的特性分為三種

塊級(jí)元素

????1、 支持CSS全部的樣式

????2锈至、?[如果不設(shè)置寬度晨缴,默認(rèn)寬度占滿全屏

????3、 一個(gè)元素單獨(dú)占據(jù)一行

行內(nèi)元素

????1峡捡、 不支持CSS的部分樣式

????2击碗、 寬和高由內(nèi)容決定

????3、多個(gè)元素在一行

????4们拙、 代碼換行的時(shí)候稍途,盒子有間距

行內(nèi)塊元素

????1、支持CSS全部的樣式

????2砚婆、如果沒(méi)有設(shè)置寬高械拍,寬高由內(nèi)容決定

????3、多個(gè)元素在一行

????4装盯、代碼換行的時(shí)候坷虑,盒子有間距

6,CSS位置處理

文檔流

常規(guī)情況下埂奈,html標(biāo)簽在頁(yè)面上按照從上到下(塊級(jí)元素)從左到右(行內(nèi)元素)的順序進(jìn)行排列迄损,這樣的順序我們叫做文檔流。

CSS基于HTML的布局账磺,其實(shí)還涉及到一個(gè)層次的問(wèn)題芹敌。

浮動(dòng)

就是將指定的標(biāo)簽浮動(dòng)到指定的位置上痊远,浮動(dòng)之后,不在和之前的元素保持同一層氏捞。

Float:left 左right右

[if !supportLists]1碧聪、?[endif]浮動(dòng)是將元素進(jìn)行位置的移動(dòng)

[if !supportLists]2、?[endif]浮動(dòng)會(huì)導(dǎo)致元素脫離當(dāng)前層

[if !supportLists]3幌衣、?[endif]浮動(dòng)之后矾削,父元素沒(méi)有子元素?fù)伍_,布局容易出現(xiàn)問(wèn)題

需要清除浮動(dòng):

1豁护、 給父元素設(shè)置一個(gè)高度

2哼凯、 使用clean:both

浮動(dòng)是為了左右布局標(biāo)簽,浮動(dòng)之后楚里,為了排版的穩(wěn)定断部,需要清除浮動(dòng)

定位

浮動(dòng)可以解決左右布局問(wèn)題,但是在頁(yè)面布局過(guò)程當(dāng)中班缎,會(huì)遇到特定位置蝴光,這個(gè)時(shí)候需要用定位。之前的課程當(dāng)中达址,

Position定位有四個(gè)參數(shù)

Absolute 絕對(duì)定位蔑祟,參照物是整個(gè)頁(yè)面

Relative?相對(duì)定位,參照物是父元素

Fixed 固定定位沉唠,參照物是瀏覽器窗口

Static 靜態(tài)

三疆虚,JavaScript基礎(chǔ)語(yǔ)法

JavaScript是一門運(yùn)行在瀏覽器端的面向?qū)ο蟮母呒?jí)的腳本語(yǔ)言

1 js的三種形式

.行內(nèi)式: 寫在標(biāo)簽上

?<p onlick=”alert(‘hello world’)”>如觸發(fā)按鈕</p>

.嵌入式:使用script標(biāo)簽寫到html中

如<script> alert(‘hello world’) ?</script>

.獨(dú)立文件式:在script標(biāo)簽上鏈接外部jis文件,如果外聯(lián)满葛,則script內(nèi)部的文件就失效了径簿,不能共同使用

如? <script src=”index.js”> ? alert(“hello”) #失效? </script>

2 js語(yǔ)法格式

分割符:以 ; 分割

3 js的輸出

. alert彈出提示框,展示內(nèi)容嘀韧,展示最為直接

?console.log在瀏覽器調(diào)試部分展示 展示最為詳細(xì)

?document.write寫在頁(yè)面上篇亭,可以寫html樣式

4.數(shù)據(jù)類型

字符串類型string

數(shù)字類型number 直接包括? int整數(shù)和float小數(shù)

布爾值boolean? true false

對(duì)象object 時(shí)間對(duì)象和數(shù)組對(duì)象

null 空類型

?* js查看數(shù)據(jù)使用typeof

* js使用 var 聲明變量

數(shù)據(jù)類型轉(zhuǎn)換

轉(zhuǎn)換為字符串string(要轉(zhuǎn)換內(nèi)容)

轉(zhuǎn)換為整數(shù)parseint(要轉(zhuǎn)換內(nèi)容)

轉(zhuǎn)換為小數(shù)parsefloat(要轉(zhuǎn)換內(nèi)容)

轉(zhuǎn)換為布爾類型boolean(要轉(zhuǎn)換內(nèi)容)#空字符為false

# js中數(shù)字和字符串拼接,不會(huì)報(bào)錯(cuò)锄贷,形成一個(gè)新的字符串

5 js運(yùn)算

數(shù)學(xué)運(yùn)算+译蒂,- , * 谊却, /

賦值運(yùn)算=

自增運(yùn)算+=蹂随, -= ?++a先賦值在自增 a++ 先自增再賦值

比較運(yùn)算< , > , <=, >= , != , == , ===(全等于 值等于 且類型等于) !==不全等于

邏輯運(yùn)算&&(相當(dāng)于and) || (相當(dāng)于or) 因惭! (相當(dāng)于not) 優(yōu)先級(jí)|| > && > !

三目運(yùn)算判斷?第一個(gè):第二個(gè)如果判斷成立執(zhí)行第一個(gè)否則執(zhí)行第二個(gè)

如2>3? alert(“第一個(gè)數(shù)字大”):alert(“第二個(gè)數(shù)字大”)

var number = 4 >3 ?3:2

6 流程控制

????1. ??if(條件){滿足條件要執(zhí)行的代碼}

????多條件判斷時(shí)使用的為else if

var a =10

if(a>15) {

console.log(“<15”)}

else if (a <5){

console.log(“<5”)}

else{

console.log(“>15”)}

#不能論由于多少分支只要第一個(gè)執(zhí)行成功 不會(huì)再繼續(xù)向下判斷

????2.switch語(yǔ)句

switch(條件){

case結(jié)果一

第一個(gè)結(jié)果執(zhí)行的代碼

break

case結(jié)果一

第一個(gè)結(jié)果執(zhí)行的代碼

break

}

var a=2

switch(a){

case 0:

console.log(“0”)

break;

case 1:

console.log(“1”)

break;

case2:

console.log(“2”)

break;

case 3:

console.log(“3”)

break;

}

# break結(jié)束判斷 如不結(jié)束則繼續(xù)向下執(zhí)行 輸出 ?2 ?3

for in循環(huán)

for( 變量 in 一串?dāng)?shù)據(jù)){

要執(zhí)行的代碼

}

for( var i ?in “adsafsa”){

???console.log(i)#此時(shí)的i為一串元素的索引而非元素

console.log(“adsafsa”[i]) #按索引輸出數(shù)據(jù)?}

for循環(huán)

for(變量 條件 自增){

執(zhí)行的代碼

}

for(var i =1 ; ?i < 10 ; ?i++){

console.log(“i”)

}

#如條件為i<1 則條件從開始就不成立 則為死循環(huán)

while循環(huán)

while(條件){

滿足條件執(zhí)行的代碼

}

????var a=1

while(a<10){

console.log(a)

a++

}

while死循環(huán)

??var a = 1

while(1){

??console.log(a)

a++

}

break退出循環(huán)

continue跳出當(dāng)次循環(huán)

js函數(shù)

(1)標(biāo)準(zhǔn)版

function名稱(){

函數(shù)中的代碼

}

名稱() ?#調(diào)用

參數(shù)版

function名稱(參數(shù)1绩衷,參數(shù)2){

函數(shù)中的代碼# arguments# js內(nèi)置變量存放所有參數(shù)

}

名稱() ?#調(diào)用

默認(rèn)值參數(shù)

function名稱( 參數(shù)1 蹦魔,參數(shù)2= 默認(rèn)值){

函數(shù)中的代碼

}

名稱() ?#調(diào)用 ?#參數(shù)按順序傳遞 如不給參數(shù)2傳遞數(shù)據(jù)使用默認(rèn)值

判斷版

function text(num1激率, num2){

??num2=num2(arguments[1])? num2:10 }

返回值

function名稱(){

函數(shù)中的代碼

return返回值

}

名稱() ?#調(diào)用

return將函數(shù)內(nèi)的值返回出來(lái)作為執(zhí)行的結(jié)果

匿名函數(shù)

??var a =function (){

函數(shù)中的代碼

}

a() ?#調(diào)用

2.JS對(duì)HTML的操作

在js基礎(chǔ)部分,除了document.write方法勿决,其他的js和html沒(méi)有關(guān)系乒躺。:

當(dāng)某個(gè)對(duì)象滿足某個(gè)條件觸發(fā)某個(gè)功能,功能通常是函數(shù)低缩,函數(shù)進(jìn)行了某種修改嘉冒。

1、如何在js當(dāng)中獲取html標(biāo)簽

2咆繁、如何使用js修改html

3讳推、如何在js當(dāng)中表述網(wǎng)頁(yè)事件:鍵盤按下,鼠標(biāo)單機(jī)玩般,鼠標(biāo)滑過(guò)银觅,攝像頭打開

1)DOM(Document)對(duì)象

Document是html整個(gè)頁(yè)面的文本內(nèi)容的對(duì)象

Document當(dāng)中的每一個(gè)元素都可以認(rèn)為是一個(gè)element對(duì)象,在js當(dāng)中需要對(duì)element對(duì)象進(jìn)行操作坏为。

首先要掌握的是dom對(duì)象的獲取究驴,Document給開發(fā)者提供了具體的獲取對(duì)象的方法

document.getElementById?通過(guò)id獲取單個(gè)標(biāo)簽的對(duì)象

document.getElementsByClassName 通過(guò)類名獲取所有該class對(duì)象

document.getElementsByTagName 獲取當(dāng)前頁(yè)面多有的指定標(biāo)簽

document.getElementsByName 獲取當(dāng)前頁(yè)面所有指定name值的標(biāo)簽

其次要掌握對(duì)dom對(duì)象的修改

樣式

document.style

可以通過(guò)style修改樣式

style后面可以加當(dāng)前標(biāo)簽可以用的所有的css屬性

注意,只有document.getElementById?獲取的是單個(gè)對(duì)象匀伏,可以直接使用style洒忧,其他三種選擇方法獲得的是對(duì)象的列表,需要通過(guò)索引或者循環(huán)之后加style

在當(dāng)前代碼的步驟:

1够颠、獲取元素

到底獲取的是元素熙侍,還是包含元素的數(shù)組

2、 設(shè)置元素的樣式

設(shè)置元素的樣式摧找,比如不要給span設(shè)置寬度

屬性修改

在標(biāo)簽內(nèi)以鍵等于值存在的核行,都是屬性

hasAttribute 判斷指定元素是否有指定屬性

hasAttributes判斷指定元素是否有屬性

setAttribute 設(shè)置屬性,屬性名蹬耘,值

getAttribute

removeAttribute

在js當(dāng)中獲取html標(biāo)簽芝雪,操作html標(biāo)簽的樣式和屬性

獲取和修改html內(nèi)容

innerHTML 插入內(nèi)容,可以插入html

innerText 插入文本

獲取和添加元素

createElement 創(chuàng)建對(duì)象综苔,類型自己設(shè)置

createTextNode 創(chuàng)建文本節(jié)點(diǎn)惩系,就是文本內(nèi)容

cloneNode

注意,克隆之后如筛,修改克隆對(duì)象的id或者克隆沒(méi)有id的對(duì)象

reovmeChild

?????appendchild 在指定標(biāo)簽的子元素尾部添加元素

2)JS的事件

當(dāng)點(diǎn)擊發(fā)生之后堡牡,執(zhí)行的函數(shù)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末杨刨,一起剝皮案震驚了整個(gè)濱河市晤柄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌妖胀,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異迁央,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)纠屋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)盾计,“玉大人售担,你說(shuō)我怎么就攤上這事∈鸹裕” “怎么了族铆?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)涨薪。 經(jīng)常有香客問(wèn)我骑素,道長(zhǎng),這世上最難降的妖魔是什么刚夺? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任献丑,我火速辦了婚禮,結(jié)果婚禮上侠姑,老公的妹妹穿的比我還像新娘创橄。我一直安慰自己,他們只是感情好莽红,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著醉蚁,像睡著了一般鬼店。 火紅的嫁衣襯著肌膚如雪网棍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天滥玷,我揣著相機(jī)與錄音巍棱,去河邊找鬼惑畴。 笑死,一個(gè)胖子當(dāng)著我的面吹牛航徙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼泻红,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了讹躯?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤骗灶,失蹤者是張志新(化名)和其女友劉穎秉馏,沒(méi)想到半個(gè)月后萝究,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡绕娘,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年险领,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了秒紧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡熔恢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出沥割,到底是詐尸還是另有隱情凿菩,我是刑警寧澤衅谷,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站蚀苛,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏腋舌。R本人自食惡果不足惜渗蟹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一雌芽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧淮腾,春花似錦屉佳、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)干旁。三九已至,卻和暖如春回怜,著一層夾襖步出監(jiān)牢的瞬間换薄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工复旬, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留冲泥,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓怔球,卻偏偏與公主長(zhǎng)得像浮还,于是被迫代替她去往敵國(guó)和親竟坛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子钧舌,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,197評(píng)論 0 3
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺(tái)開發(fā)》時(shí),所整理的筆記六敬。筆記內(nèi)容為根據(jù)個(gè)人需求所...
    墨荀閱讀 2,337評(píng)論 0 7
  • 33、JS中的本地存儲(chǔ) 把一些信息存儲(chǔ)在當(dāng)前瀏覽器指定域下的某一個(gè)地方(存儲(chǔ)到物理硬盤中)1普泡、不能跨瀏覽器傳輸:在...
    萌妹撒閱讀 2,083評(píng)論 0 2
  • 一撼班、理論基礎(chǔ)知識(shí)部分 1.1垒酬、講講輸入完網(wǎng)址按下回車,到看到網(wǎng)頁(yè)這個(gè)過(guò)程中發(fā)生了什么 a. 域名解析 b. 發(fā)起T...
    我家媳婦蠢蠢噠閱讀 3,126評(píng)論 2 106
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級(jí)和職位的變化矮湘,入門級(jí)到專家級(jí)口糕,廣度和深度都會(huì)有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,583評(píng)論 0 7