看不懂网站的页面，轻轻松松帮你解决，让你也学会前端页面的布局。

最新推荐文章于 2024-05-05 04:42:01 发布

工程人永远在路上

最新推荐文章于 2024-05-05 04:42:01 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/the_Milky/article/details/119300027

版权

JavaSript语句

1）JavaScript代码块

代码块的作用是一并执行语句序列。本例中向网页输出一个标题和两个段落。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<h1>我的第一个网页</h1>
<p id="medi">我是一个段落</p>
<div id="myDiv">我是一个div</div>
<p>
<button type="button" onclick="myFunction()">点我</button>
</p>
<script>
	function myFunction(){
		document.getElementById("medi").innerHTML="你好~世界";
		document.getElementById("myDiv").innerHTML="你最近怎么样";
	}
</script>
<p>当点击上面的按钮时，两个元素会改变。</p>
</body>
</html>

在这里插入图片描述
知识点：Html
onclick事件：onclick事件会在元素被点击时发生。

1）文本域（Text fields）======用户可以在文本域中写入文本

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<form>
	名：
	<input tyype="text" name="firstname"><br />
	姓：
	<input type="text" name="lastfirst">
</form>
</body>
</html>

2）密码域
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
	<p>请注意：当在密码域中键入字符时，浏览器将使用项目符号来代替这些字符</p>
<form>
	用户：
	<input tyype="text" name="user"><br />
	密码：
	<input type="password" name="password">
</form>
</body>
</html>

3)复选框======用户可以选中或者取消复选框
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<form>
	请先同意:
	<input type="checkbox" name="argee"><br />
	我喜欢该页面：
	<input type="checkbox" name="box">
</form>
</body>
</html>

4）单选按钮
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
	<p>当用户点击一个按钮时，该按钮会变为选中状态，其他所有按钮会变成非选中状态</p>
<form>
	男性:
	<input type="radio" checked="checked" name="sex" value="male"><br />
	女性:
	<input type="radio" name="sex" value="female">
</form>
</body>
</html>

5）简单的下拉列表======下拉列表框是一个可选列表
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<form>
	<select name="sex">
		<option value="male">男性</option>
		<option value="female">女性</option>
	</select>
</form>
</body>
</html>

6）另一个下拉列表======创建一个简单的带有预选值的下拉列表（预选值指预先指定的首选项）
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<form>
	<select name="sex">
		<option value="male">男性</option>
		<option value="female" selected="selected">女性</option>
	</select>
</form>
</body>
</html>

7）文本域（Textarea）======用户可以在文本域中写入文本。在文本域中，可写入的字符字数不收限制。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<textarea rows="10" cols="30">Weclome my first web!please wirte oneself share:</textarea>
</body>
</html>

知识点：
在这里插入图片描述
8)创建按钮======对按钮的文字进行自定义

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<form>
	<input type="button" value="Hello word!" />
</form>
</body>
</html>

9）围绕数据的Fieldset======在数据周围绘制一个带标题的框
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<form>
	<fieldset>
		<legend>健康信息</legend>
		身高:
		<input type="text" /><br />
		体重:
		<input type="text" />
	</fieldset>
</form>
</body>
</html>

知识点2：
在这里插入图片描述
10）带有输入框和确认按钮的表单

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<form action="/demo/demo_form.asp">
	First name:<br />
	<input type="text" name="firstname" value="Mickey" /><br />
	Last name:<br />
	<input type="text" name="lastname" value="Mouse" /><br /><br />
	<input type="submit" value="submit"/>
</form>
</body>
</html>

11）带有复选框的表单
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<form action="/demo/demo_form.asp">
	I have a bike:
	<input type="checkbox" name="vehicel" value="Bike" checked="checked" /><br />
	I have a car:
	<input type="checkbox" name="vehicel" value="Car" /><br />
	<input type="submit" value="submit" />
</form>
<p>当点击提交，表单数据会被发送到名为demo_form.asp的页面</p>
</body>
</html>

12）带有单选按钮的表单
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<form action="/demo/demo_form.asp">
	<input type="radio" name="sex" value="male" checked="checked" />Male<br />
	<input type="radio" name="sex" value="female" />Female
</form>
</body>
</html>

13）从表单发送电子邮件
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 语句</title>
</head>
<body>
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
	<h3>这个表单会把电子邮件发送到w3school。</h3>
	姓名:<br />
	<input type="text" name="name" value="yourname" size="20"/><br />
	电邮:<br />
	<input type="text" name="mail" value="yourmail" size="20"/><br />
	内容:<br />
	<input type="text" name="comment" value="yourcomment" size="20"/><br /><br />
	<input type="submit" value="发送" />
	<input type="reset" value="重置"/>
</form>
</body>
</html>