动态网站学习笔记01 网页开发基础

最新推荐文章于 2024-06-04 13:04:19 发布

Hxiug.虚晨

最新推荐文章于 2024-06-04 13:04:19 发布

阅读量512

点赞数

文章标签：学习笔记 html html5

本文链接：https://blog.csdn.net/weixin_69493757/article/details/130913678

版权

一、学习目标

熟悉HTML标签的使用
掌握CSS样式的引用方式
掌握CSS选择器的常用属性
熟悉DOM与BOM的相关知识
掌握JavaScript的使用
熟悉Bootstrap框架的下载与使用
掌握BootStrap框架的常用组件

二、HTML基础

（一） HTML简介

1、HTML

HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”。HTML主要作用是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件，它可以用记事本打开，因此简单的html代码可以在记事本中编写。编写完成后，将文件后缀名修改为“.html”或“.htm”即可生成一个HTML网页。

2、HTML语言的基本格式

在这里插入图片描述

3、编写一个网页

.文件名：htmlDemo01.html
使用浏览器打开htmlDemo01.html文件

8、编写HTML文件的常用工具

读者在编写HTML文件时，可以使用系统自带的记事本编写，也可以使用Notepad++、EditPlus、UltraEdit、HBuilder或IDEA等工具编写HTML文件，当使用工具创建HTML文件时，文件中的基本标签会被自动创建，编辑工具还会有代码颜色和代码提示功能，开发者只需根据需求完善功能代码即可，工具的使用有助于提高编码效率，减少出错率。
HBuilder开发工具
IDEA开发工具

（二）常用的HTML标签

（一）段落、行内标签

目标：熟悉HTML的段内、行内和换行标签
在chapter01文件夹中新建HTML文件htmlDemo02.html
在这里插入图片描述
使用浏览器打开htmlDemo01.html文件
使用浏览器打开htmlDemo02.html文件

（二）文本样式标签

目标：熟悉HTML的文本样式标签
在HTML中，使用标签控制网页中文本的样式，如字体、字号和颜色
标签的基本语法格式：<font 属性=“属性值”>文本内容
在chapter01文件夹中新建HTML文件htmlDemo03.html
可以利用颜色对照表选择自己喜欢的颜色对应的十六进制
ttps://bbs.bianzhirensheng.com/color01.html
拓展联系：文本居中显示、添加背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/stely.css" />
	</head>
	<body>
		<div class="out1">
			<div>
				<p class="on1">相思</p>
				<p class="on2">唐·王维</p>
				<p>
					<span>红豆生南国</span><br />
					<span>春来发几支</span><br />
					<span>劝君多采撷</span><br />
					<span>此物最相思</span><br />
				</p>
			</div>
			<div class="">
				<p class="on1">相思</p>
				<p class="on2">唐·王维</p>
				<p>
					<span>红豆生南国</span><br />
					<span>春来发几支</span><br />
					<span>劝君多采撷</span><br />
					<span>此物最相思</span><br />
				</p>
			</div>
			<span id="shui">泸州职业技术学院</span>
		</div>
		

	</body>
</html>

css样式

/* *{background-color: beige;} */
.out1{
	position: relative;
	width: 750px;
	height: 500px;
	margin:0px auto;
	background: url("https://img-qn-2.51miz.com/Element/00/58/64/19/4e80ec0a_E586419_e0c88bd5.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/260") 0px 0px/750px 500px no-repeat;
	
	
}
.out1 div{
	float: left;
	margin: 80px 0px 0px 150px;
}
p {
	font-size: 30px;
	font-family: "楷体";
	color: #000;
	text-align: center;
	
}
.on1{
	font-size: 35px;
	font-weight: bold;
	/* font-family: "黑体"; */
}
.on2{
	/* font-family: "仿宋"; */
	
}
#shui{
	font-size: 18px;
	font-family: "宋体";
	color: white;
	position: absolute;
	display: block;
	bottom:10px;
	right: 50px;
}

在浏览器打开htmlDemo02.html文件

（三）表格标签

