HTML一些笔记.
base 可以设置整体链接的打开状态 <base href="_blank">
特殊符号
空格符号 ＆nbsp
< 小于号 ＆lt
> 大于号 ＆gt
& 和号 ＆amp
￥ 人民币 ＆yen
© 版权 ＆copy
® 注册商标 ＆reg
° 摄氏度 ＆deg
± 正负号 ＆piusmn
× 称号 ＆times
÷ 除号 ＆divide
² 平方3 ＆sup2
³ 立方3 ＆sup3
b、strong 文字加粗
i em 文字斜体 normal
s del 文字加删除线
u ins 文字加下划线
字体
font-size 控制文字大小
font-family 文字字体库 SimSun,,Microsoft YaHei
font-weight 文字粗细 400,700
font-style 字体风格(斜体) italic
line-height 行间距
list-style:none 清楚小圆点用于li标签
text-align 水平对齐方式 left, right center
text-indent 首行缩进 2em
text-decoration 文本的装饰(下划线) "none默认。定义标准的文本。underline定义文本下的一条线。下划线 也是我们链接自带的overline定义文本上的一条线。line-through定义穿过文本下的一条线。
"
text-shadow 设置文字阴影 text-shadow: 2px 2px 20px red;(分别意思为,水平、垂直阴影位置，可模糊距离，阴影颜色)
text-decoration 文本的装饰(一般是给a标签使用,去除、添加下划线 "none默认。定义标准的文本。underline定义文本下的一条线。下划线 也是我们链接自带的overline定义文本上的一条线。line-through定义穿过文本下的一条线。
"
color: rgba(r,g,b,a) 设置颜色透明 a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3)
background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺 repeat | no-repeat | repeat-x | repeat-y
background-position 背景位置 top | center | bottom | left | center | right
background-attachment 背景固定还是滚动 "scroll : 背景图像是随对象内容滚动 默认值 fixed : 背景图像固定
"
background-size 背景缩放(CSS3) "background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */"
标签伪类选择器
:link 未访问的链接 a:link{color:red;}
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接
位置伪类选择器
:first-child 选取属于其父元素的首个子元素的指定选择器 "li:first-child { /* 选择第一个孩子 */
color: pink;
}"
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第 N 个子元素，不论元素的类型 n是数值,2n是偶数,odd是奇数
表单标签(input)
outline:none 清除轮廓线
text <input type="text"> 单行文本输入框
password <input type="password"> 密码输入框
radio <input type="radio"> 单选按钮
checkbox <input type="checkbox"> 复选框
button <input type="button"> 普通按钮
submit <input type="submit"> 提交按钮
reset <input type="reset"> 重置按钮
image <input type="image" src="图片地址"> 图像形式的提交按钮
file <input type="file"> 文本域
email <input type="email"> 输入邮箱格式
tel <input type="tel"> 输入手机号码格式
url <input type="url"> 输入url格式
number <input type="number"> 输入数字格式
search <input type="search"> 搜索框（体现语义化）
range <input type="range"> 自由拖动滑块
time <input type="time"> 小时分钟
date <input type="date"> 年月日
datetime <input type="datetime"> 时间
month <input type="month"> 月年
week <input type="week"> 星期 年
placeholder <input type="text" placeholder="请输入用户名"> 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus <input type="text" autofocus> 规定当页面加载时 input 元素应该自动获得焦点
multiple <input type="file" multiple> 多文件上传
autocomplete <input type="text" autocomplete="off"> 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 <br/>2.这个控件必须给他名字
required <input type="text" required> 必填项 内容不能为空
accesskey <input type="text" accesskey="s"> 规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式
name 由用户自定义 控件的名称
value 由用户自定义 input控件的默认文本值
size 正整数 input控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数
label label标签 绑定 "label for=""male"">姓名</label>
<input type=""radio"" name=""sex"" id=""male"">"
textarea textarea控件(文本域) "<textarea cols=""每行中的字符数"" rows=""显示的行数"">
文本内容
</textarea>"
select 下拉菜单 "<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>"
link 外链 <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
link 网页图标 <link rel="shortcut icon" href="favicon.ico"/>(这是统一命名,放在跟目录)
继承 《 通配符 《 标签选择器 《 类选择器 《 id选择器 《 行内样式 《 ！important
行内、块元素
diaplay:block 行内转块 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
display:inline 块转行内 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
display:inline-block 块、行内元素转换为行内块 <img />、<input />、<td>
盒子 transparent(设置颜色透明的，属性值)
border 边框 border : border-width || border-style || border-color (连写)
border-radius 圆角边框()半径
padding 内边距
margin 外边距 盒子居中margin: 0 auto; 必须是块级元素.行内元素对padding与margin设置无效
box-shadow 盒子阴影 box-shadow:3px 3px 5px 4px rgba(0,0,0,1){水平阴影 垂直阴影 模糊程度 阴影尺寸 阴影颜色 内/外阴影}
浮动
float "left元素向左浮动 right元素向右浮动 none 元素不浮动（默认值）
"
clear 清除浮动 " 额外标签法,给浮动元素最后添加一个额外标签,并给这个标签赋值:选择器{clear:both;} left不允许左侧有浮动元素（清除左侧浮动的影响） right不允许右侧有浮动元素（清除右侧浮动的影响） both同时清除左右两侧浮动的影响
"
父级添加overflow属性清除 可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
使用after伪元素清除浮动 ".clearfix:after { content: """"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} "
使用before和after双伪元素清除浮动 ".clearfix:before,.clearfix:after {
content:"""";
display:block;
/* 这句话可以触发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}"
给父级元素设置高
定位 {position:属性值;
relative 相对定位，相对于其原文档流的位置进行定位
"static
" 静态定位（默认定位方式）所有的标签在一开始都是静态定位（标准流）
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位
z-index 叠放次序
cursor : default 小白 | pointer 小手 | move 移动 | text 文本 鼠标样式
vertical-align: 图片与文字对齐方式 只针对行内或行内块元素
baseline 基线对齐
top 顶部对齐
middle 垂直居中
bottom 底部对齐
word-break: 溢出的文字隐藏 主要处理英文单词
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
white-space 设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
normal : 默认处理方式
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
text-overflow 文字溢出 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
clip 不显示省略标记（...），而是简单的裁切
ellipsis 当对象内文本溢出时显示省略标记（...）
outline:none 清除轮廓
display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）
overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
transition 过渡 要过渡的属性 花费时间 运动曲线 何时开始 （四个属性连写）
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
transition: all 0.6s
transform: 2D变形
transform:translate(x, y) "使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
" 要定位才能使得盒子居中。left（right）：50%;transform:translate(-50%,y)
移动 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动
translateX(x)仅水平方向移动（X轴移动）
translateY(y)仅垂直方向移动（Y轴移动）
transform：scale(x, y) 缩放
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
旋转
transform：rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针； transform:rotate(45deg);
transform-origin： 可以调整元素转换变形的原点
transform：skew(deg, deg) 倾斜
3D变形
transform：rotateX(*deg) 沿着 x 立体旋转**度
transform：rotateY() 沿着y轴进行旋转***度
表格 格式
<table> table border="1" cellpadding="0" cellspacing="0"
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>手机</th>
<th>地址</th>
</tr>
<thead>
</tbody>
<tr>
<td>小黑</td>
<td>[email protected]</td>
<td>19999009090</td>
<td>北京</td>
</tr>
</tbody>
</table>
