week 7.20-7.26
| - | Study-update |
|---|---|
| -Mon | thymeleaf整合shiro使得前端是否显示 |
| -Tue | Html |
| -Wes | work |
| -Thu | 表单 |
| -Fri | Css |
| -Sat | 属性选择器 |
| - | Study-update |
7.20 Monday
依赖
<!--thymeleaf-extras-shiro依赖-->
<dependency>
<groupId>com.github.theborakompanioni</groupId>
<artifactId>thymeleaf-extras-shiro</artifactId>
<version>2.0.0</version>
</dependency>shiroConfig配置
//整合shiroDialect 用来整合thymeleaf
@Bean
public ShiroDialect getShiroDialect(){
return new ShiroDialect();
}根据权限显示
xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
<div shiro:hasPermission="user:test">
<a href="/test">test</a>
</div>7.21 Tuesday
html
<head>
-meta>描述性标签，用来描述我们网站的一些信息基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<!--段落标签-->
<p>哈喇辣辣halo哦哦哦哦哦</p>
<p>ni hao ma?</p>
<!--水平线标签-->
<hr>
<!--换行标签-->
1<br>
2<br>
3<br>
<!--粗体-->
<strong>123</strong>
<!--斜体-->
<em>11111</em>
<hr>
<!--  换行转义字符-->
11 11
>
<hr>
<
<hr>
©
</body>
</html>图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<img src="../static/微信图片_20200713152029.jpg" alt="1" title="悬停文字" height="960" width="1000">
</body>
</html>超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a name="top">顶部</a>
<!--_blank 打开新标签 -self在本身网址打开-->
<a href="图像标签.html">跳转到图像标签页面</a>
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<img src="../static/微信图片_20200713152029.jpg" alt="1" title="悬停文字" height="960" width="1000">
<img src="../static/微信图片_20200713152029.jpg" alt="1" title="悬停文字" height="960" width="1000">
<img src="../static/微信图片_20200713152029.jpg" alt="1" title="悬停文字" height="960" width="1000">
<!--锚链接
锚标记
跳转到标记
-->
<a href="#top">回到顶部</a>
<!--功能性链接-->
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!-- 有序列表-->
<ol>
<li>java</li>
<li>java</li>
<li>java</li>
<li>java</li>
<li>java</li>
</ol>
<!--无序列表-->
<ul>
<li>java</li>
<li>java</li>
<li>java</li>
<li>java</li>
<li>java</li>
</ul>
<!-- 自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>java</dd>
<dd>java</dd>
<dt>班级</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
</body>
</html>表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<tr>
<!-- colspan 跨列-->
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频与视频</title>
</head>
<body>
<video src="../video/Movie%2001.mp4" controls autoplay></video>
<audio src="../video/Movie%2001.mp4" controls autoplay></audio>
</body>
</html>内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe src="https://www.baidu.com" frameborder="1" width="1000" height="800" name="baidu"></iframe>
<!--加载特定网页-->
<iframe src="" frameborder="1" width="1000" height="800" name="1"></iframe>
<!--给上面的内联框架添加网页-->
<a href="http://bilibili.com" target="1">加载</a>
</body>
</html>7.23 Thursday
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表单-->
<form action="" method="get">
<p>
<!-- label增强鼠标可用性-->
<label for="mark">用户名：</label>
<input type="text" value="admin" id="mark"></p>
<p>密码：<input type="text"></p>
<!-- 单选框-->
<p>性别：<input type="radio" value="女" name="gender">男
<input type="radio" value="男" name="gender">女
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
<!-- 多选框-->
<p>
<input type="checkbox" name="hobby" value="code">代码
<input type="checkbox" name="hobby" value="sleep">睡觉
</p>
<!-- 按钮-->
<p>
<input type="button" name="btn1" value="点击我">
<input type="image" src="">
</p>
<!-- 下拉框-->
<select name="city">
<option value="china" selected>中国</option>
<option value="india">印度</option>
<option value="usa">美国</option>
</select>
<!-- 文本域-->
<textarea name="text" cols="30" rows="10"></textarea>
<!-- 文件域-->
<input type="file" name="upload">
<!-- email-->
<p>
<input type="email" name="e">
</p>
<!-- 数字验证-->
<p>数字：
<input type="number" max="10" min="0" step="1">
</p>
<!-- 滑块-->
<p>音量：
<input type="range" min="0" max="10" step="2">
</p>
<!-- 搜索-->
<p>搜索
<input type="search">
</p>
</form>
</body>
</html>
7.24 Friday
html+css+JS
结构+表现+交互
外部css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 在style里写css代码
-->
<!-- <style>-->
<!-- h1{-->
<!-- color: red;-->
<!-- }-->
<!-- </style>-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>标题</h1>
</body>
</html>h1{
color: red;
} 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.bule{
color: red;
}
</style>
</head>
<body>
<h1 class="bule">hello</h1>
<h1>hello</h1>
</body>
</html>id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#red{
color: red;
}
</style>
</head>
<body>
<h1 id="red">hello</h1>
</body>
</html>层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器 后面所有级别*/
/*div p{*/
/* background: red;*/
/*}*/
/*子选择器 只对下面一级别*/
/*body>p{*/
/* background: red;*/
/*}*/
/*下面兄弟选择器 只对同级下的一个*/
/*.a+p{*/
/* background: red;*/
/*}*/
/*通用选择器 下面同级全部适用*/
/*.a~p{*/
/* background: red;*/
/*}*/
.1 p{
background: red;
}
</style>
</head>
<body>
<p>hi</p>
<p class="a">hi</p>
<p >hi</p>
<p >hi</p>
<p >hi</p>
<ul class="1">
<li>
<p>p1</p>
</li>
<li>
<p>p2</p>
</li>
<li>
<p>p3</p>
</li>
</ul>
</body>
</html>7.25 Saturday
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*= 绝对等于*/
/**= 包含*/
/*^= 以**开头*/
/*$= 以**结尾*/
a[id="1"]{
background: red;
}
a[href^="http"]{
background: red;
}
a[href$="com1"]{
background: green;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" id="1" class="first">1</a>
<a href="http://www.baidu.com" id="2" class="first">2</a>
<a href="http://www.baidu.com" class="first">3</a>
<a href="http://www.baidu.com" class="first">4</a>
<a href="//www.baidu.com1" class="first">5</a>
</p>
</body>
</html>
6192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
