alt+鼠标左键增加光标
alt+鼠标拖选 Ctrl+alt+上键
Ctrl+e选中相同词进行修改
alt+鼠标左键单击 转到定义地方
Ctrl+alt+左键 把代码打开在另一侧,方便查看
alt+左方向键 转到鼠标光标的上一个位置
F4切换到不同的错误之处
- 合并下一行: Ctrl + Alt + J
- 剪切光标所在行 Ctrl + x
- 复制光标所在行 Ctrl + c
总结
bootstrap网址
https://www.bootcss.com/ 文件在:day24
<link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
使用方法
<i class="fa fa-car fa-spin"></i> 汽车旋转
<div class="form-inline"> 零盒子里面的一些标签不会自动换行
<table border="1" class="table table-hover"> 有鼠标悬浮特效
<\table>
<table border="1" class="table"> 可以令表格填满美观,插入进里面的表单更加好看,但是会使表格里面的字体不会上下居中
<\table>
<button class="form-control" type="button" >添加角色</button> 好看的按钮,独自占据一行,放在有class="form-inline"属性的标签里面不会自动换行
</div>
https://www.runoob.com/bootstrap/bootstrap-popover-plugin.html
font字体库
https://fontawesome.dashgame.com/ 文件在:day24
<link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.min.css"/>
使用方法
<table class="table table-hover">
<button type="button" class="btn btn-warning">(警告)Warning</button>
等等,进网站看教程
培训
day22
背景
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif); 在前面的flwr会盖在paper上面。即在前面的背景图片有限显示
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
字符
空格 | |||
---|---|---|---|
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
’ | 撇号 | ' (IE不支持) | ' |
¢ | 分 | ¢ | ¢ |
£ | 镑 | £ | £ |
¥ | 人民币/日元 | ¥ | ¥ |
€ | 欧元 | € | € |
§ | 小节 | § | § |
© | 版权 | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
rgba与rgb颜色透明度
使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能,这里的 0.5 表示透明度,范围 0~1,0 表示全透明。
块级标签
文字形式
<div>drsg</div>
<span id="">这是普通文本</span>
<b>加粗文本</b>
<i>斜线文体</i>
<sup>上标</sup>
<sub>下标</sub>
<u>下划线</u><hr >
<code>计算机代码</code>
<em>强调文本</em>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> (缩写)
<address> (联系信息)
<bdo> (文字方向)
<blockquote> (从另一个源引用的部分)
<cite> (工作的名称)
<del> (删除的文本)
<ins> (插入的文本)
dl段落
自动换行,可以使用style="text-indent: 20px;"缩进
dt段落
自动换行,可以使用style="text-indent: 20px;"缩进
dd段落
本身有缩进两个半字符,可以使用style="text-indent: 20px;"缩进
p段落
自动换行,可以使用style="text-indent: 20px;"缩进
span段落
行内标签,不可以缩进
标签三大部分
1:html标签 详单与树的跟,其余所有标签都需要在这个表亲之内。
2:head头部 我们网站的编码格式,网站的名称,被搜索引擎搜索的关键字,引入的外部内容等一切东西
3:body身体 一般情况,我们所有想显示在浏览器中的内容都需要写在body中
标签主要分为单标签和双标签,一般情况下标签一定要有/闭合标签,哪怕是单闭合
标签三大类
1:行级标签 可以与其他标签在同一行显示,不会自动换行,不能设置宽高
2:块级标签 不能与其他标签在同一行显示,可以自动换行,可以设置宽高
3:行内块标签
区分标签的重要主要是两个标准:1 是否自动换行 2 是否能设置宽高
都能做到的是块级,都不能做到的就是行级,如果只能做到一个说明他是行内块标签
h1标题
<h1>一级标签</h1>*
<h2>二级标签</h2>
<h3>三级标签</h3>
br普通换行
hr横线换行
ol有序列表
元素
段落li
块级标签
ul无序列表
标签style
<style type="text/css">
ul{
/* 写li也可以,字标签会继承父标签的CSS样式 li可以继承ul的样式 */
/* list-style: disc; 黑点默认 */
/* list-style: circle;空心圆 */
/* list-style: square; 实心方块 */
/* list-style: decimal; ol的默认方法 */
list-style: none; /* 无前置符号 */
font-size: 50px;
/* color: #DEB887; */
color: rgb(254, 204, 104); /* 修改颜色,三原色原理*/
list-style-image: url(img/1.png);
text-align: left;
}
#l0{
/* 不使用ul的li中自带的黑点等,使用自定义的图片,并可以修改图片位置和大小 */
font-size: 15px;
list-style-type: none;
background: url(img/100.png) no-repeat 0rem 0.5rem;
background-size: 1.4rem 1.4rem;
}
</style>
元素
段落li
块级标签
table表格
标签属性
border 设置外部边框宽度
cellspacing="0" 单元格边距
cellpadding="0" 单元格大小
标签style
border-collapse: collapse; /* table表格消除单元格边距 */
border-left:0.1rem solid red; /* table表格设置左边框 */
标签元素
tr表格行
th表格标题
td单元格
单元格属性
colspan="2" 跨列属性,用来合并单元格
rowspan="2" 跨行属性,用来合并单元格
form表单
表单与数据库关系
form表单: 是HTML与服务器沟通的唯一方式,当表单触发提交事件的时候
表单里面的内容就会被提交到服务器之中,提交的服务器路径就是action属性中的值
提交的方式是使用method中的方式提交。
提交方式分为
表单安全性
post:在提交时URL上不会显示任何的数据信息,提高了数据的安全性,速度慢可以上传大型文件
get:磨人的提交方式,会将数据显示在URL之上,牺牲了安全性提高了速度,不能提交大型数据,并且提交路径与表单的数据之间使用?分割,提交数据的时候是使用key=value的形式&分割
元素
input
name
表单在将数据提交到服务器之后,服务器需要去有凭证接收以及区分数据,这个凭证就是input中的name属性的值,简单点说,后端只有根据name的值才能接收到数据
<form action="" method="post" id="form1"></form>
<input type="date" form="form1" value="请填写用户名"/>
此input仍然属于form1
type
text 文本
radio 单项选择
性别<input type="radio" name="sex" id="" value="男" />男
<input type="radio" name="sex" id="" value="女" />女<br>
password 输入时不显示
file 选择文件
date 选择日期
checkbox 多项选择
爱好<input type="checkbox" name="love" id="" value="读书" />读书
<input type="checkbox" name="love" id="" value="听歌" />听歌
<input type="checkbox" name="love" id="" value="看电影" />看电影
<input type="checkbox" name="love" id="" value="旅游" />旅游<br>
textarea 备注,可以设置行列,默认情况下浏览器中的框可以拉动,并且有滑动功能
submit 提交按钮
select下拉选择
option 下拉选择中的选项
<select name="">
<option value ="郑州">郑州</option>
<option value ="上海">上海</option>
<option value ="北京">北京</option>
<option value ="衡州">衡州</option>
<option value ="万户">万户</option>
</select>
iframe内联网页
作用:用在一个div中时可以在不切换页面的前提下,插入另外一个页面的内容
<iframe loading="lazy" src="demo_iframe.html" width="200" height="200"></iframe>
target属性与超链接a的结合
<body>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
<p><b>注意:</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页面会显示在 iframe框架中。</p>
</body>
day23
属性
悬停显示
<!-- title悬停显示 -->
a超链接
<a href="../one/唐诗三百首.html" target="_blank">唐诗三百首</a><br>
<!-- 功能性链接 -->
<a href=mailto:2689929619@qq.com>站长邮箱</a>
链接样式
<style type="text/css">
a:link{
/* 自定义样式*/
font-size: 6.25rem;
color: #00ff00;
text-decoration: none;
}
a:hover{
/* 悬浮样式*/
font-size: 12.5rem;
color: aqua;
}
a:active{
/* 点击时的样式*/
font-size: 1.25rem;
color: burlywood;
}
a:visited{
/* 访问之后的样式*/
font-size: 3.125rem;
color: #000000;
}
</style>
照片
<img src="./img/4.jpg" title="这是三只狗" alt="图片加载失败" style="width: 30%">
<!-- 相对路径和绝对路径
绝对路径: 是指从根目录计算寻找对应的路径。例如
相对路径: 是指从当前文件的路径去寻找目标文件
./返回上一级路径-->
<img src="./img/13.jpg" style="width: 20%;"><hr >
a的锚链接
<a name="aaaa"></a>
<!-- 锚链接 返回到指定页面位置-->
<a href="#aaaa">返回顶部</a>
空格
<!-- 空格\
>
<
" 双引号
© 版权号
-->
CSS
是指层叠样式表CSS的主要作用就是用来美化网站,因为网站中很多标签本身是很丑的,此时就需要进行一些美化
CSS主要分为三种:
1: 行内样式 写在标签内的样式,只针对当前的标签。
2: 内部样式 写在head之内的样式,可以针对本页面所有的标签来设置统一的样式。
3: 外部样式 引入别人写好的css。
问题1: 这么多种样式如果我同时都使用了,会显示哪种呢,优先使用行内样式,次选内部样式,最后是外部样式。
问题2: html中有那么多标签,很多标签还是重复标签,我们如何选择指定标签赋予样式呢?
名称 示例 作用
CSS选择器:1: 标签选择器 p{} 选择所有的p标签,所有p标签都使用{}之内的样式。
id选择器 #a{} 选择id是a的标签,需要注意id不要重复。
class选择器 .b{} 选择class是b的标签,多个标签可以使用同一个class
组合选择器
伪类选择器
后代选择器
子元素选择器
通配符选择器....
在HTML中每一个标签都有id以及class属性,其中id的值不能重复,class的值是可以重复的。
在HTML中每个标签除了使用CSS美化以外,可能自身也带一些美化的属性,这些属性也可能会起到美化的作用,不要将属性与css弄混。
通用属性
<style type="text/css">
/* 在这里面去写内部样式,可以作用到整个页面中所有选择的标签 */
span,p{
/* 选择器之间也是有优先级的,ID选择器的优先级较高*/
font-size: 2.125rem;/* 字体的大小 */
color: coral; /* 字体颜色 */
font-family: 楷体; /* 改变字体的样式*/
font-weight: bold;