HTML和JavaScript概要

最新推荐文章于 2024-05-13 14:32:09 发布

Dirichlet_zju

最新推荐文章于 2024-05-13 14:32:09 发布

阅读量1.1k

点赞数 2

分类专栏： Java基础学习文章标签： HTML JavaScript 速成前端基础

本文链接：https://blog.csdn.net/Dirichlet_zju/article/details/86621035

版权

Java基础学习专栏收录该内容

22 篇文章 1 订阅

订阅专栏

一、概述

本文适用于致力于从事后端工作的程序员，是一篇用以快速了解HTML以及JavaScript基本用法的文章。作为后端程序员，尤其是大厂程序员，专精才是常态，上级也不会安排一个前端去做服务器，也不会让一个后端去美化网页。但知识的完整性还是要求我们尽可能了解我们的上下游究竟发生了什么。因此，简单而又高效的了解前端基础知识HTML和JavaScript是很有必要的。

二、HTML

1.概念和特点：

超文本标记语言(Hypertext Transfer Protocol)，很常见，类似于XML标记语言。在基本的服务器-客户端模型中，客户端通过HTTP协议发送请求给服务器(Web Server)，服务器端对事物处理后进行回复。而这个回复往往就是用HTML语言。

特点：大小写不敏感，属性引号不敏感，标签成对出现或自己关闭（例如<b></b>或者<b/>）。

2.元素：

HTML既然是一种标记语言，它是由一对一对标签构成的，这个标签专业术语称之为“元素”。下表是常用的元素和其描述：

类型	元素	描述
主窗体元素	<html></html>
	<head></head>
	<title>
	<meta>
	<body>
字符风格控制元素	<h1>~<h6>
	<b>
	<i>
	<u>
	<s>
	<sup>
	<sub>
	<font>
版面控制元素	<pre>	空格回车有效
	<p>	段落开始结束
	<hr>	加入水平线
	<img src="...">	图片
标题元素	<ul>	标题
标题元素	<li>	子标题
链接	<a href="url"></a>	超链接
表格元素	<table>
	<tr>	行
	<td>	列
表单元素	<form>
	<input type="text">	普通文本
	<input type="password">
	<input type="checkbox">
	<input type="redio">
	<input type="image">
	<input type="submit">
	<input type="reset">
	<input type="hidden">
	<input type="file">
	<select>
	<option>
	<textarea cols="" rows="">

框架元素	<frameset>	设置框架页显示
框架元素	<frame>	表示每一个框架中的显示界面

参考链接：https://blog.csdn.net/qq_40820862/article/details/81409768

3.基本框架格式

基本格式十分简单。只需将要显示的内容填入body标签之间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页的标题</title>
</head>
    <body>
        网页要显示的内容
    </body>
</html>

这就是运行后显示的效果：

4.实例

实例一：表单实例：

这个实例单纯使用上面表格中的各种标签完成，可以用来熟悉表单元素的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
</head>
<body>
    <form name="myList" action="url" method="get|post">
        用户名：<input name="userName" value="请输入文本"/><br/>
        编号：<input type="text" size="20"><br/>
        密码：<input type="password"/><br/>
        性别：<input type="checkbox"/>男<input type="checkbox"/>女<br/>
        部门：<select content="nihao">
        <option value="技术部">技术部</option>
        <option value="商务部">商务部</option>
        <option value="后勤部">后勤部</option>
    </select><br/>
        兴趣：<textarea name="intrests" rows="2"></textarea><br/>
        说明：<textarea name="option" rows="4"></textarea><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

实例二：表格实例（九九乘法表）

这个实例用到了后面的javascript的知识点，但是很容易看懂。

NineNineTable.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
</head>
<body>
    <table name="myTable" border="4" onclick="onHello()"><!--你好事件，点击触发-->
        <script language="JavaScript" src="NineNinejs.js"></script>
    </table>
</body>
</html>

NineNinejs.js文件也就是JavaScript语言编写的文件

for(i = 1; i<=9; i++){
    document.write("<tr>");
    for(j=1;j<=i;j++){
        document.write("<td>" + j + " x "+ i + " = " + i*j + "</td>");
    }
    document.write("</tr>");
}

function onHello() {
    alert("你好");
}

三、JavaScript简介

1.概述：

JavaScript和Java没有关系。JavaScript的目的是轻松实现HTML的交互操作，完成丰富的页面交互效果。

2.语法：

流程控制的顺序分支循环嵌套等都很简单；
数组的初始化格式是：var arr = new Array(3);
顺便一提的是，变量用var声明，给他啥值他就是啥。

3.使用：

JavaScript的使用有两种方式：嵌套在HTML文件中、单独拿出来做.js文件。

方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页的标题</title>
</head>
<body>
    <script language="JavaScript">
        for(i=0;i<4;i++){
            document.write("hello world"+i+"<br/>");
        }
    </script>
</body>
</html>

运行结果：

方式二：见上面的九九乘法表

4.事件处理

4.1.onclick事件

<input type="button" onclick="show()" value="按钮"></input>//调用方法
<script language="JavaScript">
    function show(){//定义方法
        alert("Hello");
    }
</script>

4.2.onload事件

和onclick事件一样都是元素的自带时间，只不过onload事件是元素开始加载触发，onUnload事件是元素关闭触发。

4.3.其他自带事件

其他的还有select元素的onchange事件，在选择改变时触发。

4.4Window对象

打开新页面：window.open(url, 各种属性逗号分隔);
弹出确认框：window.confirm(text填入要显示的文本);
重定向跳转：window.location = url;直接赋值
父窗口与子窗口：子窗口可以通过使用关键词opener获得父窗口的实例。

5.实例

~~这里还需要针对上面所述进行一些示例阐述，否则不够充分。~~

Dirichlet_zju

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML和JavaScript概要

一、概述本文适用于致力于从事后端工作的程序员，是一篇用以快速了解HTML以及JavaScript基本用法的文章。作为后端程序员，尤其是大厂程序员，专精才是常态，上级也不会安排一个前端去做服务器，也不会让一个后端去美化网页。但知识的完整性还是要求我们尽可能了解我们的上下游究竟发生了什么。因此，简单而又高效的了解前端基础知识HTML和JavaScript是很有必要的。二、HTML1.概念和...
复制链接

扫一扫