day25后几天为答疑和测试，第二阶段学习第一天是day30
在今日内容
0 复习昨日
1 本周安排
2 第二阶段介绍
3 HTML
0 复习昨日
1 本周安排
前面的Java知识
类,对象,属性,方法
String,日期操作,包装类操作
集合操作
本周
- HTML 1天
- CSS 1天
- JavaScript 3天
前端知识比后端简单,注意是记单词,要求就是会用见到别人写的页面要认识
2 第二阶段介绍
第一阶段是java基础,第二阶段是javaweb,我们要是还有第一阶段的知识来完成javaweb项目的开发.即学完第二阶段就可以完成一个简单项目,理解项目开发流程,知道一个项目的请求响应的过程.
第二阶段(五周)
- 前端
- 数据库
- javaweb知识
- 项目开发
- 前端浏览器页面发请求
- java代码处理请求,操作数据库
- java代码根据数据库结果,做出响应
3 HTML
3.1 HTML介绍
我们进行web开发,web开发中前端页面就是由HTML编写.
html是一种开发页面的编程语言,全称Hypertext Markup Language(超文本标记语言)
- 超文本,比普通文本功能丰富,图片,动态效果,超链接,多媒体等等
- 标记,就是标签,HTML语言编程,就是利用各种标签来开发,不同的标签实现不同的效果
- 语言,一种编程语言
主要作用:
- 使用各种标签,完成一个网页,给用户看
3.2 基本语法
1 html文件,后缀是.html
2 编辑可以使用记事本编辑
3 基本语法
- 标签是由尖括号组成
- 标签大部分是由一对标签组成,前面成为开标签,后面的称为闭标签,闭标签有/
- 在开标签内可以给标签设置属性,
- 属性名="属性值"
- 多个属性空格隔开
- HTML中标签和属性是不区分大小写,但是建议是全部小写
- 标签可以嵌套
4 基本骨架
html<html> <!-- 这是html页面的根标签 --> <head> <!-- 头标签,主要定义当前页面的信息 --> <title>第一个HTML页面</title> <!-- 页面标题 --> </head> <body> <!-- 身体标签,内部写页面的主要内容 --> <h1>hello,world</h1> <!-- 标题标签,会在页面展示一个大标题 --> </body> </html>5 运行
- 以浏览器打开
3.3 开发工具
VSCode(微软) (我们使用这款)HBuilder(国产)- WebStorm (IDEA家族的)
- Dreamweaver (考古队)
3.3.1 安装
安装,默认下一步下一步就可以.
建议勾选2345,这样可以在右键时有 一个提示"使用VSCode打开文件"
3.3.2 案装插件
VSCode不装插件,等于白用~~~~
以上几个是非常墙裂建议安装!
在应用商店,输入以上几个的名字即可
- Auto rename tag
- Chinese (Simplified)(简体中文)
- Material lcon Theme
- open in browser
- Prettier - Code formatter
3.3.3 使用
使用VSCode,最好的方式
- 先在本地磁盘创建好一个前端项目(文件夹)
- 使用VSCode打开该文件夹
- 在内容创建页面文件
也可以
开始编写页面,HTML骨架是固定的,可以一键生成!!!
如何运行?
1 在磁盘中找到文件,使用浏览器打开
2 或者使用刚才我们安装的插件,有快捷键 alt+b,就会使用电脑的默认浏览器打开
4 HTML标签
4.1 结构标签【重点】
html
<!-- 注释 -->
<!--
结构标签,有这些标签组成最基本的HTML页面
-->
<html> <!-- 根标签 -->
<head> <!-- 头标签 -->
<title></title>
</head>
<body> <!-- 身体标签 -->
</body>
</html>4.2 排版标签【重点】
排版标签就是对内容的简单布局.
- 标题h1-h6
- 分割线hr
- 换行br
- 段落p
html
<br>
<!-- 标题
页面展示的内容,要放在开闭标签之间
从h1到h6都有,依次字体变小
-->
<h1>
郑州疫情防控新闻发布会上，社区书记称"因防疫错过女儿成人礼"并哽咽，网友热议
</h1>
<h2>
郑州疫情防控新闻发布会上，社区书记称"因防疫错过女儿成人礼"并哽咽，网友热议
</h2>
<h3>
郑州疫情防控新闻发布会上，社区书记称"因防疫错过女儿成人礼"并哽咽，网友热议
</h3>
<h4>
郑州疫情防控新闻发布会上，社区书记称"因防疫错过女儿成人礼"并哽咽，网友热议
</h4>
<h5>
郑州疫情防控新闻发布会上，社区书记称"因防疫错过女儿成人礼"并哽咽，网友热议
</h5>
<h6>
郑州疫情防控新闻发布会上，社区书记称"因防疫错过女儿成人礼"并哽咽，网友热议
</h6>
<!--
分割线 hr
它是单标签，只有开，是自闭
hr标签内有属性,改变分割线的效果
width,表示宽度,单位有两种
1)像素px 是固定尺寸
2)百分比% 基于当前浏览器窗口
size,表示粗细,单位像素
color,颜色
1) 颜色单词
2) rgb(0,0,0) 这三个数,都是0-255
3) 十六进制取色 #000000 ~ #FFFFFF
-->
<hr width="500px" />
<hr width="50%" size="50px" color="red"/>
<hr width="50%" size="50px" color="rgb(0,0,255)"/>
<hr width="50%" size="50px" color="#000000"/>
<hr width="50%" size="50px" color="#0000FF"/>
<hr width="50%" size="50px" color="#32CD32"/>
<!--
br标签 换行,单标签
-->
<!--
p标签,段落标签
-->
<p>昨日，郑州一场疫情防控发布会上，社区书记刘红英动情讲述：
"前几天是我女儿18岁生日，然而我却缺席了她的这场成人礼，
当时她给我发来一段和猫咪的视频，告诉我她很好，
让我多爱自己一点，我把这个视频发到了朋友圈，
当时我们很多志愿者在我的朋友圈里，
他们立刻截图在居民群里广泛转发，
还为我的女儿送来了各种各样的祝福。"</p>
<p>讲到动情处，她开始哽咽......</p>
<p>此事引起了网友的热议，今天下午，#郑州平安街社区的万能的朋友圈#话题词冲上了热搜，另一话题词</p>
</body>
</html>4.3 块标签【重点】
块标签是我们将来使用最多的一个标签,可以用来布局页面,得配合后续的CSS来实现.
- div
- 将来可以通过css来调整它的大小,尺寸,位置,完成页面布局
- span
- 将来一般做提示语
html
<body>
<!--
div标签,块
属性style,内部是css代码,意思是给div设置背景颜色,为红色
div是行级块,默认占一行
-->
<div style="background-color: red">这是一个div块标签</div>
<!--
span,块,是行内快,内容多大,占用多大
-->
<span style="background-color: green">这是一个span块</span>
</body>4.4 文字标签
html
<body>
<!--
font标签,代表文字
属性可以更改字体效果
size,文字大小,单位没有,是标号,从1-7,从小到大
color,颜色,三种方案
face,字体
-->
<font size="1" color="red">讲到动情处，她开始哽咽......</font><br />
<font size="2" color="rgb(123,123,123)">讲到动情处，她开始哽咽......</font
><br />
<font size="3" color="#87cc65">讲到动情处，她开始哽咽......</font><br />
<font size="4" face="宋体">讲到动情处，她开始哽咽......</font><br />
<font size="5" face="楷体">讲到动情处，她开始哽咽......</font><br />
<font size="6">讲到动情处，她开始哽咽......</font><br />
<font size="7">讲到动情处，她开始<strong>哽咽</strong>......</font><br />
</body>4.5 列表标签【重点】
列表是一个非常常见的标签
- 无序列表(最常见)
- ul
- 有序列表(order list)
- ol
html
<body>
<!-- 有序列表(order list) ,标签是ol-->
<!-- 列表内,有列表项,<li> -->
<ol>
<li>呼市多名公职人员疫情期间聚众饮酒热</li>
<li>暂缓巴基斯坦40亿贷款偿还?中方回应热</li>
<li>70秒带你打卡进博会</li>
</ol>
<hr />
<!-- 无序列表(unorder list),标签是ul -->
<ul type="square">
<li>八部门：鼓励开放郊野公园提供露营</li>
<li>"下饭神器"老干妈不香了？</li>
<li>逃犯到派出所开无犯罪记录证明</li>
</ul>
</body>4.6 图片标签
html
<body>
<!--
img,图片标签,单标签
src: 图片路径
alt: 图片解释
width: 图片宽度,高会自动变
单位是像素,百分比
路径:(非常重要!!!)
1) 与页面平级,直接写路径
2) 图片在平级文件夹里面
./代表当前路径
./images/图片.jpg
3) 图片与本文件在不同的文件夹
../回到根路径,再往下找
-->
<!-- <img src="中国地图.jpg" alt="地图" /> -->
<!-- <img src="./images/中国地图.jpg" alt="地图" /> -->
<img src="../images/中国地图.jpg" width="800px" alt="地图" />
</body>4.7 超链接标签【重点】
超链接就是一个点击可以跳转到其他页面的一个标签.
html
<body>
<!--
a,超链接标签,用来跳转页面
href,跳转至的目的地路径
target
_self,已自身刷新到新的页面
_blank,打开一个新的页面
特别注意!!有下划线_
-->
<a href="http://www.baidu.com" target="_self">百度一下,你就知道</a><br />
<a href="demo4.html" target="_blank">点击跳转demo4</a><br />
<a href="./views/demo5.html">点击跳转demo5</a><br />
</body>5 总结
- html
- head
- title
- body
- h1-h6
- hr
- br
- p
- font
- div
- span
- ol
- ul
- li
- img
- a
使用这些标签,可以实现不同的效果
可以设置属性来改变现实效果,但是一般都不会在直接使用HTML的属性来改变效果
后续会实现CSS来改变属性
记住这些标签和功能,HTML标签就好像是人,CSS就好像是化妆师
6 作业
1 背单词,记标签
2 每个页面重复5遍以上
3 列表里面搞链接
4 列表里面搞图片
5 点击图片,调整页面
6 学会F12调试,摸索一下
# 5 总结
> - html
> - head
> - title
> - body
> - h1-h6
> - hr
> - br
> - p
> - font
> - div
> - span
> - ol
> - ul
> - li
> - img
> - a
>
> -------------------
>
> 使用这些标签,可以实现不同的效果
>
> 可以设置属性来改变现实效果,但是一般都不会在直接使用HTML的属性来改变效果
>
> 后续会实现CSS来改变属性
>
> ----
>
> 记住这些标签和功能,HTML标签就好像是人,CSS就好像是化妆师
# 6 作业
1 背单词,记标签
2 每个页面重复5遍以上
3 列表里面搞链接
4 列表里面搞图片
5 点击图片,调整页面
6 学会F12调试,摸索一下