2020.07-Study_update.4
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@Beanpublic 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>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！