HTML
普通标签
<h1> </h1> 标题
<p> </p> 段落
<strong> </strong> 加粗
<em> </em> 斜体
<del> </del> 删除线
<address> </daaress> 地址
***<div> </div> 容器 分块 结构化
***<span> </span> 容器 分块 结构化
HTML编码
空格
< (less than) <
> (great than) >
单标签
<br> 回车
<hr> 水平线
<meta>
***高级标签
*有序列表
<ol type="a" reversed = "reversed", start="2">
//选择排序方式 默认1 还可以是A，a,i,I，选择倒序排序, 从第一个开始排序
<li> 小李子 </li>
<li> 小李子 </li>
<li> 小李子 </li>
</ol>
*无序列表
<ul type = ""> <!-- disc 实心圆 square 方块 circle 空心圆 -->
<li> asd </li>
<li> asd </li>
<li> asd </li>
</ul>
*引入图片
<img src = "地址" alt="图片展示不出来的时候展示" title="图片提示符">
1.网上的url
2.本地的绝对路径
3.本地的相对路径
超链接 锚点 打电话 协议限定符
<a href="https://www.baidu.com" target="_blank">www.baidu.com (可以放任意的东西)</a>
// target="_blank" 在新窗口打开
//在href中添加#+id跳转到id位置
//href="tel:8208208820" 打电话 主要移动端
//href="mailto:8208208820" 发邮件
//<a href="javascript:">按钮</a> 写代码
***给后端发送信息
<form method="GET/POST" action="">
<p>uername: <input type="text" name="数据名username" value="输入用户名"></p>
<p>password: <input type="password" name="password" onfocus="" onblur=""></p>
<p><input type="submit" value="login"></p>
<input type="radio" name="1" value="11" checked="checked">单选框
<input type="radio" name="1" value="22">单选框
<input type="radio" name="1" value="33">单选框
<input type="submit">
//name相同就在这相同的中选择一个
//value="输入用户名" 在text中显示这个内容
//οnfοcus="" 聚焦 οnblur="" 没聚焦
//type="radio"单选
//type="checkbox" 多选
//checked="checked"吗，默认选择
<select name = "provice">
<option>beijing</option>
<option>sichuan</option>
<option>shanghai</option>
</select>
//下拉选项
</form>
CSS 优先级&权重
!important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符
权重
!important 正无穷
行间样式 1000
id 100
calss | 属性 | 伪类 10
标签|伪元素 1
通配符 0
255进制
CSS选择器
/* 父子选择器/派生选择器 选择的是后面的span */
div span{
background-color: brown;
}
/* 父子选择器可以是任意的类型 */
.f .c em{
background-color: brown;
}
/* 直接子元素选择器 */
div > em{
color: chartreuse;
}
/* 并列选择器 不加空格 */
div.demo{
background-color: chartreuse;
}
/* 分组选择器 */
em,
strong,
span{
background-color: rgb(36, 30, 30);
}
/* 分组选择器 不会覆盖 */
.demo1{
background-color: chocolate;
}
.demo2{
background-color: cornflowerblue;
}
.demo1,
.demo2{
width: 100px;
height: 100px;
}
CSS属性
***CSS属性
div{
font-size: 40px; /* 设置字体的高 */
font-weight: normal; /* lighter normal bold bolder 字体设置加粗 */
font-style: normal;/* italic 斜体 */
font-family: arial;/* arial 网页通用字体 乔布斯他们做的*/
color:#f40;/* 设置字体颜色 */
/* 利用Border 画三角形 */
width: 0px;
height: 0px;
border: 110px solid black;
/* border-style: dashed; *///设置边框为虚线
border-left-color: transparent;/* 透明色 */
border-right-color: blue;
border-top-color: blueviolet;
}
/*
r g b 红绿蓝 光学三元色
00-ff 00-ff 00-ff 三原色饱和度
#00 00 00 组成颜色
如果每两位是一样的 就可以简写成3位 #f40 <- #ff4400
字体颜色：
1.单词
2.颜色代码
3.颜色函数
*/
div{
border: 1px solid black;
text-align: left;/*对齐方式*/
height: 200px;
line-height: 1.2em;/* 行间距 单行文本居中 上下居中*/
text-indent: 2em;/* 文本缩进 1em = 1 * font-size;*/
}
span{
text-decoration: line-through;/* 删除线 下划线*/
}
span{
color: rgb(0, 0, 238);
text-decoration: underline;
cursor: pointer;/* pointer 鼠标移上去边小手 & 。。。 */
}
/* 伪类选择器 hover 鼠标移动上去的效果 */
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
background-color: orange;
color: orangered;
font-size: 16px;
font-weight: bold;
font-family: Arial;
border-radius: 10px;/* 圆角 */
}
1.行级元素(内联元素)：内容决定元素所占位置 不可以通过CSS改变宽高
span strong em a del
2.块级元素：独占一行 可以通过CSS改变宽高
div p ul li ol from address
3.行级块元素 内容决定大小 可以通过CSS改变宽高
img
可以通过disply改变
初始化标签 用*{}
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
盒子模型
盒子的三大部分
盒子的组成部分
盒子壁 border
内边距 Padding
盒子内容 width + height
外边距 margin + border + padding + (content = width + height)
定位 层模型
position: absolute;
left: 100px;/* right */
top: 100px;
opacity: 0.5; 添加透明度
position: relative;
//保留原来位置进行定位
position: fixed;
//广告定位
absolute相对于最近有定位的父级进行定位 没有的话相对于文档进行定位
relative相对于原来的位置进行定位
***用relative作为参照物 用absolute定位
设置居中
div{
position: fixed;
left: 50%;
height: 50%;
width: 100px;
height: 100px;
background-color: orangered;
margin-left: -50px;
margin-top: -50px;
z-index: 1;//层级
}
