javaweb学习2

news/2025/2/21 1:32:51/

p标签使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--p标签定义段落 p元素自动在其前后创建一段空白-->
hello，world
<p>段落1</p>
<p>段落3</p>
<p>段落2</p>
<!--span标签是内联元素 没有换行效果 如果不对span标签应用样式span标签没有任何效果
-->
你的购物车有<span style="color:red;font-size: 40px">10</span>个商品
</body>
</html>

在这里插入图片描述

div标签说明

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div</title>
</head>
<body>
<!--div标签可以分割文档 div是一个块级元素他的内容会自动开始新行不需要换行-->
hello，world
<div><h3>this is a h3</h3><a herf="http://www.baidu.com">goto百度</a>
</div>
</body>
</html>

from练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--select标签是下拉列表框 option标签是列表框的选项
selected=“selected”设置默认选中 textrea表示多行文本输入框
rows属性设置显示几行的高度 cols属性设置可以显示的字符高度-->
<form>用户注册信息<br/>用户名称:<input type="text" name="username"><br/>用户密码:<input type="password" name="pwd1"><br/>确认密码:<input type="password" name="pwd2"><br/>选择你喜欢的运动项目:<input type="checkbox" name="sport" value="lq">篮球<br/><input type="checkbox" name="sport" value="zq" checked>足球<br/><input type="checkbox" name="sport" value="sq" checked>手球<br/>请选择性别:<input type="radio" name="gender1" value="male">男<br/><input type="radio" name="gender2" value="female">女<br/>请选择城市:<select name="city"><option value="cd">成都</option><option value="bj">北京</option><option value="sh">上海</option>自我介绍:<textarea rows="6" cols="20"></textarea><br/>选择你的文件头像<input type="file" name="mylife" value="上传头像"><br/><input type="submit" value="提交"><input type="reset" value="重置"></select></form>
</body>
</html>

在这里插入图片描述

from格式化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--select标签是下拉列表框 option标签是列表框的选项
selected=“selected”设置默认选中 textrea表示多行文本输入框
rows属性设置显示几行的高度 cols属性设置可以显示的字符高度-->
<form>用户注册信息<br/><table border="1" cellspacing="0"><tr><td>用户名称:</td><td><input type="text" name="username"> </td></tr><tr><td>用户密码:</td><td><input type="password" name="pwd1"></td></tr><tr><td>确认密码:</td><td><input type="password" name="pwd2"></td></tr><tr><td>选择你喜欢的运动项目:</td><td><input type="checkbox" name="sport" value="lq">篮球<input type="checkbox" name="sport" value="zq" checked>足球<input type="checkbox" name="sport" value="sq" checked>手球</td></tr><tr><td>请选择性别:</td><td>><input type="radio" name="gender1" value="male">男<input type="radio" name="gender2" value="female">女</td></tr><tr><td>请选择城市:</td><td>><select name="city"><option value="cd">成都</option><option value="bj">北京</option><option value="sh">上海</option></select> </td></tr><tr><td>自我介绍:</td><td>><textarea rows="6" cols="20"></textarea></td></tr><tr><td>选择你的文件头像</td><td>><input type="file" name="mylife" value="上传头像"></textarea></td></tr><tr><td><input type="submit" value="提交"></td><td>><input type="reset" value="重置"></td></tr></table></form>
</body>
</html>

在这里插入图片描述

css快速入门

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    在head标签里出现style type=text/css表示写css内容 div表示对div元素进行-->
<!--    样式指定--><style type="text/css">div{width:300px;height:100px;background-color:gold;}</style>
</head>
<body>
<div>hello,北京</div><br/>
<div>hello,京</div><br/>
<div>hello,bei</div><br/></body>
</html>

在这里插入图片描述

css文字内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">
/*<!--        颜色可以写颜色名比如green 也可以写rgb值 也可以十六进制表示 -->*/
div{/*color:rgb(255,122,1);*/width:300px;height:100px;border:1px dashed blue;
}</style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

在这里插入图片描述

css-div使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">div{width:300px;height:100px;background: beige;}</style>
</head>
<body>
<div>jack</div>
<div>tom</div>
<div>goods</div></body>
</html>

在这里插入图片描述

引用css文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    通过引用css文件来改变样式  rel:relation关联--><link rel="stylesheet" type="text/css" href="mycss.css"/>
</head>
<body>
<div>jack</div>
<div>tom</div>
<div>goods</div></body>
</html>
div{width:200px;height:100px;background-color: brown;
}
span{border:2px dashed blue;
}

在这里插入图片描述

css-table


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格细线</title><style type="text/css">/*设置边框 : border: 1px solid black将边框合并: border-collapse: collapse;指定宽度： width设置边框： 给 td, th 指定即可 border: 1px solid black;老韩解读1. table, tr, td 表示组合选择器2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性*/table, tr, td {width: 300px;border: 1px solid black;border-collapse: collapse;}</style>
</head>
<body>
<table><tr><td align=center colspan="3">星期一菜谱</td></tr><tr><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr><tr><td>小葱豆腐</td><td>炒白菜</td></tr><tr><td rowspan=2>荤菜</td><td>油闷大虾</td><td>海参鱼翅</td></tr><tr><td>红烧肉</td><td>烤全羊</td></tr>
</table></body></html>

在这里插入图片描述

