【NEW15】网页开发基础

最新推荐文章于 2024-06-25 06:17:50 发布

俄方德法

最新推荐文章于 2024-06-25 06:17:50 发布

阅读量222

点赞数

分类专栏： Java Web程序学习文章标签： html css 前端

本文链接：https://blog.csdn.net/u011915914/article/details/122389494

版权

Java Web程序学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

一、HTML技术

1.1 Html技术

html简介
html的主要组成部分：
一门描述网络的语言，HyperText MarkUp Language，超文本标记语言。

超文本：超出文本的范畴，指的在网页上面可以描述文本，图片，视频等内容。

标记：标签，在标签里面书写内容。

语言：html就是用户和浏览器交互的工具，简单
来讲，浏览器会解析html的标记，以特定的效果给展示出来。

html的主要组成部分：

文档的声明<!DOCTYPE>：声明了html的类型和版本号。

html的根标记：标识html的开始和结束。

html的头部标记：设置与网页相关的信息。

html的主体标记：在页面上展示内容。

html的书写规范：

html的文件后缀名可以是".html" 或者".htm"。
html文件的格式：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  这是我的第一个html。
 </body>
</html>

html文件必须以开始，以结束。
html语法不区分大小写。
html有结束标记，比如内容，
html的标记如果没有结束标记，自己结束，比如<hr / >
html作用：它用来编写网页，在网页通过html标记来描述文本，图片，视频等内容。

1.2 单标记和双标记

1.单标记：空标记，就是没有结束的标记称之为单标记。
语法：<hr / > ,<br/ >

2.双标记：体标记，就是这个标记有开始和结束。
语法：< font > 内容 < /font >

1.3 文本控制和文本样式标记

段落标记< p > < /p >和换行标记< br / >

段落标记：段落与段落之间会自动换行。段落内部的换行< br />

文本样式标记< font >内容< /font>（HTML5 不支持标签。请用 CSS 代替。提示：请使用 CSS 来定义文本的字体、尺寸、颜色。）

常用的属性：
face 用来描述字体的样式。
size 用来描述字体的大小，最大取值为7。
color 用来描述字体的颜色，取值三种样式。

1.用英文单词表示：red，green，blue。
2.用16进制的数据表示：#ff0000
3.用rgb三原色表示：rgb(255,255,0)

3.其他标记

标题标记：< h1>< /h1>，< h2>< /h2> ------ < h6>< /h6>
文本样式标记：< b>< /b>，< i> < /i>，< u>< /u>

1.4图像标记

图像标记：在网页上引入图片
语法：<img src="图像的url" />
常用的属性：
src 用来引入图片（描述图片的路径）
width 描述图片的宽度
height 用来描述图片的高度
border 用来描述图片的边框
注意：图片的路径分为绝对路径和相对路径（同级目，上级目录，下级目录）
注释标记：<! – 图像标记 – >，注释标记的内容不会显示在网页上面。
HTML 描述网页的语言，并不是很严谨的语言，html标记通过被浏览器解析，展示特定的效果。尽量写规范。不同的浏览器解析效果不一样。（解释单标记，双标记没有结束符号 / 效果一样，无报错）
疑问： 内容写成内容格式【结束标志错误，相当于无结束标志】，两者效果一样，无报错？
原因： 元素是已被弃用的。提示：请使用样式（代替）来定义文本的字体、字体颜色、字体尺寸。（样式：CSS）

1.5 表格标记

表格的作用：将数据更加有条理的显示出来、用来规划网页。

语法：

<table>
	<tr>
		<td>单元格的内容</td>
	</tr>
</table>

tr：表示行
td：表示单元格
th：表示单元格，自动居中，加粗显示
rowspan：合并行
colspan：合并单元格（合并列）
常用属性：
border：给表格添加边框。
width：描述表格的宽度。
align：描述表格的的位置及表格内部的文字的位置。
cellspacing：描述边框的厚度。
cellpadding：描述文字与边框的距离。

