个人前端笔记记录（不定期更新）

一、基础篇

lang   常用en和zn-CN 表明html构写的文字类型
<meta charset="" />  gbk（gb2312+big5） utf-8  表明代码存储的形式，跟别人请求有很大关系
<hr />   空标签 增加一行线
<br />   空标签 强制换行
<p></p>  字段标签
<h1></h1>  设置内容字体为一号的标签
<div></div>  无含义 同行只能有一个div
<span></span> 无含义 换一行写一个span 但内容还是会显示在同一行
<b></b> <strong></strong>  加粗 strong
<i></i> <em></em>  斜体 em
<s></s> <del></del> 删除线 del
<u></u> <ins></ins>  下划线 ins
<video id="video" src="" autobuffer οnclick="play()></video>
<img src= /> 图像标签 alt 图像不能显示时的替换文本 title 鼠标悬停时显示的内容 width 图像宽度 height 图像的高度 border 图像边框的宽度
<a href="跳转目标" target="目标窗口的弹出方式">文本内容</a>  target 有_self和_blank俩种 默认链接会覆盖当前窗口 _blank 新开一个窗口打开链接 href="#" 空链接
相对路径语法跟linux一致
锚点：对于大篇幅的软文，需用锚点直接跳到需要的那一行 语法 用id给其标记，再去锚点注明<a href="#id"> </a>
base 当链接过多且需新建窗口打开链接，target过多 可以用<base target="_blank" />可以一次性做完target 写在head之间
预格式化文本pre <pre></pre> 内的文本会保留空格和换行符 文本也会呈现等宽字体
特殊字符 用&开头 ；结尾
文本水平对齐方式
text-align ：center lift right

二、表格\表单\列表篇
表格-展示数据、列表-布局、表单-记录用户信息
<table>  定义一个表格标签
  <tr>   必须内嵌table标签内 定义表格标签内的行
     <td> </td>  必须内嵌在tr标签内  定义表格中的单元格
  </tr>
</table>
表格属性：
border 边框 默认无边框 width height  
cellspacing 设置单元格与单元格之间的空白间距
cellpadding 设置单元格内容与单元格边框之间的空白间距
align:设置表格的水平方式 （left，center，right）
<th></th>  表头单元格 一般是表的第一行 跟tb区别在于加粗 居中
<caption></caption> 表格标题标签 只在表格标签内才有意义
合并单元格：
合并顺序：先上后下，先左后右
跨行合并:第一行的单元格和第二行的单元格合并 rowspan
跨列合并：clospan
合并单元格三部曲：先根据要求确定目标单元格->合并单元格->删除多余的单元格
<thead></thead>  从表的总体结构上看-表头 必须有行标签
<tbody></tbody>  从表的总体结构上看-正文
<tfoot></tfoot>  从表的总体结构上看-脚注


列表：
布局整洁，自由 表格强制要有行和单元格 列表不强制
无序列表 ul  里边只能嵌套<li></li>
有序列表 ol <li></li>
自定义列表 dl  <dt></dt>  <dd></dd>给<dt>进行解释 范围dt>dd 并列关系 一个dt 会有多个dd
ul ol 内部只能有<li>标签
<ul>
	<li></li>
</ul>

<dt></dt>
<dd></dd>


表单：
表单控件
提示信息
表单域 把表单的所有信息打包送往后台
表单标签:
input 控件 <input type="" values=""   name="" /> type 有很多不同的类型 提交按钮，确认按钮
type : 觉得表单是什么类型  
	text 文本框  password 密码框  radio 单选按钮  checkbox 复选框  button 普通按钮  submit 提交按钮  reset 重置按钮  image 图像形式提交按钮  file 文件域
单选按钮 要注意name 同一个值 便于执行单选形式  多选就是 name 值不重复就可以做到
复选框 做到多选
values  框内提示
name  同类型的表单 为每一个表单命名 送往后台 方便区分
checked 默认勾选 checked="checked"

label标签：
用于关联input控件
<label for="sex" ></label>
<input type="" name="sex">

textarea 控件（文本域）
评论
<textarea cols="每行限定的字符数" rows="显示的行数" >文本内容</textarea>
cols="每行限定的字符数" rows="显示的行数" 实际开发不用 用css
文本框 只能写一行 文本域 可以写很多

select 下拉列表
<select>
	<option></option>
</select>
selected="selected" 下拉列表默认

form 表单域 ：将表单送往后台
<form action="地址" method="请求方式" name="表单名称">表单控件</form>
<form action="地址" method="请求方式" name="表单名称">
	<input type="text" />
</form>
get 会显示表单内的内容
post 不会显示内容
表单域会让很多控件产生应有的效果

二、css