创建一个HTML文件htmlDemo02.html
使用浏览器打开htmlDemo02.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo02</title>
		<style type="text/css">
			tr th{
				font-size: 20px;
				font-weight: normal;
			}
			table{
				width: 300px;
				margin: auto;
			}
			caption{
				font-weight: bold;
				font-size: 20px;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing=0 cellpadding=0 bgcolor="#ffff00">
			 <caption>学生成绩表</caption>
			<tr>
				<th>姓名</th>
				<th>语文</th>
				<th>数学</th>
				<th>英语</th>
			</tr>
			<tr>
				<th>张一</th>
				<th>95</th>
				<th>99</th>
				<th>88</th>							
			</tr>
			<tr>
				<th>张二</th>
				<th>87</th>
				<th>97</th>
				<th>92</th>							
			</tr>
			<tr>
				<th>张二</th>
				<th>87</th>
				<th>97</th>
				<th>92</th>							
			</tr>
		</table>
	</body>
</html>

（四）表单标签

在这里插入图片描述

1、表单域

在HTML中，标签用于定义表单域，即创建一个表单。
标签基本语法

<form action="url地址" method="提交方式" name="表单名称">
     各种表单控件
</form>

action属性：用于指定表单提交的地址。
method属性：用于设置表单数据的提交方式，它有GET和POST两个值，其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制；而使用POST提交方式不但保密性好，还可以提交大量的数据，因此开发中通常使用POST方式提交表单。

2、表单控件

浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用控件可以在表单中定义这些元素。
控件基本语法格式：
type属性为控件最基本的属性，用来指定不同的控件类型。
控件还可以定义很多其他属性，其中，比较常用的有id、name、value、size，它们分别用来指定控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。
在chapter01文件夹中创建一个HTML文件htmlDemo03.html，添加表单，并设置提交方式为POST，再定义一个2列的表格
在htmlDemo03.html中添加用户名输入控件，密码输入框控件，性别选择控件，兴趣复选框控件，文件上传控件、提交按钮控件和重置按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo03</title>
		<link rel="stylesheet" href="stely.css" />
	</head>
	<body>
		<form action="#" method="post">
			<fieldset>
				<legend>新用户注册</legend>

				<table border="0" cellspacing="5" cellpadding="0" align="center">
					<!-- username -->
					<tr>
						<td align="right">用户名：</td>
						<td align="left"><input type="text" name="username" id="username" value="" /></td>
					</tr>
					<!-- password -->
					<tr>
						<td align="right">密码：</td>
						<td align="left"><input type="password" name="password" id="password" value="" /></td>
					</tr>
					<!-- gender -->
					<tr>
						<td align="right">性别：</td>
						<td align="left">
							<input type="radio" name="gender" value="nale" />男
							<input type="radio" name="gender" value="female" />女
						</td>
					</tr>
					<!-- interest -->
					<tr>
						<td align="right">兴趣：</td>
						<td align="left">
							<input type="checkbox" name="interest" value="film" />看电影
							<input type="checkbox" name="interest" value="code" />敲代码
							<input type="checkbox" name="interest" value="game" />玩游戏
						</td>
					</tr>
					<!-- right -->
					<tr>
						<td align="right">头像：</td>
						<td align="left">
							<input type="file" name="photo" />
						</td>
					</tr>
					<!-- submit -->
					<tr>
						<td colspan="2" align="center">
							<input type="submit" value="注册" />
							<input type="reset" value="重置" />
						</td>
					</tr>
				</table>
			</fieldset>
		</form>
	</body>
</html>

使用浏览器打开htmlDemo03.html文件

（五）多行文本标签

HTML提供了<textarea></textarea>标签，通过此标签可以创建多行文本框。
<textarea></textarea>标签基本语法格式
在chapter01文件夹中创建一个HTML文件htmlDemo04.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo04</title>
	</head>
	<body>
		<form action="#" method="post">
			评论<br />
			<textarea cols="60" rows="5">
				评论时，请文明用语
			</textarea>
			<br /><br />
			<input type="submit" value="提交">
		</form>
	</body>
</html>

运行程序，使用浏览器打开htmlDemo04.html文件

（六）列表标签

目标：掌握列表标签，包括无序列表、有序列表和定义列表

1、无序列表

无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分，通常是并列的。
定义无序列表的基本语法格式

<ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
       ...
  </ul>

注意：
标签用于定义无序列表，
标签嵌套在
标签中，用于描述具体的列表项，每对
中至少应包含一对
。（ul: unordered list；li: list item）
在chapter01文件夹中创建一个HTML文件htmlDemo05.html

运行程序，使用浏览器打开htmlDemo07.html文件

2、有序列表

有序列表是一种强调排列顺序的列表，使用

标签定义，内部可以嵌套多个
标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。
定义有序列表的基本语法格式

<ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
       ...
 </ol>

注意：
标签用于定义有序列表，
为具体的列表项，和无序列表类似，每对
中也至少应包含一对
。（ol: ordered list）
= 在chapter01文件夹中创建一个HTML文件htmlDemo06.html
运行程序，使用浏览器打开htmlDemo06.html文件

3、定义列表

定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即dl、dt、dd。
定义列表的基本语法格式

<dl>
  <dt>名词1</dt>
     <dd>dd是名词1的描述信息1</dd>
     <dd>dd是名词1的描述信息2</dd>
  <dt>名词2</dt>
     <dd>dd是名词2的描述信息1</dd>
     <dd>dd是名词2的描述信息2</dd>
</dl>

注意：

标签用于指定定义列表，和
并列嵌套于
中。其中，标签用于指定术语名词，
标签用于对名词进行解释和描述。一对可以对应多对
, 也就是说可以对一个名词进行多项解释。
在chapter01文件夹中创建一个HTML文件htmlDemo07.html
运行程序，使用浏览器打开htmlDemo07.html文件

（七）超链接标签

目标：掌握超链接标签的使用，可以使用超链接完成页面的跳转
超链接是网页中最常用的元素，一个网站通常由多个页面构成，进入网站时首先看到的是首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。
使用标签创建超链接的基本语法格式：文本或图像
<a> 标签是一个行内标签，用于定义超链接，href和target是<a>标签的常用属性

属性	含义
href	href属性用于指定链接指向的页面的URL，当在`<a></a>`标签中使用href属性时，该标签就具有了超链接的功能。
target	target属性用于指定页面的打开方式，其值有_self、_blank、_parent和_top（_self和_blank较为常用）。其中，_self为默认值，意为在原窗口打开，_blank为在新窗口打开，_parent是在父框架集中打开被链接文档，_top是在整个窗口中打开被链接文档。

在chapter01文件夹中创建一个HTML文件htmlDemo08.html
运行程序，使用浏览器打开htmlDemo08.html文件
当单击“泸州职业技术学院”后，浏览器的效果
当单击“全国职业院校技能大赛”后，浏览器的效果

（八）图像标签

目标：掌握图像标签，学会使用图像标签显示图像
要想在HTML网页中显示图像就需要使用图像标签<img>
<img>标签基本语法格式：<img src="图像URL" />
注意：上述的语法中，src属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径，它是<img>标签的必需属性。图像源可以使本地图片文件，也可以是网络图片资源
在chapter01文件夹中添加一个名称为bear.png的图片文件，然后创建一个HTML文件htmlDemo09.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo09</title>
	</head>
	<body>
		本地图片：<img src="img/img01.jfif" width="160px" height="130px" border="1px"><br />
		网络图片：<img src="https://t7.baidu.com/it/u=4240641596,3235181048&fm=193&f=GIF"
					  width="160px" height="130px" border="1px">		
	</body>
</html>

注意：width和height属性分别用来设置图像的宽度和高度，单位为像素，border属性用来设置图像的边框，border="1px"表示边框粗细为1个像素，如果设置为border=“0”，那么就表示没有边框。
运行程序，使用浏览器打开htmlDemo09.html文件

三、CSS技术

（一）初识CSS

目标：了解CSS的概念和基本格式，能够知道CSS用于做什么

1、CSS的作用

使用HTML标签属性对网页进行修饰的方式存在很大的局限和不足，因为我们所有的样式都是写在标签中，这样既不利于代码阅读，将来维护代码也非常困难。如果希望页面美观、大方、维护方便，就需要使用CSS实现结构与表现的分离。结构与表现相分离是指在页面设计中，HTML标签只用于搭建网页的基础结构，不适用标签属性设置显示样式，所有的样式交由CSS来设置。

2、CSS的定义

CSS 是Cascading Style Sheet的缩写，译作“层叠样式表单”，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS定义的规则：选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;…}
在上述的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和属性值以键值对“属性:属性值”的形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）连接，多个“键值对”之间用 “;”（英文分号）进行分隔。
通过CSS样式对
标签进行设置

