HTML CSS JavaScript(2111)_css target默认self吗-CSDN博客

本文链接：https://blog.csdn.net/m0_53636192/article/details/122440414

本文详细介绍了HTML超文本标记语言、CSS层叠样式表和JavaScript的基础知识，包括HTML的结构、常用标签，CSS的选择器、盒子模型，以及JavaScript的基本语法、数据类型和函数。此外，还提及了表单标签、音频视频的添加、DOM操作及BOM对象。通过学习，读者可以掌握前端开发的基础技能。

摘要由CSDN通过智能技术生成

文章目录

2022.01.05 第二阶段 day 07

HTML超文本标记语言,实现页面展现，形成静态网页

CSS层叠样式表实现页面美化

JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页

React facebook出品前端、移动端JavaScript框架

Angular google 出品基于TypeScript的开源 Web 应用框架

Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发

NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境

HTML超文本标记语言

<>

html5兼容性好

制作网页的最基础语言,有独特语法,由大量标记描述的一门语言

后缀: .html .htm

结构

文档声明:声明文档类型

头部:描述网页属性标题编码被网页优先加载。

体部:要展示的数据

<!doctype html>
<html>
  <head>
      <meta charset="UTF-8"/>
      <title></title>
  </head>
  <body>
      hello html
	  hello html<br></br>
	  hello html
  </body>
</html>

html不区分大小写,语法相对java不太严谨 <br/>换行

HTML标签

HTML是一门标记语言，成对出现,标签分为开始标签和结束标签

如果开始和结束中间没有内容，可以合并成一个自闭标签

HTML属性

如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。

HTML注释

如何在网页中做空格和换行

换行：<br/>

空格：在HTML中，多个空格会被当成一个空格来显示。用&nbsp

常用标签

标题标签h1_h6(大小,字体加粗且自动换行)

列表标签

ul+li无序列表unorderlist+list (type 定义列表符号,默认是 disc 小圆点

)

ol+li有序列表orderlist+list

    <ul>
		<li>111</li>
		<li>111</li>
		<li>111</li>
	</ul>
	<ol>
		<li>111</li>
		<li>111</li>
		<li>111</li>
	</ol>

图片标签

img向网页中引入图片 border:边框 width:图片宽度 ,单位是px height:图片高度

src属性用来指定图片位置和路径(如果图片和网页文件在同级文件夹可直接写图片名称)

<img src="1.jpg" border="10px" width="50%" height="30%">

超链接标签

href属性用来让超链接可以被点击,也可指定点击的跳转网址 不跳转只用一个#表示

target属性用来指定超链接的打开方式,默认是_self当前窗口打开_blank是用新窗口打开

<a href="https://www.baidu.com/" target="_blank">百度一下</a><br/>

锚定:从一个位置回到指定的另一位置

   <a name="top">顶部</a>
		<h1>11111111111</h1>
		......
		<h1>11111111111</h1>
   <a href="#top">回到顶部</a>

Input标签

input标签,表示输入框

提交按钮submit:把用户在游览器的数据,提交给java程序来处理

<body>
		普通文本框:<input type="text" /><br />
		密码:<input type="password" /><br />
		数字:<input type="number" /><br />
		日期:<input type="date" /><br />
		星期:<input type="week" /><br />
		单选框:<input type="radio" />男<br />
		复选框:<input type="checkbox" />吃饭 <input type="checkbox" />遛弯 <br />
    	邮箱:<input type="email" /><br/>
		按钮<input type="button" value="点一下" /><br />
		<button>注册</button><br />
		提交<input type="submit" value="提交" /><br />
</body>

表格标签

<table></table>

表格的行用<tr></tr>表格的列用<td></td>

border:表格的边框 cellspacing:单元格的间距 bgcolor:背景颜色 width:宽度 align:位置

<body>
		<table border="1px" cellspacing="0" bgcolor="bisque" width="500px" align="center">
			<tr>
				<td>11</td> <td>12</td> <td>13</td>
			</tr>
			<tr>
                <td>21</td> <td>22</td> <td>23</td>
			</tr>
			<tr>
                <td>31</td> <td>32</td> <td>33</td>
			</tr>	
		</table>
</body>

表头不用td用th

合并单元格合并行rowspan 把N行合并成一大行合并列colspan 把N列合并成一大列

行合并rowspan 列合并colspan都在<td>标签操作

