HTML
前端三大块
1、HTML：页面结构 2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果 3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html>
设置网页编码：
关键字：
描述：
网页标题：本网页标题
导入CSS文件：
CSS代码：
JS文件或代码：
标题
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3>
通过
、
、
、
、
、
,标签可以在网页上定义6种级别的标题
HTML段落,换行,字符实体
内容
段落标签
换行标签
带有行线的换行标签 ； 空格
< 小于号 > 大于号
html块元素
div标签 块元素，表示一块内容，没有具体的语义
★行内元素
span标签 行内元素，表示一行中的一小段内容，没有具体的语义。
含样式的标签
em标签 行内元素，表示语气中的强调词 i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇 b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名 strong标签 行内元素，表示非常重要的内容 del 删除线
html图片
<img src="images/pic.jpg" alt="产品图片" />
标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。
html链接 与锚点跳转
链接
<a href="#"></a> <!-- # 表示链接到页面顶部 --> <a href="http://www.itxdl.cn/" title="跳转的it兄弟连网站">兄弟连</a> <a href="2.html">测试页面2</a> href（必须） 指的是链接跳转地址 target: 表示链接的打开方式： _blank 新窗口 title属性定义鼠标悬停时弹出的提示文字框 <!-- href属性中的url可以携带参数 ?分割后 携带参数 键=值 多个参数之间用&分割--> <a href="./3.html?id=1&name=zhangsan&sex=nan">京东</a>
锚点：定义页面内滚动跳转
<a href="#mao1">标题一</a> ...... ...... <h3 id="mao1">跳转到的标题</h3>
列表
有序列表
<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ol>
★无序列表
<ul> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ul> 去li前面的点: list-style:none
定义列表
<h3>前端三大块</h3> <dl> <dt>html</dt> <dd>负责页面的结构</dd> <dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd> </dl>
表格
<table> <tr> <th></th> ........ </tr> <tr> <td>内容</td> ............ </tr> </table>
table常用标签
1、table标签：声明一个表格
2、tr标签：定义表格中的一行
3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性
1、border 定义表格的边框 2、cellpadding 定义单元格内内容与边框的距离 3、cellspacing 定义单元格与单元格之间的距离 4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right 5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom 6、colspan 设置单元格水平合并 7、rowspan 设置单元格垂直合并
★html表单:form
<form action="http://www..." method="get"> </from>
form表单中
action 表示数据提交的地址url
method代表提交数据的方式方法
get post
get提交方式,数据在地址栏 可见,而且数据长度有限制 218k
post提交,地址栏不可见,数据长度 2m
<p> <label>姓名：</label><input type="text" name="username" /> </p>
label标签 定义表单控件的文字标注
input 类型为 text 定义了一个单行文本输入框
<p> <label>密码：</label><input type="password" name="password" /> </p>
input类型为password定义了一个密码输入框
<p> <label>性别：</label> <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </p> name 属性决定是否关联,name一样则所有的都是单选
input类型为radio定义了单选框
<p> <label>爱好：</label> <input type="checkbox" name="like" value="sing" /> 唱歌 <input type="checkbox" name="like" value="run" /> 跑步 <input type="checkbox" name="like" value="swiming" /> 游泳 </p>
input类型为checkbox定义了单选框
<p> <label>照片：</label> <input type="file" name="person_pic"> </p>
input类型为file定义上传照片或文件等资源
如果表单中含有文件上传method提交方式必须为post
form中必须有enctype属性
enctype=”multipart/form-data”
<p> <label>籍贯：</label> <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> </select> </p>
select定义下拉列表选择
隐藏域:<input type="hidden" name="id" value="110">
<input type="submit" value="注册"> <input type="reset" value="重置"> <button>登录</button>
input类型为submit定义提交按钮
input类型为reset定义重置按钮
type属性
text:单行文本框 password:密码输入框 checkbox:多选框 注意要提供value值 radio:单选框 注意要提供value值 file:文件上传选择框 button:普通按钮 submit:提交按钮 image:图片提交按钮 reset:重置按钮, 还原到开始\(第一次打开时\)的效果 hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
常用属性
name属性:表单项名,用于存储内容值的
value属性:输入的值(默认指定值)
size属性:输入框 readonly属性:对输入框只读属性的宽度值
disabled属性:禁用属性
checked属性:对选择框指定默认选项
<input type="submit" value='注册' disabled> 生成一个不可点击的按钮
CSS
基本语法
css的定义方法是：选择器 { 属性:值; 属性:值; 属性:值;}
1、外联式：通过link标签，链接到外部样式表到页面中：
<link rel="stylesheet" type="text/css" href="css/main.css">
2，嵌入式：通过style标签，在网页上创建嵌入的样式表：
<style type="text/css"> div{ width:100px; height:100px; color:red } ...... </style>
3、内联式：通过标签的style属性，在标签上直接写样式：
<div style="width:100px; height:100px; color:red "> ...... </div>
css颜色
颜色名表示，比如：red 红色，gold 金色
1, 16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
2, RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化 background-color: rgba(200,100,0);
3, RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A) background-color: rgba(0,0,0,0.5);
鼠标手
cursor cursor:pointer 让鼠标在那块变成可点击状态
CSS文本设置
color 设置文字的颜色，如： color:red; font-size 设置文字的大小，如：font-size:12px; font-family 设置文字的字体，如：font-family:'微软雅黑'; font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜 font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑'; line-height 设置文字的行高，如：line-height:24px; text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中 line-style:none 清除格式 例如：li前面的点
CSS边框属性
border:宽度 样式 颜色; border-color; border-style; 边框样式：solid实现，dotted点状线，dashed虚线 border-width: border-left-color; border-left-style; border-left-width: CSS3的样式 border-radius：圆角处理 box-shadow: 设置或检索对象阴影 box-sizing:border-box 元素的大小 在计算时 把边框和内边距计算在内
背景属性 background
background-color: 背景颜色 *background-image: 背景图片 background:url(图片地址) *background-repeat：是否重复，如何重复?(平铺) *background-position：定位 background-attachment： 是否固定背景， scroll:默认值。背景图像是随对象内容滚动 fixed:背景图像固定 *background-size: 背景大小，如 background-size:100px 140px;