div{ border: 1px solid red; width: 600px;  height: 400px;}

div为选择器，表示CSS样式作用的HTML对象，border、width和height为CSS属性，分别表示边框、宽度和高度，其中border属性有3个值“1px solid red;”分别表示该边框为1像素、实心边框线、红色。

3、CSS的计量单位

在CSS中，通常使用像素单位px作为计量文本、边框等元素的标准量，px 是相对于显示器屏幕分辨率而言的。而百分比（%）是相对于父对象而言的，例如一个元素呈现的宽度是400px，子元素设置为50%，那么子元素所呈现的宽度为200px。

4、CSS中颜色的取值

（1）预定义的颜色值

如red、green、blue等

（2）十六进制表示的颜色值

如#FF0000、#FF6600、#29D794等。实际工作中，十六进制是最常用的定义颜色的方式
可以利用颜色对照表选择自己喜欢的颜色对应的十六进制
attps://bbs.bianzhirensheng.com/color01.html
大家在网上可以搜索取色软件TakeColor来试一试

（3）RGB代码表示的颜色值

如红色可以用rgb(255,0,0)或rgb(100%,0%,0%)来表示。如果使用RGB代码百分比方式取颜色值时，即使值为0，也不能省略百分号，必须写为0%

（二）CSS样式的引用方式