<table bgcolor="pink" width="500px" border="1px" cellspacing="0">
			<tr>
				<td colspan="2">11</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
			</tr>
		</table>


	<body>
		<table border="1px" bgcolor="antiquewhite" width="500px">
			<tr>
				<th>总页面流量</th> <th>共计来访</th> <th>会员</th> <th>游客</th>
			</tr>
			<tr>
				<td>11111111</td> <td>111111</td> <td>11111</td> <td>11111</td>
			</tr>
			<tr>
				<td>11111111</td> <td>111111</td> <td>11111</td> <td>11111</td>
			</tr>
			<tr>
				<td>111111111</td> <td>111111</td> <td>11111</td> <td>11111</td>
			</tr>
			<tr>
				<td>平均每人浏览</td> <td colspan="3">1.58</td>
			</tr>
		</table>
	</body>

表单标签

比表格多了数据提交功能

要求:必须使用form标签+必须有提交按钮+配置name属性

效果: 实现了数据提交,数据都在地址栏进行了拼接,多组数据使用&连接 http://127.0.0.1:8848/hbuilderx/cgb2111/register.html?user=jack&pwd=123

数据提交的格式: 属性名=属性值其中,属性名是网页上name属性的值 ,属性值是用户在浏览器中输入的数据

<form></form>

name属性的存在就是告诉编译器，这个type="radio"的input单选题里，这几个选项是一组的，他们中间只能选择一个。

下拉框select 文本域<textarea></textarea>

重置reset 提交submit 定义下拉选项option

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单标签</title>
	</head>
	<body>
		<form>
			<h1>注册表单</h1>
			<table bgcolor="aquamarine" border="1px" width="400px" cellspacing="0">
				<tr>
					<td>用户名</td><td><input type="text" name="username"/></td>
				</tr>
				<tr>
					<td>密码</td><td><input type="password" name="pwd"></td>
				</tr>
				<tr>
					<td>确认密码</td><td><input type="password" name="pwd"></td>
				</tr>
				<tr>
					<td>昵称</td><td><input type="text" name="nickname"></td>
				</tr>
				<tr>
					<td>邮箱</td><td><input type="email" name="mailbox"></td>
				</tr>
				<tr>
					<td>性别</td><td><input type="radio" name=sex value="1"/>男 <input type="radio" name=sex value="0"/>女</td>
				</tr>
				<tr>
					<td>爱好</td><td><input type="checkbox" name="hobby" value="basketball"/>篮球<input type="checkbox" name="hobby" value="soccer"/>足球<input type="checkbox" name="hobby" value="ping-pang"/>乒乓球 </td>
				</tr>
				<tr>
					<td>城市</td>
					<td>
						<select name="city">
						  <option>请选择</option>
						  <option value="Beijing">北京</option>
						  <option value="Shanghai">上海</option>
						  <option value="Guangzhou">广州</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像</td><td><input type="file"/></td>
				</tr>
				<tr>
					<td>验证码</td><td><input type="text"/>
					<img src="验证码1.png" width="100px" height="30px" />
					<button>点击更换</button>
					</td>
				</tr>
				<tr>
					<td>自我描述</td>
					<td>
						<textarea>请进行描述</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<button type="submit">提交</button>
						<input type="reset" value="重置" />
					</td>
				</tr>
				
				
			</table>
		</form>
	</body>
</html>

2022.01.06 第二阶段 day 08

表单标签

1.表单标签:比表格多了数据提交的功能
1.1, 要求:必须使用form标签 + 必须有提交按钮 + 必须配置name属性
1.2, 效果: 实现了数据提交,数据都在地址栏进行了拼接,多组数据使用&连接
http://127.0.0.1:8848/hbuilderx/cgb2111/register.html?user=jack&pwd=123
1.3, 数据提交的格式: 属性名=属性值是
其中,属性名是网页上name属性的值 ,属性值是用户在浏览器中输入的数据
1.4, 提交数据的方式:get和post两种方式!!!
get方式提交数据:在地址栏拼接数据,可以方便的查看数据,但是不安全,长度受限
post方式提交数据:安全,数据大小不受限,但是,不好找数据了…
1.5, form标签拥有两个重要属性:
method属性用来指定数据提交方式,默认是get
action属性用来指定数据提交给哪段java程序来处理

性别单选需添加name属性,且两个相同name值,即可实现单选,注意两个都得加上value=?

单选多选默认选中加上checked=“checked”

<tr>
	<td>性别</td><td><input type="radio" name=sex value="1" checked="checked"/>男 
    <input type="radio" name=sex value="0"/>女</td>
</tr>
<tr>
	<td>爱好</td>
    <td><input type="checkbox" name="hobby" value="basketball"/>篮球
        <input type="checkbox" name="hobby" value="soccer"/>足球
        <input type="checkbox" name="hobby" value="ping-pang"/>乒乓球 
    </td>
</tr>

