JavaWeb
语法要求:
1 标签需要使用<>
3 也有部分单标签
5 标签可以嵌套
基本机构
<!-- 根标签 -->
<html>
<head><!-- 头标签内部,一般定义元数据 -->
<title>Java2212</title>
</head>
<body>
<!-- body内部,是整个网页内容 -->
</body>
</html>
HBuilder的使用
前端开发工具(IDE)
VScode
DW
Sublime Text
HBuilderX
WebStorm
以下是不完全是前端开发的
IDEA
Eclipse
解压即可使用,双击打开[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SARirBni-1661258691492)(D:\千峰上课\Every Day Stage2\day30\code\day30-html.assets\image-20220822155554819.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hF3sFxwh-1661258691493)(D:\千峰上课\Every Day Stage2\day30\code\day30-html.assets\image-20220822155811569.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKpvW8kn-1661258691494)(D:\千峰上课\Every Day Stage2\day30\code\day30-html.assets\image-20220822155934775.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SHYLqeaJ-1661258691495)(D:\千峰上课\Every Day Stage2\day30\code\day30-html.assets\image-20220822160323413.png)]
基本标签
结构
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>Demo1</title>
</head>
<body bgcolor="#4e6ef2" background="img/1.jpg">
<!--
标签内部可以定义属性,可以调整显示效果
属性写法: 在开标签定义属性,属性写法:属性名="属性值"
多个属性空格隔开
bgcolor: 背景颜色
颜色的取值: 1) 单词
2) rgb(255,0,0) 取值0~255
3) 十六进制000000-FFFFFF (推荐)
background:
引入背景图片
-->
你好,HBuilder
</body>
</html>
排版
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>排版</title>
</head>
<body>
<!--
<p></p> 段落标签
段和段之间有间距,会自动换行
对齐方式align: left|center|right
<hr> 分割线,单标签
width: 100px或者100%
px是像素(固定值),
%百分比,是当前浏览器窗口的百分比(会缩放)
color: red
size: 20px
<br> 换行,单标签
<h1>标题标签,会加粗和改变大小
从h1-h6
-->
<h1>一年期、五年期以上LPR双双下调,100万房贷30年少还3.18万利息</h1>
<hr width="50%" color="red" size="2px">
<p align="center">央广网北京8月22日消息(记者金龙)8月22日,<br>
2022年8月22日贷款市场报价利率(LPR)为:1年期LPR为3.65%,5年期以上LPR为4.3%。
中国人民银行授权全国银行间同业拆借中心公布,</p>
<p>上个月一年期贷款市场报价利率为3.7%,五年期以上贷款市场报价利率(LPR)为4.45%,
这意味着一年期、五年期以上LPR双双下调。</p>
<p>分析指出,五年期以上LPR由4.45%下调至4.3%,这意味着,如以商贷额度100万元、贷款30年、
等额本息还款方式计算,此次LPR下降15个基点,月供减少88.48元,累积30年月供减少3.18万元。
之前央行降低首套房贷利率20个基点,此次LPR下调后降息效应将叠加,首套房贷款利率低至4.1%,
已低于2009年房贷利率打七折后的4.156%。</p>
<hr>
<h1>劝学</h1>
<h2>劝学</h2>
<h3>劝学</h3>
<h4>劝学</h4>
<h5>劝学</h5>
<h6>劝学</h6>
<h2>颜真卿</h2>
<hr width="750px" color="green">
三更灯火五更鸡,<br>
正是男儿发奋时。<br>
黑发不知勤学早,<br>
白首方悔读书迟。<br>
</body>
</html>
容器
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 块标签
div: 行级块,默认占一行
span: 行内块
div后续再讲CSS时,是重要的布局组件
-->
<div style="background-color: red;">div</div>
<span style="background-color: pink;">spanspanspanspan</span>
</body>
</html>
列表
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
</head>
<body>
<!--
有序
<ol>
<li></li>
<ol>
type 属性可以改变序号类型
无序
<ul>
</ul>
type 属性可以改变序号类型
-->
<ol type="I">
<li>直播被骂的“红绿灯设计师”疑销号</li>
<li>教育部通报教材插图问题 27人被问责</li>
<li>中国长征系列火箭创下新纪录</li>
<li>鉴定机构确定戚薇直播间卖假货</li>
<ol>
<hr>
<ul type="square">
<li>直播被骂的“红绿灯设计师”疑销号</li>
<li>教育部通报教材插图问题 27人被问责</li>
<li>中国长征系列火箭创下新纪录</li>
<li>鉴定机构确定戚薇直播间卖假货</li>
<ul>
</body>
</html>
图片
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
</head>
<body>
<!--
<img> 单标签
src: 图片路径
本地路径
网络路径
alt: 提示
width:宽
height: 高
一般跳转一个,另一个自动变化
-->
<img src="img/1.jpg" alt="柳岩" height="500px" width="500px">
</body>
</html>
超链接
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
</head>
<body>
<!--
超链接,用来跳转页面
href: 跳转的路径,本地和外部路径
target: _self(以自己页面刷新跳转),_blank(重新打开空白页展示)
-->
<a href="demo5_图片.html" target="_self">跳转至demo5</a> <br>
<a href="demo4_列表.html" target="_blank">跳转至demo4</a><br>
<a href="http://www.baidu.com" target="_blank">baidu一下,你就OK</a><br>
</body>
</html>
汇总
<!-- 颜色的三种写法 -->
定义属性,颜色,分三种写法,用第三种
bgcolor="red"
bgcolor="rgb(23,45,67)"
bgcolor="#4e6ef2"
<!-- 排版 -->
<p></p> <!-- 段落标签 -->
<hr> <!-- 分割线,单标签 -->
<!-- width修饰占页面宽度,%和px -->
<!-- color和size修饰调整颜色和粗细 -->
<b> <!-- 换行 -->
<!-- 容器 块标签 -->
<div></div> <!-- 行级块,默认占整行 -->
<span></span> <!-- 行内块,只占自身区域 -->
<!-- 列表 -->
<ol>
<li></li> <!-- 有序 -->
<ol>
=================================
<ul>
<li></li> <!-- 无序 -->
</ul>
=================================
type="" <!-- 改变序号类型 -->
<!-- 图片 单标签 -->
<igm src="图片地址(http//)" alt="加载失败后的提示语句">
width 高
height 宽
<!-- 宽和高一般只改其一,另一个会自动匹配修改后的值 -->
<!-- 超链接 -->
<a href="网络地址" target="self">
<!--
target:
self(以自己页面刷新跳转)
blank(重新打开空白页展示)
-->
– 改变序号类型 -->
```html
<!-- 图片 单标签 -->
<igm src="图片地址(http//)" alt="加载失败后的提示语句">
width 高
height 宽
<!-- 宽和高一般只改其一,另一个会自动匹配修改后的值 -->
<!-- 超链接 -->
<a href="网络地址" target="self">
<!--
target:
self(以自己页面刷新跳转)
blank(重新打开空白页展示)
-->