目标：掌握CSS样式4种的引用方式，分别为行内式、内嵌式、链入式和导入式

1、行内式

行内式（inline style）也被称为内联式，是通过标签的style属性设置标签的样式。
行内式基本语法格式：<标签名 style=“属性1:属性值1;属性2:属性值2;属性3:属性值3;”>内容</ 标签名>
style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。属性和属性值的书写规范与CSS样式规则一样。行内式只对其所在的标签及嵌套在其中的子标签起作用。
行内式是写在根标签中

<h1 style="font- size:20px; color:blue;">
使用CSS行内式修饰一级标题的字体大小和颜色
</h1>

使用<h1>标签的style属性设置行内式CSS样式，用来修饰一级标题的字体和颜色。

2、内嵌式

内嵌式（inner style）是将CSS代码集中写在HTML文档的头部标签中，并用

<head>
   <style type="text/css">
	选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
   </style>
</head>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用CSS内嵌式</title>	
		<style type="text/css">
			h2{ text-align:center;}   
			div{ border:1px solid #ccc; width:300px; 
			     height:80px; color:purple; text-align:center;}
		</style>
	</head>
	<body>
		<h2>内嵌式CSS样式</h2>
		<div>
			使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中，title标签之后。
		</div>
	</body>
</html>

运行程序，使用浏览器打开cssDemo02.html文件
注意：内嵌式引入CSS只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。
课堂练习：让div分区在浏览器窗口水平居中

3、外链式

外链式（outer style）也叫链入式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将外部样式表文件链接到HTML文件中。
外链式引用CSS的基本语法格式

<head>
      <link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

属性	含义
href	定义所链接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。
type	定义所链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS。
rel	定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

通过修改文件cssDemo02.html演示链入式CSS的引用方式，在chapter01文件夹中创建一个名称为style.css的文件。

h2{ text-align:center;}   
div{ border:1px solid #ccc; width:300px; 
     height:80px; color:purple; text-align:center;
	 margin: 0 auto;}

在chapter01文件夹中创建一个HTML文件cssDemo03.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用CSS外链式</title>	
		<link href="css/style.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<h2>外链式CSS样式</h2>
		<div>
		外链式也叫链入式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中。
		</div>
	</body>
</html>

运行程序，使用浏览器打开文件cssDemo03.html
注意：在实际开发中，链入式是使用频率最高、最实用的引入方式，它将HTML代码与CSS代码分离为两个或多个文件，实现了结构和表现的完全分离，同一个CSS文件可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个标签链接多个CSS样式表，大大提高了网页开发的工作效率。

4、导入式

导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用<style>标签，并在<style>标签内的开头处使用@import语句，即可导入外部样式表文件。
导入式引用CSS的基本语法格式

