本博客java云同桌学习系列，旨在记录本人学习java的过程，并与大家分享，对于想学习java的同学，可以跟随我的步伐一起学习，我希望这个系列能够鼓励大家一同与我学习java，成为“云同桌”。
每月预计保持更新数量三章起，每章都会从整体框架入手，介绍章节所涉及的重要知识点及相关练习题，并会设置推荐学习时间，每篇博客涉及到的点都会在开篇目录进行总览。（博客中所有高亮部分表示是面试题进阶考点）
前端技术之HTML与CSS
1.HTML概述2.HTML基本语法3.HTML标签（1）文本标签（2）格式化标签（3）图片标签（4）超链接标记（5）表格标记（6）表单标签（7）框架标签（8）多媒体标签 4.HTML视频播放网站实例练习5.CSS简介6.CSS基础语法7.CSS样式使用方式（1）外部样式（2）内部样式（3）内联样式（4）三种样式实例 8.CSS选择器（1）html选择器（2）class类选择器（3）id选择器（4）关联选择器（5）组合选择器（6）伪类选择器（7）关系选择器（8）属性选择器 9.CSS常用属性（1）尺寸单位（2）字体属性：font（3）文本属性（4）背景属性（5）边框属性（6）内外补白属性（7）position定位属性练习：使一个DIV块上下左右居中（8）Layout布局练习：建立导航栏实例（9）光标属性 10.HTML+CSS视频播放网站实例练习学习时间：一周
学习建议：我们接下来的两个星期主要会学习前端的几个基础的技术，因为现在对java开发的要求越来越高，较好的前端水平才能更好的将后端的核心技术展现出来。
HTML与CSS的各方面比较繁杂，学习过程中应多去以下网站查看详细的介绍，并且必须要多去敲代码查看效果，才能将各属性融会贯通。
菜鸟编程
W3cchool在线教程
1.HTML概述
HTML（HyperText Mark-up Language）：一种用来描述网页的超文本标记语言
经过多年的发展，HTML系列主要的语言有：HTML、XHTML、HTML5，目前市场主流为HTML5
HTML内容编写完毕后，需要提交到浏览器，浏览器根据文档中规定的标准和标签描述内容将内容渲染成网页不同文档类型的设定通过 <!Doctype >设置(以下分别是HTML、XHTML、HTML5的文档类型设定)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<!doctype html>
2.HTML基本语法
HTML文本主要分为两个部分，头部（head）和主体（body），head部分负责设置网页的整体的一些属性信息不显示东西，body负责网页显示的具体内容标签中可以像xml一样添加相关属性
HTML文件后缀名为.html或.htm
HTML中也可以插入注释 <!-- -->
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>⽹页标题 </title><!-- 此处可以写各种⻚页头属性设置、 CSS样式和JavaScript脚本等... --></head><body>⽹页显示内容<!-- 这就是唯⼀一的⼀一种 HTML注释了了 --></body></html>
3.HTML标签
HTML中通过若干的不同种类的标签来描述网页内容，包括超链接，图片、视频资源等
HTML标签（标记）的语法是由 < 和 > 括起来。HTML标签有两种： 双标签 ： <标签名>…</标签名> 和 单标签 ： <标签名 />HTML标签中还可以添加属性： <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…</标签名>HTML标签规范：标签名小写、属性使用双引号、标签要闭合。规范不遵守浏览器器不会报错，会尽量解析，或者不显示。
此处推荐一个HTML的学习网站，里面标签的介绍更加的全面丰富和严谨HTML参考手册
（1）文本标签
（2）格式化标签
（3）图片标签
（4）超链接标记
（5）表格标记
（6）表单标签
HTML中表单可以让用户输入信息，收集用户数据
(1) <form>...</form> 表单标签(2) <input> 表单项标签input定义输⼊入字段，⽤用户可在其中输⼊入数据。在 HTML 5 中，type 属性有很多新的值。form标签常⽤用属性：action属性:提交的⽬目标地址 (URL)method属性:提交⽅方式 :get(默认)和postget⽅方式是 URL地址栏可见 ,长度受限制 (IE2k ⽕火狐 8k),相对不安全 .post⽅方式是 URL地址不可见 ,长度不受限制 ,相对安全.enctype:提交类型target: 在何处打开⽬目标 URL。name:属性为表单起个名字.在HTML5中使⽤用 id 代替。
HTML5中新增的input类型：
(3) <select>...</select> 标签创建下拉列列表。<option>... </option> 下拉选择项标签,⽤用于嵌⼊入到 <select>标签中使⽤用的 ;value属性:下拉项的值selected属性:默认下拉指定项. (4) <textarea>...</textarea> 多⾏行行的⽂文本输⼊入区域(5) <button>...</button> 标签定义按钮。(6) <fieldset> --</fieldset> 元素可将表单内的相关元素分组。(7) <legend></legend> -- 标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。
<form><fieldset><legend>个⼈人信息： </legend>姓名：<input type="text" /><br/>年年龄： <input type="text" /><br/></fieldset><br/><br/><fieldset><legend>健康信息：</legend>身⾼高： <input type="text" /><br/>体重：<input type="text" /><br/></fieldset></form>
效果图：
(8) <optgroup> html5标签-- <optgroup> 标签定义选项组。此元素允许您组合选项(9) <datalist> html5标签-- <datalist> 标签定义可选数据的列列表。与 input 元素配合使⽤用，就可以制作出输⼊入值的下拉列列表。
（7）框架标签
框架标签可以设置可替换的一块内容，可以将标签作为超链接的target属性，点击不同超链接切换框架显示
属性：src：规定在 iframe 中显示的文档的 URLname：规定 iframe 的名称height：规定 iframe 的高度。width：定义 iframe 的宽度。frameborder：规定是否显示框架周围的边框。
例如：
<iframe src="1.html" name="myframe" width="700" height="500"></iframe>
（8）多媒体标签
（1）<audio > .....</audio> 音频标签（2）<video> ....... </video> 视频标签通过其中的<source >标签的属性来制定资源的路径
4.HTML视频播放网站实例练习
所有视频以图片列表的形式显示，当用户点击图片的视频，可以在页面下方播放指定的电影。
（由于上传文件限制，读者在复制后运行时替换相关图片和视频资源即可正常运行）
主html文件：
<!DOCTYPE ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>南窗木心视频播放网站</title></head><body><h1> 欢迎来到南窗木心的视频播放网站</h1><hr></hr><p>请点击下方图片选择您想要观看的视频 </p><p> </p><fieldset> <legend> 新手必学动作之正蛇</legend><a href="detail1.html" target="myframe" > <img src="source/detail1.PNG" width="300" height="200"/> </a><a href="detail2.html" target="myframe" > <img src="source/detail2.PNG" width="300" height="200"/> </a><a href="detail3.html" target="myframe" > <img src="source/detail3.PNG" width="300" height="200"/> </a></fieldset><iframe src="detail1.html" name="myframe" width="600" height="400"></iframe></body></html>
detail1.html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>vedio_detail1</title></head><body><h1> 正蛇细节一 </h1><i>第一步，大家可以先练习一下，前后脚位于一条线的滑行感觉注意要像视频中一样，将后面的脚相较于前面的脚更加弯曲一点</i><video controls="controls" width="500" height="500"><source src="./source/detail1.mp4" type="video/mp4" />您的浏览器不支持播放视频</video> </body></html>
detail2.html文件：
<!DOCTYPE ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>vedio_detail2</title></head><body><h1> 正蛇细节二 </h1><u>第二步，因为大多数初学者身体比较僵硬，找不到向前滑行的动力所以大家在练习正蛇之前,可以先复习一下双鱼</u><ol start="1"><li>将两只手臂举起，跟随腰部整体左右扭动<li>带动双脚一起发力向前蛇形绕桩<li>记住腰部扭动的感觉<li>将前后脚分开就可以很快学会正蛇 </ol><video controls="controls" width="500" height="500"><source src="./source/detail2.mp4" type="video/mp4" />您的浏览器不支持播放视频</video> </body></html>
detail3.html文件：
<!DOCTYPE ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>vedio_detail3</title></head><body><h1> 正蛇细节三 </h1>第三步，我们学习一下正蛇如何起步<b>初学者可以先双脚并立,站在第一个桩的左侧</b><ul><li>腰部先扭动发力，两脚自然分开<li>右脚先走，左脚跟随着右脚轨迹行动<li>过桩时注意双脚不同的压韧方向</ul>依次循环以上步骤，多加练习便可轻松掌握正蛇<video controls="controls" width="500" height="500"><source src="./source/detail3.mp4" type="video/mp4" />您的浏览器不支持播放视频</video> </body></html>
效果图：
5.CSS简介
CSS（层叠样式表，Cascading Style Sheets)：是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
作用：
极大地提高工作效率对HTML进行美化，控制如何显示HTML元素多个样式可以层叠
许多CSS的详细用法，我个人建议上网搜索一下对应版本的手册或者网站菜鸟教程CSS来进行全面细致的了解，当然如果不需要太细致，那么这篇博客就够了
6.CSS基础语法
CSS的语法格式：格式： 选择器 {属性:值;属性:值;属性:值;....}
后续会逐渐介绍常用的选择器和属性
p{color:red;text-align:center;}
CSS的注释：
/* ...........................*/
7.CSS样式使用方式
样式层叠优先级（从低到高）：
浏览器缺省设置外部样式表（使用link导入）内部样式表（在head里进行设置）内联样式表（在HTML元素内部设置）
优先级可以按就近原则理解，在层叠使用时，操作同一选择器的同一属性，高优先级会覆盖低优先级样式
（1）外部样式
写在<head>标签中的第一个样式，导入已经写好的CSS文件，作用于本页面，是最常使用的CSS样式方式
书写位置，<head>标签内
<link href="引入的CSS文件" type="text/css" rel="stylesheet"/>或者<style type="text/css">@import "style.css";</style>
（2）内部样式
写在<head>标签内的第二个样式，只能使用<style>定义，不能引入外部css文件
<style>/*内部样式表*/li{color: red;} </style><!-- 特点：作⽤用于当前整个⻚页⾯面 -->
（3）内联样式
只能书写在标签的内部，控制单个HTML元素
格式：
<html标签 style=“属性:值;属性:值;…”>被修饰的内容</html标签>
<li style="color: green;">内联样式表设置颜色绿色</li>
（4）三种样式实例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS样式表使用方式</title><!--外部样式表引入css文件--><link rel="stylesheet" href="./mycss.css"><style>/*内部样式表*/li{color: red;} </style></head><body><u><li>外部样式表设置字号为20px，颜色为黄色</li><li>内部样式表设置颜色为红色</li><li style="color: green;">内联样式表设置颜色绿色</li></u></body></html>
效果图：
8.CSS选择器
简单来说，选择器就是要指定你要操作的HTML元素
选择器的优先级(从大到小)：
[ID选择符]->[class选择符]->[html选择符]->[html属性]
（1）html选择器
就是把html标签作为选择符使⽤用如 p{....} ⽹网⻚页中所有 p标签采⽤用此样式h2{....} ⽹网⻚页中所有 h2标签采⽤用此样式
（2）class类选择器
对HTML某个元素设置属性class，自定义class的值，通过class自定义的值找到要操作的元素1.先设置属性<html标签 class="类名">...</html标签> 2.通过其他选择符.类名{样式....}或直接.类名{样式....}
/*2.类选择器*//*将网页中class属性值为cc的标签采用此样式*/.cc{color:hotpink}/*class属性值为cc的h1标题标签采用此样式*/h1 .cc{color:green;}.dd{background-color:#ddd;}
（3）id选择器
只用于此页面中的单个无重复html控件
对HTML某个元素设置属性id，自定义id的值，通过id自定义的值找到要操作的元素1.<html标签 id="id名">...</html标签>2.#id名{样式.....}
/*3. id选择器*//*id属性值为hid的标签采用此样式*/#hid{font-size:40px;}
（4）关联选择器
表示包含关系，常用于操作多层选择关系的html元素
选择符1 选择符2 选择符3 ...{样式....}
table a{....} /*table标签⾥里里的 a标签才采⽤用此样式 */h1 p{color:red} /*只有h1标签中的p标签才采⽤用此样式 */
（5）组合选择器
表示并列关系，常用于操作存在兄弟关系的一部分html元素
选择符1,选择符2,选择符3 ...{样式....}
h3,h4,h5{color:green;} /*h3、h4和h5都采⽤用此样式 */
（6）伪类选择器
标签名:伪类名{样式....}
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */a:visited {color: #00FF00; text-decoration: none}/* 已访问的链接 */a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
（7）关系选择器
从此处开始，是CSS3中的选择器，平时应用的频率相较CSS2中的选择器较低
div>p 选择所有作为div元素的⼦子元素 pdiv+p 选择紧贴在div元素之后p元素div~p 选择div元素后⾯面的所有兄弟元素 p
（8）属性选择器
[attribute]选择具有attribute属性的元素。[attribute=value]选择具有attribute属性且属性值等于value的元素。[attribute~=value]选择具有attribute属性且属性值为⼀一⽤用空格分隔的字词列列表，其中⼀一个等于value的元素。[attribute|=value]选择具有att属性且属性值为以val开头并⽤用连接符 "-"分隔的字符串串的 E元素。[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素[attribute*=value]匹配具有attribute属性、且值中含有value的E元素
9.CSS常用属性
（1）尺寸单位
（2）字体属性：font
font-size: 字体大小： 例：20pxfont-weight： 字体加粗 ：boldfont-family： 字体：宋体，Arialfont-family: "Microsoft YaHei", "Heiti SC", tahoma, arial; /*字体*/
可以指定多个字体，浏览器会在客户端挨个寻找已安装的字体进行显示
（3）文本属性
（4）背景属性
（5）边框属性
（6）内外补白属性
（7）position定位属性
练习：使一个DIV块上下左右居中
width: 600px;height: 200px;/*div块上下左右居中*/position: absolute;top: 0px;left: 0px;bottom: 0px;right: 0px;margin: auto;/*文本居中,上下居中通过行高=高度*/text-align: center;line-height: 200px;
（8）Layout布局
练习：建立导航栏实例
先上效果图：
源代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导航栏练习</title><style>*{/*清除所有控件内外补白*/margin: 0px ;padding: 0px;}ul{/*清除序号*/list-style-type: none;}div.navigation{/*设置div背景图片*/height: 50px;background: url("./source/repeat.png"); }div ul li{/*使所有条目向左浮动*/float: left;width: 150px;}div ul li a{/*将条目更改为块状，并使其上下居中*/display: block;width: 100px;height: 50px;line-height: 50px;text-decoration: none;text-align: center;}div ul li a:hover{/*设置条目被放置鼠标时的效果，背景块变白，字体变蓝*/background-color: white;color: blue;}</style></head><body><div class="navigation"><ul><li><a href="#" >首页</a></li><li><a href="#" >商品展示</a></li><li><a href="#" >新闻列表</a></li><li><a href="#" >联系我们</a></li><li><a href="#" >在线帮助</a></li></ul></div></body></html>
（9）光标属性
10.HTML+CSS视频播放网站实例练习
效果图：（头部固定，中间主体可上下滑动，中间各条目可以放置链接）
源代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>南窗木心的视频播放网站2.0</title><style>/*公共的css样式*/*{margin:0px;padding:0px}a{text-decoration: none;}li{list-style:none;}/*页面头部样式*/.header{position: fixed;top:0px;width:100%;height: 80px;background-color: white;}.header .icon{display: block;float: left;width: 108px;height:80px;background-image: url("./source/icon.png");background-size: 108px 80px;cursor: auto;}.header .navigation{float: left;width: 190px;height: 42px;}.header .navigation .website{float: left; font-size: 16px;font-weight: bold;margin: 30px 5px;cursor: pointer;}.header .navigation .website:hover{color: #007aff;}.header .navigation .learnCenter{float: left;font-size: 16px;font-weight: bold;margin: 30px 5px;cursor: pointer;}.header .navigation .learnCenter:hover{color: #007aff;}.header .identity{float: right;margin: 30px 30px;width: 46px;height: 42px;}/*页面主体样式*/.video_body{margin: 50px 40px;width: 980px;height: 800px;background-color: #e7e7e7;}.video_body nav{height: 40px;}.video_body li{display: block;border: 5px solid white;width: 980px;height: 64px;padding: 10px 0px;text-align: left;line-height: 1.5;cursor: pointer;}.video_body li div{margin: 25px 30px;}.video_body li div:hover{color: green;}.video_body li div:visited{color: green;}/*页脚样式*/.footer{width: 100%;height: 170px;background-color: #161616;color:gray;}.footer .text1{padding: 18px;}.footer .text2{padding: 18px;}.footer .text3{padding: 18px;}</style></head><body><header class="header"><div class="icon"></div><div class="navigation"><div class="website">南窗木心官网</div><div class="learnCenter">学习中心</div></div><div class="identity">付博</div></header><article class="video_body"><nav class="contents"></nav><article class="items"><li class="item1"><div><a>第一节：滑行基础</a></div></li><li class="item2"><div><a>第二节：滑行进阶</a></div></li><li class="item3"><div><a>第三节：平地花式动作——双鱼</a> </div></li><li class="item4"><div><a>第四节：平地花式动作——画葫芦</a> </div></li><li class="item5"><div><a>第五节：平地花式动作——正剪</a></div></li><li class="item6"><div><a href="./video_system1.0/video_system.html">第六节：平地花式动作——正蛇</a></div></li><li class="item7"><div><a>第七节：倒滑基础</a></div></li><li class="item8"><div><a>第八节：倒滑进阶</a></div></li></article></article><footer class="footer"><li class="text1">数字化轮滑在线教育平台</li><li class="text2">我的课程 · 查询证书 · 关于我们</li><li class="text3">"滑友"轮滑科技有限公司版权所有 京ICP证140465号 京ICP备13032407号-1 京公网安备1101080201</li></footer></body></html>
都学习到这里了，不妨点个赞吧~