1.6 表单标记

表单简介：把用户输入的数据提交到服务端，简单来说，表达用来让用户输入数据，表单把数据封装起来，提交到指定的位置（服务器）
表单组成：

表单控件：用户输入数据，比如说输入用户名，输入密码。
提示信息：告诉用户输入框要输入什么值.
表单域：标识表单的开始和结束，语法< form>
提示信息：表单控件< /form>

创建表单,比如：

<form action="htmlDemo01.html" method="post" name="登录表单">
   用户名：<input type="text" name="username" /><br />
   密码：<input type="password" name="psw" /><br />
   <input type="submit" value="提交" />
</form>

常用的属性：
action 表示表单要提交的位置
method 表单提交的方式，常用的有get提交和post提交，默认提交方式是get
get和post区别：

get提交：数据会显示在浏览器的地址栏，不安全，提交的数据大小是有限制。

post提交：数据不会显示在地址栏，是安全的，提交的数据大小没有限制。

表单控件：
输入框控件的属性type：
文本框：text
密码框：password
单选按钮：radio
复选按钮：checkbox
上传按钮：file
重置按钮：reset
注意：表单想要把数据提交到指定的位置，输入框必须有name属性。
文本域标记：< textarea rows=“文本域的行数” cols=“文本域每行输入的字符数”>< /textarea>，比如：

评论：<br />
	<form method="get" action="htmlDemo01.html">
		<textarea rows="5" cols="50" name="pinglun">输入评论，请注意文明用语！</textarea>
		<input type="submit" value="提交评论" />
	<form>

1.7 列表标记和超链接标记

列表标记：有序列表标记，无序列表标记，自定义列表标记
无序列表：

 <ul>
 	<li>列表项内容1</li>
 	<li>列表项内容2</li>
 	<li>列表项内容3</li>
 </ul>

属性：type 默认值 disc，sqare，circle

超链接标记：可以实现跳转的效果
语法:< a herf=“跳转的url” target=“目标窗口的弹出方式”>文本或者图片< /a>
target：_self 在原有的窗口打开网页
_blank 打开一个新的窗口，来显示网页

比如：

<a herf="htmlDemo01.html" target="_self">自己站内跳转到htmlDemo01之self的效果</a><br />
<a herf="htmlDemo01.html" target="_blank">自己站内跳转到htmlDemo01之blank的效果</a><br />

herf属性：跳转的url 1.站内跳转 2.站外跳转
8. < div> 标记
div：通常是用来实现网页布局。

二、CSS技术

2.1 简介

它是层叠样式表，Cascading Style Sheet，它的作用是增强网页的显示效果。
目的：使用css让网页内容和样式分离，便于网站代码后期的维护。
书写规范：

选择器{ 属性1：值1；属性2：值2；—}

2.2 CSS样式的引入方式

css不能单独使用，必须和html网页配合使用，引入css有四种方式：链入式，行内式，内嵌式，导入式。

1.行内式：直接在html标记里面使用css样式
语法：< div style=“background-color:red”>div的行内式效果< /div>

2.内嵌式：
语法：< style type=“text/css”> css 代码 < /style>
位置：一定要放置在标记里面。

3.链入式：
语法：< link type=“text/css” href=“外部css文件的url” rel=“stylesheet”>
步骤：
====> 1.创建一个css文件
====> 2.在网页里面使用link标签来引入外部的css文件
====>

4.导入式
语法：< syle type=“text/css”> @import(“外部css的url”) < /style>

1.内嵌式
<html>
	<head>
		<title>insert title here</title>
		<style type="text/css">
			/*文字居中显示*/
			h2 { text-align:center; }
			div {
				border:1px solid red;
				width:300px;
				height:200px;
				color:blue;
			}
		</style>
	</head>
	<body>
		< !-- 演示行内式 
		<div style="background-color:red>div的行内式效果</div>
		-->
		<h2>内嵌式css样式</h2>
		<div>使用style标记来实现内嵌式的效果，它的位置要放在head标记里面，放在title标记的后面</div>
	</body>