<style type="text/css" >
	@import url (CSS文件路径); 或 @import "CSS文件路径";
	/*在此还可以存放其他CSS样式*/
</style>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用CSS导入式</title>	
		<style type="text/css">
			@import "style.css";
		</style>
	</head>
	<body>
		<h2>导入式CSS样式</h2>
		<div>
		导入式针对外部样式表文件的，对HTML头部文档应用
		style标签，并在style标签内的开头处使用@import
		语句，即可导入外部样式表文件。
		</div>
	</body>
</html>

运行程序，使用浏览器打开文件cssDemo04.html

（三）CSS选择器

目标：掌握CSS选择器

1、标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的样式。
标签选择器的基本语法格式：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
所有的HTML标签都可以作为标签选择器的标签名，例如标签、
标签、
标签等。用标签选择器定义的样式对页面中该类型的所有标签都有效，这是它的优点，但同时这也是其缺点，因为这样不能设计差异化样式。

2、类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名。
类选择器的基本语法格式：.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类名即为HTML页面中元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。

3、id选择器

id选择器使用“#”进行标识，后面紧跟id名。
id选择器的基本语法格式：#id{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id名即为HTML页面中元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

4、通配符选择器

通配符选择器用 " * " 号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
通配符选择器的基本语法格式：*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
在实际网页开发中，不建议使用通配符选择器，因为它设置的样式对所有的HTML标签都生效，这是其优点也是其缺点，因为这样不能设计差异化样式。
在chapter01文件夹中创建一个HTML文件cssDemo05.html，在标签下编写代码
在cssDemo05.html的HTML文件中使用选择器修改样式。在标签中编写代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示CSS选择器</title>
		<style type="text/css">
			.red {
				color: red;
			}
			.green {
				color: green;
			}
			.font18 {
				font-size: 18px;
			}
			#bold {
				font-weight: bold;
			}
			#font24 {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<!--类选择器的使用-->
		<h1 class="red">标题一：class="red"，设置文字为红色。</h1>
		<p class="green font18">
			段落一: class="green font18"，设置文字为绿色，字号为18px。
		</p>
		<p class="red font18">
			段落二: class="red font18"，设置文字为红色，字号为18px。
		</p>
		<!--id选择器的使用-->
		<p id="bold">段落1：id="bold"，设置粗体文字。</p>
		<p id="font24">段落2：id="font24"，设置字号为24px。</p>
		<p id="font24">段落3：id="font24"，设置字号为24px。</p>
		<p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。</p>
	</body>
</html>

运行程序，使用浏览器打开文件cssDemo05.html

（四）CSS常用属性

目标：掌握CSS常用属性

属性名称	功能描述
margin	用于指定对象的外边距，也就是对象与对象之间的距离。该属性可指定1~4个属性值，各属性值以空格分隔
padding	用于指定对象的内边距，也就是对象的内容与对象边框之间的距离。该属性可指定1~4个属性值，各属性值以空格分隔
background	用于设置背景颜色、背景图片、背景图片的排列方式、是否固定背景图片和背景图片的位置。该属性可指定多个属性值，各属性值以空格分隔，没有先后顺序
font-family	规定元素的字体系列
border	用于设置边框的宽度、边框的样式和边框的颜色。该属性可以指定多个属性值，各属性值以空格分隔，没有先后顺序
font	用于设置字体样式、小型的大写字体、字体粗细、文字的大小、行高和文字的字体
height	用于指定对象的高度
line-height	用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高
color	用于指定文本的颜色
text-align	用于指定文本的对齐方式
text-decoration	用于指定文本的显示样式，其属性值包括line-through（删除线）、overline（上划线）、underline（下划线）、blink（闪烁效果，Firefox和Opera可以看到效果）和none（无效果）等
vertical-align	用于设置元素的垂直对齐方式
display	用于指定对象的显示形式

四、JavaScript基础

（一）JavaScript概述

目标：了解JavaScript的概念和引用方式，能够知道JavaScript的组成

1、什么是JavaScript？

JavaScript是Web中一种功能强大的脚本语言，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。

2、JavaScript的组成

（1）ECMAScript

ECMAScript是JavaScript的核心。ECMAScript 规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。