css-ul

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">ul{/*    list-style:none表示去掉默认的修饰*/list-style:none;}</style>
</head>
<body>
<ul><li>三国演义</li><li>红楼梦</li><li>水浒传</li><li>西游记</li>
</ul>
</body>
</html>

在这里插入图片描述

ul

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    decoration修饰--><style type="text/css">a{text-decoration:none;}</style>
</head>
<body>
<a href="http://www.baidu.com">点击百度</a>
</body>
</html>

在这里插入图片描述

id选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    使用id选择器需要先修饰id属性 id值是程序员自己选定
id的值唯一不能重复  --><style type="text/css">#css1{color: gold;}#css2{color:green;}</style>
</head>
<body>
<h1 id="css1">韩顺平教育</h1>
<p id="css2">hello,world</p>
</body>
</html>

在这里插入图片描述

class选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css" >.css1{color:pink;}.css2{color:sandybrown;}</style>
</head>
<body>
<div class="css2">韩顺平教育</div>
<p class="css1">hello,world</p>
</body>
</html>

在这里插入图片描述

css居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    margin-left、margin-right设置为auto表示左右居中
text-align:center表示文本居中--><style type="text/css">div{border:1px solid black;width:300px;font-size:40px;font-weight:bold;font-family:新宋体;margiin-left:auto;margin-right:auto;text-align: center;}</style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

在这里插入图片描述


http://www.ppmy.cn/news/660262.html

相关文章

数据中台方向创业者上海小胖的采访记

数据中台方向创业者上海小胖的采访记

上次混脸熟的中奖者是&#xff1a;「没有执行力一切都是空谈」&#xff0c;请于今天晚上22:00 前联系我&#xff5e; 那今天混脸熟的规则是&#xff1a;看了我的采访记后对你有什么启发吗&#xff1f; 提醒一下你们哦&#xff0c;淘宝搜索“小胖发福利”&#xff0c;获得双倍现…
阅读更多...
金错刀讲小米产品实战

金错刀讲小米产品实战

小米现象的背后&#xff0c;是互联网时代人类信息组织结构的深层巨变&#xff0c;为什么那么多人学习小米模式&#xff0c;却没有成功&#xff1f;是因为他们只知道小米七字诀“专注、极致、口碑、快”&#xff0c;却不知道怎么做。我们进行深度挖掘小米内核&#xff0c;找出小…
阅读更多...
一位北美 IT 技术人教你如何破局

一位北美 IT 技术人教你如何破局

我对于本科时光的印象&#xff0c;还停留在那所普通 211 大学的建筑物之间&#xff0c;我坐在大学的时光长廊里&#xff0c;满眼望去&#xff0c;都是经历的过的故事。可毕业后回首&#xff0c;却很少有人能说&#xff0c;自己从来没有迷茫过。 引言 我对于本科时光的印象&…
阅读更多...
写给前端的Docker入门终极指南，别再说不会用Docker了！

写给前端的Docker入门终极指南，别再说不会用Docker了！

大厂技术 高级前端 Node进阶 点击上方 程序员成长指北&#xff0c;关注公众号 回复1&#xff0c;加入高级Node交流群 来源&#xff1a;jartto.wang/2020/07/04/learn-docker/ 富 Web 时代&#xff0c;应用变得越来越强大&#xff0c;与此同时也越来越复杂。集群部署、隔离环境…
阅读更多...
李阳疯狂英语突破对话(33)-没道理

李阳疯狂英语突破对话(33)-没道理

33. It Doesn’t Make Sense 没道理 BACKGROUND 背景 An old friend goes to visit her college roommate in her new house. 一个老朋友去她的大学同宿舍好友的新居拜访。 A: Linda, it’s so great to see you again! 琳达&#xff0c;再次见到你真是太高兴了&#xff01; …
阅读更多...
差生的 8 年程序员总结

差生的 8 年程序员总结

今年终于从大菊花厂离职了&#xff0c;离职前收入大概60w不到吧&#xff0c;在某乎属于比较差的&#xff0c;今天终于有空写一下自己的职场故事&#xff0c;也算是给自己近8年的程序员工作做个总结复盘。近8年有些事情做对了&#xff0c;也有更多事情做错了&#xff0c;在这里记…
阅读更多...
刷爆全网：一个中科大差生的8年程序员工作总结~

刷爆全网：一个中科大差生的8年程序员工作总结~

编辑 | JavaGuide 来源 | 陈小房 前言 今年终于从大菊花厂离职了&#xff0c;离职前收入大概 60w 不到吧&#xff01;在某乎属于比较差的&#xff0c;今天终于有空写一下自己的职场故事&#xff0c;也算是给自己近 8 年的程序员工作做个总结复盘。 近 8 年有些事情做对了&#…
阅读更多...
千古难题真难办：如何跨越家庭背景的差异？

千古难题真难办：如何跨越家庭背景的差异？

文章目录 千古难题真难办：如何跨越家庭背景的差异？有哪些家庭背景差异？1. 经济条件的差异2. 思维观念的差异3. 生活习惯的差异家庭背景差异重要吗？1. 家庭背景是天然的筛选器2. 家庭背景是重要的价值构成3. 物质条件终究是一道坎如何跨越家庭背景差异？1. 如何搞定父母第一…
阅读更多...
最新文章

Copyright @ 2022~2023