筆記尚硅谷html新

1、“玩轉(zhuǎn)”Java 系列01-html 和 CSS今日任務(wù)1、html 學(xué)習(xí)2、CSS 學(xué)習(xí)課堂筆記：1、B/S的結(jié)構(gòu)“玩轉(zhuǎn)”Java 系列2、前端的開發(fā)流程3、網(wǎng)頁(yè)的組成部分頁(yè)面由三部分內(nèi)容組成！分別是內(nèi)容（結(jié)構(gòu)）、表現(xiàn)、行為。內(nèi)容（結(jié)構(gòu)），是我們?cè)陧?yè)面中可以看到的數(shù)據(jù)。我們稱之為內(nèi)容。內(nèi)容 我們使用html 技術(shù)來展示?！巴孓D(zhuǎn)”Java 系列表現(xiàn)，指的是這些內(nèi)容在頁(yè)面上的展示形式。比如說。布局，顏色，大小等等。使用CSS 技術(shù)實(shí)現(xiàn)行為，指的是頁(yè)面中元素與輸入交互的響應(yīng)。使用 javascript 技術(shù)實(shí)現(xiàn)。4、HTML 簡(jiǎn)介Hyper Text Markup Language （超文本標(biāo)記語(yǔ)

2、言）簡(jiǎn)寫：HTMLHtml 通過來標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）html 是超文本標(biāo)記語(yǔ)言?！巴孓D(zhuǎn)”Java 系列5、Eclipse 的常用配置切換工作區(qū)間：“玩轉(zhuǎn)”Java 系列5.2、修改視圖 package Explorer 顯示工程“玩轉(zhuǎn)”Java 系列“玩轉(zhuǎn)”Java 系列5.4、修改工作的默認(rèn)編碼為 UTF-8方式一5.5 、 修 改 工 作 的 默 認(rèn) 編 碼 為 UTF-8-Dfile.encoding=utf-8找到你的 eclipse 安

3、裝目標(biāo)，找到配置文件 eclipse.ini。在最后一行添加如下的配置：方 式 二“玩轉(zhuǎn)”Java 系列5.6、修改 Eclipse 代碼提示“玩轉(zhuǎn)”Java 系列“玩轉(zhuǎn)”Java 系列5.7、修改 New 菜單的選項(xiàng)“玩轉(zhuǎn)”Java 系列“玩轉(zhuǎn)”Java 系列6、用 Eclipse創(chuàng)建 html文件。1、需要先創(chuàng)建一個(gè)靜態(tài)的 web 工程“玩轉(zhuǎn)”Java 系列2、在 WebContent 目錄下 new 一個(gè) html 頁(yè)面“玩轉(zhuǎn)”Java 系列“玩轉(zhuǎn)”Java 系列“玩轉(zhuǎn)”Java 系列第一個(gè) hello的 html 內(nèi)容：如何修改 html 的模板代碼：京東，臉盲 hello world

4、!“玩轉(zhuǎn)”Java 系列“玩轉(zhuǎn)”Java 系列注：Java 文件是需要先編譯，再由 java 虛擬機(jī)跑起來。但 Html 文件它不需要編譯，直接由瀏覽器進(jìn)行執(zhí)行。7、html 文件的書寫規(guī)范表示 html 的開始head 表示 html 的頭部，通常包含三部分內(nèi)容，標(biāo)題，css 樣式，js 代碼標(biāo)題是當(dāng)前頁(yè)面的顯示的主體內(nèi)容body表示 html 的結(jié)束8、html1. 的格式:封裝的數(shù)據(jù)3.擁有的屬性?？梢孕薷暮?jiǎn)單的基本樣式效果i. 分為基本屬性：bgcolor=red屬性： onclick=alert(你好！);可以設(shè)置響應(yīng)后的 js 代碼。ii.Insert title here$cur