（2）DOM（Document Object Model）

文档对象模型，是W3C组织推荐的处理可扩展标签语言的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作（如大小、位置、颜色等）。

（3）BOM（Browser Object Model）

浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作（如弹出框、控制浏览器导航跳转等）

3、JavaScript的引入方式

（1）行内式

行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中。

<body>
		<input type="button" value="单击我" onclick="alert('欢迎使用行内式脚本~')" />
</body>

（2）内嵌式

在HTML文档中，可以通过标签及其相关属性引入JavaScript代码。当浏览器读取到

<script type="text/javascript">
	alert('欢迎使用内嵌式脚本~');
</script>

（3）外嵌式
外链式是指将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML文件中使用

<script type="text/javascript" src="jsDemo.js"></script>

4、JavaScript的数据类型

类型	含义	说明
Number	数值型数值型数据不区分整型和浮点型，数值型数据不要用引号括起来
String	字符串类型字符串是用单引号或双引号括起来的一个或多个字符
Boolean	布尔类型只有true或false两个值
Object	对象类型一组数据和功能的键值对集合
Null	空类型没有任何值
Undefined	未定义类型指变量被创建，但未赋值时所具有的值

5、JavaScript的变量和关键字

在JavaScript中，使用关键字var声明变量，由于JavaScript是一种弱类型语言，所以在声明变量时，不需要指定变量的类型，变量的类型将根据变量的赋值确定。
声明变量的语法格式

var year = 2023;
var college = "泸州职业技术学院";

6、JavaScript的运算符

在JavaScript中，运算符也称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号。JavaScript中的运算符主要包括算术运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符5种。

（1）算术运算符

算术运算符	描述
+	加运算符，实现加法运算
-	减运算符，实现减法运算
*	乘运算符，实现乘法运算
/	除运算符，实现除法运算
++	自增运算符，该运算符有i++(在使用i之后，使i的值加1)和++i（在使用i之前，先使i的值加1）两种使用方式
–	自减运算符，该运算符有i–(在使用i之后，使i的值减1)和–i（在使用i之前，先使i的值减1）两种使用方式

（2）比较运算符

比较运算符	描述	示例	结果
<	小于 5 < 5 false
>	大于 5 > 5 false
<=	小于等于 5 <= 5 true
>=	大于等于 5 >= 5 true
==	等于，只根据表面值进行判断，不涉及数据类型。 5 == 4 false
!=	不等于，只根据表面值进行判断，不涉及数据类型。 5 != 4 true

（3）逻辑运算符

逻辑运算符	描述
&&	逻辑与，只有当两个操作数a、b的值都为true时，a&&b的值才为true；否则为false

!	逻辑非，!true的值为false，而!false的值为true

（4）赋值运算符

赋值运算符	描述
=	实现赋值运算，例如，username=”name”
+=	实现加等于运算，例如，a+=b，相当于a=a+b
-=	实现减等于运算，例如，a-=b，相当于a=a-b
*=	实现乘等于运行，例如，a=b，相当于a=ab
/=	实现除等于运算，例如，a/=b，相当于a=a/b
%=	实现模等于运算，例如，a%=b，相当于a=a%b

（5）三元运算符

三元运算符又叫三目运算符。三元运算符语法格式：条件表达式？表达式1：表达式2
如果条件表达式的值为true，则整个表达式的结果为“表达式1”，否则为“表达式2”。

<script type="text/javascript">  
   var a = 5;  
   var b = 5; 
   alert((a == b) ? true : false);   
</script>

在上述JavaScript代码中，由于声明的变量a和b的值相同，所以通过使用比较运算符“==”的比较结果为true，此时整个表达式的结果就为true，alert()语句会弹出内容为“true”的对话框；如果变量a与b的值不相等时，则整个语句的执行结果为false，alert()语句会弹出内容为“false”的对话框。

Hxiug.虚晨

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
动态网站学习笔记01 网页开发基础

HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”。HTML主要作用是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件，它可以用记事本打开，因此简单的html代码可以在记事本中编写。编写完成后，将文件后缀名修改为“.html”或“.htm”即可生成一个HTML网页。定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即dl、dt、dd。定义列表的基本语法格式。
复制链接

扫一扫