提交数据的方式:get和post两种方式
get方式提交数据:在地址栏拼接数据,可以方便的查看数据,但是不安全,长度受限
post方式提交数据:安全,数据大小不受限,但是不方便查找数据

form标签拥有两个重要属性:

method用来指定数据提交的方式,默认是get
action属性用来指定数据提交给哪段java程序来处理
```
<form method="post" action="#">
```
表单总结:
1,标签:form表单用来提交数据,table表格,h1标题,tr表里的行,td行里的列,input输入框
select用来定义下拉框,option定义下拉选项,img图片,button是按钮,textarea文本域
2,属性:method是用来指定form提交数据的方式,action是用来指定form提交数据到哪段程序
bgcolor设置表格的背景色,border设置表格的边框,width设置表格的宽度,
cellspacing设置单元格间距,type是设置输入框的类型,src用来指定图片的位置
name是用来作为数据提交时的标识,colspan用来设置列合并
3,问题: 单选框和多选框,默认提交的都是on
4,解决方案:给单选框和多选框提供value属性用来指定提交时要使用的值(不再提交on了)

其他标签

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。
<p> 标签定义段落。
<span> 标签被用来组合文档中的行内元素。

<body>
	<!-- 一个占一行 -->
	<div>大家好</div><div>大家好</div>
	
	<!-- 段落 -->
	<p> Nice</p><p> Nice</p>
	
	<!-- 多个占一行:行元素 -->
	<span> hello</span><span> hello</span>
</body>

placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。

该提示会在用户输入值之前显示在输入字段中。

加入音频和视频

        <!-- 在网页加入音频 -->
		<audio controls="controls">
			<source src="音乐.MP3"></source>
		</audio>
		<!-- 在网页加入视频 -->
		<video controls="controls">
			<source src="视频.MP4"></source>
		</video>

css 全称叫层叠样式表Cascading style sheet

{}

是用来修饰HTML网页的一门技术，增强网页的展示能力

CSS 节省了大量工作。它可以同时控制多张网页的布局

语法:选择器{属性名:属性值;样式2;…}

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明,每条声明由一个属性和一个值组成。

使用位置:内联CSS,内部CSS,外部CSS

在HTML网页中,嵌入一段css代码,使用style标签

选择器

标签名选择器

        <style>
			div{color: aquamarine;}
			span{background-color: bisque;}
		</style>

font-size 属性设置文本的大小。px, %, rem,em均表示一种单位

font-family属性设置字体

background-color属性设置背景色

border设置边框 dashed设置虚线

display属性的定义是可以将页面元素隐藏或者显示出来,也可以将元素强制改成块级元素或内联元素

px是固定像素，一旦设置了就无法因为适应页面而改变。

em和rem相对于px更具有灵活性，因为他们是相对的长度单位（即长度不是定死的，更适用于响应式布局）。

em和rem的区别一句话概括:em相对于父元素，rem相对于根元素(html)

rem中的r意思是root（根源）

class选择器

class属性的值能相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试选择器2</title>
		<style>
			.a{font-size: 1.875rem;background-image: url(图1.png);}
			.b{font-size: 2rem; font-family: "楷体";}
			.c{background-color: hotpink;}
			
		</style>
	</head>
	<body>
		<div class="c">我是div1</div>
		<div class="a">我是div2</div>
		<div class="c">我是div3</div>
		<a href="#">我是a1</a>
		<a href="#" class="b">我是a2</a>
		<a href="#">我是a3</a>
	</body>
</html>

id选择器

id属性的值在整个HTML中作为唯一标识的存在。

可以通过ID值选中指定的元素（#id值）

opacity透明度(通常设置图像)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试id选择器</title>
		<style>
			#a{
				background-color: mediumvioletred;
			}
			#c{opacity:0.2;font-size: 30px;}
		</style>
	</head>
	<body>
		<input type="text"  placeholder="输入用户名" id="a"/>
		<input type="text"  placeholder="输入密码" id="b"/>
		<span>我是span1</span>
		<span id="c">我是span2</span>
	</body>
</html>

分组选择器

多种选择器间用逗号隔开

       <style>
			div, #input1{
				background-color: #FF69B4;
			}
			.a,#input1{background-color: #C71585;}
		</style>

属性选择器

根据属性或属性值来选取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试属性选择器</title>
		<style>
			[type]{
				border: 3px dashed hotpink;/* 宽度 虚线 颜色 */
			}
			input[type]{
				border-color: aqua; border-radius: 1.625rem;/*值越大越圆*/
			}
			input[type="text"]{
				border-color:blueviolet;
				display: none; /* 隐藏元素*/
			}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用户名"/>
		<input type="password" placeholder="密码"/>
		<input type="number" placeholder="年龄"/>
		<input type="text" placeholder="地址"/>
		
		<a href="#">我是a1</a>
	</body>
