前端（笔记）
1、HTML
- 标签分类
- 块状元素 display:block;
独占一行
可设置宽高
元素宽度在不设置的情况下，和父元素的宽度一致
div、p、h、ol、ul、table、form、li - 行内元素 display:inline;
一行内显示
不可设置宽高
元素的宽度就是它包含文字或图片的宽度，不可更改
a、span、br、i、em、strong、label - 行内块状元素 display:inline-block;
一行内显示
可设置宽高
img、input - 通过display属性对块级元素、行内元素、行内块元素进行转换
display: none;（隐藏标签）
- 块状元素 display:block;
- 标签嵌套规则
- 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
- 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素
p标签
h标签 - li元素可以嵌入ul，ol，div等标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--标题标签-->
<hr>
<h2 id="title标签">标题标签</h2>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落标签-->
<hr>
<h2>段落标签</h2>
<p>
<b>粗体</b><br>
<i>斜体</i><br>
<u>下划线</u><br>
<s>删除线</s><br>
<sup>上文本</sup>
<sub>下文本</sub><br>
<em>斜体强调</em><br>
<strong>粗体强调</strong><br>
</p>
<!--列表标签-->
<hr>
<h2>无序列表标签列ul:unordered list（type可以定义无序列表的样式）</h2>
<ul type="circle">
<li>disc：实心圆(默认值)</li>
<li>circle：空心圆</li>
<li>square：实心矩形</li>
<li>none：不显示标识</li>
</ul>
<h2>有序列表标签ol:ordered list（type可以定义无序列表的样式）</h2>
<ol type="I">
<li>1：数字</li>
<li>a：小写字母</li>
<li>A：大写字母</li>
<li>i：小写罗马字符</li>
<li>I：大写罗马字符</li>
</ol>
<h2>定义列表dl:definition list</h2>
<dl>
<dt>列表标题</dt>
<dd>列表内容描述</dd>
<dd>列表内容描述</dd>
</dl>
<!--表格标签-->
<hr>
<h2>表格标签</h2>
<table border="1" cellspacing="0">
<caption>表格标题</caption>
<thead>
<tr>
<th></th>
<th>css字段</th>
<th colspan="2">含义和使用方法</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">纵向合并</th>
<th>border</th>
<td>边框宽度</td>
<td>border="1"</td>
</tr>
<tr>
<th>cellspacing</th>
<td>单元格间隙</td>
<td>cellspacing="0"</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">表foot</th>
</tr>
</tfoot>
</table>
<!--超链接标签-->
<hr>
<h2>超链接标签</h2>
<a id="唯一id" href="http://www.baidu.com" title="鼠标悬停显示详情" target="_blank">百度的超链接</a><br>
<a href="#top">返回Top</a><br>
<a href="#title标签">跳转到title标签</a><br>
<a href="mailto:xiang9872@126.com">发送邮件</a><br>
<a href="javascript:alert(1)">执行一段JavaScript代码</a><br>
<a href="javascript:;">不执行内容</a><br>
<a href="./IMG_0152.JPG">下载文件</a>
<!--图片标签-->
<hr>
<h2>图片标签（单闭合）</h2>
<img src="./IMG_0152.JPG" alt="相对路径图片加载失败时显示" width="400" title="鼠标悬浮时显示图片标题"><br>
<img src="file:///Users/xjn/my_class/模块5/IMG_0152.JPG" alt="绝对路径图片加载失败时显示"><br>
<img src="https://hcdn2.luffycity.com/media/frontend/head_portrait/d19a59e00dcd49f5a1ad7be8de4cbbdb.png">
<!--form标签-->
<hr>
<h2>form标签</h2>
<form action="http://www.baidu.com" method="post">
<!--文本-->
<p>
<label for="usr_name">用户名称：</label>
<input id="usr_name" type="text" name="txt_usr_name" placeholder="输入用户名称" readonly>
<input type="text" name="txtUsename" value="输入用户名称">
</p>
<!--密码-->
<p>
<label for="usr_pwd">用户密码：</label>
<input id="usr_pwd" type="password" name="txt_usr_pwd" placeholder="输入用户密码">
</p>
<p>
<label for="usr_pwd2">确认密码：</label>
<input id="usr_pwd2" type="password" name="txt_usr_pwd" placeholder="确认用户密码" disabled>
</p>
<!--单选-->
<p>
性别：
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</p>
<!--多选-->
<p>
爱好：
<input type="checkbox" checked="checked">吃
<input type="checkbox">喝
<input type="checkbox">玩
</p>
<!--下拉列表单选-->
<p>
籍贯：
<select name="address">
<option value="beijing">北京</option>
<option value="shanghai" selected="selected">上海</option>
<option value="shenzhen">深圳</option>
</select>
</p>
<!--滚动列表多选-->
<p>
去过的城市：
<select name="city" multiple="multiple">
<option value="beijing">北京</option>
<option value="shanghai" selected="selected">上海</option>
<option value="shenzhen">深圳</option>
<option value="shenzhen">广州</option>
<option value="shenzhen">成都</option>
</select>
</p>
<!--文本输入框-->
<p>
个人介绍：
<textarea name="txt" rows="10" cols="100" placeholder="不少于100字..."></textarea>
</p>
<p>
<label for="file">上传文件：</label>
<input id="file" type="file" name="txt_file">
</p>
<!--按钮-->
<p>
<input type="submit" name="bt_sbt" value="立即注册">
<input type="reset" name="bt_rst" value="重置">
<input type="button" name="bt_but" value="普通按钮">
</p>
</form>
<!--div标签-->
<hr>
<h2>div标签</h2>
<div aria-colcount="100" aria-rowindex="100">
页面头
</div>
<div>
页面内容
</div>
<div>
页面脚
</div>
</body>
</html>
2、CSS
- 三种引入方式
- 内联式
- 嵌入式
- 外部式
- 格式
选择器{
属性:值;
}
- CSS选择器
- 基础选择器
标签（元素）选择器
类（class）选择器
id选择器 - 高级选择器
后代选择器
子代选择器
组合选择器
交集选择器
伪类选择器
- 基础选择器
- 标签选择器
- id选择器
#id{
属性:值;
}
- 类选择器
<p class="类名1 类名2"></p>
.类名{
属性:值;
}
- 后代选择器
父(可以是.类、#id、标签) a{
属性:值;
}
- 子代选择器
父(可以是.类、#id、标签)>a{
属性:值;
}
- 组合选择器
选择器1,选择器2,选择器3{
属性:值;
}
- 交集选择器
选择器1选择器2{
属性:值;
}
- 伪类选择器
/*没被访问过*/
a:link{
color:orange;
}
/*被访问过*/
a:visited{
color:green;
}
/*鼠标悬浮*/
a:hover{
color:red;
background-color:gray;
}
/*鼠标按住*/
a:active{
color:blue;
}
/*hover可应用于任何元素*/
h2:hover{
color:orange;
background-color:green;
}
- 继承性
- 继承的权重最低
- 选择器权重
- 内联样式权重 = 1000
- id选择器 = 100
- 类选择器 = 10
- 元素选择器 = 1
- 权重计算永不进位
- !important
最强权限，不推荐使用
color:blue !important;
- 字体属性
- font-family（备用字体用,分隔）
- font-size
px（绝对单位：像素）
em（相对单位：一个字体的宽度，默认16px）
rem（主要应用移动端） - color
英文单词：yellow、red、blue
colro:rgb(255,255,0);
color:rgba(255,255,0,0.5);
color:#FFFF00; - font-style
normal（默认）
italic（斜体） - font-weight（字体粗细）
blood（粗体）
100-900，400是默认值
- 文本属性
- text-decoration
text-decoration:None;（清除线）
text-decoration:underline;（下划线）
text-decoration:overline;（上划线）
text-decoration:line-through（删除线）; - text-indent（首行缩进）
text-indent:32px;
text-indent:2em;（两个字体宽度） - line-height（行高，要大于字体大小）
- letter-spacing（文字左右间距）
- word-spacing（单词左右间距）
- text-align（对齐方式）
left 默认
right
center （水平居中）
line-height = height（垂直居中）
- text-decoration
- font组合
- font:字体大小/行间距倍数 字体
- 盒子属性
- padding（内边距）
padding-left:10px;（英文方向）
padding:10px;（1个参数，2个参数，3个参数，4个参数顺时针） - border（边框）
border:10px solid #333
三要素
border-width:
border-style:solid实线、dotted点线、double双实线、dashed虚线;
border-color:#333;
方向
border-top-width:
清除边框默认样式
border:None;
outline:None; - margin（外边距）
margin:
margin-left/right:
margin-top/botton:（垂直方向边距合并）
盒子居中显示
margin-left:auto;
margin-right:auto;
margin:0 auto; - float浮动
left
right（浮动后收缩宽度）
文字环绕现象
脱离标准文档流
浮动元素互相贴靠
- padding（内边距）
- 清除浮动
- 给父元素设置固定高度
缺点：后期不易维护
应用：导航栏 - 内墙法（了解）
规则：在最后一个浮动元素块后加一个空元素块，并设置属性clear:both
缺点：结构冗余 - 伪元素（选择器）清除
.clearfix::after { content:''; display:block; clear:both; } - overflow:hidden
BFC规则：计算盒子高度时，浮动元素也算在内
形成BFC条件：除了overflow:visitable;属性
- 给父元素设置固定高度
- BFC
- 定位
- 相对定位
position:relative;
不脱离标准文档流
以原来位置为参考点 - 绝对定位
position:absolute
脱离标准文档流，不在页面占位置
层级提高，压盖现象
相对于最近的非static祖先元素定位，如果没有则以根元素左上角定位
实用：子绝父相 - 固定定位
position:fixed;
脱离标准文档流，不在页面占位置
层级提高，压盖现象
滚动网页位置不变
以浏览器左上角定位
- 相对定位
- float和定位带来现象
- 只要脱离标准文档流，行内元素就变成块状，可设置宽高
- z-index
- 数值越大，层级越高
- 嵌套结构：父级设置了z-index，以父级为准
浙公网安备 33010602011771号