本周内容总结
一、HTML
1. HTML定义：
超文本“标记”语言（Hyper Text Markup Language） 可以针对文本 图片 动画 文档等等都可以标记
2.前端开发工具Hbuider使用
（1）打开工具—创建WEB项目(一个网站–称为一个WEB项目:就是一个目录)
（2）在空项目下—新建一个网页（选择新建html文件，空文件）
（3）分别在title和body之间加上要显示的内容，就可以运行了
二、HTML常用的文本标签
1.普通标签：
（1）p标签：段落标签，书写大量文本的时候，分段使用p标签，前后都插入空行
（2）br标签：换行标签，在一段文本后加br标签，会进行换行，下面的内容会在下一行显示，若不进行换行，后续内容会在一行内进行显示。
（3）hr标签：水平分割线
（4）h1-h6：一级标题到六级标题，从大到小
2.marquee：滚动标签（文本滚动）
direction：滚动的方向 默认方向left：从右到左
behivour：滚动的方式 默认值scroll连续滚动，slide滑动一次，alternate来回滚动
scollamount：滚动的速度 默认值为6
3.列表标签：无序列表、有序列表、自定义列表
无序列表 ul li
有序列表 ol li
自定义列表：自定义列表以
-
标签开始，每个自定义列表项以dt开始，每个自定义列表项的定义以dd开始
dl dt dd
4.块标签：div标签和span标签
div标签：占据一行空间，多个div之间会自带换行效果
div应用场景：结合css，完成层级页面布局
span标签：行内标签，不会像div元素处在同一行上
span应用场景：前软完成表单校验去做的；
举例：用户在输入用户名后，后面会有提示信息
使用span标签动态完成文本内容的设置
pre：原样输出标签（将文本内容用pre包裹起来，浏览器会按照我们的文本格式进行展示）
转义字符： ； 相当于一个空格
&ensp； 相当于两个空格
>； 在浏览器将“>”进行转义
<； 在浏览器将“<”进行转义
版权所有©； 转义成©
注册商标®； 转义成®
5.超链接标签：
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>
6.图像标签：
<img src=“相对路径” width=“像素或者百分比” height=“像素或者百分比”title=“”/>
背景图片
在body标签给一个属性background=“图片地址”
这个图片尺寸要符合整个分辨率，这样不会出现图片重复
三、HTML表格标签
1.表格格式标签
表格格式：使用table表示
table里的一些属性：
boeder：表格边框线 单位为像素大小
cellspacing:设置单元格和边框之间的空隙,设置0,将单元格边框和表格的 边框合并
width和hight:宽度和高度 像素大小或者占整个分辨率的百分比
align:给表格设置对齐方式 centre 居中对齐
bgcolor:设置背景颜色
下面有子标签：
tr：行 （属性：align将td中的内容进行对其方式）
caption：给表格设置标题
td：一行指定的单元格（普通单元格）
th：给单元格设置表头信息（自动居中加粗效果）
2.表格单元格合并
单元格合并:运用td的标签属性
rowspan:行合并(合并行操作) 你当前这个单元格行合并所占格子数量
colspan:列合并(合并列操作)你当前这个单元格列合并所占格子数量
font字体标签 color颜色属性
3.table早期可以布局
将网页页面看成一个大的table,在单元格里嵌套表格,通过层层嵌套,将网页进行划分,最终达到布局效果(不推荐)
四、HTML表单标签
1.表单标签引入–面试题get和post有什么区别
get提交和post提交的区别
get提交: 1)会将用户的信息提交到地址栏上
格式 是在action的url地址后面?表单项标签中name属性值1=输入的内容值1&name属性的属性值2=输入内容2
2)get提交,不适合提交用户的私密数据(像登录密码,需要进行处理加密(Java中–MD5加密的工具))
3)get提交由于在地址栏上的,所以提交的数据大小有限制!
post提交:HbuilerX运行,提交,找不到地址
手动方式去运行这个页面(不要使用工具运行)
1)不会将用户信息提交到地址栏上
2)相对get安全,安全一些,但是密码的信息还需要加密的(后期通过工具加密)
3)相对get来说不会将信息提交地址栏上,所以提交数据大小无限制的!
2.表单标签–form标签–提交数据的标签
<!--表单标签form
表单标签中的元素
都需要必填name属性="值" ,服务器地址就能够知道了用户输入的信息是什么
输入类型元素input
属性:
type="text" 文本输入框
type="password" 密码输入框
type="radio" 单项按钮
type="checkbox" 复选框
type="date" 日期组件
type="Ũ le" 文件上传组件
type="button" 普通按钮 结合value去使用 ,给按钮默认值
type="submit" 结合value属性="登录/注册" 特殊的提交按钮,将用户的信息提交到了action="服务器地址"
type="reset" 重置按钮
type="hidden" 隐藏域,没有效果,但是可以提交数据
下拉菜单select标签
子标签 option:下拉选项
文本域:textarea
rows:指定书写的行数
cols:一行有多个字符
-->
<!-- 表单项的所有标签 都需要加上name属性(必填)
给后端服务器程序标记 用户输入的内容值是什么-->
3.格式优雅的表单（注册/登陆页面/添加数据/修改数据）（应用场景）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>红浪漫婚介</title>
</head>
<!-- 网页背景 -->
<body background="img/02(1).jpg">
<!-- 滚动标签 -->
<marquee direction="left" scrollamount="10" behavior="alternate" bgcolor="hotpink"> 网络一线牵，珍惜这段缘！</marquee>
<!-- 表单 -->
<form action="登录成功.html" method="get">
<!-- 表格开始 -->
<table bgcolor="lightpink" border="1px" width="500px" height="600" cellspacing="0" align="center">
<!-- 标题 -->
<caption><font color="black"> 红浪漫婚恋信息注册</font></caption>
<!-- 姓名 -->
<tr align="center">
<td>姓    名</td>
<td><input type="text" name="username" placeholder="请输入姓名" </td>
</tr>
<!-- 性别 -->
<tr align="center">
<td>性    别</td>
<td><input type="radio" name="sex" value="0">男
         
