S代碼：

<script>

document.write('<div style="position:fixed; right: 10px; top:10px; color:#ccc">背景顏色<br /><select name=bcolor id=bcolor onchange="javascript：document.body.style.background=this.options[this.selectedIndex].value;"><option style="background-color: #ffffff" value="#ffffff">白色</option><option style="background-color: #f6f6f6" value="#f6f6f6">銀灰</option><option style="background-color: #e4ebf1" value="#e4ebf1">淡藍</option><option style="background-color: #e6f3ff" value="#e6f3ff">藍色</option> <option style="background-color: #eeeeee" value="#eeeeee">淡灰</option><option style="background-color: #eaeaea" value="#eaeaea">灰色</option> <option style="background-color: #e4e1d8" value="#e4e1d8">深灰</option><option style="background-color: #e6e6e6" value="#e6e6e6">暗灰</option><option style="background-color: #eefaee" value="#eefaee">綠色</option><option style="background-color: #ffffed" value="#ffffed">明黃</option><option style="background-color: #333333" value="#333333">黑色</option></select><br />字體顏色<br /><select name=txtcolor id=txtcolor onchange="javascript：document.getElementById(\'container\').style.color=this.options[this.selectedIndex].value;"> <option value="#000000">黑色</option><option value="#ff0000">紅色</option><option value="#006600">綠色</option><option value="#0000ff">藍色</option><option value="#660000">棕色</option><option value="#ffffff">白色</option></select><br />字體大小<br /><select name=fonttype id=fonttype onchange="javascript：document.getElementById(\'container\').style.fontSize=this.options[this.selectedIndex].value;"> <option value="12px" >小號</option> <option value="14px" >較小</option> <option value="19px" >中號</option> <option value="19px" >默認</option><option value="22px" >較大</option><option value="25px" >大號</option><option value="35px" >35px</option><option value="45px" >45px</option><option value="55px" >55px</option><option value="65px" >65px</option><option value="75px" >75px</option><option value="85px" >85px</option><option value="95px" >95px</option></select></div>');

</script>

代碼說明

方法document.write可以生成HTML和CSS代碼；

在JS內用onchange="javascript：…"屬性寫JS代碼；

頁面效果如下：

－End－

html區塊

●區塊元素

大多數html元素被定義為塊級元素或內聯元素.

塊級元素在瀏覽器顯示時,通常以新行來開始(和結束)

例如:<h1>,<p>,<ul>,<table>,<div>等

●內聯元素

內聯元素在顯示時通常不會以新行開始

例如:<b>,<td>,<a>,<img>等

●div元素

html<div>元素是塊級元素,它可用于組合其他html元素的容器.

<div>元素沒有特定的含義.除此之外,由于它屬于塊級元素,瀏覽器會在其前后顯示折行.

如果與css一同使用,<div>元素可用于對大的內容塊設置樣式屬性.

●<span>元素

html<span>元素是內聯元素,可用作文本的容器.

<span>元素也沒有特定的含義.

當與css一同使用時,<span>元素可用于為部分文本設置樣式屬性.

二 html表單

html表單用于搜集不同類型的用戶輸入.

<form>標簽用于創建供用戶輸入的html表單.

<form>

...

</form>

使用action屬性規定:當提交表單時,向何處發送表單數據.

<form action="url">

</form>

method屬性

method屬性指定在提交表單時使用的http方法:get或post

下面是兩個示例:

<form action="url" method="get">

<form action="url" method="post">

提示:

當你使用get時,表單數據將在頁面地址中使用.

如果表單正在更新數據或使用敏感信息(密碼),請使用post.post提供更好的安全性,因為提交的數據不會再頁面地址中顯示.

name屬性

name屬性指定表單的名稱

要接手用戶的輸入,你需要相應的表單元素,如文本字段.而輸入類型是由類型屬性(type)定義的,大多數經常被用到的輸入類型有:text,password,radio,checkbox,submit等

下面是一個請求用戶名和密碼的表單例子:

<form>

<input type="text" name="username" /><br/>

<input type="password" name="password" />

</form>

單選框

<input type="radio">標簽定義了表單單選框選項

下面是一個單選框的例子:

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

運行效果如下:

注意:沒有結束標簽,也能正常顯示,但是有時候會出現意想不到的情況.所以建議還是要加上結束標簽.

復選框

<input type="checkbox">定義了復選框,用戶需要從若干給定的選擇中選取一個或若干選項.

下面是一個復選框的例子:

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>

<input type="checkbox" name="vehicle" value="Car">I have a Car

</form>

運行效果如下:

提交按鈕將表單提交到其action屬性:

<input type="submit" value="Submit">

運行效果如下:

表單提交后,應該使用服務器端語言(如php)進行數據處理.當完成html和css課程后,你可以試著學習php課程.

三 html顏色

html顏色由一個十六進制符號來定義,這個符號由紅色,綠色和藍色的值組成(rgb)

rgb顏色的最小值是0(十六進制:#000).最大值是255(十六進制:#FFF)

四 html框架

通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面

<iframe>標簽規定一個內聯框架

一個內聯框架被用來在當前html文檔中嵌入另一個文檔

標記一個內聯框架:

<iframe src="url"></iframe>

提示:你可以把需要的文本放置在<iframe>和</iframe>之間,這樣就可以應對不支持<iframe>的瀏覽器.html5中不支持<frame>標簽.

定義iframe標簽的高度與寬度

height和width屬性用來定義iframe標簽的高度與寬度.

屬性默認以像素為單位,但是你可以指定其按比例顯示(如:80%)

下面是一個例子:

<iframe src="url" width="200" height="200"></iframe>

定義iframe表示是否顯示邊框

frameborder屬性用來定義iframe表示是否顯示邊框

設置屬性值為"0"移除iframe的邊框:

<iframe src="url" frameborder="0"></iframe>

先在講課開始，我要說一下，一些噴子，你還是別進來了，我看到你們我就想罵，我這是給不懂編程的朋友入門用的，不是給你們用來噴的

HTML全名是:

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學到如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

首先我們推薦使用Notepad++這個文本編輯器

這個編輯器還是很好用的，純屬個人推薦

然后我們先在桌面上創建一個index.html文件(html網頁就需要用后綴為html格式的文件)

然后通過Notepad++(后面我會直接說n++)打開

首先我們在格式中使用UTF-8模式的編碼格式

然后我們在里面先寫入以下代碼

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Giggle管</title>

</head>

<body>

<h1>我的第一個標題</h1>

<p>我的第一個段落。</p>

</body>

</html>

拿這些東西是什么意思呢？

但是你要真的運行的話：你就得吧我下圖標記的紅色部分給刪除了，不然打開會是亂碼

我們保存了以后通過瀏覽器打開，你會發現

那我們來進行對號入座

那么，今天說的可能不是很詳細，明天開始，我們每天給大家做個小項目演示一下，你就會慢慢明白什么東西是干嘛用的，光說不練假把式，說得再多還不如我帶著大家一起實踐一下

明天我帶大家完成一個效果如下圖所示的一個項目

我們做一個百度首頁……