day01HTML基础入门
1、今日内容学习目标
1) 能够使用idea创建html文档(掌握)
2)能够使用h1~h6、hr、p、br 等与文本有关的标签
3)能够使用有序列表ul-li和无序列表ol-li显示列表内容
4)能够使用图片img标签把图片显示在页面中
5) 能够使用超链接a标签跳转到一个新页面(掌握)
6) 能够使用table、tr、td标签定义表格(掌握)
7) 能够制作黑马旅游网的首页(掌握)
2、今日学习标签总览
一天的学习需要使用众多独立没有关联的标签,为了大家更好的吸收,现给出标签总览,以**“重要程度”排序。例如:“表格标签”**为今天最重要的标签。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lb49FN1h-1577025658883)(img/1.bmp)]
3、前端知识介绍
1、关于前端的一些要知道的事情:
前端课程的特点:知识点细,碎,多
学习前端方法:
不要死记硬背,要学会运用
案例驱动,通过案例学习
2、前端7天架构
我们学习java其实是在做JavaEE开发,主要是开发基于网页的后台应用程序,例如:京东、淘宝等购物网站。
在基础班,我们主要学习了JavaSE中的一些API,就是为了给我们在就业班学习JavaEE企业级应用开发打下坚实的基础!
而现在,我们还不能直接进入JavaEE的学习,在此之前,我们需要先学习一些有关网页开发的技术,这是进入JavaEE开发的必经之路!
下面,让我们先来了解一下JavaEE企业级开发的技术架构:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5diy4422-1577025658884)(img/2.bmp)]
说明:
HTML 网页的骨架,用来书写网页的。
Css 美化网页的。
javaScript 网页的灵魂,用来交互前端页面和后台服务器之间的数据的,没有js。那么html+css就是一个静态页面,不会和后台服务器进行
数据的交互。开发中也就没有什么意义了。
4、案例介绍
通过今天的学习要做出如下网页的:黑马旅游网的首页。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SGAmTD8s-1577025658884)(img/3.bmp)]
当然,大家现在还不知道怎么来完成这个案例,因为这个案例中需要使用很多HTML中的标签。所以想完成上述案例,我们必须先学习html这门语言。
5、HTML的概述
5.1、 什么是HTML
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ndUrJHtp-1577025658885)(img/4.bmp)]
HTML:超文本标记语言(HyperText Markup Language)
1)“超文本”就是指超过普通文本,页面内可以包含图片、链接、视频、音乐等非文字内容。并且超文本还可以设置大小,颜色,点击文本还可以进行页面跳转。说白了就是文本文件只能书写字符数据,不能包含图片、连接、视频、音乐等。而超文本是可以书写非字符的内容。超人 普通人
2) “标记”: 网页由各种各样的标记(标签)组成,就是使用标签的方法将需要的内容包括起来。例如:www.itcast.cn 标记是一个超链接。只是一些文本,由浏览器去解析这些标签符号。
3)“语言” 就是指人与计算机交互的方式。例如,之前学习的javase,sql语句,html语言。
总结:它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程。
补充:网页存放在服务器上,运行在浏览器上,运行之前先从服务器上下载到本地,在本地浏览器上解析。
5.2、什么是HTML5
2014年10月29日,万维网联盟泪流满面地宣布,经过几乎8年的艰辛努力,HTML5标准规范终于最终制定完成了,并已公开发布,这是一次重大的革新。
HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准,以其能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,为桌面和移动平台带来无缝衔接的丰富内容。
目前支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari(苹果系统),Opera等。不同的浏览器之间是有差异,同一个网页运行可能会不同。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ad8lAwpt-1577025658885)(img/5.bmp)]
5.2.1、HTML能干什么
HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时,可以通过“右键/查看网页源代码”看到具体的html代码。
网页内容包含:HTML代码、CSS代码、JavaScript代码等内容。
1)HTML代码: 结构层(好比人的骨骼/身体) 负责从语义的角度搭建页面结构
2)CSS代码: 表现层(好比人的穿衣打扮) 负责从审美的角度美化页面
3)JavaScript代码:行为层(好比一个人能歌善舞) 负责从交互的角度提升用户体验。
网页根据内容是否改变分为:静态页面、动态页面
4)静态页面:编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
5)动态页面:会根据不同的情况展示不同的内容。例如:登录成功后右上角显示用户名。
5.2.2、HTML语言特点 (了解)
1、 HTML文件不需要编译,直接使用浏览器解析即可。
2、 HTML文件的扩展名是*.html 或 *.htm。
3、 HTML结构都是由标签组成。
4、 标签名预先定义好的,我们只需要了解其功能即可。
1) 标签名不区分大小写,通常都是小写。
2) 通常情况下标签由开始标签和结束标签组成。叫做双标签。例如:www.baidu.com 超链接
3) 如果没有结束标签,建议以/结尾。叫做单标签。例如:
补充:img a 称为标签名
5、 HTML结构包括两部分:头head和体body。
5.2.3、 HTML标签的属性 (了解)
语法格式:
<标签名 属性名1="属性值" 属性名2="属性值" ...></标签名>
特点:
1、 HTML属性一般都出现在HTML标签中, 是HTML标签的一部分。
2、 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
3、 标签可以拥有多个属性。
4、 一般属性由属性名和属性值成对组成的。
示例:
<a href="http://www.itcast.cn">上海传智播客</a> <!-- 定义一个上海传智播客的超链接 -->
补充:上海传智播客叫做a标签的文本值。
<img src="images/baby.jpg" width="80" height="50"/> <!-- 定义一张图片,并设置图片的宽度和高度-->
5.3、开发HTML
5.3.1、使用记事本创建html
1、 在任意位置,创建“文本文档”,重命名“1.html”。注意文件后缀名是.html或者叫做.htm都可以。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZf5OBmi-1577025658886)(img/6.bmp)]
2、 右键/ 打开方式/ 记事本,开发html文件,并编写如下内容
<html>
<head>
<title>这是标题</title>
</head>
<body>
这是正文
</body>
</html>
说明:
1) 上述内容除了汉字,其他的字符都是固定不变的。
2) 以上使用的标签组成了HTML页面的基本结构,现将所有标签进行陈述:
整个页面的根标签,一个页面只需要一个,由头和体组成。
头标签,用于引入脚本、导入样式等。一般情况下头标签的内容在浏览器端都不显示。
体标签,是整个网页的主体,我们编写的html代码基本都在此标签体内。
3、 使用浏览器打开
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n96Ucu5w-1577025658886)(img/7.bmp)]
关于上面在浏览器中显示的内容,我们在浏览器中查看也没有什么特殊的效果,接下来修改下代码,在这里只是先了解,后面我们会详细讲解。
<html>
<head>
<title>这是标题</title>
</head>
<body>
<font size="5" color="red">这是正文</font>
</body>
</html>
浏览器显示效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NsPZAebI-1577025658887)(img/8.bmp)]
5.3.2、以下是HTML的基本结构
<!-- 基本结构 -->
<html>根标签
<!-- 网页头部 -->
<head>
<!-- 标题 -->
<title>这是标题</title>
</head>
<!-- 网页主体 -->
<body>
<font size="5" color="red">这是正文</font>
</body>
</html>
标签名 | 作用 |
---|---|
html | 网页的根元素,只能有一个根元素 |
head | 网页的头部,可以指定网页的标题 |
body | 网页的主体部分,我们的内容就写在主体中。 |
注释嵌套:HTML的注释不能嵌套 |
格式:
注释特点:
浏览器查看时,不显示。右键查看源码可以看到。
5.3.3、 使用IntelliJ IDEA创建html(掌握)
使用“记事本”开发效率低,现阶段使用idea做为开发工具,开发步骤如下:
在IDEA中创建静态Web工程
1.创建静态Web工程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SAv1yEOY-1577025658887)(img/9.bmp)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UVUTs0li-1577025658888)(img/10.bmp)]
2.指定工程名和保存位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f90Zrv3E-1577025658888)(img/11.bmp)]
3.创建HTML文件,选择html5的版本
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3LfULPX-1577025658889)(img/12.bmp)]
4.创建HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<!--指定当前页面的字符集-->
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>hello,上海黑马程序员</h1>
</body>
</html>
说明:在html中添加注释的快捷键是:ctrl+/
5.点右上角一排浏览器按钮运行,idea会使用内置的服务器在指定的浏览器上运行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8kMJr3L-1577025658890)(img/13.bmp)]
6.在浏览器上运行的结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m9GPMMIL-1577025658890)(img/14.bmp)]
5.3.4、项目结构
一个网页项目建议按如下目录创建结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aqnDVkny-1577025658890)(img/15.bmp)]
6、 网站信息页面显示
6.1、案例需求
通常在一个网站中都会有关于公司的介绍, 那么我们就来完成这样的案例 。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygZbHUOf-1577025658891)(img/16.bmp)]
当然,大家现在还不知道怎么来完成这个案例,因为这个案例中需要使用很多HTML中的标签。所以想完成上述案例,我们必须先学习html这门语言中的标签。
6.2、相关知识点
本案例中需要使用的标签如下:
<h1></h1> 标题标签
<hr />水平线标签
<font>字体标签
<b></b>加粗标签
<i></i>斜体标签
<p></p>段落标签
<br />换行标签
下面我们开始一个一个的介绍,为了方便演示,在day01_html项目下新建一个 案例1标签演示 的目录,并在该目录下创建一个“demo01.html”文件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tL0LGvq3-1577025658892)(img/17.bmp)]
6.2.1、标题标签
HTML提供<hn>系列标签,用于修饰标题,包含:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。
其中:<h1> 定义最大的标题。<h6> 定义最小的标题。
<hn>标题标签</hn> n的取值1-6
示例:
在body标签体中书写如下标签:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GWp8DJkn-1577025658892)(img/18.bmp)]
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-viSlJDpY-1577025658892)(img/19.bmp)]
6.2.2、 水平线标签:
标签在 HTML 页面中创建一条水平分隔线。
size属性: 水平线的高度,单位像素:px
noshade属性: 没有阴影,取值:noshade,表示显示纯色
<hr size="5" noshade="noshade" />
示例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSSmq2sU-1577025658893)(img/20.bmp)]
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uvKBWlIy-1577025658893)(img/21.bmp)]
6.2.3、字体标签:
<font size="2" color="red" face="微软雅黑">字体的内容</font>
用于设置字体尺寸、字体颜色等。
标签具有如下属性:
size 属性: 设置字体的大小。可能的值:从 1 到 7 的数字。浏览器默认值是 3。
说明:如果字体设置超过7,都是按照7进行显示。
color属性: 设置字体的颜色。
颜色的取值:#xxxxxx 或 colorname
1、#xxxxxx 表示使用红绿蓝三原色设置颜色
红绿蓝分别取值:00 – FF,此处使用16进制。
#000000 表示黑色,#FFFFFF白色
#FF0000红色,#00FF00绿色,#0000FF蓝色
红绿蓝2位取值相同可以省略成1位。例如:# FF0000 简化成#F00
2、colorname 使用英文单词确定颜色。red 红色,blue 蓝色,green绿色
face 属性: 设置文字的字体。
示例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-INW0UAwF-1577025658894)(img/22.bmp)]
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FBM5JGQv-1577025658894)(img/23.bmp)]
说明:在html5中对于font标签不建议使用,但是仍然保留了html4的这个标签,在我们还没有学习css样式之前,这个标签还是经常使用的,现在各大浏览器对其还是支持的,所以我们还可以继续使用。
6.2.4、 格式化标签:
粗体
斜体
<b>要加粗的字体</b>
<i>要倾斜的字体</i>
示例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hcEQzGdk-1577025658895)(img/24.bmp)]
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EtmsqWlA-1577025658895)(img/25.bmp)]
6.2.5、 段落标签:
在网页中要把文字有条理地显示出来,离不开段落标记,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标记就是
。
插入单个换行。
<p>段落内容</p><!-- 每个段落之间有留白 -->
<br /> <!-- 换行标签,只是换行,不会有留白 -->
示例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-090xw0QG-1577025658896)(img/26.bmp)]
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zEcLyc49-1577025658896)(img/27.bmp)]
6.3、 案例分析
6.3.1、知识点分析
需要的使用标签已经介绍完成,现在我们一次分析一下“公司简介”基本信息不同的地方都使用了哪些标签。
1、 “公司简介”,需要使用标题标签完成 ,例如:
。
2、 “中关村黑马程序员训练营” 需要使用字体标签完成 。
3、 “传智播客” 需要斜体 和 粗体 组合完成。
4、 这个文档被划分成4个区域,每一个区域之间有定义的间隔,需要使用段落标签
完成。
5、 第2行或 第3行是一个普通的换行,在html标签中,需要使用
完成。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IzTdWfmY-1577025658897)(img/28.bmp)]
6.3.2、 步骤分析
1、 创建test01.html页面用来显示页面信息
2、 将课前资料文件,黑马程序员介绍信息.txt 中内容,复制到idea软件中
3、 使用标题标签
修饰“公司简介”
4、 使用标题标签
添加分隔线
5、 使用段落标签
和
划分区域
6、 使用字体标签 修饰“中关村黑马程序员训练营”
7、 使用格式化标签 修饰“传智播客”
6.4、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>公司简介</h1>
<hr />
<p><font color="red">“中关村黑马程序员训练营”</font>是由<i><b>传智播客</b></i>联合中关村软件园、CSDN,并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展,而企业招不到优秀人才的困扰。 <br />目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地,并被评为中关村软件园重点扶持人才企业。</p>
<p>黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”,必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量,并降低企业的用人风险。</p>
<p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新,不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。</p>
<p>一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。</p>
</body>
</html>
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mLbl2LlS-1577025658897)(img/29.bmp)]
7、特殊字符标签
我们把特殊字符称为实体字符,所有的实体字符以 & 开头,以 ; 结尾。
符号 名称 HTML页面展示
空格符
< 小于号 < less than
> 大于号 > greate than
© 版权符 ©
¥ 元(yen) ¥
示例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IxPPuzo5-1577025658924)(img/30.bmp)]
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YRAPdQrg-1577025658925)(img/31.bmp)]
8、网站图片页面显示案例
8.1、案例介绍
在上面的案例中,我们发现这个页面都是文字的内容,而我们看到的页面往往文字和图片是并存的,
或者很多地方都是图片的效果,那么我们如何在页面中显示图片呢?
1) 需求:制作家用电器排行榜
2) 案例效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0pAkPdw-1577025658925)(img/32.bmp)]
当然,大家现在还不知道怎么来完成这个案例,因为我们还没有学习HTML中的图片标签,那么我们现在就来学习一下吧。
8.2、案例相关标签
图片标签: 在html页面中引用一张图片。
格式:
<img src="图片的路径地址" />
注意:
1)src:表示图片的路径,一般使用当前服务器,也可以使用其它服务器。不能使用本地地址。c:/aaa.jpg
img标签对应的属性:
属性名称 | 含义 | 作用 |
---|---|---|
src | 图片的路径地址 | 表示图片的路径,一般使用当前服务器,也可以使用其它服务器。不能使用本地地址。c:/aaa.jpg |
width | 宽度 | 如果只设置其中一项,那么图片会等比例缩放 |
height | 高度 | |
title | 提示文本 | 鼠标悬停在图片上方会出现的文字信息 |
alt | 替换文本 | 图片加载失败的时候才会出现的文字信息 |
border | 边框 | 只能定义边框的粗细 |
示例:
1)在案例2标签演示文件夹下新创键一个文件夹叫做:img。然后将图片复制到img文件夹下。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81rdmASc-1577025658926)(img/33.bmp)]
- 演示代码如下:
在案例2标签演示文件夹下新创键一个html页面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Kl4mTqD-1577025658926)(img/34.bmp)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片演示</title>
</head>
<body>
<!--图片标签-->
<img src="img/mm.jpg" width="400" height="300" title="我是一个大美女" border="1">
<img src="img/美女.jpg" width="400" height="300" title="我是一个大美女" alt="这里曾经有一个大美女">
</body>
</html>
8.3、 案例分析
8.3.1、知识点分析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5fznkKxV-1577025658927)(img/35.bmp)]
8.3.2、 分析步骤
1、 创建案例二: 网站图片页面显示的html页面,即test02.html。
2、 使用图片标签标签的src属性引入图片
8.3.3、 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>家用电器排行榜</title>
</head>
<body>
<h2>家用电器排行榜</h2>
<!--图片标签-->
<img src="img/tv01.jpg">TCL太差了
<hr/>
<img src="img/tv02.jpg">创维还不错
<hr/>
<img src="img/tv03.jpg">小米还不错
<hr/>
<img src="img/tv04.jpg">创维还不错
<hr/>
<img src="img/tv05.jpg">创维还不错
<hr/>
<!--访问其他服务器的图片-->
<img src="http://www.itcast.cn/files/image/201802/20180207094540257.jpg">
</body>
</html>
8.3.4、实现效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eRaIYNyn-1577025658927)(img/36.bmp)]
9、 网站列表页展示
9.1、案例介绍
在页面中显示文字和图片我们已经完成了,那么如果想在页面中显示一组友情链接信息,效果如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qob6toy2-1577025658928)(img/37.bmp)]
点击这几个链接,可以跳转到相应的网站上.那么现在我们就来实现这样的效果。
9.2、相关知识点
9.2.1、列表标签:
-
9.2.1.1、无序列表
<ul type="disc">
<li>内容一</li>
<li>内容二</li>
</ul>
说明:对于无序列表标签ul单独使用没有任何意义,我们一般都会结合ul的子标签li一起使用。
ul无序列表的属性:
名称 | 含义 |
---|---|
type=“circle” | 空心圆 |
type=“disc” | 默认值,实心黑色圆 |
type=“square” | 实心黑色正方形 |
注意:type属性写在ul身上是所有li改变,写在li身上是单个子标签li改变。 |
示例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fAMIYTcP-1577025658928)(img/38.bmp)]
9.2.1.2、有序列表
<ol type="1">
<li>内容一</li>
<li