</html>


2.链入式
①.html代码
<html>
	<head>
		<title>insert title here</title>
		<link type="text/css" href="style.css" rel="stylesheet"></link>
	</head>
	<body>
		<div>链入式实现的效果</div>
	</body>
</html>
②.css代码
div {
	background-color:red;
}

2.3 css选择器和常用属性

1.标记选择器：直接使用html标记作为选择器
比如：< div>标记选择器< /div>
语法：div {属性:值;}

2.类选择器：直接使用html标记的class属性的值作为选择器
比如：< div class=“divClass”>class选择器< /div>
语法：.divClass {属性:值;}

3.id选择器：直接使用html标记的id属性的值作为选择器
比如：< div id=“divId”>id选择器< /div>
语法：#divId {属性:值;}

4.通配符选择器：让所有的标记显示相同的样式。（开发中基本不用）
语法：* {属性:值;}
选择器优先级：id选择器>class选择器>标记选择器>通配符选择器

<html>

	<head>
		<title>insert title here</title>
		<style type”text/css“>
			/*标记选择器*/
			div {background-color:red;}
			/*类选择器*/
			.divClass {background-color:blue;}
			/*id选择器*/
			#divId {background-color:green;}
			/*通配符选择器*/
			* {background-color:gray;}
		</style>
	</head>
	
	<body>
		<div>标记选择器</div>
		<div class="divClass">类选择器</div>
		<div id="divId">id选择器</div>
	</body>
	
</html>

注意：id属性的值必须唯一，class属性的值可以是相同的。

三、JavaScript

3.1 DOM相关知识

什么是DOM： Document Object Model，文档对象模型

文档：指的是标记型文档（html，xml）

对象：可以使用dom里面的相关属性和方法来解析标记型文档。

DOM的组成：核心Dom，Html Dom，XML Dom。

Dom如何解析html文档：

DOM会根据html的层级结构，在内存中形成一个树形结构，树形结构里面有标记元素和属性，文本等元素；整个html文档对应一个document对象，通过document文档对象，可以操作html里面得到所有元素。

在这里插入图片描述

节点的访问
节点对象 .childNodes：获取该节点的所有子节点。
节点对象 .parentNode：获取该节点的父节点。
获取文档中的元素
下面的方法是html dom的方法：
根据标记的id属性值获取元素对象：document.getElementById(id属性对应的值);
根据标记的名称获取元素的对象：document.getElementByTagName(标记的名称);
根据标记的name属性值获取元素对象：docuemnt.getElementByName(name属性对应的值);
【html和xml获取文档中元素的方法略有区别】

3.2 JavaScript概述

什么是js： 它是基于对象和事件驱动的语言，它应用于客户端。

基于对象：在js里面提供了一些对象，可以直接使用。
面向对象：在java里面先创建对象，再使用。

事件驱动：js里面它触发事件，调用函数，实现网页里面的l动态效果。
客户端：浏览器。
javaScript和java的区别(雷峰塔和雷锋)：
====> 1.javaScript是网景公司的产品，java是sun公司的产品，现在属于oracle。
====> 2.javaScript的运行只要系统里有浏览器就可以了。Java的运行依赖于虚拟机。
====> 3.javaScript是弱类型语言，java是强类型语言。
弱类型语言：在js里面，所有的变量都用var定义，比如：var a=10; var b=“hello js”
强类型语言：在java里面，int a=10; int b=“hello java” 错误的写法。

javaScript的组成：

1.EcmaScript：规范了js的基本语法。
2.Bom：Browser Object model，浏览器对象模型，操作浏览器。
3.Dom：Document Object model，文档对象模型，操作文档。
js作用：它是给网页增加动态效果。

1.内嵌式：
在网页里，引入js代码的基本语法：<script type=“text/javascript”<js代码

2.外链式（链入式）：
在网页里，引入外部的js文件的语法：
操作步骤：1.创建一个js文件 2.在script标记里面，使用src属性来引入外部的js文件

