简介
目前处于学习阶段，现在虽然在Java方面没有什么建树，但我相信持之以恒的坚持做一件事，最终会达到自己的初期目标的。好啦，不多说，今天是Web入门的第一天，让我们一起学习前端入门之html&css吧
学习原则
因为时间匆促,暂且作快速入门学习
1. 首先入门了解基础知识
2. 代码案例练习,增加代码熟练度
3. 写博客巩固基础知识,以便后期做复习使用
HTML快速入门
1. HTML的简介
什么是HTML：HyperText Markup Language 超文本标记语言
特点: 超越了文本的范畴，文本解决不了的事情，超文本可以解决
没有任何逻辑性语言、一种描述性语言、是最基础的网页语言、代码都是由标签所组成的、语法不严谨
HTML的作用：Java Web 使用Java开发网页 做网页
HTML是最基础网页语言
HTML的代码都是由标签所组成的
2. HTML的基本格式(重点)
<html>
<head> //头部:存放在head里面的内容会先加载
加载顺序从上倒下从左到右
存放属性的信息或者辅助性的信息
引入外部的文件（CSS JavaScript简称js）
</head>
<body>
存放就是真正显示给用户的信息
</body>
</html>
3. HTML的注意事项
大多数的标签都是由开始和结束标签所组成,个别的标签只有单一的功能,或者没有要修饰的内容，可以在标签内结束 标签上包含属性，通过改变属性的值，可以达到更好的显示的效果 属性名和属性值,属性名和属性值之间用=连接,属性的值使用双引号、单引号或者不用引号都ok,全都都使用双引号 但是到了公司就按着你公司的规定
4. HTML的排版标签
HTML的注释 <!-- HTML的注释 –> <p></p>（重点） 段落标签 特点：标签的开始和结尾位置产生一行空行 属性：align -- 对齐方式 <br /> 换行标签 <hr /> 一条水平线 属性：color -- 颜色 值的写法：1)直接写英文单词 2)RGB三原色(red green blue)#aa34cc width--宽度 值的写法：1)执行编写像素值 200px 2)编写百分比 30% <div></div>（重点）：在网页上声明一块区域 <span></span>（重点）：在网页上声明一块区域 区别：div是块级元素，屁股后面跟换行 span标签的行内元素，默认一行 div的作用：CSS+DIV进行页面的布局 span的作用：给用户做友好的提示
5. HTML的字体标签
字体标签 * <font></font>（重点）代表字体标签 * color 字体颜色 size 字体大小 最大值：7 最小值：1 默认值：3 值的写法：1）1-7范围内 2）+2 默认值+2 * face 字体类型 标题标签 * <h1>一级标题</h1> 最大的 默认加粗 块级元素 * <h2>二级标题</h2> 一级标题最大，一次向下减少... * <h6>六级标题</h6> * 粗体和斜体标签 <b>粗体</b> <i>斜体</i> 标签是可以嵌套的 <b><i>既是粗体又是斜体</i></b>
6. HTML的列表标签（重点）
列表标签：把数据封装成列表
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd> 自动对齐的，默认缩进的
</dl>
有序列表（重点）：
<ol>
ol的属性：
type :标号的类型
start :从哪开始
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
无序列表（重点）：
<ul>
ul的属性：type：标号的类型
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
7. HTML 图片标签（重点）
图片标签：有一个单独的图片，需要把图片和HTML的文件关联到一起。
<img /> 引入一种图片
src：要链接图片的地址
width ：图片的显示宽度
height ：图片的显示高度
alt ：图片的说明文字
8. HTML超链接标签（重点）
超链接标签作用
<a>文本内容</a>
一：链接资源：
必须要出现：href
注意1：如果访问的网络的资源，需要编写协议
注意2：如果访问本地的资源，如果浏览器可以解析的内容，默认直接打开，如果浏览器不能解析，默认弹出下载窗口。
注意3：如果浏览器不能解析的协议，默认查找操作系统上的应用程序。默认打开应用程序。（扩展）
二：定位资源：返回顶部
如果定义资源的话，需要另外的一个属性 name="值" 专业锚点
假如说有一个网页非常长，那就可以使用name的属性在网页上定位一些锚点，通过操作返回到指定的锚点
找个位置定义锚点
属性：target 代表窗口打开的位置
值:_blank 弹出一个新的窗口
10. HTML表格标签（重点）
<table> ：封装表格的范围
border：表格的格线
表格的宽度
height：代表的表格高度
cellpadding:文字距离表格线的长度
<tr> ：代表表格的行
align：单元格中文字的对齐方式
<td> ：代表单元格
<th> ：代表单元格
th和td的区别：th文本内容默认加粗和居中的。th表格的表头
td非常重要的属性：合并单元格。
行合并:rowspan=合并几个单元格值就是几
列合并：colspan=合并几个单元格值就是几
<caption>：表格标题
11. HTML表单标签（重点）
表单标签：收集用户输入的数据。
封装表单标签的范围
<form>
form包含属性
action ：表单要提交的地址（后台去提交）
method ：表单提交方式（面试题）
问题：常用的提交方式有哪些？
答：提交方式有很多，常用有两种，get和post。表单默认的提交方式就是get。get和post的区别
* get方式进行提交时，参数列表就显示到地址栏上。
* post方式提交是，封装到请求体中。
* get方式提交时，对安全级别比较低
* post方式提交，安全级别比较高
* get方式提交时，对参数列表的数据大小有限制。
* post方式提交是，对大数据没有限制。
用户的输入项的内容：例如：普通的文本框 普通的密码 使用<input type="值的不同，显示不同的输入 text password" >
***** 注意：input标签上有两个属性 name（必须要指定） value （不一定要指定） name的名称 value的值
***** 注意：name属性必须要指定的，value的属性不一定指定
type="text" 普通的文本框
type="password" 密码框
type="radio" 单选按钮 只能选择一个
添加一个属性：组的概念，指定相同的name属性
有默认值：checked="checked"
type="checkbox" 多选按钮
组的概念：指定相同的name属性
有默认值：checked = "checked"
type="file" 文件上传 name属性也是必须指定的
type="hidden" 隐藏组件 用户不需要看到的数据，就可以使用隐藏组件隐藏起来。
type="button" 按钮（和js语言和在一起使用）
type="submit" 提交：表单收集用户的数据，点击就可以把表单提交到后台
?sex=on 单选按钮的name的属性的值。
?username=zhaosi&sex=on
?username=张三&password=123&sex=nan
type="reset" 重置：恢复到最初的状态
选择下拉框
<select name="必须指定的，并且需要指定在select标签上">
<option value="必须指定，指定在option标签上">北京</option>、
<option value="必须指定，指定在option标签上">上海</option>
</select>
默认值：selected="selected"
文本域：写入多行多列的内容
<textarea>
属性：
rows 行
cols 列
</textarea>
</form>
12. HTML的其他标签
* 框架标签(frameset)：对网页搭建一个框架
注意：框架标签不能使用在<body>标签的内部和下面
HTML基础入门暂时了解到这里，以后有时间再深入了解 |
CSS快速入门
1. CSS简介
什么是CSS ： 层叠样式表 CSS和HTML结合 CSS的选择器（重要）
CSS语言作用 ： 设置网页的显示效果（网页的样式）。
* 注意：可以避免HTML代码的重复性。
* 注意：CSS -- 专注网页样式的设置 和HTML -- 专注通过标签来封装数据 分工合作。耦合性降低了。
<font>数据</font> 编写CSS的代码，设置font标签的样式
2. CSS与HTML结合(重点)
什么是css? css层叠样式表(Cascading Style Sheet)
作用: 用于美化页面,设置网页的显示效果
好处:
1. 可以避免html代码的重复性
2. css专注网页样式的设置和html 专注通过标签来封装数据,分工合作,耦合性降低
CSS为什么要和HTML结合呢：HTML语言用来通过标签来封装数据的。CSS的代码作用在标签上。
怎么结合呢?(4种方式)
* 第一种：每一个HTML的标签，提供了一个属性style，给CSS代码来使用的。style="CSS的代码" 只能设置当前的标签。
* 如果让第二个div也有相同的样式？
第二种：HTML的文件，提供一个<style>的标签。在标签的中间来编写CSS的代码。<style>标签需要放在<head>标签的中间
在<style>标签上提供一个属性 type="text/css"固定的
* 注意：优先级：优先级高显示样式
* 第三种：编写一个外部的CSS的文件，CSS文件里面编写CSS代码，只需要把CSS的文件引入到HTML的文件中。（美工常用的）
* 引入该文件 使用的CSS代码里面命令 @import url("CSS文件的地址"); @import需要编写在<style>标签的中间
* 编写一个管理我所有的CSS文件的文件。引入总的CSS的文件就ok了。
* 第四种：引入外部的文件。HTML的文件提供了一个标签 <link> （经常经常使用）
* rel="stylesheet" ：代表当前的文件和被引入的文件之间的关系
* type="text/css" ：
* href="CSS文件的地址" ：CSS文件的地址
3. CSS的优先级(重点)和注意事项
* 优先级：决定样式。一般的情况下：从上到下，由外到内，优先级是从低到高的。哪个CSS的样式离HTML标签近的优先级越高。
* 注意事项：
* CSS代码的写法： 选择器名称{CSS的属性:属性值;属性:属性值;.... }
* 属性与属性之间使用分号隔开
* 属性与属性值之间使用冒号
* 如果一个属性有多个值，值与值之间使用空格隔开。 div{xx:yy1 yy2}
4. CSS的选择器（重点）
CSS的选择器的作用：告诉CSS的代码需要作用在哪个标签上。
CSS的基本选择器：
* 标签名选择器 div{CSS的代码} span{} table{} 具有相同的标签名的标签，都能有相同的样式
* 类选择器 HTML的标签提供了一个属性 -- class="hehe" 目的：想让div的类的名称是hehe的标签具有样式
写法： .hehe{CSS的代码} 只要是class的名称叫hehe的标签，都具有相同的样式
注意：让不同的标签具有相同的样式。
* id选择器 HTML的标签提供了一个属性 -- id="haha"
写法： #haha{CSS的代码}
注意：ID一般代表的是唯一值。并且ID的属性给JS语言来使用。需要自己去注意：如果给标签使用ID的属性，需要自己去给指定一个唯一值。
* 优先级：决定样式。一般的情况下：从上到下，由外到内，优先级是从低到高的。哪个CSS的样式离HTML标签近的优先级越高。
* 优先级：特殊的情况下：标签名选择器 < 类选择器 < ID选择器 < style属性
5. CSS的扩展选择器
1.CSS的基本选择器 * 标签名 * 类选择器：不同的标签有相同的样式 div class="hehe" span class="hehe" * ID选择器 2.CSS的扩展选择器（组合应用） * 关联选择器 * 标签是可以嵌套的，标签与标签之间存在关系。 * 语法：div font{ } 标签与标签之间使用空格隔开。 * 组合选择器 * 对多个不同的选择器进行相同的样式设定 * 多个选择器之间可以使用逗号就行隔开。 #haha,.hehe{ } * 伪元素选择器 * CSS预先定义好一些选择器（效果），直接拿过来用。 * 超链接的伪元素选择器 未访问的状态 悬停状态 点击状态 访问完成状态 伪元素选择器，提供了4个状态的选择器。* input:focus(文本框获取焦点) input/blur失去焦点 想使用超链接4个状态的伪元素选择器的话，使用的顺序： L V H A
6. CSS的布局（了解）
1.盒子模型（概念：看图02）
2.float:left（文档流向右边）或者right（文档流向左边）
3.position：绝对定位 相对定位
4. 1). 盒子模型
|--------|
| 文本 |
| 内容 |
|________|
border: 默认设置4条边框,分别设置4个边框
padding: 内边距，文本内容到边框的距离
margin：外边距,div边框到浏览器的距离
2). (文档流向)float:left|right，默认：从上到下，从左到右
应用：div从左到右
3). (绝对定位)position:absolute | relative
7. CSS的常见操作
CSS中尺度单位的介绍
1in = 2.54cm = 25.4 mm = 72pt = 6pc
cm mm pt px em=16pt
字体设置
font
font-size
font-style
font-weight
font-family
文本设置
text-align 设置对齐方式
text-indent:2em;设置缩进
背景设置
background-image:url("photo-3.jpg");背景图片
background-position:30px 30px;背景图片出现的位置（leftposition,topposition）
background-repeat:no-repeat;有没有重复
background-color:red;背影色
列表设置
list-style列表样式
list-style-image列表图片
定位设置(position,float,clear)
/*margin:20px; 设一个值:代表上右下左 20*/
/*margin:40px 10px;上下20px 左右10px*/
margin:180px 60px 50px;/*margin:10px 40px 50px; 上10px 左右40px 下50px */
/*调位置*/
100px;
height:100px;
/*内补丁padding
调内容与边线的距离大小
*/
鼠标样式设置(cursor)