本周内容:
本周学习了前端一些基本的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和li
ul是父标签
li是列表项(子标签)
ul标签默认的属性
type:给列表项前面的标记值(默认disc,实心圆点)
不写就是默认值
circle:空心圆点
square:实心的小正方形
-->
<ul type="square">
<!--此处用的是"sqyare"值,所以列表前标记是一个实心小正方形-->
<li>c罗</li>
<li>梅老板</li>
<li>内马尔</li>
<li>本泽马</li>
</ul>8.列表标签---有序列表
<!-- 有序列表
ol和li
li是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
属性:
背景色bgcolor
behavior:滚动方式 默认值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>
<a
href="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:表格单元格和边框之间的空袭,设置0
width和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 普通按钮 结合value
submit 特殊提交按钮,将用户的信息提交到action:地址
reset 重置按钮
hidden 隐藏域
下拉菜单 select 标签
子标签option:下拉选项
文本域:textarea
rows:指定行数
-->
</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-align
left 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的相关内容,后端的学习,应该要了解更多的计算机原理知识,前端知识以及计算机操作系统有关的知识,这样可以让以后的学习生活中更加得心应手!
9024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
