HTML(HyperText

这门语言编写出来的也就是HTML是用来写网页的像京东12306等网站有很多网页。

HTML(HyperText

超文本超越了文本的限制比普通文本更强大。

除了文字信息还可以定义图片、音频、视频等内容

如上图看到的页面我们除了能看到一些文字同时也有大量的图片展示有些网页也有视频音频等。

这种展示效果超越了文本展示的限制。

标记语言由标签构成的语言之前学习的XML就是标记语言由一个一个的标签组成HTML

这些标签不像XML那样可以自定义HTML中的标签都是预定义好的运行在浏览器上并由浏览器解析然后展示出对应的效果。

例如我们想在浏览器上展示出图片就需要使用预定义的

img

预定义了很多标签由于我们是Java工程师、是做后端开发所以不会每个都学习页面开发是有专门的前端工程来开发。

那为什么我们还要学习呢在公司中或多或少大家也会涉及到前端开发。

简单的给大家聊一下开发流程以后我们是通过Java程序从数据库中查询出来数据然后交给页面进行展示这样用户就能通过在浏览器通过页面看到数据。

W3C标准W3C是万维网联盟这个组成是用来定义标准的。

他们规定了一个网页是由三部分组成分别是

HTML

HTML定义页面的整体结构CSS是用来美化页面让页面看起来更加美观JavaScript可以使网页动起来比如轮播图也就是多张图片自动的进行切换等效果。

为了更好的给大家表述这三种语言的作用。

我们通过具体的页面给大家说明。

可以看到页面是比较丑的但是每一部分其实都已经包含了。

接下来咱们加上

CSS

瞬间感觉好看多了这就是CSS的作用用来美化页面的。

接下来再加上JavaScript试试

在上图中可以看到多了轮播图在浏览器上它是会自动切换图片的并且切换的动态效果是很不错的。

看到了前端编写的这三个技术效果后我们今天学习的是HTML学习HTML其实就是学习预定义的这些标签。

1.2

子标签是用来定义页面标题名称的它定义的内容会展示在浏览器的标题位置如下图红框标记

body

快速入门/title/headbody乾坤未定你我皆是黑马~/body

/html

同学们在访问其他网站页面时会看到字体颜色是五颜六色的我们可以该字体颜色吗当然可以了

font

就是将文字设置成了红颜色。

那么我们只需要将需要变成红色的文字放在标签体部分就可以了如下

htmlheadtitlehtml

单双引皆可如上案例中的color属性值使用双引号也是可以的。

font

colorred/font

标签不加结束标签也是可以展示出效果的。

但是建议同学们在写的时候还是不要这样做严格按照要求去写。

1.3

创建文件夹都可以。

一般会创建css文件夹用于存放css文件img文件夹存放图片资源

选中工程在工程下右键创建

srcassets/image-20210811172942861.png

stylezoom:80%;

srcassets/image-20210811173034453.png

stylezoom:80%;

英文单词red,pink,blue...这种方式表示的颜色特别有限所以一般不用。

#值1值2值3值的范围00~FF这种方式是rgb方式的简化写法以后基本都用此方式。

值1表示红色的范围值2表示绿色的范围值3表示蓝色范围。

例如

#ff0000

刚察草原绿草如茵沙柳河水流淌入湖。

藏族牧民索南才让家中茶几上摆着馓子、麻花和水果炉子上刚煮开的奶茶香气四溢……

修改页面文件内容如下

刚察草原绿草如茵沙柳河水流淌入湖。

藏族牧民索南才让家中茶几上摆着馓子、麻花和水果炉子上刚煮开的奶茶香气四溢……br

浏览器打开效果如下

上面文字展示的效果还是不太好我们想让每一段上下都加空行。

此时就需要使用段落标签p标签

在页面文件中书写如下内容

注意在上图页面中版权所有里有特殊字符需要使用转义字符。

有如下转义字符

1.4

图片音频视频标签都有src属性而src是用来指定对应的图片音频视频文件的路径。

此处的图片音频视频就称为资源。

资源路径有如下两种设置方式

格式为

srchttps://th.bing.com/th/id/R33674725d9ae34f86e3835ae30b20afe?rikPb3C9e5%2b%2b3a9Vwriuhttp%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20180626%2f4c8157d07c14a30fd76f9bc110b1314e.jpgehk9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2ba14T0%3drislpidImgRaw

width300

上图红框中的都是超链接当我们点击这些超链接时会跳转到其他的页面或者资源。

而超链接使用的是

标签属性

typecircleli咖啡/lili茶/lili牛奶/li/ul

/body

width500trth序号/thth品牌logo/thth品牌名称/thth企业名称/th/trtr

src../img/三只松鼠.png

height50/tdtd三只松鼠/tdtd三只松鼠/td/trtr

src../img/优衣库.png

height50/tdtd优衣库/tdtd优衣库/td/trtr

src../img/小米.png

height50/tdtd小米/tdtd小米科技有限公司/td/tr

/table

bodydiv我是div/divdiv我是div/divspan我是span/spanspan我是span/span

/body

像这样的表单就是用来采集用户输入的数据然后将数据发送到服务端服务端会对数据库进行操作比如注册就是将数据保存到数据库中而登陆就是根据用户名和密码进行数据库的查询操作。

1.9.1

是表单标签它在页面上没有任何展示的效果。

需要借助于表单项标签来展示不同的效果。

如下图就是不同的表单项标签展示出来的效果。

1.9.2

action规定当提交表单时向何处发送表单数据该属性值就是URL

以后会将数据提交到服务端该属性需要书写服务端的URL。

而今天我们可以书写

method

由于表单标签在页面上没有任何展示的效果所以在演示的过程是会先使用

input

从效果可以看到页面有一个输入框用户可以在数据框中输入自己想输入的内容点击提交按钮以后会将数据发送到服务端当然现在肯定不能实现。

现在我们可以将

form

将其将数据提交到当前页面。

还需要注意一点要想提交数据input

输入框必须设置

我们可以看到在浏览器的地址栏的URL后拼接了我们提交的数据。

username

name

表单项标签有很多不同的表单项标签有不同的展示效果。

表单项标签可以分为以下三个

input

valueshanghai上海/optionoption广州/option/selectbr个人描述textarea

cols20

是一门语言用于控制网页表现。

我们之前介绍过W3C标准。

W3C标准规定了网页是由以下组成

结构HTML

charsetUTF-8titleTitle/titlestylediv{color:

red;}/style

给方式只能作用在这一个标签上如果其他的标签也想使用同样的样式那就需要在其他标签上写上相同的样式。

复用性太差。

style

外部样式定义link标签引入外部的css文件编写一个css文件。

名为demo.css内容如下:

div{color:

这种方式可以在多个页面进行复用。

其他的页面想使用同样的样式只需要使用

link

charsetUTF-8titleTitle/titlestylespan{color:

red;}/stylelink

/*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

id选择器

charsetUTF-8titleTitle/titlestylediv{color:

red;}#name{color:

css有很多css属性你要想把它们都学会需要花费很长的时间。

而我们作为java程序员不需要重点掌握这部分内容。

对于网页三剑客中css是对我们要求最低的。

给大家简单介绍一下文档怎么查看即可如下我们看一个

background-color