</html>

盒子模型

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置,默认值是零。。

外边距margin ,是指盒子间的距离

内边距padding,这是一个盒子的现象,是指内容到边距的距离

边框border,是指每个盒子都能设置边框

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 盒子模型</title>
	</head>
	<body>
		<!-- 设置了外边距(是两个盒子间的距离), 四个方向同时生效-->
		<input type="radio" style="margin: 20px;"/>男 <br />
		<!-- 设置了外边距, 分开设置外边距,左/右/上/下-->
		<input type="radio" style="margin-left: 20px;"/>男 <br />
		<input type="radio" style="margin-right: 20px;"/>男 <br />
		<input type="radio" style="margin-top: 20px;"/>男 <br />
		<input type="radio" style="margin-bottom: 20px;"/>男 <br />
		
		<!-- 设置内边距(内容和边框的距离) -->
		<input type="text" placeholder="用户名..."> <br />
		<!-- 设置了内边距, 分开设置内边距,左/上/下/右-->
		<input type="text" placeholder="用户名..." style="padding: 10px;"> <br />
		<input type="text" placeholder="用户名..." style="padding-left: 10px;"> <br />
		<input type="text" placeholder="用户名..." style="padding-top: 10px;"> <br />
		<input type="text" placeholder="用户名..." style="padding-bottom: 10px;"> <br />
		<input type="text" placeholder="用户名..." style="padding-right: 10px;"> <br />
	</body>
</html>

2022.01.07 第二阶段 day 09

css

内部CSS的优点：	内部CSS的缺点：
样式表只影响一个页面内部样式表可以使用类和ID 无需上传多个文件，HTML和CSS可以在同一个文件中	增加页面加载时间它只影响一个页面 – 如果要在多个文档上使用相同的CSS，则无用
外部CSS的优点：	外部CSS的缺点：
HTML页面的提及更小，结构更清晰加载速度更快相同的.css文件可以在多个页面上使用	在加载外部CSS之前，页面可能无法正确呈现
内联CSS的优点：	内联CSS的缺点：
如果要测试和预览更改，则非常有用对快速恢复有用降低HTTP请求	内联CSS必须应用于每个元素

外部css

<link rel="stylesheet" href="student.css"/>

link把外部CSS文件引入到这个网页中 rel是指文件的类型(stylesheet是固定值是样式表) href是指定文件的位置

&nbsp; 它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格,在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。
&ensp; 它叫“半角空格”，全称是En Space，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
&emsp;  它叫“全角空格”，全称是Em Space，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
&thinsp; 叫窄空格，全称是Thin Space
&zwnj; 它叫零宽不连字，全称是Zero Width Non Joiner
&zwj;它叫零宽连字，全称是Zero Width Join

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<!-- 在HTML中引入css文件 -->
		<link rel="stylesheet" href="registration.css" />
	</head>
	<body>
		<form method="post" action="#">
			<h3>用户注册</h3>
			<div><input class="a" type="text" placeholder="用户名" name="user"/></div>
			<div><span>支持中文、字母、数字、“-”、“_”的组合，4-20个字符</span></div>
			<div><input class="a" type="password" placeholder="设置密码" name="pwd"/></div>
			<div><span>建议使用数字、字母和符号两种以上的组合，6-20个字符</span></div>
			<div><input class="a" type="password" placeholder="确认密码" name="repwd"/></div>
			<div><span>两次密码输入不一致</span></div>
			<div><input class="a" type="number" placeholder="验证手机" name="tel"/>或 
			<a href="#">验证邮箱</a></div>
            <div id="readme">
				<input type="checkbox"/>我已阅读并同意<a href="#">《京淘用户注册协议》</a>
			</div>
			<div><button type="submit">立即注册</button></div>
		</form>
	</body>
</html>

.a{width: 350px;height: 30px;
    padding: 5px;/* 内边距 */
	font-size: 16px;}
button{width: 360px;height: 40px;
	  background-color: red;/* 背景色 */
	  border-color: red;/* 边框颜色 */
	  color: white;/* 文字颜色 */
	 font-size: 20px;/* 文字字号 */}
span{font-size: 5px;/* 字号变小 */
	color: gray;/* 灰色的字 */
	padding: 20px; /* 内边距 */}
h3{/*text-align: center;文本居中 */
  padding-left: 130px;/* 左边距 */}
#readme{padding: 15px;/* 左边距 */}

html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，css样式表实现了页面的美化，这些技术实现了静态网页。

javascript的加入，实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，把这样的网页称为动态网页，把这样的网站称为动态网站。

