您的位置：首页 > Web前端 > JavaScript

html.css.javascript简单教程和示例

2015-03-29 20:46 141 查看
首先推荐一个网站 http://www.w3school.com.cn/
（1）css和html

html的架构是由元素组成的，元素由起始标签和终止标签和元素内容组成。元素内容可以为空。

标签可以拥有属性，如下

<a href="http://www.w3school.com.cn">This is a link</a>
下面的语句表示一个内联框架
[code]<iframe src="www.ucas.ac.cn" width="200" height="200"></iframe>
最简单的网站如下
[/code]

<html>

<body>

<p>hello,word!</p>

</body>

</html>

如果我们在网页上设置一个可提交的表单，就有如下代码

<html>

<body>

<p>hello,world!</p>

<form>

First name:

<input type="text" name="firstname" />

<br />

Last name:

<input type="text" name="lastname" />

</form>

</body>

</html>

下一节我们将详细讲述其应用。

对于样式，就是对属性的规定，有如下原则

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

样式表的基本语法是

selector {declaration1; declaration2; ... declarationN }


例子如下：

h1 {color:red; font-size:14px;}

下面是使用内部样式表的例子

<html>

<head>

<style type="text/css">

p {background-color: rgb(250,0,255)}

</style>

</head>

<body>

<p>hello,world!</p>

<form>

First name:

<input type="text" name="firstname" />

<br />

Last name:

<input type="text" name="lastname" />

</form>

</body>

</html>

如果要使用外部样式表，写作如下就可以了

<style type="text/css" href="b.css" />


（2）javascript用法

下面是最简单的带javascript脚本的网页

<html>

<head>

<style type="text/css">

</style>

</head>

<body>

<form>

First name:

<input type="text" name="firstname" />

<br />

Last name:

<input type="text" name="lastname" />

</form>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body>

</html>

如果要使用外部脚本，只要写如下代码即可

<script src="/js/example_externaljs.js"></script>

我们来看下面的代码

<html>

<head>

<script type="text/javascript">

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{alert(alerttxt);return false}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_required(email,"Email must be filled out!")==false)

{email.focus();return false}

}

}

</script>

</head>

<body>

<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">

Email: <input type="text" name="email" size="30">

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

</form>

</body>

</html>

action后面的内容标识向何处提交表单，他可以是下面两种：

绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）

相对 URL - 指向站点内的文件（比如 src="example.htm"）

onsubmit应该指向一个函数，系统讲根据该函数返回值决定是否提交表单。

method有get和post两种选择，区别可以详见http://www.cnblogs.com/hnrainll/archive/2011/06/07/2074593.html

主要记住，post是通过url请求来传递数据的，例如进行get后，返回的页面网址为
http://www.w3school.com.cn/example/html/form_action.asp?fname=cdcdc&lname=ssss
其中的cdcdc和ssss就是我们在表单中所提交的数据。

<input type="text" name="email" size="30">

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

对于input标签，type标识类型，text就是文本。submit则是提交按钮。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航