雷丰阳JavaWeb学习笔记（一）：HTML、CCS、JavaScript笔记

最新推荐文章于 2024-07-19 10:07:48 发布

FourthC

最新推荐文章于 2024-07-19 10:07:48 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaWeb 文章标签： JavaWeb学习

本文链接：https://blog.youkuaiyun.com/FourthC/article/details/102790710

JavaWeb 专栏收录该内容

0 篇文章

订阅专栏

本文档为雷丰阳的JavaWeb学习笔记，详细介绍了HTML、CSS和JavaScript的基础知识，涵盖标签使用、样式设置及脚本编写，适合初学者入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

雷丰阳JavaWeb学习笔记（一）：HTML、CCS、JavaScript笔记

此处学前端三大技术只是简单初略的学习，了解为主，是为后端做准备
HTML：格式
CSS：表现
JavaScript：交互

HTML

HTML：Hyper Text Markup Language（超文本标记语言）

标记语言==标签语言；
标签就是一堆尖括号包围的关键字（标签名），有开始标签和结束标签；也有结束标签；
标签必须正确关闭；
标签不能交叉嵌套；
属性必须有值，属性值必须加引号，标签属性是写在开始标签里的属性名=“属性值” 双引号或者单引号都可以；

常用语法

<html>
<head>
<meta charset="UTF-8">
<title>我是eclipse创建的网页</title>
</head>
<body>
	<!-- 标题标签 h1-h6 数字越小字越大-->
	<h1>早安1</h1>
	<h2>早安2</h2>
	<h3>早安3</h3>
	<h4>早安4</h4>
	<h5>早安5</h5>
	<h6>早安6</h6>

	<!-- 段落标签 -->
	<p>我是段落标签</p>
	<p>我是段落标签</p>
	
	<!-- 换行标签 -->
	我是段落标签<br />
	
	<hr />
	<!-- 分割线 -->
	我是段落标签

	<!-- 无序列表  使用 ul定义无序列表  li定义具体列表项-->
	<ul>
		<li>香蕉</li>
		<li>橘子</li>
	</ul>

	<!-- 有序列表  使用 ol定义无序列表  li定义具体列表项-->
	<ol start='5'>
		<li>香蕉</li>
		<li>橘子</li>
	</ol>
</body>
</html>

图片、内联框架和超链接

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 图片 img表示引入图片   alt="" 如果图片找不到显示的提示内容  src="" 图片的源（路径）
	路径有两种写法：
	相对路径： 不以/开始的路径是相对路径：引入的资源相对于当前资源的位置
	绝对路径： 以/开始的路径是绝对路径：
	../返回上一级
	-->
	<img alt="尚硅谷" src="1.jpg" ></img>
	<img alt="尚硅谷" src="../img/2.jpg" ></img>
	<img alt="尚硅谷" src="F:\javaLearning\JavaWeb\01.HTML\WebContent\image\3.jpg" ></img>
	
	<!-- 内联框架 iframe : 相当于又开了一个小浏览器窗口  src="" 代表资源地址-->
	<iframe src="2.图片.html" width="800"height="500"></iframe>

	<!-- 超链接：连接到另外一个资源 a  href="" 要链接（跳转）的资源路径  相对/路径
	target 何处打开链接文档
		_blank : 在新窗口打开
		_self : 在当前窗口打开（默认）
	framename : 在哪个frame打开
	-->
	<a href="1.常用标签.html"target="_blank">我是超链接</a>
	<a href="1.常用标签.html"target="_self">我是超链接</a>
	
	<a href="1.常用标签.html"target="targetFrame">我是超链接</a>
	<iframe src = "" name="targetFrame"></iframe>
	
</body>
</html>

表格

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 用table定义表格 
	     tr定义表格的一行
	     td定义表格的一列
	     th定义表头
	     colspan 跨列 值是一个数字表示跨几列
	     rowspan 跨行 值是一个数字表示跨几行
	-->
	<table border="1" style="border-collapse: collapse;">
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
		</tr>
		<tr>
			<td colspan="2">4</td>

			<td>6</td>
		</tr>
		<tr>
			<td rowspan="2">7</td>
			<td>8</td>
			<td>9</td>
		</tr>
		<tr>

			<td>11</td>
			<td>12</td>
		</tr>
	</table>
</body>
</html>

