本文介绍了HTML的基础概念，包括其文档结构、标签使用、标题、超链接、换行、图片插入、标题标签以及表单和输入标签的使用。同时，讲解了JavaScript在HTML中的应用，如动态输出HTML、随机数生成以及对DOM元素的操作。最后，提供了一个简单的登录页面的HTML代码示例。
-
HTML 文档包含了HTML 标签及文本内容
-
HTML文档也叫做 web 页面
-
HTML不能进行逻辑执行（如：if语句，for循环等）
注意：HTML标签是由尖括号括起来的词，如 ， 。标签通常成对出现，例如 和 。
一对中的第一个标签是开始标签;第二个标签是结束标签。如是开始标签，而是结束标签，我们还可以将开始标签称为起始标签，结束标签称为闭合标签。HTML文档结构至少要包括head, body两部分
前端：
- HTML（超文本传输语言）
**1.**以<>作为基础的表达式，描述语言，HTML文档结构至少要包括head, body两部分
head表示头部信息
-
可以引用外部资源（如：CSS，JS(JavaScript)）
-
标题的设置
-
设置页面（编码格式……）
body表示主题内容
- 绘制的具体页面内容
<html>
<head>
</head>
<body>
</body>
</html>
2.在body中写入内容
注意：一定要设置编码格式，否则会出现中文乱码
<body>
<meta charset="UTF-8">
欢迎来到Java~
</body>
结果展示
**3.**使用title设置标题
注意：一定要设置编码格式，否则会出现中文乱码
<head>
<meta charset="UTF-8">
<title>我是一个html页面</title>
</head>
结果展示
4.创建超链接
href表示点击跳转到目标地址
<body>
<a href="https://www.baidu.com">点击跳转到百度</a>
</body>
结果显示
5.换行操作
6.图片标签
如：将桌面的html.png图片放入这个html当中
单行标签，并且src要传入参数你的图片地址在哪里
<body>
<img src="html.png">
</body>
结果展示
6.标题标签< h1>…< h6>越往下小
<body>
<h1>我是标题一</h1>
<h2>我是标题二</h2>
<h3>我是标题三</h3>
<h4>我是标题四</h4>
<h5>我是标题五</h5>
<h6>我是标题六</h6>
</body>
结果展示
7.表单 form（提交数据）和input标签（可以是文本框，密码框，按钮……）
<body>
<form method="get" action="/login">
姓名：<input name="username" type="text"><br>
密码：<input name="password" type="text"><br>
<input value=" 提 交 " type="submit">
</form>
</body>
显示结果
js的计本操作
<html>
<head>
<meta charset="UTF-8">
<title>我是一个html页面</title>
<script>
//使用js代码输出html标签
//document.writeln("<h1>我是标题一</h1>>");
//使用for循环输出html的六个标签
// for (var i=1;i < 7;i++){
// document.writeln("<h"+i+">我是标题"+i+"</h"+i+">");
// }
// function myalert() {
// alert("你好我是弹窗")
// }
// function myalert(name) {
// alert("你好："+name)
// }
function myrandom() {
//产生一个随机数
//表示会产生一个0~1的随机数
//Math.random()
//表示会产生一个0~9的随机数
///var num = Math.random()*10;
//产生一个整数的随机数
// var nums = parseInt(Math.random()*10);
//表示将产生的随机数弹窗
//alert(num)
//表示将产生的随机数展示在控制台，相当于Java中的system.out.println
//console.log(nums);
//if语句和Java的几乎没有什么差别
// if(nums > 5){
// alert("数字比较大")
// }else {
// alert("数字比较小")
// }
//方法一：通过id操作html元素，比如写一个将下面的id="div1"中的”我叫div~“变成”你好，世界~“
//document.getElementById("div1").innerHTML = "<h1>你好，世界~</h1>>"
//方法二：通过name修改,因为那么可能相同，所以要指定第几个那么
document.getElementsByName("divname")[0].innerHTML = "<h1>你好，世界~</h1>>"
}
</script>
</head>
<div id="div1" name="divname">
我叫div~
</div>
<body>
<form method="get" action="/login">
姓名: <input name="username" type="text"><br>
密码: <input name="password" type="text"><br>
<!--<input value=" 提 交 " type="submit"><br>-->
<!--<input value=" 提 交2 " type="button" onclick="javascript:alert(111)">//方法一，直接写入alert-->
<!--<input value=" 提 交3 " type="button" onclick="myalert()">//方法二，自己写一个弹窗的方法-->
<!--<input value=" 提 交4 " type="button" onclick="myalert('我是弹窗')"> //自己写一个带有参数的弹窗方法-->
<input value=" 提 交 " type="button" onclick="myrandom()"> //展示产生的随机数展示在控制台
</form>
</body>
</html>
简单实现一个登录页面
代码
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<!--给所有的div设置相同的样式-->
<style>
div{
/*比如让每一个div距离底部相距10px*/
margin-bottom: 10px;
}
</style>
<script>
/**
* 首先理解id和那么的区别？
* 1.id（身份证）只能有一个，而name（姓名）可以重名多个
* 2.getElementByID(xxx)->拿到的就是一个元素
* 3.getElementByName(xxx)->拿到的就是一组元素
*
* id是给（前端）js使用的 而name是给（后端）表单使用的
*
*/
function subForm() {
//首先对表单中的必填字段（姓名和密码）做非空校验
//那么首先得拿到值才能进行判断 ，所以给他们都起一个id，虽然那么也可以拿到，但是需要用数组
var name = document.getElementById("uname").value;
var pwd = document.getElementById("pwd").value;
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
