自备web笔记

超文本标记语言——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>加粗 &nbsp; 空格</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; //设置或检索伸缩盒对象的子元素的排列方式