淺談HTML.CSS與JS

一 HEML簡要分析

1.HTML介紹

HTML:超文本標(biāo)記語言,主要作用是用來編寫網(wǎng)站頁面。

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

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

標(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>

?????????????首頁

???????????????????</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)簽通過嵌套來聲明層級

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

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

5、 內(nèi)容部分負(fù)責(zé)頁面上的內(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è)等級,再html當(dāng)中代表標(biāo)題。

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

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

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

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

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

&lt; >, &gt; <

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

i?傾斜具有語句含有,表示強(qiáng)調(diào)。

em 傾斜只是傾斜

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

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

u 下劃線下劃線

del 刪除線

案例:

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

4)盒子標(biāo)簽

Html布局歷史:

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

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

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

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

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

Hello

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

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

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

和上面的標(biāo)簽相比,我們在圖片標(biāo)簽就要接觸到標(biāo)簽的屬性了。

<img>

src?圖片地址

可以使用絕對路徑

Windows下以盤符開頭 D:\\

Linux下以根開頭/usr/root/

也可以使用相對路徑

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

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

../代表上一層

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

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

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

title?圖片的提示文字

height?圖片高度

weight 圖片寬度

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

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

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

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

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

在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)頁是在當(dāng)前頁面打開當(dāng)target=”_blank”就會先打開一個(gè)空白頁,在空白頁上打開鏈接

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

1、在需要跳轉(zhuǎn)到的標(biāo)簽上設(shè)置id屬性,id是標(biāo)簽的標(biāo)識屬性,在一個(gè)頁面當(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)識是有順序的序列,默認(rèn)使用數(shù)字,也可以通過type屬性進(jìn)行跳轉(zhuǎn)

Type:

a ?代表小寫字母

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

A??代表大寫字母

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

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

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

無序列表

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

無序列表也有type屬性,

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

circle 空心圓點(diǎn)

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

自定義列表

<dl>

? ? ? ? <dt></dt>

</dl>

1、 自定義列表沒有前面的字符

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

3、通常會用作導(dǎo)航欄

4、有序或者無序列表是可以嵌套的

8)表格標(biāo)簽

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

tr 行

td 列

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

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?水平對齊?left?center?right 左中右

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

4、 th是一種特殊的td,通常用來寫字段名稱,相比較一般的td,th對文字自動執(zhí)行居中加粗

5、表格合并

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

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

9)表單標(biāo)簽

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

比如問卷就是由表單完成的。

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

<form></form>

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

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

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

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

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

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

type參數(shù)描述

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

<input type="text" placeholder="請輸入您要的信息">

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文件框,用來上傳文件

<input type="file">

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

<input type="hidden>

submit提交按鈕,自動提交表單里的數(shù)據(jù),沒有后臺沒有效果,需要value參數(shù)來定義按鈕上的內(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)簽來定制按鈕

這個(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)色

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

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á)顏色,沒兩位代表一種顏色

#?????FF ?FF ?FF

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

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

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

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

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

(255,255,255)白色

2.?文字的樣式

文字比其他元素的樣式還是有不同的,在之前的舉例過程當(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)簽按照布局的特性分為三種

塊級元素

????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、如果沒有設(shè)置寬高,寬高由內(nèi)容決定

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

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

6,CSS位置處理

文檔流

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

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

浮動

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

Float:left 左right右

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

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

[if !supportLists]3、?[endif]浮動之后,父元素沒有子元素?fù)伍_,布局容易出現(xiàn)問題

需要清除浮動:

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

2、 使用clean:both

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

定位

浮動可以解決左右布局問題,但是在頁面布局過程當(dāng)中,會遇到特定位置,這個(gè)時(shí)候需要用定位。之前的課程當(dāng)中,

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

Absolute 絕對定位,參照物是整個(gè)頁面

Relative?相對定位,參照物是父元素

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

Static 靜態(tài)

三,JavaScript基礎(chǔ)語法

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

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語法格式

分割符:以 ; 分割

3 js的輸出

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

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

?document.write寫在頁面上,可以寫html樣式

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

字符串類型string

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

布爾值boolean? true false

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

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ù)字和字符串拼接,不會報(bào)錯,形成一個(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)先級|| > && > !

三目運(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í)行成功 不會再繼續(xù)向下判斷

????2.switch語句

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)的值返回出來作為執(zhí)行的結(jié)果

匿名函數(shù)

??var a =function (){

函數(shù)中的代碼

}

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

2.JS對HTML的操作

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

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

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

2、如何使用js修改html

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

1)DOM(Document)對象

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

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

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

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

document.getElementsByClassName 通過類名獲取所有該class對象

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

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

其次要掌握對dom對象的修改

樣式

document.style

可以通過style修改樣式

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

注意,只有document.getElementById?獲取的是單個(gè)對象,可以直接使用style,其他三種選擇方法獲得的是對象的列表,需要通過索引或者循環(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)建對象,類型自己設(shè)置

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

cloneNode

注意,克隆之后,修改克隆對象的id或者克隆沒有id的對象

reovmeChild

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

2)JS的事件

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容