了解JavaWeb
java软件工程师主要是进行javaweb开发,web指的是网站,企业级的web站点
java工程师主要是对服务端开发,也就是Server端的开发,作为全栈工程师,也需要精通web前段
运行在Browser浏览器的web前端语言有三种:HTML,CSS,JavaScript
HTML语言
HTML是超文本标记语言,超文本指的是图片,声音,视频等流媒体数据,标记语言一般都是一对一对的标签组成
编写代码的时候是成对编写,比如根标签<html></html>,所有的结束标签的第一个字符都是正斜杠/
HTML语言的文件都是以.html或者.htm结尾,使用浏览器软件直接打开运行
HTML的语法是松散的,不严格的,但是还是遵循语法规则来写更规范
HTML语法不区分大小写,但是最好全部小写
HTML标签
语法标签,注释标签,根标签,头标签,网页标题标签,体标签
<!--如果有这个<!doctype html>标签表示当前HTML采用的语法是H5,如果没有这个标签,采用的语法是4.0-->
<!doctype html>
<!--这是注释标签-->
<!--这是html的根标签-->
<html>
<!--这是头标签-->
<head>
<!--这是网页的标题,显示在网页的左上角-->
<title>我的第一个html页面</title>
</head>
<!--这是体标签,是网页的主题,显示在浏览器网页上的内容-->
<body>
helle world!
</body>
</html>
段落标签,标题标签,换行标签,水平线标签,预留格式标签,粗字体标签,斜字体标签,插入字标签,删除字标签,右上角加字标签,右下角加字标签,字体标签
<!doctype html>
<html>
<head>
<title>HTML标签</title>
</head>
<body>
<p>
p标签是段落标签</p><p>分段显示网页内容</p>
<!--h标签是标题字标签,比如新闻的标题,h1-h6从大到小-->
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<!--换行标签br,是独目标记,负责在网页上换行-->
hello<br>world
<!--水平线标签hr,是独目标记-->
<hr>
<!--color是属性名,"red"是属性值,通过color属性可以设置颜色-->
<hr color="red">
<!--width属性指定水平线的宽度,300px表示300像素-->
<hr color="black" width="300px">
<!--50%是水平线一直占有浏览器窗口宽度的一半,是动态的,不是固定死的-->
<hr color="blue" width="50%">
<!--预留格式标记pre-->
<pre>
for(int i = 0;i < 10;i++){
System.out.println("i = " + i);
}
</pre>
<!--粗体字标签b-->
<b>粗体字</b>
<!--斜体字标签i-->
<i>斜体字</i>
<!--插入字标签ins-->
<ins>插入字</ins>
<!--删除字标签del-->
<del>删除字</del>
<!--右上角加字sup-->
10<sup>2</sup>
<!--右下角加字sub-->
10<sub>n</sub>
<!--font字体标签-->
<font color="red" size="10">努力坚持一定成功</font>
</body>
</html>
实体符号:空格,大于号,小于号
<!doctype html>
<html>
<head>
<title>实体标记</title>
</head>
<body>
<!--空格 ,所有的实体符号语法规则都是&开头,分号;结尾-->
努力拼搏 100天
<!--大于号>,小于号<-->
<a>
</body>
</html>
HTML表格
<!doctype html>
<html>
<head>
<title>HTML表格</title>
</head>
<body>
<!--表格标签,align表示对齐方式,center居中,border边框宽度,width宽度,height高度-->
<!--表格分为三部分:表头,表体,表脚-->
<!--thead,tbody,tfoot在表现形式上没有任何变化,只是为了JavaScript更好操作表格-->
<table align="center" border="1px" width="300px" height="200px">
<!--表头-->
<thead>
<tr>
<!--th标签的内容自动加粗,自动居中-->
<th>单元格1</th>
<th>单元格2</th>
<th>单元格3</th>
</tr>
</thead>
<!--表体-->
<tbody>
<!--tr表示行标签,td表示列标签-->
<tr align="center">
<td>单元格</td>
<td>单元格</td>
<!--合并行单元格(单元格在一竖上)口诀:
将后面要合并的单元格注释掉,在前面单元格上使用rowspan属性进行合并,
合并几个写几个.-->
<td rowspan="2">单元格X</td>
</tr>
<tr align="center">
<td>单元格</td>
<td>单元格</td>
<!--
<td>单元格X</td>
-->
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<!--合并列单元格(单元格在一横上)口诀:
这两个单元格随便注释一个,在另一个单元格上使用colspan进行列合并,
合并几个写几个-->
<td colspan="3" align="center">单元格y</td>
<!--
<td>单元格y</td>
-->
<!--列单元格优于行,注释了这个单元格归于列
<td>单元格X</td>
-->
</tr>
</tfoot>
</table>
</body>
</html>
HTML背景颜色和背景图片
<!doctype html>
<html>
<head>
<title>HTML背景颜色和背景图片</title>
</head>
<!--bgcolor设置背景颜色,是嵌入浏览器背景当中的-->
<!--background设置背景图片,图片的路径可以是相对,绝对,或者网络的有效路径-->
<!--
<body bgcolor="red" background="kklt.jpg">
-->
<body>
<!--img是图片标签,可以没有</img>结束标签
对于HTML标签,当开始标签和结束标签之间没有任何东西的时候,结束标签可以省略不写,在开始标签的末尾添加/
src属性指定图片的路径
width设置图片的宽度,高度会自动按比例缩放,不需要设置,如果设置高度会导致失真
title属性设置鼠标停在图片上的提示信息
alt属性设置图片加载失败的提示文本信息
-->
<img src="kklt.jpg" width="100px" title="卡卡罗特第一阶段超级赛亚人图片" alt="图片消失了加载失败"></img>
</body>
</html>
HTML超链接
<!doctype html>
<html>
<head>
<title>HTML超链接</title>
</head>
<body>
<!--a是26个英文字母的第一个很重要-->
<!--HTML最重要的就是超链接-->
<!--a标签开始和结束之间的文本显示在浏览器上,href属性叫热链接,用来指定链接的路径,当鼠标停在热链接上时会变成小手,并且热链接自带下划线-->
<a href="https://map.baidu.com">百度地图</a>
<br>
<!--target属性表示目标资源最终的显示目标位置-->
<!--target属性可选值:
第一种,不写默认是_self,
第二种,_blank新窗口,
第三种_parent表示父窗口,
第四种,_top表示顶级窗口
-->
<!--target="_blank"表示在新的窗口显示-->
<a href="https://www.baidu.com" target="_blank">百度知道,新窗口</a>
<br>
<!--target="_self"表示在当前窗口显示,不写是默认的-->
<a href="https://www.baidu.com" target="_self">百度知道,当前窗口</a>
<br>
<!--iframe是内部窗体-->
<iframe src="https://www.baidu.com"></iframe>
</body>
</html>
HTML无序列表和有序列表
<!DOCTYPE html>
<html>
<head>
<!-- 告诉浏览器采用哪种字符编码方式打开文件 -->
<!-- HBuilderX采用的字符编码方式是utf-8,打开的方式也要utf-8,否则乱码-->
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!-- 无序列表 -->
<ul>
<li>中国</li>
<!-- 嵌套子无序列表 -->
<ul>
<li>重庆</li>
<li>贵州<
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