表格

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 把数据提交给服务器   数据一般是用户填写
	  form来定义一个表单
	  action:代表要提交到的地方（资源路径） 指定要提交到的资源位置
	  
	  表单是将用户输入的内容以键值对的方式提交
	  name：定义表单项的键名
	  value:定义表单项的值
	  表单提交多个表单项，键值对会以&符连接
	  
	  input 定义一个文本框（type="text"）
	  input 定义提交按钮 （type="submit"）
	  input 定义一个密码框 （type="password"）
	  input 定义一个单选按钮（ type="radio"）一组单选框 需要将name属性设置为相同才能实现单选
	  input 定义一个多选按钮（ type="checkbox"） 一组多选框需要将name属性设置为相同才能实现多选
	  select 定义一个下拉列表   定义选择项option
	  
	  method: 方法--》表单的提交方式
	  get提交: 会把数据使用键值对的方式，追加到地址栏
	  post:不会追加到地址栏
	-->
	
	<form action="target.html" method="post">
		用户名：<input type="text" name="username" value=""/><br/>
		密码：<input type="password" name="pwd" value=""/><br/>
		性别：男<input type="radio" name="gender"value="male"/> 女<input type="radio" name="gender"value="female"/> <br/>
		爱好： 1<input type="checkbox"name="aihao"value="1"/> 2<input type="checkbox"name="aihoa"value="2"/>
		     3<input type="checkbox"name="aihao"value="3"/> 4<input type="checkbox"name="aihoa"value="4"/>
		 <br/>    
		最喜欢的老师：
		<select name="teacher">
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
		</select>
		<br/>
		<input type="submit" value="登陆"/>
	</form>
	
</body>
</html>

CSS

CSS：层叠样式表（Cascading Style Sheets）
1、样式直接写在标签style属性。
（1）不能复用
（2）不能编写大量的样式

123456

2、写在style标签里面

3、引入外部文件方式
herf:表示css文件的位置

css选择器
1.标签选择器:使用标签名选择元素
标签名{
样式…
}
2.id选择器，使用标签的id值选出元素
#id值{
}
3.类选择器，根据标签的类进行选择class的值
.类的值{
}
4.组选择器：选择一组元素，选着的这些元素全部应用
选择器1，选择器2，…{}

<html>
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css">
		p{
			color:blue;
			font-size:25px;
     		font-family: 微软雅黑;
		}
		
		#p1{
			color:red;
		}
		.pred{
		/* 1.直接写颜色名*/
		/* 2.写rgb值 red green blue三个值都是0-255*/
		/* 3.写16进制的值  #两位数 两位数 两位数*/
			color:green;
			color:rgb(0,255,0);
			color:#ff0000;
		}
		
		#p1,.pred{
			font-size: 50px;
		}
	</style>
</head>
<body>
	<!-- 绝大多数标签元素都具有通用的两个属性id，class -->
	<p id="p1">4444444</p>
	<p class="pred">5555555</p>
	<p class="pred">6666666</p>
</body>
</html>

JavaScript

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。
1、基本语法
与Java类似，JavaScript有变量，函数和对象。
（1）变量：使用var关键字定义变量，声明时不需要指明类型必须先声明后使用，因为是一种弱语言，所以声明后可以任意改变其赋值的类型。
有五种原始类型：number，String，boolean，null，undefined
对象：object
var 变量名；变量如果声明出来未赋值就是undefined
num1=12;
num1=“你好”；
num = null;
num=document.getElementById(“abc”);
（2）函数：声明函数，方法不管在哪儿声明，浏览器都会优先加载。
function 方法名(参数名，参数名){方法体}

function sum(a,b){
	alert(a+b);
}
//将方法复制给一个变量 方法名就是变量
var sum1 = function(a,b){
	alert(a+b);
	//NaN  Not a Number
};

//02.调用函数  方法名（参数表）; 在js中唯一标识的是方法名，
在js中没有方法的重载，调用方法时候参数是可以选择的
sum(1,2);

sum1();//也可以调用为：NaN

2、加载方式
（1）写在标签事件属性里面不推荐
（2）写在script标签里面
1）写在head里面推荐（一定写在window.onload里面），如果不是用window.onload，会出现找不到元素的情况

<head>
<meta charset="UTF-8">
<title>加载方式</title>
<!-- 使用window.onload -->
<script type="text/javascript">
//当文档完全加载完成后，才会加载
	window.onload = function(){
		alert("HelloWorld");
	} 
</script>
</head>

2）写在body闭合前可以使用
可以找到元素，但比如图片，iframe请求时间较长时，可能导致js代码中获取这些元素的属性时获取不到争取的属性
（3）引入外部文件推荐使用

3、DOM查询
dom：文档对象模型，浏览器吧html页面抽象成了一个document对象，包括页面里面的所有元素
bom：浏览器对象模型（Browser object model）

dom模型：树形模型
节点：每一个元素都是节点
父节点、子节点、祖先节点、兄弟节点
在这里插入图片描述

元素节点：我是连接
属性节点：href="#"，不参与层级关系
文本节点：我是连接，有层级关系

所有的节点（封装好的对象），都有三个属性
nodeName：节点名
nodeType：节点类型所有节点的nodeType值都是整数：1,2,3
nodeValue：节点值

	 			nodeName		 nodeType		nodeValue	
	 元素节点		标签名				1			  null
	 属性节点		属性名				2			   属性值	
	 文本节点		#text				3			  文本内容

在这里插入图片描述
下面是一些常用函数：

JavaScript的增删改比较麻烦，所以会选择用Jquery来完成