JavaScript

简称JS,用来增强网站的交互

JS是一门 基于对象 和 事件驱动 的 脚本语言

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。事件就是你在网页中常见的动作(单击.双…)

脚本语言：是指在特殊的环境才能运行.js就是在浏览器中执行的

特点

js是一门直译式的语言
是一种弱类型的语言,底层会自动类型转换
增强了用户的交互性,跨平台
js代码出现的位置:行内js 内部js 外部js

js语法

js数据类型:
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

基本数据类型

包括:number/string/boolean/null/undefined

number:在JS中，数值类型只有一种，就是浮点型。会自动的进行数据类型的转换

undefined:值只有一个就是undefined。表示变量没有初始化值。

null:值也只有一个，就是null。表示空值或者不存在的对象。

复杂数据类型

函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

注释

单行注释： //注释内容

多行注释： /* 注释内容 */

js变量

所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

js的运算符

自增自减优先级要高

JS中的运算符和Java中的运算符大致相同

算术运算符: +，-，*，/，%(取模-余数)，++(自增)，–(自减)

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ==(等于)，!=(不等于), =(绝对等于–值与类型均相等)，!(不绝对等于–值和类型有一个不相等或两个都不相等), > ，< ，>=，<=

位运算符: &(and) ， |(or),~(取反),^(异或),<<(左移),>>(右移)

逻辑运算符: &&(and)，||(or),!(not非)

前置逻辑运算符: ! (not)

三元运算符: ? :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js语法运算符</title>
		<script>
			//1, js运算符
			//三元运算符:
			//获取两个数里的大值
			var c = 10;
			var d = 5;
			var e = c > d ? c : d;
			alert(e);
			//比较运算符:== !=  === !==
			alert(1 == 1);//true
			alert(1 != 1);//false
			alert(1 == '1');//true, 只比值
			alert(1 === '1');//false, 比较类型和值
			//赋值运算符: += -= *= /=
			var b = 2;
			b += 2; //b=b+2
			alert(b);//4
			//算术运算符: / % ++ --
			var a = 12;
			alert(a / 5);  //取商, 2.4
			alert(a % 5);  //取余, 2
			// alert(a++);//12,顺便把a从12变成13
			// alert(++a);//14
			// a = a++; //把右侧a++整体的运算结果,重新赋值给a
			// alert(a);//12
			a = a+++a;//自增 自减 的优先级高 a++ +a ;
			alert(a);//12 + 13 = 25
		</script>
	</head>
	<body>
	</body>
</html>

JS语句

JS中的语句和Java中的语句用法也大致相同

if…else语句 switch…case

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS语句</title>
		<script>
			//2, 分支结构 switch...case
				//练习: 判断今天星期几
				var day = 1;
				switch(day){
					//在java里,switch参数的数据类型只能有
					//byte int char short String
					case 1 : alert('今天星期一'); break;
					case 2 : alert('今天星期二'); break;
					case 3 : alert('今天星期三'); break;
					case 4 : alert('今天星期四'); break;
				}
			//1, 分支结构 if..else
				if(!true){//判断条件不成立
					alert(100);
				}
				// 练习: 判断成绩所属的等级
				// 80~100(包括80，也包括100)		优秀 
				// 60~80(包括60，但不包括80)		中等
				// 0~60(包括0，但不包括60)		不及格
				// 其他值						输入有误
				var scores=98;
				if(scores>=80 && scores<=100){//80~100
					alert('优秀');
				}else if(scores>=60 && scores<80){//60~80
					alert('中等');
				}else if(scores>=0 && scores<60){//0~60
					alert('不及格');
				}else{
					alert('输入有误');
				}			
		</script>
	</head>
	<body>
	</body>
</html>

循环语句 (for循环 while循环 do…while)

alert()

console.log();

F12在游览器查看控制台

var没有作用域,let严格规定了作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS语句</title>
		<script>
			// while循环结构
				// while(true){//死循环
				// 练习2:假设你有1亿,每天花一半,计算能花多少天?
				let days = 0;
				let money = 100000000;
				while(money>1){
					days++;
					money=money/2;
				}
				console.log(days);//27
				
				// 练习1:打印1~10
				let a = 1;
				while( a < 11 ){
					console.log(a+"~~~~");
					a++;
				}
			// for循环结构
				// 练习2:统计1~100里,偶数的和
				let sum = 0;//定义变量,记录和
				for(let i = 1;i<=100;i++){
					if(i % 2 == 0){//判断是不是偶数
						sum = sum + i ;//求和
					}
				}
				console.log("1~100里偶数的和是: "+sum);
				
				// 练习1:遍历1~10并弹出
				for(let i=1;i<11;i++){
					// alert(i);//弹出框
					console.log(i);//打印,必须在浏览器f12
				}
				//bug:for循环里定义的变量,竟然在循环外也能用!!!
				//原因:定义的变量没有作用域的概念,使用let定义变量!!!
				//var没有作用域,let严格的规定了作用域
				//console.log(i+"=====");		
		</script>
	</head>
	<body>
	</body>