<html>
	<head>
		<title>insert title here</title>
		<script type="text/jacascript" src="demo01.js"</script>
	</head>
	<body>
		<br />
		来学习javascript
	</body>
</html>

数据类型、
Number：数字类型
String：字符串类型
null：空类型
undefind：未知的类型
Boolean：布尔类型
比如：

var a=10;
// alert(typeof a);
var b="hello js";
//alert(typeof b);
var c=null;
//alert(typeof c);
var d;
//alert(typeof d);
var e=true;
alert(typeof e);
<!-- alert弹出窗口，alert(typeof a);弹出值类型 -->

变量
在js里面定义变量都用var来定义。
运算符
====> 算术运算符：+ - * / 等
====> 比较运算符：> < >= <= 等
逻辑运算符：&& || 等
赋值运算符：+= -= 等
注意：var a=10；var b=“0”；var c=a-b；（把b转化为数字类型）在进行减法（乘除法）操作时，会把string类型的值，转换为number。
条件语句
if，if else，if else if else等语句
其它语句：for语句，switch case语句等（java使用的语句，js都能用）

3.3 JavaScript的使用

函数的定义和使用
在js里面定义函数三种方式：
1.创建普通的函数
语法：function add1(a,b) { var sum=a+b; return sum; }
2.创建匿名函数
语法：var add2= function (a,b) { var sum=a+b; return sum; }
3.创建动态函数
语法：

1.定义函数的参数
var param=“a,b”;
2.创建函数体
var method = " var sum=a+b; return sum; "
3.动态函数
var add3= new Function(param,method);

事件处理

事件：它通过触发事件，去调用相关的函数，来实现网页的动态效果。
如何在网页里面去触发事件？
网页里面绑定事件常用的两种方式：
第一种：直接通过事件绑定函数
比如： function add(){ alert(“点我啊”); }
第二种：通过给事件属性赋一个函数
比如： document.getElementById(“inputID”).οnclick=function(){ alert(“点我了吗”);在这里插入代码片 }
常用事件：

点击事件：onclick
失去焦点事件：onblur
获取焦点：onfocuse
键盘事件：onkeyUp onkeyup onkeydown onkeypress（区分大小写）
页面加载事件：onload（注意：页面加载事件，是在整个html网页加载完毕后，才会执行这个事件对应的函数）
鼠标事件：onmouseout onmouseover onmousemove

常用对象
1.window对象
常用的属性：history，document，Navigator，location，Screen

比如：var aa= window.location.href; alert(aa);（获取当前ul地址）
常用方法：
【设置定时器的方法】

var id1 = setInterval(js代码，时间)：每隔一段时间循环执行对应的js代码
var id2 = setTimeout(js代码，时间)：每隔一段时间，只执行一次对应的js代码
【设置定时器的方法】

clearInterval(id1);
clearTimeout(id2);
2.Date对象
使用方式和java差不多。
var myDate = new Date();

获取年份：myDate.getFullYear();
获取月份：myDate.getmouth();
获取天：myDate.getDay();
3.String对象
①. 获取字符串的长度：length();
②. 与html相关的方法：
字体加粗：bold(); 字体变大：big();
③. 与java相似的方法：
indexOf(); concat(); substr(); substring(); toLowerCase(); toUpperCase();

俄方德法

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【NEW15】网页开发基础

文章目录一、HTML技术1.1 Html技术1.2 单标记和双标记1.3 文本控制和文本样式标记1.4图像标记1.5 表格标记1.6 表单标记1.7 列表标记和超链接标记二、CSS技术2.1 简介2.2 CSS样式的引入方式2.3 css选择器和常用属性三、JavaScript3.1 DOM相关知识3.2 JavaScript概述3.3 JavaScript的使用一、HTML技术1.1 Html技术html简介html的主要组成部分：一门描述网络的语言，HyperText MarkUp L
复制链接

扫一扫