第一周总结
2021.1.11
- web标准的三层结构:框架(HTML框架),表现(css外观样式),行为(javascript交互);
- 头代码含义:
<!DOCTYPE html >
<!-- 按照html 5 版本规范解析 -->
<html lang="en">
<!-- 语言英文 -->
<head>
<meta charset="UTF-8">
<!-- 字符集编码的存储解析方式 -->
<title>Document</title>
- 标签:双标签,单标签;
- 排序标签:h1~h6标题标签、p段落标签、div块标签、span行内标签、hr(单)分割线标签、br(单)换行标签;
- 文本格式标签:加粗strong、删除线del、斜体em、下划线ins;
- 图片标签:
<h1>科比·布莱恩特</h1>
<img src="科比.jpg"/>
<h1>带有alt替换文本</h1>
<img src="科比1.jpg" alt="科比湖人黄色球衣"/>
<h1>带有title提示文本</h1>
<img src="科比.jpg" title="科比斯台普斯中心"/>
<h1>修改图片大小,宽度width,高度height,边框border</h1>
<img src="科比.jpg" title="科比斯台普斯中心" width="1000" border="10"/>
- 链接标签:
<h1>外部链接:</h1>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.bilibili.com">哔哩哔哩</a>
<h1>内部链接:</h1>
<a href="demo.html" target="_blank">科比比</a>
<h1>空链接:</h1>
<a href="#">2021</a>
<h1>图像链接:</h1>
<a href="http://www.baidu.com" target="_blank"><img src="baidu.jpg"/></a>
- 路径:相对路径(上级、同级、下级图片的引用)、绝对路径
<img src="詹姆斯.jpg"/>
<!-- 上一级路径用../ ,有几个上级用几个../-->
<img src="../詹姆斯.jpg"/>
<!-- 绝对的网络地址 -->
<img src="https://i0.hdslb.com/bfs/archive/63377ed8bdd05ce5d305cef8d3ec77bc5c7cf617.png"/>
- 拓展内容:
(1)base单标签可设置整体标签的打开状态,注意写在head中<base target="_blank">
(2)瞄点定位:<a href="#1">居民供热换热站运行全部正常</a><br />
注意要加#,<h2 style="color: blue" id="1">居民供热换热站运行全部正常</h2>
注意id要一致才有效
(3)特殊标签pre:pre中的文本内容的格式直接显示到网页中,也就是说在pre中换行是有效的 - 特殊字符:空格—— ;<——<;>——>;
2021.1.12
- 表格及其属性:注意行tr和每行的单元格替换,特别的有td是表格的第一栏;caption可以设置表格的标题;cellspacing是指单元格与单元格边框之间的间距;cellpadding是指单元格内容与单元格边框的间距;
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="30">
<caption>小说排行榜</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
</tr>
- 表格结构:通过thead、tbody、tfoot设置表格结构,右键检查页面可以看到
- 合并单元格:三步走
(1)首先要找到需要合并的第一个单元格;
(2)明确按行合并还是按列合并colspan(行)/rowspan(列)=“要合并的单元格数”;
(3)删除已合并的多余单元格;
<table border="1" cellspacing="0" width="500" height="100">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td rowspan="2">30</td>
</tr>
<tr>
<td colspan="2">李四</td>
<!-- <td>男</td> -->
<!-- <td>25</td> -->
</tr>
- 列表:有序列表ol、无序列表ul、自定义列表dl;
- 表单:
input:
(1)type值:文本框text、密码框password、单选按钮ridio、复选框checkBox、普通按钮button、提交按钮submit、重置按钮reset、图片按钮:img(配有src)、文件域:file(选择本机文件按钮)
(2)value值:文本框中表示默认显示内容、按钮表示按钮内容
(3)name值:与后端对接,便于对输入的数据分类
(4)checked=“checked”表示默认选中
<p>用户名:
<input type="text" value="请输入用户名" name="username"><br/>
密码:<input type="password" name="password"/></p>
<p>性别:
男<input type="radio" name="sex"/>
女<input type="radio" name="sex" checked="checked"/>
爱好:
打篮球<input type="checkbox" name="hobby"/>
跑步<input type="checkbox" name="hobby"/>
敲代码<input type="checkbox" name="hobby"/></p>
<!-- button必须有value值才能显示 -->
<p><input type="button" value="获取短信验证码" name="sex"/>
<input type="button" />
<input type="submit" value="获取短信验证码" />
<input type="reset" value="重置所填" />
<input type="image" src="images/微信登录.png" />
label:
<h2>label标签用法:</h2>
<h2>1.label直接包含表单</h2>
<label>用户名:<input type="text" /></label>
<h2>2.通过for和id来控制</h2>
<label for="nc">昵称:</label><input type="text" id="nc" />
textarea:文本域,用户留言,框大小可变
<p>用户留言:
<textarea></textarea>
</p>
select:下拉列表,含多个option
<select>
<option>--请选择省份--</option>
<option selected="selected">北京</option>
<option>山西</option>
<option>河南</option>
表单域:大框框住表单
<!-- 表单域 -->
<!-- get可换做post -->
<form action="" method="get">
用户名:<input type="text" name="username" /><br />
密码:<input type="password" name="pass" /><br />
<input type="submit">
<input type="reset">
</form>
2021.1.13
- css标签选择器:div{}
- 类选择器:
<div class="hellow">喜欢男生还是女生</div>
.hellow {
width: 100px;
height: 100px;
background-color: red;
- 多类名选择器:
<div class="box hellow">貂蝉</div>
.box {
width: 150px;
height: 100px;
font-size: 30px;
}
.red {
color: grey;
}
- id选择器:
<div id="pink">科比·布莱恩特</div>
#pink {
color: yellow;
background-color: purple;
}
- 通配符选择器:
* {
font-size: 50px;
}
- 字体属性:
font:font-style font-weight font-size font-family;
字体:倾斜样式、字体粗细(直接数字即可)、字体大小(像素)、字体(复合属性,顺序不能颠倒)font: italic 700 30px "Microsoft yahei";
- 文本属性:
color: rgb(255,0,0);
颜色color:预定义颜色值deeppink、skyblue;十六进制表示法#d617c6(两两一组,红绿蓝);RGB代码red(255,0,0)。
text-align: center;对齐文本;/* center,left,right*/
text-decoration: underline;装饰文本/* line-through,overline,none*/
text-indent:2em;
line-height: 50px;/* 行间距:文本高度,上间距和下间距*/
- 样式表:行内样式表、内部样式表、外部样式表
<!-- 内部样式表:<style></style>中放样式,结构与样式相分离,适用于样式较少的情况-->
<!-- 行内样式表:直接在<div></div>中放简单样式,只能控制该标签-->
<!-- 外部样式表:适用于样式较多的情况,完全实现结构与样式相分离,另建一个单独的CSS样式文件 -->
<!-- 外部样式表 样式文件的引入-->
<link rel="stylesheet" href="style.css">
2021.1.14
- emmet语法:
`<!-- div*10+tab键 -->`
`<!-- ul>li+tab键 包含关系 -->`
<!-- div+p+tab键 兄弟关系 -->
<!-- .类名/#id名,可为div直接加类名(默认为div) -->
<!-- p.a/li#grey,可为其他类型的标签加类名 -->
<!-- .demo$*3表示同时添加多个按序递增的类名 $表示自增符号-->
<!-- div{
}表示默认在标签中添加文字 -->
<!-- div{
}*2表示添加多个相同标签内容 -->
<!-- div{
$}*3 -->
- emmet快速生成css样式:w100、h200;
- 复合选择器:
/* 后代选择器 空格隔开,选择所有被包含的子选择器(儿子、孙子、干儿子(同名选择器的子集) */
ol li {
color: pink;
/* 用类名区分 */
.nav li a {
color: green;
}
/* 子元素选择器,用>隔开,只能选择亲儿子 */
.choose>li {
color: #6868;
}
}
- 并集选择器:
/* 并集选择器,用逗号隔开,适用于所有类型的选择器(后代、子元素) */
div,p,.she li {
text-align: center;
}
- 伪类选择器:
/* 链接伪类选择器,用冒号隔开,注意LVHA的顺序不能颠倒*/
/* a:link选择所有未被访问的链接 */
/* a:visited选择所有已被访问的链接 */
/* a:hover选择鼠标位于其上的链接 */
/* a:active选择鼠标点击还未弹起的链接 */
/* focus伪类选择器,为选中的表单加样式 */
- css显示样式:块元素;行内元素;行内块元素;
<!-- html标签可分为块元素,行内元素 -->
<!-- 块元素,常见块元素有h1~h6,p,div(最典型),ul,ol,li等 -->
<!-- 特点:
1.独占一行
2.高度宽度外边距内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.是一个容器及盒子,里面可放行内元素或块级元素 -->
<!-- 注意:
1.文字类元素内不能放块级元素
2.p h标签(文字类标签)里面不放块级元素 -->
<!-- 行内元素,常见行内元素a,strong,b,i,del,s,ins,u,span等 -->
<!-- 特点:
1.相邻元素一行显示
2.宽和高直接设置是无效的
3.默认宽度为它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素 -->
<!-- 注意:
1.链接中不能再放链接
2.a中可以放块级元素 -->
<!-- 行内块元素:常见的img,input,td同时具有块元素和行内元素的特点 -->
<!-- 特点:
1.同一行显示,中间有间隙
2.默认为其本身内容的宽度和高度
3.高度、宽度、外边距及内边距都可以控制 -->
- 显示模式的转化:
display: block; display: inline; display: inline-block;
2021.1.15
- css背景:
div {
width: 1000px;
height: 2000px;
/* 背景颜色不设置相当于默认transparent(透明) */
background-color: pink;
/* 背景图片,网页中logo或者超大的图片或者小的装饰图片 */
/* 注意图片如果太大,与盒子宽高比例不符合的话是不会显示的 */
background-image: url(images/zhu.jpg);
/* 背景平铺 默认平铺*/
/* background-repeat: repeat; */
background-repeat: no-repeat;
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
/* 背景颜色和背景图片可以同时添加,但图片会压盖图片 */
/* 背景图片的位置 */
/* 1.如果是方位名词与顺序无关 */
/*
/* 垂直top,center,bottom
水平right,center,left */
/* background-position: center right; */
/* background-position: right center; */
/* 如果只指定一个参数,那么另一个参数你默认垂直居中 */
/* background-position: top; */
/* 2.如果是精确单位 第一个一定是x,第二个一定是y */
/* background-position: 10px 20px; */
/* 只指定一个值,一定是x坐标 y默认垂直居中*/
/* background-position: 10px; */
/* 3.混合单位,精确单位和方位名词混合使用,第一个一定是x */
background-position: 40px center;
}
- 背景固定:
/* 背景固定:scroll(滚动)/fixed(固定) 默认是随文字滚动*/
background-attachment: fixed;
- 背景半透明:
/* 背景颜色半透明写法 */
background: rgba(0, 0, 0, 0.3);
- 背景属性复合写法:
/* 背景属性的复合写法 */
background: pink url(images/rongyao1.jpg) no-repeat center top 14px fixed;
2021.1.17
- css三大特性:层叠性、继承性、优先级;
- 层叠性:就近原则,属性冲突时后面把前面的覆盖,使用条件:相同选择器属性冲突
- 继承性:子承父业inherited from 只能继承文字相关样式,有简化代码的效果
- 行高的继承:
body {
font: 12px/1.5 'Microsoft yahei';
}
div {
/* 子元素继承了body的行高1.5 即当前文字大小的1.5倍 1.5*20=30*/
font-size: 20px;
}
- 优先级:!important>行内样式style="">ID选择器>类选择器,伪类选择器>元素选择器>继承或者* 注意:继承的优先级时0,尽管父级有!important也还是自己的颜色
- 复合选择器的优先级:
/* 复合选择器会有权重叠加的效果 */
ul li {
/* 权重为0,0,0,0,1+0,0,0,0,1=0,0,0,0,2 */
color: purple;
}
li {
/* 权重为0,0,0,1 */
color: orange;
}