</html>

alert()方法:称为警示对话框，要显示的信息放置在括号内，该对话框上包含一个“确认”按钮，用户阅读完所显示的信息后，只需单击该按钮就可以关闭对话框。
confirm()方法:该种对话框上除了包含一个“确认”按钮外，还有一个“取消”按钮，这种对话框称为确认对话框
prompt()方法:不但可以显示信息，而且还提供了一个文本框要求用户使用键盘输入自己的信息，同时她还包含“确认”或“取消”两个按钮，如果用户“确认”按钮，则prompt()方法返回用户在文本框中输入的内容（是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮，则prompt()方法返回null，我们称这种对话框为提示框，在这三种对话框中，它的交互性最好。

在javascript中有三种声明变量的方式：var、let、const。
var:var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
      var 声明全局变量，换句话理解就是，声明在for循环中的变量，跳出for循环同样可以使用。
      声明在for循环内部的sum，跳出for循环一样可以使用，不会报错正常弹出结果
let:同一个变量，不可在声明之前调用，必须先定义再使用，否则会报错，循环体中可以用let
    let是块级作用域，函数内部使用let定义后，对函数外部无影响。并且let不能定义同名变量，否则会报错。
const:用于声明常量，也具有块级作用域 ，也可声明块级。const定义的变量不可以修改，而且必须初始化。
      它和let一样，也不能重复定义同一个变量，const一旦定义，无法修改
let和const属于局部变量，不会出现变量提升的情况

2022.01.10 第二阶段 day 10

JavaScript概述

它是一门客户端脚本语言,基于对象和事件驱动的网页编程语言

客户端(client):游览器
脚本语言:不需要编译,可以直接运行,只要设备安装了游览器,就可以直接运行js语言
基于对象:指的js已将内置好了对象,我们可以直接使用

JavaScript面向对象特点:先创建对象,在使用对象调用属性或方法
事件驱动:

*事件:指的触发网页的事件

*事件源:指的网页中的元素

*事件和事件源绑定:

*驱动:调用js代码

也可以Google游览器右击检查打开控制台

js代码建议放到<body>标签最下面,加载顺序从上往下执行

JavaScript组成=ECMA+DOM+BOM

ECMAScript: 规范了javascript的基本语法
DOM:  document object model : 文档对象模型（由一系列文档对象构成的模型）
      作用：操作标记性的文档(指的xml或者html文档)
BOM:  browser object model: 浏览器对象模型（由一系列浏览器对象构成的模型）
      作用：操作浏览器的。

JavaScript和Java的区别

java面向对象的编程语言,是一门强类型的编程语言
   面向对象
   强类型
js
   面向对象
   弱类型,建议使用var(variable)来表示类型
JavaScript语法书写和java相似,区分大小写,建议每行结束用分号结束

注意：书写js代码时，一定一定加上<script> js代码 </script>

JavaScript基本语法

JavaScript类型

1.原始类型

number类型：数字类型
string类型：字符串或者字符
null类型：比如：定义一个变量，赋值为null , var a =null;
undefined类型：未定义类型，比如：定义一个变量，没有赋值，var a;
boolean类型：表示true或者false…

2.引用类型

Object,Array,Date,Function
…

<hr>标签是单标签（空标签），没有元素内容，只是显示为一条水平线，表示话题的转移；

JavaScript 使用关键字 function 定义函数。

document对象(Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。)

document.write(totalPages);

typeof判断变量是什么类型

基本语法小结

注释：单行// 多行/**/
输入输出语句：prompt()、alert()、console.log()、document.write()
变量和常量：var或let、const
基本数据类型：boolean、null、undefined、number、string
typeof 关键字：用于判断变量的数据类型
运算符：算数、赋值、逻辑、比较、三元运算符
流程控制和循环语句：if、switch、for、while
数组：数据类型和长度没有限制，let 数组名 = [长度/元素]
函数：类似方法，抽取代码，提高复用性

常量和变量

变量

全局变量:在方法外部定义,可以在任意地方使用,比如:var a=10;

局部变量:在方法内部定义,只能在方法内使用

定义局部变量，可使用关键词： let

常量值（不能改变的值），关键词：const