5、sor“玩轉(zhuǎn)”Java 系列4.又分為，單和雙。i. 單ii. 雙格式： 格式:名 /br 換行hr 水平線.封裝的數(shù)據(jù).的語(yǔ)法：正確：早安，尚硅谷 錯(cuò)誤：早安，尚硅谷正確：早安，尚硅谷 錯(cuò)誤：早安，尚硅谷!- ii.沒有文本內(nèi)容的正確： -“玩轉(zhuǎn)”Java 系列錯(cuò)誤：正確：font 錯(cuò)誤：font 錯(cuò)誤：fontcolor=blue早安，尚硅谷 color=blue早安，尚硅谷 color早安，尚硅谷- 這是錯(cuò)誤的 html 注釋正確：!-錯(cuò)誤：!-注釋內(nèi)容-注意事項(xiàng)：1.html 代碼不是很嚴(yán)謹(jǐn)。有時(shí)候不閉合，也報(bào)錯(cuò)。9、常用w3cschool.CHM9.1、font 字體font 可以顯

6、示文本，并設(shè)置文本的大小，字體，以及顏色需求 1：在網(wǎng)頁(yè)上顯示 我是字體，并修改字體為 宋體，顏色為紅色。1.font.html“玩轉(zhuǎn)”Java 系列9.2、特殊字符需求 1：把 換行變成文本 轉(zhuǎn)換成字符顯示在頁(yè)面上9.3、標(biāo)題需求 1：演示標(biāo)題 1 到 標(biāo)題 6 的9.4、超鏈接 （需求 1：普通的 超連接。*掌 握 *重點(diǎn) ，必須）9.5、列表需求 1：使用無(wú)序，列表方式，把四大，黎明，展示出來9.6、img需求 1：使用 img顯示一張的。并修改寬高，和邊框?qū)傩晕沂亲煮w“玩轉(zhuǎn)”Java 系列9.7、表格（ *重點(diǎn)，必須掌握 *）需求 1：做一個(gè) 帶表頭的 ，三行，三列的表格，并顯示邊框需

7、求 2：修改表格的寬度，高度，表格的對(duì)齊方式，單元格間距。“玩轉(zhuǎn)”Java 系列9.8、跨行跨列表格（*次重點(diǎn)，必須掌握 *）需求 1：新建一個(gè)五行，五列的表格，第一行，第一列的單元格要跨兩列，第二行第一列的單元格跨兩行，第四行第四列的單元格跨兩行兩列。9.9、了解 iframe 框架(內(nèi)嵌窗口)“玩轉(zhuǎn)”Java 系列9.10、表單（ *，必須掌握 *重點(diǎn)）需求 1:創(chuàng)建一個(gè)個(gè)人拉列表）。的表單界面。包含用戶名，確認(rèn)。（單選），（多選），國(guó)籍（下隱藏域，自我評(píng)價(jià)（多行文本域）。重置，提交。9.11 其他需求 1：div、span、p的演示HTML 最后的練習(xí) 2,：創(chuàng)建登錄的表單，包含用戶名，

8、框輸入。并結(jié)合 table排版。讓它看上去整齊點(diǎn)“玩轉(zhuǎn)”Java 系列3、CSS 技術(shù)3.1、CSS 技術(shù)CSS 是層疊樣式表單。是用于(增強(qiáng))網(wǎng)頁(yè)樣式并將樣式與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。3.2、CSS 語(yǔ)法規(guī)則：選擇器：瀏覽器根據(jù)“選擇器”決定受 CSS 樣式影響的 HTML 元素（）。屬性 (property) 是你要改變的樣式名，并且每個(gè)屬性都有一個(gè)值。屬性和值被冒號(hào)，并由花括號(hào)包圍，這樣就組成了一個(gè)完整的樣式（declaration），例如：p color: blue多個(gè)：如果要定義不止一個(gè)，則需要用分號(hào)將每個(gè)。雖然最后一條的最后可以不加分號(hào)，但盡量在每條的末尾都加上分號(hào)例如：pc

