介绍1.2

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

HTML(HyperText

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

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

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

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

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

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

img

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

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

以后我们是通过Java程序从数据库中查询出来数据然后交给页面进行展示这样用户就能通过在浏览器通过页面看到数据。

W3C标准

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

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

HTML

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

1.2

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

body

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

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

font

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

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

htmlheadtitlehtml

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

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

1.3

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

有如下转义字符

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

属性。

每一个标签都有id属性id属性值是唯一的标识。

单选框、复选框、下拉列表需要使用

value

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

cols20

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

我们之前介绍过W3C标准。

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

Style

charsetUTF-8titleTitle/titlestylediv{color:

red;}/style

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

复用性太差。

内部样式定义

charsetUTF-8titleTitle/titlestylespan{color:

red;}/stylelink

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

#id属性值{color:

charsetUTF-8titleTitle/titlestylediv{color:

red;}#name{color:

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

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

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

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

background-color