网站内容如何更新,资源网站建设,购物商城网站建设,网站的源代码有什么用Javaweb梳理17——HTMLCSS简介 17 HTMLCSS简介17.1 HTML介绍17.2 快速入门17.3 基础标签17.3 .1 标题标签17.3.2 hr标签17.3.3 字体标签17.3.4 换行17.3.8 案例17.3.9 图片、音频、视频标签17.3.10 超链接标签17.3.11 列表标签17.3.12 表格标签17.3.11 布局标签17.3.… Javaweb梳理17——HTMLCSS简介 17 HTMLCSS简介17.1 HTML介绍17.2 快速入门17.3 基础标签17.3 .1 标题标签17.3.2 hr标签17.3.3 字体标签17.3.4 换行17.3.8 案例17.3.9 图片、音频、视频标签17.3.10 超链接标签17.3.11 列表标签17.3.12 表格标签17.3.11 布局标签17.3.12 表单标签17.3.13 表单标签概述17.3.14 form标签属性17.3.15 代码演示17.3.16 表单项标签 17.2 CSS17.2.1 概述17.2.2 CSS导入方式17.2.3 CSS选择器17.2.4 css 属性 17 HTMLCSS简介
今日目标 能够掌握课程中讲解的标签的使用了解css的使用 17.1 HTML介绍
HTML 是一门语言所有的网页都是用HTML 这门语言编写出来的也就是HTML是用来写网页的像京东12306等网站有很多网页。 这些都是网页展示出来的效果。而HTML也有专业的解释 HTML(HyperText Markup Language)超文本标记语言
超文本超越了文本的限制比普通文本更强大。除了文字信息还可以定义图片、音频、视频等内容 如上图看到的页面我们除了能看到一些文字同时也有大量的图片展示有些网页也有视频音频等。这种展示效果超越了文本展示的限制。标记语言由标签构成的语言 之前学习的XML就是标记语言由一个一个的标签组成HTML 也是由标签组成 。我们在浏览器页面右键可以查看页面的源代码如下 这些标签不像XML那样可以自定义HTML中的标签都是预定义好的运行在浏览器上并由浏览器解析然后展示出对应的效果。例如我们想在浏览器上展示出图片就需要使用预定义的 img 标签想展示可以点击的链接的效果就可以使用预定义的 a 标签等。
HTML 预定义了很多标签由于我们是Java工程师、是做后端开发所以不会每个都学习页面开发是有专门的前端工程来开发。那为什么我们还要学习呢在公司中或多或少大家也会涉及到前端开发。
简单的给大家聊一下开发流程
以后我们是通过Java程序从数据库中查询出来数据然后交给页面进行展示这样用户就能通过在浏览器通过页面看到数据。
W3C标准
W3C是万维网联盟这个组成是用来定义标准的。他们规定了一个网页是由三部分组成分别是
结构对应的是 HTML 语言表现对应的是 CSS 语言行为对应的是 JavaScript 语言
HTML定义页面的整体结构CSS是用来美化页面让页面看起来更加美观JavaScript可以使网页动起来比如轮播图也就是多张图片自动的进行切换等效果。
为了更好的给大家表述这三种语言的作用。我们通过具体的页面给大家说明。
如下只是使用HTML语言编写的页面的结构 可以看到页面是比较丑的但是每一部分其实都已经包含了。接下来咱们加上 CSS 进行美化看到的效果如下 瞬间感觉好看多了这就是CSS的作用用来美化页面的。接下来再加上JavaScript试试 在上图中可以看到多了轮播图在浏览器上它是会自动切换图片的并且切换的动态效果是很不错的。 看到了前端编写的这三个技术效果后我们今天学习的是HTML学习HTML其实就是学习预定义的这些标签。
17.2 快速入门
需求编写如下图效果的页面 要实现这个页面我们需要从以下三步进行实现
新建文本文件后缀名改为 .html 页面文件的后缀名是 .html所以需要该后缀名编写 HTML 结构标签 HTML 是由一个一个的标签组成的但是它也用于表示结构的标签
htmlheadtitle /title/headbody/body
/htmlbody 标签的内容会被展示在内容区中如下图红框标记
在body中定义文字 代码如下
htmlheadtitlehtml 快速入门/title/headbody乾坤未定你我皆是黑马~/body
/html同学们在访问其他网站页面时会看到字体颜色是五颜六色的我们可以该字体颜色吗当然可以了
font 标签就可以使用该标签有一个 color 属性可以设置字体颜色如 就是将文字设置成了红颜色。那么我们只需要将需要变成红色的文字放在标签体部分就可以了如下
htmlheadtitlehtml 快速入门/title/headbodyfont colorred乾坤未定你我皆是黑马~/font/body
/html总结
HTML 文件以.htm或.html为扩展名HTML 结构标签 HTML 标签不区分大小写 如上案例中的 font 写成 Font 也是一样可以展示出对应的效果的。HTML 标签属性值 单双引皆可 如上案例中的color属性值使用双引号也是可以的。font color“red”/fontHTML 语法松散 比如 font 标签不加结束标签也是可以展示出效果的。但是建议同学们在写的时候还是不要这样做严格按照要求去写。
17.3 基础标签
基础标签就是一些和文字相关的标签如下 接下来我们挨个进行讲解
17.3 .1 标题标签
创建模块 在 Idea 中创建模块而我们现在不需要写java代码所以 src 目录就可以删除掉。在模块下创建一个html文件夹该我们今天的所以的页面文件所部放在该文件夹下。模块目录如下 创建页面文件 选中 html 文件夹右键创建页面文件01-基础标签.html 创建好后 idea 会自动加上结构标签如下 我们只需要在 body 标签中书写标签。书写标题标签 标题标签中 h1最大h6最小。
h1我是标题 h1/h1
h2我是标题 h2/h2
h3我是标题 h3/h3
h4我是标题 h4/h4
h5我是标题 h5/h5
h6我是标题 h6/h6通过浏览器查看效果 idea 提供了快捷的打开方式如下图
17.3.2 hr标签
hr 标签在浏览器中呈现出 横线 的效果。 在页面文件中书写 hr 标签
hr效果如下 17.3.3 字体标签
font字体标签
face 属性用来设置字体。如 “楷体”、宋体等color 属性设置文字颜色。颜色有三种表示方式 英文单词red,pink,blue… 这种方式表示的颜色特别有限所以一般不用。rgb(值1,值2,值3)值的取值范围0~255 此种方式也就是三原色红绿蓝设置方式。 例如 rgb(255,0,0)。 这种书写起来比较麻烦一般不用。#值1值2值3值的范围00~FF 这种方式是rgb方式的简化写法以后基本都用此方式。 值1表示红色的范围值2表示绿色的范围值3表示蓝色范围。例如 #ff0000 size 属性设置文字大小 代码演示
font face楷体 size5 color#ff0000
传智教育
/font注意font 标签已经不建议使用了以后如果要改变文字字体大小颜色可以使用 CSS 进行设置。
17.3.4 换行 ### 17.3.5 段落标签 ### 17.3.6 加粗、斜体、下划线标签 * b加粗标签 * i斜体标签 * u下划线标签在文字的下方有一条横线 代码如下 html 沙柳河水流淌 沙柳河水流淌 沙柳河水流淌 ### 17.3.7 居中标签 center 文本居中 代码如下 html 沙柳河水流淌 在浏览器效果如下 沙柳河水流淌 17.3.8 案例
需求编写如下图效果的页面
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1公司简介/h1
hr coloryellow
p传智教育(股票代码 03032)隶属江苏传智播咨教育科技股份有限公司注册资本4亿元是第一个实现A股PO的教育企业公司致力于培养高精尖数字化人才主要培养人工智能、pyhon大数据开发、智能制造、软件、互联网、区块链等数字化专业人才及数据分析、网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验且来自互联网或研究机构的工精英组成负责研究、开发教学慢式和课程内容。公司具有完善的课程研发体系一直走在整个行业发展的前端在行业内竖立起了良好的品质口碑。/p
p民族振兴常人才中华民族正外于伟大复兴之路上要事得国际章争需要拥有大量的科技人才我们格信色起民旅使命在三足讲合海人不 著书立说为科技行业会养出大量的优委人才保讲民旅伟大复兴!我们的使命是:b为中华民族伟大复兴而讲课为于万学生少走弯路而著书/b/p
pb探系教育之路长途漫酒/b、传智教音希里可以通过自己的努力是视出一条更符合人类自然成长现种的教音之路建立起一个新的教育牛态环境计中国的家长和孩子们在现有的教奇休系之外、重多一些法择的机会因此“汉塔教育本酒、开照教育新生态”他成为了所有传架人为之奋斗的络极圆圈、也是所有传架人共同努力的目标为此、15年来、传粉人不典有一丝憾会、相信在传架人的不懈努力下、大道不远。终在糊下。/p
hr coloryellow
p styletext-align: center;color:gray江苏传智播客教育科技股份有限公司/p
p styletext-align: center;color:gray版权所有Copyright 2006-2018copy;,All Rights Reserved 苏ICP备16007882/p/body
/html17.3.9 图片、音频、视频标签 img定义图片 src规定显示图像的 URL统一资源定位符height定义图像的高度width定义图像的宽度 audio定义音频。支持的音频格式MP3、WAV、OGG src规定音频的 URLcontrols显示播放控件 video定义视频。支持的音频格式MP4, WebM、OGG src规定视频的 URLcontrols显示播放控件
尺寸单位
height属性和width属性有两种设置方式
像素单位是px百分比。占父标签的百分比。例如宽度设置为 50%意思就是占它的父标签宽度的一般50%
资源路径
图片音频视频标签都有src属性而src是用来指定对应的图片音频视频文件的路径。此处的图片音频视频就称为资源。资源路径有如下两种设置方式 绝对路径完整路径 这里的绝对路径是网络中的绝对路径。 格式为 协议://ip地址:端口号/资源名称。 如 imgsrc“https://img-home.csdnimg.cn/images/20230724024159.png?origin_urlhttps%3A%2F%2Fth.bing.com%2Fth%2Fid%2FR33674725d9ae34f86e3835ae30b20afe%3Frik%3DPb3C9e5%252b%252b3a9Vw%26riu%3Dhttp%253a%252f%252fwww.desktx.com%252fd%252ffile%252fwallpaper%252fscenery%252f20180626%252f4c8157d07c14a30fd76f9bc110b1314e.jpg%26ehk%3D9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%252ba14T0%253d%26risl%3D%26pid%3DImgRawpos_idimg-GC1uPGeF-1731923750938)” width“300” height“400” 中间的src属性的值就是网络中的绝对路径
相对路径相对位置关系 找页面和其他资源的相对路径。 ./ 表示当前路径 …/ 表示上一级路径 …/…/ 表示上两级路径 如模块目录结构如下 在 01-基础标签.html 里的标签中找不同的图片路径写法不同
!--在该页面找a.jpg就需要先回到上一级目录该级目录有img目录进入该目录就可以找到 a.jpg图片--
img src../img/a.jpg width300 height400
!--该页面和aa.jpg 是在同一级下所以可以直接写 图片的名称也可以写成 ./aa.jpg--
img srcaa.jpg width300 height400在浏览器展示的效果如下
17.3.10 超链接标签
在网页中可以看到很多超链接标签如下 上图红框中的都是超链接当我们点击这些超链接时会跳转到其他的页面或者资源。而超链接使用的是 a 标签。 a 标签属性
href指定访问资源的URLtarget指定打开资源的方式 _self默认值在当前页面打开_blank在空白页面打开
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodya hrefhttps://www.itcast.cn target_self点我有惊喜/a
/body
/html效果图示 当我们将 target 属性值设置为 _blank效果图示
17.3.11 列表标签
HTML 中列表分为
有序列表 如下图页面效果中是有标号对每一项进行标记的。 无序列表 如下图页面效果中没有标号对每一项进行标记而是使用 点 进行标记。 标签说明
有序列表中的 type 属性用来指定标记的标号的类型数字、字母、罗马数字等 无序列表中的 type 属性用来指定标记的形状 代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyol typeAli咖啡/lili茶/lili牛奶/li/olul typecircleli咖啡/lili茶/lili牛奶/li/ul
/body
/html17.3.12 表格标签 如上图就是一个表格表格可以使用如下标签定义
table 定义表格 border规定表格边框的宽度width 规定表格的宽度cellspacing规定单元格之间的空白 tr 定义行 align定义表格行的内容对齐方式 td 定义单元格 rowspan:规定单元格可横跨的行数colspan:规定单元格可横跨的列数 th定义表头单元格 代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodytable border1 cellspacing0 width500trth序号/thth品牌logo/thth品牌名称/thth企业名称/th/trtr aligncentertd010/tdtdimg src../img/三只松鼠.png width60 height50/tdtd三只松鼠/tdtd三只松鼠/td/trtr aligncentertd009/tdtdimg src../img/优衣库.png width60 height50/tdtd优衣库/tdtd优衣库/td/trtr aligncentertd008/tdtdimg src../img/小米.png width60 height50/tdtd小米/tdtd小米科技有限公司/td/tr
/table
/body
/html17.3.11 布局标签 这两个标签一般都是和CSS结合到一块使用来实现页面的布局 div标签 在浏览器上会有换行的效果而 span 标签在浏览器上没有换行效果。 代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv我是div/divdiv我是div/divspan我是span/spanspan我是span/span
/body
/html浏览器效果如下
17.3.12 表单标签
表单标签效果大家其实都不陌生像登陆页面、注册页面等都是表单。 像这样的表单就是用来采集用户输入的数据然后将数据发送到服务端服务端会对数据库进行操作比如注册就是将数据保存到数据库中而登陆就是根据用户名和密码进行数据库的查询操作。 表单是很重要的标签需要大家重点来学习。
17.3.13 表单标签概述
表单在网页中主要负责数据采集功能使用标签定义表单 表单项(元素)不同类型的input元素、下拉表单、文本域等 form 是表单标签它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。如下图就是不同的表单项标签展示出来的效果。
17.3.14 form标签属性
action:规定当提交表单时向何处发送表单数据该属性值就是URL 以后会将数据提交到服务端该属性需要书写服务端的URL。而今天我们可以书写#以表示提交到当前页面来看效果。method 规定用于发送表单数据的方式 method取值有如下两种 get:默认值。如果不设置method属性则默认就是该值 请求参数会拼接在URL后边url的长度有限制4KB post: 浏览器会将数据放到http请求消息体中请求参数无限制的
17.3.15 代码演示
由于表单标签在页面上没有任何展示的效果所以在演示的过程是会先使用 input 这个表单项标签展示输入框效果。 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyforminput typetextinput typesubmit/form
/body
/html浏览器展示效果如下 在输入框输入 hehe 然后点击 提交 按钮就能看到如下效果 我们可以看到在浏览器的地址栏的URL后拼接了我们提交的数据。username 就是输入框 name 属性值而 hehe 就是我们在输入框输入的内容。 接下来我们来聊 method 属性默认是 method get所以该取值就会将数据拼接到URL的后面。那我们将 method 属性值设置为 post浏览器的效果如下 从上图可以看出数据并没有拼接到 URL 后那怎么看提交的数据呢我们可以使用浏览器的开发者工具来查看 重新提交数据后可以看到提交的数据如下图
17.3.16 表单项标签
表单项标签有很多不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个
input表单项通过type属性控制输入形式 input 标签有个 type 属性。 type 属性的取值不同展示的效果也不一样 select定义下拉列表option 定义列表项 如下图就是下拉列表的效果 textarea文本域
如下图就是文本域效果。它可以输入多行文本而 input 数据框只能输入一行文本。 注意 以上标签项的内容要想提交必须的定义name属性每一个标签都有id属性id属性值是唯一的标识单选框、复选框、下拉列表需要使用value属性指定提交的值 代码演示
br classApple-interchange-newlinediv/div
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyform action# methodpostinput typehidden nameid value123label forusername用户名/labelinput typetext nameusername idusernamebrlabel forpassword密码/labelinput typepassword namepassword idpasswordbr性别input typeradio namegender value1 idmale label formale男/labelinput typeradio namegender value2 idfemale label forfemale女/labelbr爱好input typecheckbox namehobby value1 旅游input typecheckbox namehobby value2 电影input typecheckbox namehobby value3 游戏br头像input typefilebr城市:select namecityoption北京/optionoption valueshanghai上海/optionoption广州/option/selectbr个人描述textarea cols20 rows5 namedesc/textareabrbrinput typesubmit value免费注册input typereset value重置input typebutton value一个按钮/form
/body
/html在浏览器的效果如下
17.2 CSS 17.2.1 概述
CSS 是一门语言用于控制网页表现 我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成
结构HTML表现CSS行为JavaScript CSS也有一个专业的名字Cascading Style Sheet层叠样式表。 如下面的代码 style 标签中定义的就是css代码。该代码描述了将 div 标签的内容的字体颜色设置为红色。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{color: red;}/style
/head
bodydivHello CSS~/div
/body
/html在浏览器中的效果如下
17.2.2 CSS导入方式
css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式
内联样式在标签内部使用style属性属性值是css属性键值对
div stylecolor: red
Hello CSS~
/div给方式只能作用在这一个标签上如果其他的标签也想使用同样的样式那就需要在其他标签上写上相同的样式。复用性太差。 内部样式定义
style typetext/cssdiv{color: red;}
/style这种方式可以做到在该页面中复用。 外部样式定义link标签引入外部的css文件 编写一个css文件。名为demo.css内容如下:
div{color: red;
}在html中引入 css 文件
link relstylesheet hrefdemo.css这种方式可以在多个页面进行复用。其他的页面想使用同样的样式只需要使用 link 标签引入该css文件。 代码演示 项目目录结构如下 编写页面 02-导入方式.html内容如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylespan{color: red;}/stylelink href../css/demo.css relstylesheet
/head
bodydiv stylecolor: redhello css/divspanhello css /spanphello css/p
/body
/html17.2.3 CSS选择器
css 选择器就是选取需设置样式的元素标签比如如下css代码 div { color:red;}如上代码中的 div 就是 css 中的选择器。我们只讲下面三种选择器
元素选择器 格式
元素名称{color: red;}例子
div {color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/id选择器 格式
#id属性值{color: red;}例子 html代码如下
div idnamehello css2/divcss代码如下
#name{color: red;}
/*该代码表示将页面中所有的id属性值是name的
标签的内容的颜色设置为红色*/类选择器 格式
class属性值{color: red;}例子 html代码如下
div classclshello css3/divcss代码如下
.cls{color: red;} /*该代码表示将页面中所有的class属性值
是 cls 的标签的内容的颜色设置为红色*/代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{color: red;}#name{color: blue;}.cls{color: pink;}/style/head
bodydivdiv1/divdiv idnamediv2/divdiv classclsdiv3/divspan classclsspan/span
/body
/html17.2.4 css 属性
css有很多css属性你要想把它们都学会需要花费很长的时间。而我们作为java程序员不需要重点掌握这部分内容。对于网页三剑客中css是对我们要求最低的。给大家简单介绍一下文档怎么查看即可如下我们看一个 background-color 属性
