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>

拿这些东西是什么意思呢？

但是你要真的运行的话：你就得吧我下图标记的红色部分给删除了，不然打开会是乱码

我们保存了以后通过浏览器打开，你会发现

那我们来进行对号入座

那么，今天说的可能不是很详细，明天开始，我们每天给大家做个小项目演示一下，你就会慢慢明白什么东西是干嘛用的，光说不练假把式，说得再多还不如我带着大家一起实践一下

明天我带大家完成一个效果如下图所示的一个项目

我们做一个百度首页……