<input type="radio" name="sex" value="0">女
</td>
</tr>
<!-- 籍贯 -->
<tr align="center">
<td>籍    贯</td>
<td>
<select name="city">
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="湖南省">湖南省</option>
<option value="湖北省">湖北省</option>
<option value="山东省">山东省</option>
<option value="河南省">河南省</option>
</select>
</td>
</tr>
<tr align="center">
<!-- 年龄 -->
<td>出生日期</td>
<td>
<input type="date" name="birthday" />
</td>
</tr>
<!-- 爱好 -->
<tr align="center">
<td>爱    好</td>
<td><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" >户外
</td>
</tr>
<!-- 婚姻状况 -->
<tr align="center">
<td>婚姻状况</td>
<td>
<input type="radio" name="zhuangtai" value="0" />未婚
<input type="radio" name="zhuangtai" value="1" />离婚
<input type="radio" name="zhuangtai" value="3" />丧偶
</td>
</tr>
<!-- 个人简介 -->
<tr align="center">
<td>个人简介</td>
<td><textarea rows="8" cols="20"></textarea><br/>介绍一下自己吧！ </td>
</tr>
<!-- 联系方式 -->
<tr align="center">
<td>联系方式</td>
<td>QQ:<input type="text" name="qq"placeholder="请输入号码">
VX:<input type="text" name="vx"placeholder="请输入号码">
</td>
</tr>
<!-- 注册昵称 -->
<tr align="center">
<td>注册昵称</td>
<td><input type="text" name="wm" placeholder="请输入昵称" ></td>
</tr>
<!-- 注册密码 -->
<tr align="center">
<td>注册密码</td>
<td><input type="password" name="pwd" /> </td>
</tr>
<!-- 注册邮箱 -->
<tr align="center">
<td>注册邮箱</td>
<td><input type="email" name="email" /> </td>
</tr>
<!-- 提交重置 -->
<tr align="center">
<td colspan="2">
<input type="submit" value="注册"/>
         
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
五、HTML框架标签
1.框架的构建
模拟后台管理模板
框架标签 frame
框架集标签 frameset
框架标签:将html页面进行框架划分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架标签</title>
</head>
<frameset rows="20%,*,10%">
<frame src="01_logo.html"/>
<!--从左到右 左边菜单和中间页面-->
<frameset cols="15%,*">
<frame src="01_左边菜单.html" />
<frame src="01_中间页面.html" name="middle"/>
</frameset>
<frame src="01_底部版权信息.html" />
</frameset>
<body>
</body>
</html>
现在已经将页面划分为上中下，中间又分为左右两部分，共四个板块
顶部为logo页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
</head>
<body>
<img src="img/03.jpg"/>
</body>
</html>
底部为版权信息页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底部版权信息</title>
</head>
<body>
<!-- center居中标签 -->
<center>
<p>xxx公司版权所有<sup>©</sup> 2022-2023</p>
</center>
</body>
</html>
中间部分分为两个部分，左边为菜单栏，右边为中间显示界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左边菜单</title>
</head>
<body>
<p>学生管理</p>
<ul>
<!--
a标签超链接
target：打开方式 self:默认值在当前窗户口打开
blank：新建一个窗口打开
如果超链接需要在
-->
<li><a href="01_学生信息.html" target="middle">查询所有学生</a></li>
<li><a href="01_添加学生.html" target="middle">添加学生</a></li>
</ul>
</body>
</html>
中间显示页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中间页面</title>
</head>
<body>
<h4>欢迎</h4>
</body>
</html>
2.菜单栏信息显示在中间页面
菜单栏链接到对应的页面，点击超链接时会跳转到新的页面，要将跳转的页面内容在中间页面进行显示，需要加入target标签
<!--
a标签超链接
target:打开方式 _self:默认值在当前窗口打开
_blank:新建一个窗口打开
如果超链接需要在指定的框架的页面中打开
需要指定为target="框架标签的name属性值"
-->
六、CSS入门
1.CSS使用方式
前端三剑客
Html:理解"房屋的主体结构"
CSS :理解"具体的房屋里面加入修饰"
Js(Javascript):理解 “具体房屋里面的功能(前端自己的逻辑)”
js:变量,数据类型
CSS:Cascading Style Sheet:层叠样式表
我们自己书写的样式一定是系统里面有的样式(样式库规定的)
1)CSS使用方式第一种:行内样式
html的每一个标签都有style属性:设置样式的
style=“样式属性名称1:属性值1;样式属性名称2:属性值2;…”
弊端:一次只能控制一个标签去进行修饰(如果在实际操作过程中,仅仅给某个标签去设置,就直接用这个方式)
2)CSS使用方式第二种:内联样式(内部样式)
在head标签体中书写
<style>
使用css选择器{ //可以直接是标签名称(标签选择器)
样式属性名称1:值1;
样式属性名称2:值2;
样式属性名称3:值3;
...
}
</style>
存在弊端:当前这个html只是写html标签元素的,样式代码style标签
和html标签元素混合了,不利于管理!(后端人员,这种方式够用了)
3)CSS使用方式3:
外联样式(外部样式)
前端开发人员:这种推荐,将css样式代码和html标签代码分离了
单独需要在项目下创建css文件夹,然后里面创建后缀名.css文件
css文件书写
选择器{
样式属性名称1:值1;
样式属性名称2:值2;
样式属性名称3:值3;
…
}
在当前html页面中导入css文件
rel:关联样式库中的样式(关联层叠样式表):固定写法
2.CSS的常用选择器
<!--
常用的选择器
1.标签名称选择器{
样式属性名称1:值1;
样式属性名称2:值2;
....
}
2 class选择器(类选择器)
需要在 你的标签指定class属性="值"
.class属性值{
样式属性名称1:值1;
样式属性名称2:值2;
....
}
同一个页面中的class属性值是可以同名的!
class(类)选择器 :同一类元素 优先级 > 标签名称选择器
3 id选择器
在标签中指定id="值",注意:id选择器的id的值,必须唯一的!
(id属性值唯一,能够解决浏览器中部分标签的兼容性问题)
但是我们现在没有学习js(javascript),所以id值重复,也可以展示被id选中的效果;
#id属性值{
样式属性名称1:值1;
样式属性名称2:值2;
....
}
上面三个选择器是设置css的最基本选择器
id选择器 > class选择器 > 标签名称选择器
组合选择器
4 并集选择器
选择器1,选择器2,选择器3....{ 选择器可以是上面id,class类,标签名称选择器
样式属性名称1:值1;
样式属性名称2:值2;
....
}
5 子元素选择器
选择器1 选择器2 { 选择器2选中的标签是选择器1的子标签
样式属性名称1:值1;
样式属性名称2:值2;
....
}
6 后代选择器:
选择器1 > 选择器2 { //选择器2选中的元素是选择器1的后代元素
样式属性名称1:值1;
样式属性名称2:值2;
....
}
-->
3.CSS伪类选择器
<!--
伪类用于定义元素的特殊状态
状态:
1)link状态:鼠标未访问状态
2)hover状态(使用居多):鼠标经过状态
3)avtive状态:鼠标获取焦点状态(激活,点击了,但是没有松开),超链接就是这种
4)visited状态:鼠标访问过了状态(举例:超链接点了松开后,就访问了)
css代码书写格式:
选择器:状态名称{
样式属性名称1:值1;
样式属性名称2:值2;
...
}
注意:
1)状态名称不区分大小写,但是建议小写
2)注意： 规定这个先后顺序: 才能出现循环的效果
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
-->
<style>
<!--先写鼠标未访问时候的显示状态-->
a:link{
font-size: 20px;
color: blue;
}
<!--鼠标访问过后的状态，即点击之后的状态-->
a:visited{
font-size: 20px;
color: grey;
font-style: unset;
}
<!--鼠标经过时的状态-->
a:hover{
font-size: 35px;
color: deeppink;
font-family: "blackadder itc";
font-style: inherit;
}
<!--鼠标获取焦点状态，即鼠标点中所选内容，未松鼠标的状态-->
a:active{
font-size: 35px;
color: red;
}
</style>
4.CSS常用的文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01_CSS常用的文本样式</title>
<style>
body{
/* 文本颜色 */
color: blue;
/* 文本对齐样式：texe-align */
text-align: center;
/* 文本修饰：text-decoration
undeline：设置下划线
none：不设置任何修饰
overline：上划线
line-through：中划线（电商平台：打着之后的原价）
*/
text-decoration: underline;
}
p{
text-transform: capitalize;
text-indent: 15px;
text-spacing: 10px;
text-shadow: 5px 5px 5px hotpink;
/*文本阴影效果*/
}
</style>
</head>
<body>
今天是星期五！
<p>sweetbaby</p>
</body>
</html>
5.CSS边框样式
<!--
边框有四个框
border-top-color 上边框属性
border-bottom-color 下边框属性
border-left-color 左边框属性
border-right-color 右边框属性
颜色有了 但还要指定边框的宽度px大小
border-top-width 上边框属性
border-bottom-width 下边框属性
border-left-width 左边框属性
border-right-width 右边框属性
还需要设置边框的样式属性
border-top-style
简写格式
边框颜色border-color
边框宽度border-width
边框样式border-style
这些简写方式默认顺序为顺时方向
某一边没有设置的话，默认设置补齐对边属性
最终的简写格式,遵循先后顺序(宽度 颜色 样式)
-->
text-transform: capitalize;
text-indent: 15px;
text-spacing: 10px;
text-shadow: 5px 5px 5px hotpink;
/文本阴影效果/
}
今天是星期五！
sweetbaby
5.CSS边框样式
<!--
边框有四个框
border-top-color 上边框属性
border-bottom-color 下边框属性
border-left-color 左边框属性
border-right-color 右边框属性
颜色有了 但还要指定边框的宽度px大小
border-top-width 上边框属性
border-bottom-width 下边框属性
border-left-width 左边框属性
border-right-width 右边框属性
还需要设置边框的样式属性
border-top-style
简写格式
边框颜色border-color
边框宽度border-width
边框样式border-style
这些简写方式默认顺序为顺时方向
某一边没有设置的话，默认设置补齐对边属性
最终的简写格式,遵循先后顺序(宽度 颜色 样式)
-->
扫一扫
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
