超文本标记语言——HTML
W3C(万维网联盟)——制定、规范标准、推广、更新维护网页制作的编程语言的非盈利组织
快捷键 ul>li{$}*5 实现li列表1~5
结构化标签footer
合并单元格rowspan=2
form用来声明表单区域
单选radio类型的input在绑定相同name时不可被同时选中
提交文件file类型、reset重置类型
还了解了action属性服务器接收表单数据地址,不过现在使用ajax
get方法从服务器上获得数据,post用来向服务器上传数据(更安全)
select下拉菜单,optgroup分组以及option下拉内容
首行缩进text-indent:2em
图片背景size的100%可能失真,cover填满裁切,contain是留白
网页字体大小默认16px,字体是微软雅黑
letter-spacing调整字间距。
<div>占用一行 大小是被内容撑大的
块级元素和行内元素
https://www.cnblogs.com/stfei/p/9084915.html
行内元素不能独占一行,且设置外边距无效;
行内块级元素也不能独占一行,但能够设置外边距;
块级元素即独占一行,也能够设置外边距。
img设置 height 自适应放大
float:
//浮动需要width 可设置文字环绕效果
//可用作float时 按照文字内容自动扩充 填充文档流
overflow: auto; //语句过多自动添加滚动条
word-break: break-all; //自动换行
padding 和 border都会先撑大宽高 再拿一部分作为边框
box-sizing: border-box; // 标签添加内边距时会撑开content,本条语句设置padding往内部减
居中
<center> 使文本居中 </center>
行内/行内块元素水平居中:父盒子text-align:center;
//div内容上下左右居中,可用于div中图片
margin: auto;
垂直居中:
height: 30px;
line-height: 30px;
盒子模型 :两种 标准盒子模型 IE盒子模型
位置
1、static 默认值 没有定位
2、relative相对定位 相对于原本位置 原先文档流占的位置不变 会压住其他标准流(z-index)
3、absolute绝对定位 释放文档流所占位置 相对于 static 定位以外的第一个父元素进行定位
父级若设置了相对定位 子绝父相 则子级是相对于父级的定位
继续找上一级
没有父级有定位属性 则相对于页面
4、fixed 相对于浏览器窗口进行定位 需要文档流位置
5、sticky css3新属性,它的表现就像position:relative和position:fixed的合体
当父元素不是body,在父元素高度内滚动时它会固定在目标位置,就像fixed
在父元素滚动为不可视时它的表现就像position:relative和1一样
6、inherit 从父元素继承 position 属性的值
7、initial 设置positon的值为默认值(static)
兼容:ie不支持此属性
问:有了static为什么还会存在此属性,不是多此一举?
答:initial 关键字可用于任何 HTML 元素上的任何 CSS 属性,不是position特有的
8、unset 设置position的值为不设置
如果该属性的默认属性是 继承属性(例如字体相关的默认属性基本都是继承),该值等同于 inherit
如果该属性的默认属性 不是继承属性(例如position的默认属性为static),该值等同于 initial
<a href="" target="_blank">target在新空白页面跳转</a>
a标签:按钮 默认下划线 盒子大小=字数 不换行
style有内部样式表、行内样式表、 外部样式表
css权重
00.......................................................
css属性后面加 !important 时,无条件绝对优先;
*{
margin: 0;
padding: 0;
}
转变成块元素 两种方法
第一{display:block; height:60px;}
第二种 加浮动,默认转换块显示 a{float:left; height:60px; }
一子浮动 全子浮动 浮动不会压住文字
test-decoration: line-through; //删除线
test-decoration: none; //没有任何装饰
hover鼠标悬浮效果
.div1:hover .div2{} //空格表示下一级
Cursor:pointer; //鼠标变成小手
伪类 给css添加特殊效果
<img src="" title="提示" alt="失败">
<hr>分割线
<input>表单属性 文本框内容placehoder输入时文字消失 value文字始终存在
<p> p段落标签 可换行 行间距 line-height
<i>斜体</i>
<b>加粗 空格</b>
<!-- 牛逼三炮nbsp -->
</p>
<textarea placeholder="请输入"> 多行输入框 </textarea>
<ul type=""> <li>无序列表</li>
<ol><li>有序列表</li>
<table border="" cellspacing="0" cellpadding="2px">
<col width="200px">
单标签 表示一列 第一列的宽度 可重复添加
实现7列效果不同 且较多时 可使用colgroup
<colgroup span="6" width="100px">
<colgroup span="1" width="200px">
<tr align=“center>
tr表示一行,td表示单元格
<th width=“200px” ”></th>
<th>th标签 居中加粗标题</th>
</tr>
<tr>
<td>1</td>
<td>aaaaaa普通文本aaaaaa</td>
</tr>
</table>
表格合并单元格 先删除多余的
合并行 colspan
合并列 rowspan
浏览器自动生成表格的主体 tbody 不能省略
不能嵌套的标签:
超链接 P标签 标题标签h1…h6
导航栏编写
在实际开发中,不会直接用链接a,而是用li包含链接的做法
选择器
结合后代选择器和子选择器
table.company td > p
上面的选择器会选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。
:nth-child(n) 选择器 (n 可以是数字、关键词或公式)
显示隐藏
display:隐藏后不再占有位置(网页广告)
visibility:仍然占有位置
overflow溢出:淘宝商品名称
css三角
.a{
width: 0;
height: 0;
line-height: 0; //照顾兼容性
font-size: 0; //照顾兼容性
border:10px solid transparent;
border-bottom: 10px solid pink;
}
界面样式
·更改用户的鼠标样式 cursor
·取消input表单轮廓 outline:none;
·防止textarea表单域拖拽resize:none;
textarea写在同一行,避免出现空格
·css垂直对齐(块级无效,行内元素以及行内块元素有效)
图片(行内块元素)默认与文字基线对齐vertical-align
省略号
单行:
1.先强制同一行显示 white-space:nowrap;
2.超出部分隐藏overflow:hidden;
3.添加省略号text-overflow:ellipsis;
多行: //有兼容性问题
overflow: hidden;
text -overflow: ellipsis;
display: -webki-box ; //弹性伸缩盒子模型显示
-webkit-line-clamp: 2; //限制在一个块元素 显示的文本的行数
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式