第一周总结(2022.10.17~2022.10.22)
2024-05-10 04:06:15
本周内容:
本周学习了前端一些基本的HTML标签以及css(网页修饰)---完成简单的登录/注册/一些首页的页面布局.
DAY1
1.HTML基础学习
HTML:超文本标记语言(Hyper Text Markup Language),它可以对文本,图片,动画,文档等等都可以标记.
<!DOCTYPE html> <!-- html文档声明(默认h5的文档类型) -->
<html><head><meta charset="utf-8"><title>html的标准格式</title></head><body></body>
</html>2.前端开发工具HbuderX的使用
2.1解压HbuderX工具
2.2打开工具---创建web项目
2.3在空的页面下建新一个html网页这时候就hbuderx会自动创建一个.html文件储存在刚刚创建的项目文件夹下
2.4看到页面结构,然后就可以使用html基本标签和css来编写和修饰网页
<!DOCTYPE html><!-- ctrl + shift+/html 的注释:为了提高阅读性的一些文字描述
-->
<html><!-- 根标签 --><head><!-- 头标签 --><meta charset="utf-8" /><!-- 指定页面编码格式 --><title>html的入门</title><!-- 标题 --></head><body>hello,这是我的第一个使用工具生成的网页<!-- 书写我们的标签 -->\</body>
</html>2.5页面运行
DAY2
1.HTML的常见文本标签
常见的文本标签有:1.标题标签h1-h6 从大到小的标题
<!-- 标题标签h1-h6 从大到小的标题--><h1>今天天气不错!</h1><h2>今天天气不错!</h2><h3>今天天气不错!</h3><h4>今天天气不错!</h4><h5>今天天气不错!</h5><h6>今天天气不错!</h6>2.水平线标签(分割线)
<hr/>
<!--或-->
<hr >3.段落标签 p标签
<!-- 段落标签 p标签 再插入段落标签的时候,前后会给我们加入空行注意事项:像html中标签如果又开始有结束,结束标签不要忘记--><p>时间快到了发货过来看机会是豆腐干四大护法开机速度发货过来看记得房价格和</p><p>圣诞快乐肌肤光滑卢卡斯的积分韩国当时法国山东分公司的风格</p><p>岁的法国士大夫价格合理会计师大后方给</p><p>速度发货管理会计师大后方给卢卡斯京东方</p><p>士大夫敢死队均符合国家流口水对人有四个</p>4.换行标签
<!-- 换行标签 br 没有开始标签,他会在浏览器中标记一个空行 -->今天天气不错!<br/>今天天气适合跑步!5.文本格式化标签
<!-- 文本格式化标签 常见的 一些文本格式化标签i标签,b标签,strong标签,em,标签b和strong的区别共同点:都是加粗的意思,对某段文本内容进行加粗标记不同点:如果没有语义上的一种强调,那么就去使用b标签如果有语义上的强调那么就用strong
i标签和em标签同上;--><a name="wodezuguo"></a><b>我爱我的祖国</b><br><strong>我爱我的祖国</strong><br><i>卡塔尔世界杯</i><br><em>卡塔尔世界杯</em><br><!-- 斜体并加粗 --><b><i>哈哈哈哈</i></b>6.应用标签
<!-- 短引用,q元素 被引入的元素加入引导 --><p>我的女神:<q>高圆圆</q></p><!-- 应用标签 长引用 blockquote,将它包括的内容进行"缩进"处理 类似tab键--><p>女神高圆圆</p><blockquote>她是我的女神</blockquote>以上是这些是一些比较基础的标签,常用来简单的编辑单行文本,在html中我们还会需要一些列表内容来实现网页中的导航栏功能,所以我们还要学习文本标签中的列表标签
7.列表标签---无序列表
<p>你喜欢的明星?</p><!-- 列表标签无序列表ui和liul是父标签li是列表项(子标签)ul标签默认的属性type:给列表项前面的标记值(默认disc,实心圆点) 不写就是默认值circle:空心圆点square:实心的小正方形 --><ul type="square"><!--此处用的是"sqyare"值,所以列表前标记是一个实心小正方形--><li>c罗</li><li>梅老板</li><li>内马尔</li><li>本泽马</li></ul>8.列表标签---有序列表
<!-- 有序列表ol和lili是ol的子标签,列表元素ol的默认属性type,默认值为1也可以是希腊数字"I"或小写"i"--><p>用户管理</p><ol type="I"><li>添加用户</li><li>查询所用用户 </li><li>修改用户</li><li>删除用户</li></ol>9.列表标签---自定义列表
<!--自定义列表自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始--><p>项目组人员构成</p><dl><!-- 自定义列表 --><dt>java工程师</dt><!-- 自定义列表项 --><!-- 具体项的定义使用dd --><dd>Java工程师1号 </dd><dd>Java工程师1号 </dd><dd>Java工程师2号 </dd><dd>Java工程师3号 </dd><dd>Java工程师4号 </dd><dt>测试工程师</dt><dd>测试工程师1号</dd><dd>测试工程师2号</dd><dd>测试工程师3号</dd><dt>前端工程师</dt><dd>前端工程师1号</dd><dd>前端工程师2号</dd><dd>前端工程师3号</dd><dd>前端工程师4号</dd></dl>这些就是列表标签,用来建立一些列表,接下来我学到了一些更有意思的标签,让页面画面动了起来!
10.滚动标签
<!-- 滚动标签 marquee属性:背景色bgcolorbehavior:滚动方式 默认值scroll:连续滚动slide:滑动一次到某个浏览器边框停掉 alternate:来回滚动directoion:滚动方向 默认值scrolldelay:刷新率(单位为ms)scrollamount:滚动速度(数值越大滚动的速度越快)--><marquee scrolldelay="500" scrollamount="25" direction="right" behavior="alternate" bgcolor="deeppink">欢迎光临!</marquee>每个页面都有不同的部分所以可以将不同的部分分为不同的块
11.块元素
<!-- div span pre 都是块元素div和span有什么区别?div:块元素,占一行空间,多个div之间会换行div 应用场景:结合css(给html标签进行修饰),完成层级页面布局span:行内标签,不会像div元素一样,处在同一行上的span应用场景:前端完成表单校验举例 用户在输入用户名后,会有提示信息--></head><body><div id="">JavaEE_2211</div><div id="">JavaEE_2211</div><span id="">今天天气不错!</span><span id="">今天天气不错!</span><hr><!-- pre 原样输出标签当我们要输入一些文字代码需要让他在输出时与我们在编写时的格式相同时使用--><pre>class Helloworld{public stsatic void main(String[] args){system.out.printin("helloworld")}}</pre>在每个网页中都会有一段文字或者按钮可以让我们跳转到另一个网页或者当前页面的某一个地方这里就用到了超链接(链接)标签
<!-- HTML 超链接（链接）a标签来表示通过使用 href 属性 - 创建指向另一个文档的链接href="url" url 称为 "网络资源定位符号"可以使用本地地址也可以是网络地址target:打开资源地址的方式默认打开方式：_self（当前窗口直接打开新地址）_blank :新建一个窗口打开超链接的第二种用法:通过使用 name 属性 - 创建文档内的书签作为"锚链接来使用"在同一个html下 1)打锚点---(创建一个锚点(标记/书签))<a name="锚点名称"></a>2)创建跳转链接(需要从某个位置跳转到上面的锚点位置)<a href="#锚点名称">跳转到锚点</a>在不同页面下进行锚点跳转1)在另一个页面的某个位置打锚点---(创建一个锚点(标记/书签))<a name="锚点名称"></a>2)当前页面创建跳转连接,跳转到另一个页面的那个锚点位置<a href="文件地址#锚点名称">跳转到锚点</a>--></head><body><a name="top"></a><a href="01_常用的HTML文本标签.html#wodezuguo">我的祖国</a><br><a href="#foot">跳转底部</a><br><!-- 访问网络地址 --><a target="_blank"href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%B7%B1%E7%94%B0&hs=0&pn=1&spn=0&di=7146857200093233153&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=86028899%2C3921712123&os=3829226505%2C2733220949&simid=3121789113%2C3828341612&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E6%B7%B1%E7%94%B0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fp7.itc.cn%2Fq_70%2Fimages03%2F20220223%2Fee1c287ad5024833a3bfea9d7f706440.jpeg%26refer%3Dhttp%3A%2F%2Fp7.itc.cn%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1668747411%26t%3D4f194a33bdc4e0711bde2e724e45ab5b&fromurl=ippr_z2C%24qAzdH3FAzdH3Fgjof_z%26e3Bf5i7_z%26e3Bv54AzdH3FwAzdH3Fcd9b990ba_8d88dnlcm&gsm=200000000000002&islist=&querylist=&dyTabStr=MCwzLDIsNCwxLDYsNSw3LDgsOQ%3D%3D">点我试试</a><br><ahref="file:///F:/develop/EE 2211/10_18/code_resource/code/EE_2211_html/03_文本标签_滚动标签.html">点击</a><br><a href="https://www.baidu.com">百度</a><br><p>20世纪90年代，硬件领域出现了单片式计算机系统，这种价格低廉的系统一出现就立即引起了自动控制领域人员的注意，因为使用它可以大幅度提升消费类电子产品（如电视机顶盒、面包烤箱、移动电话等）的智能化程度。Sun公司为了抢占市场先机，在1991年成立了一个称为Green的项目小组，帕特里克、詹姆斯·高斯林、麦克·舍林丹和其他几个工程师一起组成的工作小组在加利福尼亚州门洛帕克市沙丘路的一个小工作室里面研究开发新技术，专攻计算机在家电产品上的嵌入式应用。</p><p>1998年12月8日，第二代Java平台的企业版J2EE发布。1999年6月，Sun公司发布了第二代Java平台（简称为Java2）的3个版本：J2ME（Java2 Micro Edition，Java2平台的微型版），应用于移动、无线及有限资源的环境；J2SE（Java 2 Standard Edition，Java 2平台的标准版），应用于桌面环境；J2EE（Java 2Enterprise Edition，Java 2平台的企业版），应用于基于Java的应用服务器。Java 2平台的发布，是Java发展过程中最重要的一个里程碑，标志着Java的应用开始普及。</p><p>JRE是个运行环境，JDK是个开发环境。因此写Java程序的时候需要JDK，而运行Java程序的时候就需要JRE。而JDK里面已经包含了JRE，因此只要安装了JDK，就可以编辑Java程序，也可以正常运行Java程序。但由于JDK包含了许多与运行无关的内容，占用的空间较大，因此运行普通的Java程序无须安装JDK，而只需要安装JRE即可</p><p>可靠性方面最重要的增强之一是Java的存储模型。Java不支持指针，它消除重写存储和讹误数据的可能性。类似地，Java自动的“无用单元收集”预防存储漏泄和其它有关动态存储分配和解除分配的有害错误。Java解释程序也执行许多运行时的检查，诸如验证所有数组和串访问是否在界限之内。
异常处理是Java中使得程序更稳健的另一个特征。异常是某种类似于错误的异常条件出现的信号。使用try/catch/finally语句，程序员可以找到出错的处理代码，这就简化了出错处理和恢复的任务。</p><a name="foot"></a><a href="#top">顶部</a>在网页中插入图片就会用到图像标签
<head><meta charset="utf-8"><title>图像标签</title><!-- 语法规则<img src="url"/>src:连接到的图片地址url(统一字符定位符)src:使用相对路径相对路径:在当前这个web项目下的路径当前这个页面要访问项目下的img文件夹里面的图片绝对路径:D:/EE_2211......--></head><body><!-- 架子本地图片img文件夹下面../回退到上级目录title:将鼠标悬浮在图片上的文字提示alt:替代文本:当图片链接失效了,这个时候替代文本起作用,显示文字描述什么图片--><img src="img/bgground.webp" width="400px" height="400px"></body>第二天的学习就是这么多
DAY3
1.表格table标签
早期table布局,不好 ,因为整个表格宽度确定后单元格td一旦改变,整个表格就出问题
后台管理系统
管理员针对商品:增删改查
<head><meta charset="utf-8"><title>01_表格标签table</title><!-- 表格标签使用table表示下面有子标签tr;行属性:align:对齐方式行的子标签caption给表格设置标题td:一行指定的单元格th:表头信息table属性:border表格边框线cellspacing:表格单元格和边框之间的空袭,设置0width和height:宽度和高度align:对齐方式 center 居中bgcolor设置背景颜色--></head><body><!-- 5行5列 --><table border="1px" cellspacing="0" width="500px" height="400px" align="center" bgcolor="pink"><!-- font字体标签 --><caption><font size="" color="red">学生信息</font></caption><tr><th>学生编号</th><th>学生姓名</th><th>学生年龄</th><th>学生性别</th><th>学生住址</th><th>操作</th></tr><tr align="center"><td>1</td><td>高圆圆</td><td>43</td><td>女</td><td>北京市</td><td><a href="#"><font color="steelblue">修改</font></a><a href="#"><font color="red">修改</font></a></td></tr><tr align="center"><td>2</td><td>文章</td><td>35</td><td>男</td><td>西安市</td><td><a href="#"><font color="steelblue">修改</font></a><a href="#"><font color="red">修改</font></a></td></tr><tr align="center" ><td>3</td><td>马伊琍</td><td>44</td><td>女</td><td>上海市</td><td><a href="#"><font color="steelblue">修改</font></a><a href="#"><font color="red">修改</font></a></td></tr><tr align="center"><td>4</td><td>姚笛</td><td>30</td><td>女</td><td>上海市</td><td><a href="#"><font color="steelblue">修改</font></a><a href="#"><font color="red">修改</font></a></td></tr></table></body>表格标签中单元格合并的属性
<head><meta charset="utf-8"><title>02_表格标签中单元格合并的属性</title><!-- 单元格合并td标签的属性rowspan:行合并 你当前这个单元格行合并所占的单元格数量colspan:列合并 你当前单元格列所占的单元格数量--></head><body><table border="1px" cellspacing="0" width="500px" height="400px" align="center" bgcolor="pink"><!-- font字体标签 --><caption><font size="" color="red">学生信息</font></caption><tr><th>学生编号</th><th>学生姓名</th><th>学生年龄</th><th>学生性别</th><th>学生住址</th><th>英语成绩</th></tr><tr align="center"><td>1</td><td>高圆圆</td><td>43</td><td>女</td><td>北京市</td><td>98</td></tr><tr align="center"><td>2</td><td>文章</td><td>35</td><td>男</td><td>西安市</td><td>80</td></tr><tr align="center" ><td>3</td><td>马伊琍</td><td>44</td><!-- 行合并 指定单元格格子数量 --><td rowspan="2">女</td><td>上海市</td><td>78</td></tr><tr align="center"><td>4</td><td>姚笛</td><td>30</td><!-- <td>女</td> --><td>上海市</td><td>100</td></tr><tr align="center"><td colspan="5">平均成绩</td><td>89</td></tr></table></body>2.表单标签(重要)
<head><meta charset="utf-8"><title>表单标签</title><!-- 表单标签action="url服务器地址"method="提交方式"两种:get和post 默认get get:在浏览器直接输入访问地址都是默认get方式--></head><body><form action="05_server.html" method="post"><!-- placeholder h5的新增属性:提示信息自带的一种效果,输入值后提示信息消失value:设置输入框的默认值 没有上面那种效果-->用户名:<input type="text" name="username" placeholder="请输入用户名" /><br>密  码:<input type="password" name="pwd" placeholder="请输入密码"/><br><input type="submit" value="登录" /> <!-- 特殊按钮 提交按钮将用户表单中的所有表单项的内容提交到url地址上进行校验--></form></body>
</html>
<!-- get和post的区别 get提交:1.会将用户的信息提交到地址栏上格式实在action的url地址后面?表单项中name属性值1=输入的内容2.get提交 不安全 不适合提交用户私密数据3.get提交 由于在地址栏上,所以提交的数据大小有限post提交:hbuderx运行,提交,找不到地址手动方式去运行这个页面(不用工具运行)1)不会将信息提交到地址栏上2)相对get比较安全 但是密码信息还需加密(后期通过工具加密)3)相对get提交不会将信息提交到地址栏里,所以没有数据大小限制-->
<!-- 表单项的所有标签 都要加上name属性(必填)给后端服务器程序标记 用户输入的内容值是什么-->常见的表单标签元素
<head><meta charset="utf-8"><title>06_常见的表单标签元素</title><!-- 表单标签中的元素必须填name属性输入类型input type="text" 文本输入框radio 单项按钮password 密码文本checkbox 复选框date 日期组件file 文件上传button 普通按钮 结合valuesubmit 特殊提交按钮,将用户的信息提交到action:地址reset 重置按钮hidden 隐藏域下拉菜单 select 标签子标签option:下拉选项文本域:textarearows:指定行数 --></head><body><form action="05_server.html" method="get"><!-- 隐藏域 --><input type="hidden" name="userId" value="9527" />用户名:<input type="text" name="username" placeholder="请输入用户名" /><br>密  码 <input type="password" name="pwd" placeholder="请输入密码" /><br>性  别:<!-- radio 单项选择男或者女同一组代表性别,给后端标记,--><input type="radio" name="sex" value="0" />男<input type="radio" name="sex" value="1" />女<br>爱  好:<!-- --><input type="checkbox" name="hobby" value="0" />篮球<input type="checkbox" name="hobby" value="1"/>足球<input type="checkbox" name="hobby" value="2"/>羽毛球<input type="checkbox" name="hobby" value="3"/>跑步<input type="checkbox" name="hobby" value="4"/>健身<br>出生日期:<input type="date" name="birthday" value="" /><br>籍  贯:<select name="city"><option value ="请选择">请选择</option><option value ="宝鸡市">宝鸡市</option><option value ="西安市">西安市</option><option value ="西安市鄂邑区">西安市鄂邑区</option><option value ="周至">周至</option><option value ="长安区">长安区</option></select><br>上传照片:<input type="file" name="photo" /><br>自我介绍:<textarea rows="5" intrtduce cols="20" >何志豪</textarea><br><input type="button" name="" value="点我没用"/><br><input type="submit" name="" value="注册" /><br><input type="reset" value="重置清空" /></form></body>我们还可写出格式比较优雅的表单,使用form里嵌套表格的方式.
如:
<head><meta charset="utf-8"><title>07_格式优雅的表单</title><!-- form里嵌套表格 --></head><body><form action="05_server.html" method="get"><table background="" border="1px" width="400px" height="550px" cellspacing="0" align="center"><caption><font size="20px" color="blue">会员注册</font></caption><tr align="center"><td>用户名</td><td><input type="text" name="username" placeholder="请输入用户名" /></td></tr><tr align="center"><td>密  码</td><td><input type="password" name="pwd" placeholder="请输入密码" /></td></tr><tr align="center"><td>出生日期</td><td><input type="date" name="birthday" /></td></tr><tr align="center"><td>邮箱</td><td><input type="email" name="email" /></td></tr><tr align="center"><td>验证码</td><td><input type="text" value="yyds" /></td></tr><tr align="center"><td colspan="2"><input type="submit" value="注册" /></td></tr></table></form></body>DAY4与DAY5
1.框架标签
今天的学习是将我们的框架效果展示出来
模拟后台管理模板
框架标签 frame
框架集标签:frameset
框架标签的使用frame来表示
特点:一个frame包含一个html页面
<frame src=" 链接到的.html页面"/>
它可以模拟后台管理系统模块版,整个结构组成由多个页面组成,不能使用frame来表示,需要使用frameset框架标签;
左边菜单页
logo页
底部信息页
中间页
框架标签frameset:由两个或两个以上的html页面组成
rows:水平方向(由上而下划分)每个部分占整个部分权重比
cols:垂直方向(由左而右划分)每个部分占整个部分权重比
<frameset rows="20%,*,10%"><frame src="logo页面.html"/><frameset cols="15%,*"><frame src="左边页面菜单.html"/><frame src="中间主页.html" name="main"/></frameset><frame src="底部信息页面.html"/></frameset>2.css入门以及使用方式
<head><meta charset="utf-8"><title>CSS入门</title><!-- 前端三剑客html:理解"房屋主体结构"CSS:理解"具体的房屋里面的修饰"js(Javascript):理解:"""具体房屋里面的功能(前端自己的)js:变量,数据类型CSS:cascading style sheet: 层叠样式表我们自己书写的样式一定是系统里面有的样式(样式库规定的)CSS使用方式第一种html的每一个标签都有style属性:设置样式的style="样式属性名称1:属性值1;样式属性名称2:属性值2;...."弊端:一次只能控制一个标签进行修饰(如果在实际操纵中,仅仅给某个标签设置,可以)CSS使用方式第二种:内敛样式(内部样式)在head标签中书写<style>使用CSS选择器(可以直接是标签名称)样式属性名称1:属性值1;样式属性名称2:属性值2;</style>存在弊端:当前这个html只是写html标签元素的CSS使用方式三:外联样式(外部样式)迁都那开发:推荐,jiangCSS样式代码和html标签分离了单独需要在项目下创建css文件夹,然后创建后缀名.css文件2)css文件书写使用CSS选择器(可以直接是标签名称){样式属性名称1:属性值1;样式属性名称2:属性值2;}link 关联--><style type="text/css">/* h1{font-size: 2.1875rem ;color: orange;text-align: center;}div{font-size: 30px;color: red;} */</style><!-- 导入css文件--><link rel="stylesheet" type="text/css" href="css/01.css"/></head><body><!-- <h1 style="color: red;text-align: center;font-size: 35px;">今天学习CSS修饰html标签</h1> --><h1>今天学习CSS修饰html标签</h1><div id="">hello world</div><div id="">2022年10月20日</div></body>3.css中常用的选择器
<head><meta charset="utf-8"><title>常用的css选择器</title><!-- 常用的选择器标签名称选择器{样式属性名称1:属性值1;样式属性名称2:属性值2;}class选择器(类选择器).class属性名{样式属性名称1:属性值1;样式属性名称2:属性值2;}同一个页面中的class属性值可以重名class(类)选择器:同一类型元素,优先级大于标签名称选择器id选择器在标签中指定id="值",注意:id选择器的id值,必须唯一(id属性值唯一,可以排除浏览器兼容性问题)现在美学js,所以id值重复,也可以展示被id选中的效果#id属性值{样式代码}上面三个选择器时设置CSS的最基本选择器ID>class>标签组合选择器4.并集选择器选择器1，选择器2，选择器3.。。{选择可以是上面的id，class，标签样式代码}5.子元素选择器选择器1 选择器2 {选择器2选中的标签是选择器1的子元素样式代码}6.后代选择器选择器1>选择器2{选择器2选择的元素是选择器1的后代元素样式代码}--><style type="text/css">/* div {font-size: 30px;color: red;} *//* 类选择器 *//* .c1 {font-size: 35px;color: blue;} *//* #d1 {font-size: 2.5rem;color: green;} *//* 并集选择器 *//* #d1,.c1{text-align: center;color: deeppink;font-size: 25px;} *//* 子元素选择器(交集选择器) *//* #d1 p {font-size: 20px;color: darkblue;} */div>p{color: aquamarine;}</style></head><body><div id="d1"><p>听取和审查十九届中央委员会的报告</p></div><div class="c1">斯里兰卡人民联合阵线领袖</div><div>今天天气不错</div><p>程序员不加班节日1024</p><div><p>JavaEE</p><div ><p>MySQL</p></div></div></body>4.CSS中特殊的选择器---伪类选择器
<head><meta charset="utf-8"><title>CSS伪类选择器</title><!-- 伪类用于定义元素的特殊状态。状态:1)link状态:鼠标未访问的状态2)hover状态(使用居多):鼠标经过状态3)avtive:鼠标获取焦点状态(激活点击但是没有松开)4)visited状态:鼠标访问过了的状态css代码书写格式:选择器:状态名称{样式名称1:值1}注意:状态名称不分大小写,尽量小写注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。--><style type="text/css">a:link{font-size: 30px;color: red;}a:visited{font-size: 40px;font-family: "楷体";color: darkgray}a:hover{font-size: 35px;color: green;/* 文本修饰:去掉超链接下划线 */text-decoration: none;}a:active{font-size: 30px;color: royalblue;/* 加下划线 */text-decoration: underline;}</style></head><body><a href="02_常用的css选择器.html">点我试试</a></body>5.CSS中常用的样式属性
5.1css中文的本样式
<head><meta charset="utf-8"><title>css常用文本样式</title><style type="text/css">body {/* 文本颜色 */color: plum;/* 文本对齐样式 text-alignleft center right*/text-align: center;/* 文本修饰text-decoration 属性用于设置或删除文本装饰 underline;设置下划线none:不设置下划线overline:上划线line-through:中划线*/text-decoration: underline;}p{/* text-transform 文本转换capitalize:首字母大写uppercase:大写lowercase:小写*/text-transform:capitalize;text-align: left;text-decoration: none ;color: blue;/* text-indent 缩进文本 */text-indent: 30px;/* letter-spacing 字母间距*/letter-spacing: 10px;/* text-shadow: 水平方向 垂直阴影 颜色 ; 添加文本阴影*/text-shadow: 100px 10px green ;}</style></head><body>今天是2022年10月21日<p>hello world</p></body>5.2CSS中的边框样式
<html><head><meta charset="utf-8"><title>06_css边框样式</title><!-- 边框有四个边上,下,左,右边框的颜色border-top-color;上颜色border-bottom-color;下颜色border-left-color;左颜色border-right-color;右颜色边框颜色有了,但是需要指定边框宽度border-top-width: 宽度border-bottom-width:border-left-width:border-right-width:上面宽度颜色都有了,还不行必须要指定边框的样式属性(solid单实线,double双实线,dashed虚线,dotted点线)border-top-style:;样式border-bottom-style:;border-left-style:;border-right-style:上面写法很麻烦:w3c组织规定:为了简化书写格式边框的颜色简写属性 border-color边框的宽度简写属性 border-width边框的样式简写属性 border-style这些简写判断方向(上右下左)1)默认方向:上右下左2)某一边没有设置颜色/宽度/样式的话,那么默认补齐对边的颜色/宽度/样式最终的简写格式:边框的简写属性(必须有先后顺序)border: border-width border-style border-color--><style type="text/css">div{/* 四个边框颜色 *//* border-top-color: red;border-bottom-color: green;border-left-color: blue;border-right-color: orange; *//* 边框的颜色简写属性*//* border-color: red blue ; *//* 四个边的宽度 *//* border-top-width: 10px;border-bottom-width:20px;border-left-width:30px;border-right-width:40px; *//* 边框宽度简写 *//* border-width: 5px ; *//* 四个边框的样式 *//* border-top-style: solid;border-bottom-style:dashed;border-left-style:double;border-right-style:dotted; *//* 边框样式简写属性 *//* border-style: solid double dotted; *//* 最终的简写属性:将三个样式属性声明写在一起 */border: 3px solid blue;width: 150px;height: 100px;}</style></head><body><div id="">这是一个div</div></body>以上就是关于HTML的基础学习,让我掌握了如何使用HbuderX编写一些简单的网站.
为以后的Java学习中前端与后端的链接打下良好的基础
最后,我安装了java软件开发工具包和idea开发工具,也旁听了老师讲的数据结构,了解到什么是栈什么是队列.
本周总结:
经过本周的学习,我了解到了,如何使用HbuderX,如和编写一个简单的注册登录页面,并且感觉前端的学习,需要记住并背过许多的标签内容,熟记他们的用法.还预习了javase的内容.最重要的是,在java学习过程中不应该只学习关于Java的相关内容,后端的学习,应该要了解更多的计算机原理知识,前端知识以及计算机操作系统有关的知识,这样可以让以后的学习生活中更加得心应手!
第一周总结(2022.10.17~2022.10.22)相关推荐
- 输出结果为16的python表达式_第一周作业(rayco)
rayco 第一周作业 第一次-课后习题 a = 10 b = 3 c = a/b-a print(c, type(c)) c = a/b*a print(c, type(c)) c = 0.1*a/ ...
- # 20155337 2017-2018-1 《信息安全系统设计基础》第一周学习总结
20155337 2017-2018-1 <信息安全系统设计基础>第一周学习总结 教材学习内容总结 1.1信息就是位+上下文 hello.c程序是以字节序列的方式储存在文件中的.每个字节都 ...
- 第三周总结(2022.10.31~2022.11.4)
目录 Day1 1.if...else...和三元运算符的区别? 2.if...else...嵌套 3.流程控制语句之switch(考点很多) 3.1什么是switch语句? 3.2switch语句中 ...
- 第二周总结(2022.10.24~2022.10.28)
目录 本周内容 DAY1 1.计算机的基础知识(应用/硬件/软件) 什么是计算机? 计算机的用途 计算机的硬件 计算机软件 软件结构的划分 软件开发 人机交互 人机交互的两种方式 常用的dos窗口命令 ...
- CGT Asia 2022第二届亚洲细胞与基因治疗创新峰会将于2022年7月10日-111日在上海举办
2021年6月,中国正式迎来首款获批上市的CAR-T细胞治疗产品,标志着中国进入细胞和基因疗法的元年,以CAR-T为代表的细胞基因治疗时代已然开启.当下,细胞与基因治疗临床管线数目逐年上升,将迎来商业 ...
- 2022年程序员开工第一周，应该收藏这样一份书单
新年新气象,开工第一周,作为程序员的你有哪些新年规划?如果还没准备好,不如小编来一份开工书单,开始你的学习旅程吧! 开工后,有哪些新书最受欢迎? 1.计算之魂 (<数学之美><浪潮之 ...
- 3934:C 10 Aug 2022 00:14:04.239 # Fatal error, can‘t open config file ‘/usr/local/redis/./redis-conf
报错:3934:C 10 Aug 2022 00:14:04.239 # Fatal error, can't open config file '/usr/local/redis/./redis-c ...
- 李骐老师2022年7月10日郑州讲授《项目管理与领导力培训》
李骐老师2022年7月10日郑州讲授<项目管理与领导力培训>企业培训内训课程 李骐老师/实战项目管理专家 李李骐老师美国PMI/PMP项目管理认证.美国 ACI 沙盘认证讲师 清华大学项目 ...
- 10/15/2022
好题 a b c d 10/16/2022 Educational Codeforces Round 137 (Rated for Div. 2) Password Permutation Value ...
最新文章
- Java反射（详述版）
- 【Linux部署】Greenplum数据库6.13.0单机版 [CRITICAL]:-Error occurred: non-zero rc: 1（报错详情+问题处理：内存释放）
- (*长期更新)软考网络工程师学习笔记一—RSA算法详解
- Oracle 事务的开始与结束
- spring mysql中文乱码问题_解决Spring下MySQL出现乱码的问题
- 如何将一棵树转换成二叉树
- VS2015搭建live555源码调试环境
- 攻防世界-music-高手进阶区-miscmisc
- Java递归算法求n的阶乘
- bootstrap冻结表头功能实现
- 如何连接工作组计算机win7,如何设置工作组,详细教您如何设置局域网工作组
- 岛屿数量问题（C实现)
- jdk1.8 stream() 把List ＜String＞变成String
- sgu-207 Robbers
- 猜数字游戏项目验收总结
- 人脸识别论文整理——深度人脸识别的大边缘余弦损失
- NLP--(八)聊天机器人(一)
- Java开发之——Date时间差
- 大型智慧灌区信息化管理系统云平台 智慧灌区信息化管理系统解决方案
- business,firm, company, corporation, enterprise等区别CentOS（Community Enterprise Operating System）想到