html+css+js学习笔记一

HTML

1、一套浏览器认识的规则
2、学习内容
	学习HTML规则
		- 写HTML文件（充当模板）
		- 到数据库读取数据，替换到html文件里的指定位置（WEB框架）

3、本地测试
	- 找到文件路径，直接浏览器打开
	- pycharm打开测试
	
4、编写html文件
	- doctype对应关系
	- html标签，标签内部可以写属性;一个文件只能有一个
	- 注释：<!--  注释内容  -->

5、标签分类：
	- 自闭合标签
		<meta charset='UTF-8'>

	- 主动闭合标签
		<title>标题</title>

6、head标签
	- <meta> :编码、跳转、刷新、关键字、描述、IE兼容
		<meta http-equiv="X-UA-Compatible" content="IE=IE9">
	- title标签，标题
	- <link /> 设置图标 pass
	- <style /> pass
	- <script /> pass

大小写不区分，自闭合标签加不加/都一样，推荐都加上

7、body标签
	- 图标，&nbsp; &gt; &lt;
	- p段落
	- br换行
==========小结========
	标签可分类为：
		块级标签：div(白板)、h系列(加大加粗)、p标签(段落之间有间距)
		行内标签：span(白板)
	标签之间可以嵌套
	标签存在的意义：css操作，js操作
	ps:chrome检查功能的使用，定位、查看样式`
	
- input系列 + form标签
	action="url"属性
	method="post"  
		get:长度有限制、拼接发送url?xxx=xxx&xxx=xxx
		post:内容放在http 请求头和body里，url不可见提交内容
	type='text'     - name属性 value="aaa"
	type='password' - name属性 value="aaa"
	type='submit'   - 提交按钮、表单
	type='button'   - 按钮
	type='radio'    - 单选框 name属性，一组相同 value="1" 默认选中checked="checked"
	type='checkbox' - 复选框 name属性，一组相同 value="1" 默认选中checked="checked"
	type='file' 依赖于form属性enctype="multipart/form-data"
	type='reset' 重置

- <textarea>默认值</textarea> name属性

- select标签 name,内部option value 提交到后台, size , muiltiple

- a标签 
	url跳转
	锚 当前页面跳转
	
- img标签
	src
	alt
	style

- ul、ol、dl 列表标签
	ul\ol：li
	dl：dt

- table 标签：表格
	thead 表头
		tr
			th
	tbody 表内容
		tr
			td

	colspan 横向合并单元格
	rowspan 纵向合并单元格

- lable标签
	for="" 可指向input的id，可实现点击后输入框获取光标

- fieldset 方框
	legend 方框嵌入文本

CSS

在标签上设置style属性
	background-color
	height

编写CSS样式：
	1、标签的style属性
	2、写在head里，style标签中写样式
		- id选择器 id="i1"应用属性  --不常用
			#i1{
				background-color: #13f2ff;
				height: 48px					
			}
		- 类选择器 class="c1"应用属性 --常用
			.c1{
				background-color: #623f21;
			}
		
		- 标签选择器 对应类型的标签应用属性
			div{
				background-color: #523f21;
			}
		-层级选择器 空格分隔 层级过滤选择应用属性
			.c1 div {
				background-color: #423f21;
			}
		-组合选择器 逗号分隔 多选
			#i1,#i2{
				background-color: #323f21;
			}
		-属性选择器 对选择到的标签通过指定属性过滤
			.c1[n="aaa"]{
				background-color: #723f21;
			}
	- 选择器优先级
		标签里的style优先级最高
		其次按照css编写的顺序从高到低
	
	3、定义css样式文件，通过link标签引用
		<link rel="stylesheet" href="commons.css" />
	
	4、注释
		/*  xxx */
	
	5、边框
		宽度、样式、颜色
		border: 1px solid black;边框实线
		border-left 左侧边框
	
		height: 48px;
		width: 40%;
		border: 2px dotted red; 边框虚线
		text-align: center; 水平居中
		line-height: 48px; 垂直根据高度居中
		font-size 16px; 字体大小
		font-weight: bold; 字体加粗
	
	6、float 浮动 多个块级元素同一行拼接
		加clear: both可以解决父级显示不全的问题
	
	7、display 块级标签和行内标签转换
		display: none 让标签消失 --配合js实现交互显示
		display: inline 块级转行内
		display: block  行内转块级
		display:inline-block 具有inline，默认自己有多少占多少空间
							具有block，可以自己设置高度、宽度、边距
		
		行内标签：无法设置高度、宽度、边距 padding margin
		块级标签可以设置
	
	8、边距：
	内边距padding 
	外边距margin(0,auto)