<script type="text/javascript">
			 //1.定义一个常量值
			 const num =10;
			 //2.测试
			 console.log("打印常量值："+num);//正确的写法
</script>
//注意：常量值定义在方法内部或者方法外部都可以。

运算符

算数运算符

赋值运算符

比较运算符

== : 只比较值，不比较类型
=== :先比较类型，然后在比较值

逻辑运算符:&&逻辑与,并且 ||逻辑或,或者 !取反

   注意： 空串取反操作：true
         null取反操作：true 
         0取反操作：true 
         Nan取反操作：true

三元运算符

流程控制语句

if 语句 switch 语句 for 循环 while 循环

分支结构
if
if else
if else if---else if---else
循环结构
for(初始语句;条件语句;条件控制语句){
循环体
}
while(条件语句){循环体}
do{
循环体
}while(条件控制语句)

函数

函数(方法)概述:指的是将具有独立功能的代码封装在一起,这些代码就构成函数了

函数的创建

方式一： 动态函数(很少用)
var fun1 = new Function(参数，方法体);
方式二：普通函数
function 方法名称（方法的参数）{
方法体内容
}
方式三：匿名函数
var 方法名称 = function (方法的参数）{
 方法体内容
}

函数的调用

遵循原则：
先创建函数
再调用函数
注意细节： 在定义参数时，参数前面不加var ,let

函数的属性

获取参数的个数： length

数组

概述

java里:数组是用来存储相同数据类型的"容器"

js里(弱类型):数组是用来存储多个数据的"容器"

定义

静态数组初始化:指的在创建数组,就要给数组赋值
   var arr = [1,“a”,“b”,true];或者
   var arr= new Array(1,“a”,“b”,true);
动态数组初始化:指的创建一个指定长度的数组,然后再赋值
   var arr=new Array(指定长度);
创建一个空的数组
   var arr=[ ]; 或者 var arr= new Array();

特点

数组的元素类型：可以是任意类型

数组的长度可以变化的

( 数组的长度 = 数组的最大索引值+1)

数组的属性：

length属性：获取数组的长度

常用方法

var str = 数组对象.join(连接符号);//字符串
var endEle = 数组对象.pop();// 删除最后一个元素并返回
var lenght = 数组对象.push(ele);//向数组末尾添加一个元素ele,返回新的 长度
var arrNew = 数组对象.reverse();//颠倒数组元素的顺序，返回一个新的数组

2022.01.11 第二阶段 day 11

DOM

概述: Document Object Model 文档对象模型

作用：操作标记性文档（目前学过的xml，html文档）

document文档对象表示整个HTML文档

element标签对象表示网页的标签

attr 属性对象 text 文本对象

DOM分类

核心Dom, xml的Dom, html的Dom 大部分api都是通用的。

DOM的api

Dom操作标签

获取标签对象：

getElementByld(id属性)根据id获取标签对象： 获取的是一个标签对象
getElementsByTagName(标签名称)根据标签名称获取标签对象： 获取的是多个标签对象
getElementsName(name属性值)根据name属性获取标签对象：获取的是多个标签对象
getElementsName(class属性值)根据class属性获取标签对象： 获取的是多个标签对象
子元素对象.parentElement属性:获取当前父元素

操作标签对象

createElement(标签名):创建一个新元素

appendChild(子元素):将指定子元素添加到父元素中

removeChild(子元素):用父元素删除指定子元素

replaceChild(新元素,旧元素):用新元素替换子标签

Dom操作属性（设置属性，获取属性，移除属性）

setAtrribute(属性名,属性值):设置属性

getAtrribute(属性名):根据属性名获取属性值

removeAtrribute(属性名):根据属性名移除指定的属性

style属性:为元素添加样式

Dom操作文本(文本:指的标签体内容)

获取文本内容
  var text_content = 标签对象.innerText; //标签对象.innerHTML;
设置文本内容（把原有的文本内容给覆盖）
  标签对象.innerText=“新的文本内容”；
  标签对象.innerHTML=“新的文本内容”；
注意：
  innerText属性：解析纯文本，即使是标签，也看成纯文本
  innerHTML属性：可以解析纯文本，也可以解析标签
注意：以上操作必须是对围堵标签进行，只有围堵标签才有标签体。

1.通过document获取标签对象
 根据id获取:var singleTag=getElementById("id的值");
 根据标签名称获取:var tags=getElementByTagName("标签名称");
 根据标签的name属性获取:var tag=getElementsByName("name属性的值");
 2.通过标签对象操作属性
 给属性赋值:
 方式一:标签对象.属性名称=赋值;//可以,但是在有的游览器不兼容
 方式二:标签对象.setAttribute("属性名称","赋值");
 获取属性的值
 方式一:var value=标签对象.属性名称;//可以,但是在有的游览器不兼容
 方式二:var value=标签对象.getAttribute("属性名称");
 3.操作文本
 文本:指的标签体的内容,只有围堵标签才有标签体,比如a标签,div标签...
 设置文本:
 标签对象.innerHTML=“新的文本内容”；
 获取文本
 var value = 标签对象.innerHTML;

事件

事件: 指的操作网页,触发的动作,比如:鼠标单击,鼠标双击,按键盘等

事件源: 指的网页的元素,比如:标签,文本等

监听 (事件js代码和事件源绑定):在网页里面的监听，指的通过触发网页的元素，调用事件对应的js代码，实现网页的动态效果

事件和事件源绑定

直接绑定:就是在标签里面写我们的事件

间接绑定:就是通过我们的标签调用事件属性

常见的事件

点击事件
    onclick： 单击事件
    ondbclick: 双击事件
鼠标状态事件
    onmousedown： 鼠标按下事件
    onmouseup：鼠标松开事件
    onmousemove：鼠标移动事件（每次移动每次触发执行）
    onmouseover： 鼠标悬浮事件（触发执行一次）
焦点事件
    onfocus：获取焦点
    onblur: 失去焦点
键盘事件
    onkeydown：键盘按下事件
    onkeyup:键盘松开事件
表单事件
    onsubmit: 表单提交事件（只有提交按钮，才会触发事件）
内容改变事件
    onchange: 在内容改变时，触发该事件
页面加载事件
    onload: 等html网页完全加载完毕后，才执行事件里面的js代码

在页面中显示图片两种引入方式

绝对路径,带http(https:安全)
相对路径:同一级目录
        下一级目录
        上一级目录(../表示访问此文件所在文件夹的上一级; ./访问此文件所在文件夹; ../../访问此文件所在文件夹上一级的上一级

BOM

BOM : browser object module,浏览器对象模型(一系列对象,构成模型),操作浏览器的.

作用：操作浏览器的

BOM的五个对象

window
表示窗口对象,同时也是bom的顶层对象(可以通过window对象获取其它四个bom对象)
navigator
表示浏览器对象, 获取浏览器的相关参数信息(比如:使用的是那个浏览器,版本号是多少)
screen
表示网页的屏幕带下,操作网页的大小(分辨率,比如1366*768)
location
表示地址栏对象,操作地址栏的地址(获取地址栏的地址或者改变地址栏的地址)
history
表示用户访问过的历史记录,操作用户访问过的历史记录

常用api

window对象

弹出框方法:警告框: alert(内容);// window.alert(内容);
确认框: var flag = confirm(内容);//window.confirm(内容);
输入框: var user_value= prompt(提示信息);//window.prompt(提示信息);

操作窗口方法:打开窗口open() 关闭窗口close()

定时器方法:

一次性定时器:
设置定时器: var id = setTimeout(js代码,毫秒值), 清除定时器: clearTimeout(定时器标识);
比如: 定时炸弹,设置时间定时爆炸, 清除炸弹: 清除的标识
循环定时器:
设置定时器: var id= setInterval(js代码,毫秒值), 清除定时器: clearInterval(定时器标识);

location对象

获取地址栏的地址
var path = location.href;// 获取值
改变地址栏的地址(资源会跳转)
location.href=“跳转的资源地址”;//设置值

…

HTML CSS JavaScript(2111)

文章目录

2022.01.05 第二阶段 day 07

HTML超文本标记语言

结构

常用标签

标题标签h1h6(大小,字体加粗且自动换行)

列表标签

图片标签

超链接标签

锚定:从一个位置回到指定的另一位置

Input标签

表格标签

表单标签

2022.01.06 第二阶段 day 08

表单标签

其他标签

加入音频和视频

css 全称叫层叠样式表Cascading style sheet

选择器

标签名选择器

class选择器

id选择器

分组选择器

属性选择器

盒子模型

2022.01.07 第二阶段 day 09

css

外部css

JavaScript

特点

js语法

基本数据类型

复杂数据类型

注释

js变量

js的运算符

JS语句

2022.01.10 第二阶段 day 10

JavaScript概述

JavaScript和Java的区别

JavaScript基本语法

基本语法小结

常量和变量

运算符

流程控制语句

函数

函数的创建

函数的调用

函数的属性

数组

概述

定义

特点

数组的属性：

常用方法

2022.01.11 第二阶段 day 11

DOM

DOM分类

DOM的api

事件

事件和事件源绑定

常见的事件

BOM

BOM的五个对象

常用api

文章目录

标题标签h1_h6(大小,字体加粗且自动换行)