9、olor:red;“玩轉(zhuǎn)”Java 系列font-size:30px;每行最好只描述一個(gè)屬性CSS 注釋：/*注釋內(nèi)容*/3.3、CSS 和 html 的結(jié)合方式3.3.1、第一種：在的 style 屬性上設(shè)置”key:value value;”，修改樣式。divdivspanspan12 1 2需求 1：分別定義兩個(gè) div、span，分別修改每個(gè)的樣式為：邊框 1 個(gè)像素，實(shí)線，紅色。div問題：這種方式的缺點(diǎn)？1.如果多了。樣式多了。代碼量非常龐大。2. 可讀性非常差。3. Css 代碼沒什么復(fù)用性可方言?！巴孓D(zhuǎn)”Java 系列3.3.2、第二種：在 head中，使用 style格式如下

10、：來定義各種需要的 css 樣式。Key:value value;divdivspanspan12 1 2需求 1：分別定義兩個(gè) div、span，分別修改每個(gè) div的樣式為：邊框 1 個(gè)像素，實(shí)線，紅色。Css 注釋 /* 這是 css 的代碼注釋*/問題：這種方式的缺點(diǎn)。1. 只能在同一頁(yè)面內(nèi)復(fù)用代碼，不能在多個(gè)頁(yè)面中復(fù)用 css 代碼。2. 維護(hù)起來不方便，實(shí)際的項(xiàng)目中會(huì)有成千上萬(wàn)的頁(yè)面，要到每個(gè)頁(yè)面中去修改。工作量太大了。3.3.3、第三種：使用 html 的 文件。導(dǎo)入css 樣式“玩轉(zhuǎn)”Java 系列3.4、CSS 選擇器3.4.1、名選擇器divdivspanspan12 1

11、2需求 1：在所有 div并且修改所有 span上修改字體顏色為藍(lán)色，字體大小 30 個(gè)像素。邊框?yàn)?1 像素黃色實(shí)線。的字體顏色為黃色，字體大小 20 個(gè)像素。邊框?yàn)?5 像素藍(lán)色虛線。3.4.2、id 選擇器需求 1：分別定義兩個(gè) div，第一個(gè) div定義 id 為 id001 ，然后根據(jù) id 屬性定義 css 樣式修改字體顏色為藍(lán)色，字體大小 30 個(gè)像素。邊框?yàn)?1 像素黃色實(shí)線。第二個(gè) div定義 id 為 id002 ，然后根據(jù) id 屬性定義 css 樣式 修改的字體顏色為紅色，字體大小 20 個(gè)像素。邊框?yàn)?5 像素藍(lán)色點(diǎn)線。divdiv123.4.3、class 選擇器（

12、類選擇器）需求 1：修改 class 屬性值為 class01 的 span 或 div，字體顏色為藍(lán)色，字體大小 30 個(gè)像素。邊框?yàn)?1 像素黃色實(shí)線。需求 2：修改 class 屬性值為 class02 的 div，字體顏色為灰色，字體大小 26 個(gè)像素。邊框?yàn)?1 像素紅色實(shí)線。“玩轉(zhuǎn)”Java 系列divdivspanclass01class01span23.4.4、組合選擇器divspanclass01 divdiv id01 需求 1：修改 class=class01 的 div邊框?yàn)?1 像素黃色實(shí)線。和 id=id01 所有的 span，字體顏色為藍(lán)色，字體大小 20 個(gè)像素

13、。3.5、常用樣式：1、顏色color：red；顏色可以寫顏色名如：black, blue, red, green 等顏色也可以寫 rgb 值和十六進(jìn)制表示值：如 rgb(255,0,0)，#00F6DE，如果寫十六進(jìn)制值必#2、寬度width:19px;寬度可以寫像素值：19px；也可以寫百分比值：20%；“玩轉(zhuǎn)”Java 系列3、高度height:20px;高度可以寫像素值：19px；也可以寫百分比值：20%；4、背景顏色background-color:#0F2D4C4、字體樣式：color：#FF0000；字體顏色紅色font-size：20px; 字體大小5、紅色 1 像素實(shí)線邊框border：1px solid red;7、DIV 居中margin-left: auto; margin-right: auto;8、文本居中：text-align: ce