css引入三种方式
设置版本的布局和外观显示样式
引入css样式方法一：
行内式：更具style标签
<标签名 style=" "属性：属性values";" ";" "">内容</标签名>
属性有： color 颜色 gray 灰色  font-size 字体大小
16进制表示颜色："#ff0000"=红色 "红绿蓝" "#00ff00"=绿色

内部样式法： 结构与样式分离
css代码集中在head标签中，也用style定义
只能控制当前页面
<style type="text/css"> 声明全局style都是css h5可以不需要type="text/css"
选择器：选择哪个标签
例子： <style type="text/css"> 
			h2 {
				color:red；
				font-size:12px
			}
让全局的h2标签都css生效成红色。
<style>
    tr{
     height:40px
    }
</style>

外部样式表：结构和样式完全分离
可以控制多个页面
新建一个style.css css文件
在css 内写样式style  再将结构和样式关联
<link rel="stylesheet"  type="text/css" href="css文件路径" />
rel  定义当前文档与被链接文档之间的关系。stylesheet表示被链接文档是一个样式表文件。
 
 css选择器
 作用：根据不同的需求去更改样式，找到特定的html页面元素 选择标签用的

 基础选择器
 标签选择器：元素选择器 语法 标签名{属性：属性1} 一类标签全部选出来

 类选择器：单独指定某个标签变换样式 语法 .类名{属性：属性1}  标签<p class='类名'></p>
 可以用中横线作为选择器命名，不可用纯数字、中文命名
 可以指定多类名，可以减少代码冗余
 一个标签内部可以有多个class，方式class="类名1 类名2"
 . 类名{

 }

 id选择器： 语法 #id名称 {属性：属性1}   js经常用id选择器
 与类选择器的区别：元素的id是唯一的 类选择器是可以反复调用，但是id选择器把你被重复使用，只能被调用一次。 #pink定义css
 <p id="pink" ></p>
 #pink{

 }
 与类选择器做大区别 使用此时不一样

 通配符选择器
* {
	
}
* 通配符所有标签 影响打开页面速度

font字体
font-size :字体大小
px 像素 

font-family :字体
font-family:"微软雅黑"  "宋体" "黑体"
unicode编码取代中文名称，现在建议使用中文 多个字体要用逗号分隔 先写的优先显示该字体

font-weight :字体粗细 无单位
normal 默认值=400（不加粗）bold=700 定义粗体（加粗）

font-style : 字体风格 
倾斜 italic 正常 normal 将em i 的html斜体改成正常

font综合设置字体样式：
必须严格按照语法顺序写（必须有font-size，font-family 其他俩个可以省略）
语法
. title{
	font:font-style font-weight font-size font-family;
}
例子
.title {
	font:italic 700 20px "微软雅黑"
}
. tac{
	text-align ：center |lift right 文本水平对齐方式 常用于类选择器中作为属性参数
	line-height：24px |行高（行间距） 单位为px 一般是24px
	text-indent： 2em 首行缩进 一个字的宽度是1em
	text-decoration ：none 取消下划线  underline 下划线 文本的装饰 
}

css外观属性总结
color 颜色
text-align 文本对齐方式
line-height 行间距
text-indent 首行缩进
text-decoration  文本装饰  下划线之类

复合选择器
只有后代选择器和子元素选择器涉及父子代 css定义用到空格

后代选择器
语法： 父代标签的类名 子代标签{属性}
<div class="nav">
	<a href="#">内部链接</a>
	<a href="#">内部链接</a>
	<a href="#">内部链接</a>
</div>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<a href="#">外部链接</a>

调用内部链接：
.nav a {size-front 12px} 单独将内部链接定义css .nav等价于div标签
div包含a 调用后子代标签全部赋予新的属性 只要是属于父标签的后代，都会进行css变化
如上的内部链接的标签a是class=nav 的子代

子元素选择器
.nav > a 只选第一个后代，最近的一个子代
<div class="nav">
	<a href="#">内部链接</a>
	<a href="#">内部链接</a>
	<a href="#">内部链接</a>
</div>
	<p>
		<a href="#">外部链接</a>
		<a href="#">外部链接</a>
		<a href="#">外部链接</a>
	</p>

交集选择器
<p class='red'>红色</p>
<p class='red'>红色</p>
<p class='red'>红色</p>
<div class='red'>红色</div>
<div class='red'>红色</div>
<p >蓝色</p>

只要cslss='red' 的p标签变成红色
语法：
p.red { color: red};

并集选择器
将下列的标签一次变换属性
<p>我和你</p>
<span>我和你</span>
<div>我和你</div>
语法  用逗号隔开 逗号表示和的意思
p,span,div { color : red}; 

链接伪类选择器