随堂笔记
约 7551 字大约 25 分钟
随堂笔记
1.今日目标和应用场景
1.能够使用HTML语言编写简单的网页,表单的实现
2.能够看懂css样式,并且通过查阅api简单给html页面进行样式修饰或者美化网页
3.能够熟悉JavaScript基础语法
1.html介绍(了解)
1.网站和网页区别
网站=网页+后端(java+数据库)
网页:显示给用户看的
2.html作用:书写网页的。
2.使用记事本创建html(了解)
<!--根标签-->
<html>
<!--头标签-->
<head>
<!--网页的标题标签-->
<title>这是第一个html</title>
</head>
<!--体标签-->
<body>
<font color="yellow" size="7">乾坤未定,你我皆黑马</font>
</body>
</html>
超文本的后缀名:.html或者.htm
3.在vscode中书写html页面_入门(掌握)
1.打开文件夹
2.在文件夹下面创建html页面
3.在空的html页面上书写!然后回车即可生成html页面
<!-- 1.声明当前文件是一个超文本文档 -->
<!DOCTYPE html>
<!-- 2.表示当前文件支持英文,也可以书写中文 -->
<html lang="en">
<head>
<!-- 3.当前页面使用的编码表 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vscode中的第一个html</title>
</head>
<body>
<font color="red" size="7">你我皆黑马</font>
</body>
</html>
4.使用vscode注意
1.设置vscode的文件为自动保存:文件===》选择自动保存
2.快捷键:
1.ctrl+B :切换当前窗口是否全屏显示
2.alt+shift+向下/上键 :复制一行代码
3.alt+向下/上键: 移动
4.ctrl+D : 删除
5.ctrl+/
5.基础标签(理解)
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<!--
1.字体标签:font
2.font标签常见属性:
1)color :表示字体颜色,颜色值有两种设置方式:
I:使用英文字母 red yellow green
II:使用十六进制表示 RGB red green blue #xxyyzz xx表示red的值 yy表示green的值 zz表示blue的值
2)size:字体大小
属性值范围是:1-7,依次递增,默认是3
3)face:字体样式 楷体 宋体等
-->
<font color="red">黑马程序员</font>
<font color="#FF0000">黑马程序员</font>
<font color="#00FF00" size="3">黑马程序员</font>
<font color="#0000FF" size="1">黑马程序员</font>
<font color="#0000FF" size="7" face="楷体">黑马程序员</font>
<!--
3.i标签:倾斜
4.b标签:加粗
-->
<i>我是倾斜的</i>
<b>我是加粗的</b>
<b><i>我既是加粗的又是倾斜的</i></b>
<!--5.水平线-->
<hr>
<!--
6.br标签:换行
-->
锁哥<br>柳岩
<!--
7.center表示文本居中标签
-->
<br>
<center>杨幂</center>
</body>
</html>
6.基础标签练习
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>传智教育</title>
</head>
<body>
<!--
标题标签:h1~h6 自动加粗和换行
-->
<h2>企业简介</h2>
<hr color="yellow">
<p><font color="red">传智教育</font>(股票代码 003032),隶属江苏传智播客教育科技股份有限公司,注册资本4亿元,是第一个实现A股IPO的教育企业
,公司致力于培养高精尖数字化人才,主要培养人工智能、python+大数据开发、智能制造、软件、互联网、区块链等数字化专业人才及数据分析、 网络营销、
新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验,且来自互联网或研究机构的IT精英组成,负责研究、开发教学模式和课程内容
。公司具有完善的课程研发体系,一直走在整个行业发展的前端,在行业内竖立起了良好的品质口碑。</p>
<p>
民族振兴靠人才,中华民族正处于伟大复兴之路上,要赢得国际竞争,需要拥有大量的科技人才,我们将肩负起民族使命,在三尺讲台诲人不倦 著书立说,
为科技行业培养出大量的优秀人才,促进民族伟大复兴!我们的使命是:<b>为中华民族伟大复兴而讲课,为千万学生少走弯路而著书。</b></p>
<p>探索教育之路,长途漫漫。传智教育希望可以通过自己的努力,寻找出一条更符合人类自然成长规律的教育之路,建立起一个新的教育生态环境,
让中国的家长和孩子们在现有的教育体系之外,再多一些选择的机会。因此“<b>探索教育本源,开辟教育新生态</b>”便成为了所有传智人为之奋斗的终极愿景
,也是所有传智人共同努力的目标。为此,15年来,传智人不曾有一丝懈怠,相信在传智人的不懈努力下,大道不远,终在脚下。</p>
<hr color="yellow">
<center>江苏传智播客教育科技股份有限公司 <br>
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882</center>
<!--
特殊符号: 以&开始,以分号
< : < less than
> : > greater than
© 版权符号 : ©
-->
</body>
</html>
7.图片 音频 视频标签
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--引入图片-->
<!--
1.使用img标签引入图片,常见属性:
1)src:表示引入图片的路径
src="../img/a.jpg" :
1. .. 表示当前页面的上一级路径即:02-图片音频和视频目录
2. /img/a.jpg :在02-图片音频和视频目录同级别目录下有img目录,下面是a.jpg
2)px在前端中表示单位,像素,单位还可以使用百分比表示,相对于页面 。
表示占页面50%
-->
<!-- <img src="../img/a.jpg" height="500px" width="500"> -->
<!-- <img src="../img/a.jpg" height="500px" width="50%"> -->
<hr>
<!--
2.音频 audio标签
注意:audio标签必须加controls属性,表示播放控件,如果不加该属性就无法播放
-->
<!-- <audio src="../img/b.mp3" controls></audio> -->
<!--
视频:video
-->
<video src="../img/c.mp4" controls height="500px" width="500px"></video>
</body>
</html>
注意:
1.src属性引入的路径不能是本地的路径。
2.对于video audio必须书写播放控件属性controls
8.超链接标签a
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
超链接标签:a标签 可以实现跳转
属性:
1.href="http://www.itcast.cn" 表示跳转地址
2.target="_blank" 表示新跳转的网页在新的窗口打开
target="_self" 表示新跳转的网页在当前窗口打开覆盖之前的窗口,默认的打开方式
-->
<a href="http://www.itcast.cn">访问传智</a>
<a href="http://www.baidu.com" target="_blank">访问百度</a>
</body>
</html>
9.列表标签
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
1.有序列表标签 ol order list
2.ol和ul以及li标签上都具有一个type属性,表示当前列表类型
1)type属性表示列表类型,默认值是1,然后子标签li依次递增
2)type属性值:1 A a i I
3.ol>li*3 回车,然后在ol标签中生成3个li标签
-->
<ol>
<li>柳岩</li>
<li>杨幂</li>
<li>李沁</li>
</ol>
<ol type="A">
<li>柳岩</li>
<li>杨幂</li>
<li>李沁</li>
</ol>
<ol type="a">
<li>柳岩</li>
<li>杨幂</li>
<li>李沁</li>
</ol>
<ol type="i">
<li>柳岩</li>
<li>杨幂</li>
<li>李沁</li>
</ol>
<ol type="I">
<li>柳岩</li>
<li>杨幂</li>
<li>李沁</li>
</ol>
<hr>
<!--
无序列表:ul unorder list
type属性值:
1)circle 空心圆
2)square 实心方形
3)disc 实心圆 默认的
-->
<ul>
<li>柳岩</li>
<li>杨幂</li>
<li>李沁</li>
</ul>
<ul type="circle">
<li>柳岩</li>
<li>杨幂</li>
<li>李沁</li>
</ul>
<ul type="square">
<li>柳岩</li>
<li>杨幂</li>
<li>李沁</li>
</ul>
<ul type="disc">
<li>柳岩</li>
<li>杨幂</li>
<li>李沁</li>
</ul>
</body>
</html>
10.表格标签(掌握)
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
1.表格标签:table
2.table标签的子标签:
1)行标签:tr
2) 列标签:td th
注意:th表示表格标题标签,自动加粗和居中显示
3.table标签的属性border="1px" 表示表格边框
4.table标签的属性cellspacing="0px" 表示表格单元格之间的距离是0,即没有距离
5.table标签的属性width="50%" 表示表格标签的宽度占页面的50%
6.tr的属性:align="center",值center表示居中 left 靠左(默认值) right 靠右
-->
<table border="1px" cellspacing="0px" width="50%">
<!-- 第一行 -->
<tr>
<!-- 第一列 -->
<th>序号</th>
<!-- 第2列 -->
<th>品牌logo</th>
<!-- 第3列 -->
<th>品牌名称</th>
<!-- 第4列 -->
<th>企业名称</th>
</tr>
<!-- 第2行 -->
<tr align="center">
<td>010</td>
<td>
<img src="../img/三只松鼠.png" height="50px" width="50px">
</td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<!-- 第3行 -->
<tr align="center">
<td>009</td>
<td>
<img src="../img/优衣库.png" height="50px" width="50px">
</td>
<td>
优衣库
</td>
<td>
优衣库
</td>
</tr>
<!-- 第4行 -->
<tr align="center">
<td>008</td>
<td>
<img src="../img/小米.png" height="50px" width="50px">
</td>
<td>
小米
</td>
<td>
小米科技有限公司
</td>
</tr>
</table>
</body>
</html>
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
需求1: 实现跨行,制作电话本
-->
<table border="1px" cellspacing="0px" width="50%">
<tr>
<th>姓名</th>
<th>手机号</th>
</tr>
<tr>
<!--
TODO:rowspan属于td或者th的属性,表示跨行,属性值是几表示跨几行
-->
<td rowspan="2">张三</td>
<td>138000000000</td>
</tr>
<tr>
<!-- <td>张三</td> -->
<td>138000000001</td>
</tr>
<tr>
<td>李四</td>
<td>139000000000</td>
</tr>
</table>
</body>
</html>
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
需求2: 实现跨列,制作电话本
-->
<table border="1px" cellspacing="0px" width="50%">
<tr>
<th>姓名</th>
<!--
TODO:
1.th或者td具有属性colspan,表示跨列,值是几就跨几列
-->
<th colspan="2">手机号</th>
<!-- <th>手机号</th> -->
</tr>
<tr>
<td>张三</td>
<td>13800000000</td>
<td>13800000001</td>
</tr>
<tr>
<td>李四</td>
<td>13900000000</td>
<td>13900000001</td>
</tr>
</table>
</body>
</html>
小结:
1.td或者th属性实现跨行:rowspan
2.td或者th属性实现跨列:colspan
11.布局标签
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
1.div标签:块级标签即单独占一行的标签。h1~h6 p br等
-->
<div>div1</div>
<div>div2</div>
<!--
2.span标签:属于行内标签;共处一行的标签 img a 等
-->
<span>span1</span>
<span>span2</span>
</body>
</html>
12.表单标签(很重要)
1.form标签
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
1.form表单标签
常见属性:
1)action:表示将收集的数据提交到具体后台服务器的地址
2) method:提交数据到后台的方式(请求方式)
get: http://www.jd.com?username=锁哥&password=1234 默认方式
1.不安全
2.有大小限制
3.只能传输字符数据,传输数据格式url?name=value&name=value
post: http://www.jd.com
1.安全
2.没有大小限制
3.可以传输任意数据
-->
<form action="#" method="post">
<!-- TODO:所有收集的数据必须放到form标签文本中 -->
</form>
</body>
</html>
2.input输入域
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
input输入项
1.<input type="text"> 普通文本 默认值
2.<input type="password">
3.<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女
TODO:radio表示单选按钮,只能选择一个,通过name属性保证单选效果,要求name属性值必须一致
4. <input type="checkbox"> 篮球 <input type="checkbox"> 足球
TODO:checkbox 多选框或者复选框
5. <input type="file"> 上传的文件
6.<input type="hidden" value="918181iauaioO"> 隐藏域。用户在页面看不到,其实在页面中是存在的。如果某种需求不需要给用户看,但是后台服务器需要
数据,那么可以将数据放到隐藏域标签的value中
7.<input type="submit" value="登录"> submit :将表单收集的数据提交到指定服务器中
TODO: 补充: 如果单选按钮和复选框被选中,那么需要给input标签加checked属性
-->
<form action="#">
<!-- TODO:收集的数据必须放到form标签文本中 -->
用户名:<input/> <br>
用户名:<input type="text"/> <br>
密码:<input type="password"> <br>
性别: <input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女 <br>
爱好:<input type="checkbox" checked> 喝酒 <input type="checkbox"> 抽烟 <input type="checkbox"> 烫头 <br>
<input type="file"> <br>
<input type="hidden" value="ksjsjsjjsjjsjjs"> <br>
<input type="submit" value="登录">
<input type="reset">
<input type="button" value="注册">
</form>
</body>
</html>
3.下拉框和文本域标签
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<form action="#">
<!--
1.select下拉项:需要结合子标签option一起使用,有几个下拉项就有几个option
2.提交到后台的数据是用户当前选中的下拉项的option的value值
3.option的属性selected表示当前下拉项被选中
-->
<select name="" id="">
<option value="">----------请选择城市----------</option>
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
</select>
<hr>
<!--
textarea文本域:由行和列组成
1.cols="30" column 列 占30列
2.rows="10" 行,占10行
-->
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html>
13.在html页面中引入css(理解)
1.在标签内部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.在html标签内部引入css
1)要求属性名必须style,在属性值中书写的都是css代码格式:
style="样式名:样式值;样式名:样式值;样式名:样式值....."
-->
<div style="color:red">div1</div>
</body>
</html>
2.在head标签内部使用style标签引入
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
<style>
div{
color:green;
}
</style>
</head>
<body>
<!--
1.在head标签内部引入css
<style type="text/css">
作用的标签{
样式名:样式值;
样式名:样式值;
......
}
</style>
-->
<div>传智教育</div>
<div>传智教育</div>
</body>
</html>
3.在head标签内部使用link标签引入外部的css文件
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
<!--引入外部的css,开发使用-->
<link rel="stylesheet" href="../css/demo01.css">
</head>
<body>
<!--
1.在head标签内部引入css
<link rel="stylesheet" href="外部css文件地址"/>
-->
<div>传智教育</div>
<div>传智教育</div>
</body>
</html>
外部的css文件后缀名是.css
/*在css文件中只能书写css代码,css文件后缀名是.css*/
div{
color:blue;
}
14.css选择器(理解)
1.元素选择器
元素名{
样式名:样式值;
样式名:样式值;
....
}
2.id选择器(很重要)
#id属性值{
样式名:样式值;
样式名:样式值;
....
}
3.类选择器
.class属性值{
样式名:样式值;
样式名:样式值;
....
}
15.查阅API
https://www.w3school.com.cn/h.asp
4.代码演示
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--
1.border属性:表示边框
1)border-width: 10px 边框的宽度是10px
2)border-style: dashed; 边框的样式 dashed 虚线 solid 实线
3)border-color: blue; 边框颜色
2.border:red solid 5px 是border-width: 10px;border-style: dashed;border-color: blue;的简写
-->
<div style="border:red solid 5px ;background-color: aqua">div1</div>
<!-- <div style="border-width: 10px;border-style: dashed;border-color: blue;">div1</div> -->
<!--
css的属性:display,属性值如下:
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。将行内标签变为块级标签
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。将块级标签变为行内标签
-->
<div style="display: none;">锁哥</div>
<div style="display: inline;">柳岩</div>
<!-- 将块级标签变为行内标签 -->
<div style="display: inline;">杨幂</div>
<!-- 将行内标签变为块级标签 -->
<span style="display: block;">哈哈</span>
<span>呵呵</span>
</body>
</html>
16.在html页面中引入js文件
1.内部引入
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<!--在html页面内部引入js-->
<script>
//弹框
//TODO: 1.使用<script src="../js/demo01.js">...只能引入外部的js文件,不能在文本中书写js代码
// alert("我是一个快乐的屌丝程序员");
</script>
</body>
</html>
2.引入外部的
<!-- 引入外部的js文件 -->
<script src="../js/demo01.js"></script>
17.js的三种输出方式(掌握)
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<script type="text/javascript">
//1.弹出框
alert("哈哈");
//2.输出数据到页面中
document.write("呵呵");
//3.输出到浏览器控制台
//调出浏览器控制台快捷键:f12
console.log("嘿嘿");
</script>
</body>
</html>
18.定义变量 掌握
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<script type="text/javascript">
/*
定义js中的变量:
1.es6前使用var定义
2.es6开始定义变量是let 常量使用const
*/
// 1.es6前使用var定义
var i = 10;
console.log(i);
//2.es6开始定义变量是let 常量使用const 推荐使用
let x="哈哈";
console.log(x);
let y=3.14;
console.log(y);//3.14
//定义常量:不能改变
const PI=3.14;
//更改常量PI的值
//PI=1.2;//报错,因为PI是常量,不能改变
console.log(PI);
</script>
</body>
</html>
定义变量:let 变量名=数值;
定义常量:const 常量名=数值; 不能改变。
19.数据类型(掌握)
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<script type="text/javascript">
/*
js的数据类型:
1.原始数据类型
1)number (整数 小数 NaN)
2)string 字符类型
3)布尔类型 true false
4)null :空对象类型
5)undefined :未定义类型
2.引用数据类型 Object Date等
*/
let i =10;
//输出i的数据类型
console.log(typeof i);//number
//定义字符类型
let s1='哈哈';
//输出s1的数据类型
console.log(typeof s1);//string
//定义变量接收NaN数据
let j=1-'abc';
//输出j的值
console.log(j);//NaN not a number 不是一个数字
//输出j的数据类型
console.log(typeof j);//number
//定义变量
let x;
console.log(x);
//输出x的数据类型
console.log(typeof x);//undefined
//2.引用数据类型 Object Date等
// 获取当前系统时间
let date = new Date();
console.log(date);//Thu Dec 01 2022 17:10:49 GMT+0800 (中国标准时间)
///////////////////////typeof关键字////////////////////////////////////////
/*
typeof关键字作用:可以查看某个变量的数据类型。
格式:typeof 变量名
*/
</script>
</body>
</html>
20.运算符(掌握)
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<script type="text/javascript">
/*
== 和 ===区别
1. == :非严格比较,具有强制类型转换功能,如果两侧的数据类型不一致,转换一样的类型,然后比较数值是否相等
2.=== :严格比较,如果运算符两侧类型不一致,比较类型,然后返回false,如果类型一致在比较数值。
*/
//定义变量
let i=10;
let j='10';
//输出比较结果
console.log(i==j);//true 比较数值 10==10==》true
console.log(i===j);//false i属于number类型,j属于string类型,类型不一致,因此结果是false
/*
逻辑运算符:
&& || !
1.&& 短路与 : 一徦即假 false && true
2.|| 短路或 : 一真即真 true || false
3.在js中有六种假:
1)false
2) 0
3)空字符 '' 或者 ""
4)NaN
5)null
6)undefined
TODO:在js中逻辑运算符可以针对任意类型进行运算
*/
if(0 || true){
console.log("真的");
}else{
console.log("假的");
}
if(10 && 1.2){
console.log("真的");
}else{
console.log("假的");
}
if(10 && ''){
console.log("真的");
}else{
console.log("假的");
}
</script>
</body>
</html>
21.扩展_全局函数
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<script type="text/javascript">
/*
其他类型转换为数字
1.parseInt(数值):将参数数值转换为整数,从左向右解析,遇到非数值就停止解析
2.在js中有全局函数概念:不归属任何对象,即可以理解为不需要任何对象调用的函数
TODO:注意:所有的全局函数都可以使用浏览器窗口对象调用,即window对象调用,但是可以省略
*/
let s = "123abc";
//将s转换为number类型
console.log(window.parseInt(s));//123
console.log(parseInt("12.3"));//12
console.log(parseInt("a12.3"));//NaN 这里解析的时候遇到非数值a则停止解析
//将布尔类型转换为整数 :true 1 false 0
console.log(Number(true));//1
console.log(Number(false));//0
///////////////////其他类型转换为布尔类型////////////////////
console.log(Boolean(0));//false
console.log(Boolean("哈哈"));//true
</script>
</body>
</html>
今日反馈和作业
能够说出HTML作用
书写网页
能够书写HTML基本结构标签html、head、title、body
<html>
<head>
<title>网页标题</title>
</head>
<body>
</body>
</html>
能够书写图片img标签、音频audio标签、视频video标签
图片 <img src="图片地址"/>
音频:<audio src="音频地址" controls></audio> controls 播放控件
视频:<video src="视频地址" controls></audio> controls 播放控件
能够书写超链接a标签
跳转
<a href="跳转地址"></a>
能够书写表格table、tr、td、th标签
<table>
行
<tr>
<td></td>
<th></th>自动加粗和居中
</tr>
</table>
能够书写表单form、input、select、textarea标签
<form action="提交数据的后台服务器地址" method="提交数据方式get/post">
<input type="text/password/radio/checkbox/file/submit"/>
<select>
<option value="值"></option>
</select>
</form>
能够使用input标签展现普通输入框、密码框、单选框、复选框、文件上传框、提交按钮的效果
能够定义css不同选择器,id选择器、类选择器、元素选择器
1.id选择器
#id选择器{}
2.类选择器:
.class属性值{}
3.元素选择器
元素名{}
今日作业:
1.注册页面案例实现
2.熟悉课堂语法
3.学会查阅文档