017年11月16日,久游网将携正版敢达IP游戏《机动战士敢达OL》出现在2017GTL武汉总决赛现场!届时GTL比赛主舞台将打破次元壁,为各位玩家呈现一个宏大的敢达世界。
GTL联赛,全称技嘉TOP联盟高校电子竞技,是技嘉金牌主板发起主办的全国高校竞技联赛,作为高校玩家自己的联赛,整个赛事的执行将由技嘉Top联盟成员同学完成,旨在激发高校学生的赛事组织潜能,营造良好的高校体育竞技氛围,展现高校学生的竞技风采,同时通过技嘉Top联盟实现全国高校学生的互动交流。如今GTL已经覆盖全国超过1000所大中院校,成为全国高校最受欢迎,最具人气的全国高校电竞盛会。
在本次2017GTL武汉总决赛上,《机动战士敢达OL》的顶尖机师玩家们将在这里展开一场巅峰表演赛,向各位敢达粉丝展示游戏中的精彩对决。表演赛将以6V6局地战的开打,将高手间的操作发挥对决发挥到极致,让所有人都能观赏到一场最为淋漓尽致的视觉盛宴。
据悉,游戏现在已经进行到了”逆袭的夏亚”新版本,“沙扎比”“ν敢达”等耳熟能详的敢达系列机体已悄然上线。作为一款拥有正版敢达IP,多种类型上百台机体,《机动战士敢达OL》一直以来都在不断推陈出新,不断更新更多的内容。而在不久之后,还有全新的机体即将加入到游戏之中。
想知道更多游戏详情的玩家,请进入游戏官网(http://ms.9you.com),或在11月16日晚亲临武汉大学GTL比赛现场一探究竟吧!
《机动战士敢达OL》是由日本万代南梦宫在线研发,国内久游网独家代理的TPS机甲大作。忠于原著的U.C.时代世界线,丰富的MS机体,多变的战场局势,定必让你犹如亲临敢达对战的最前线!
《机动战士敢达OL》官网:http://ms.9you.com/
《机动战士敢达OL》论坛:http://bbs.9you.com/forum-177-1.html
《机动战士敢达OL》玩家交流群:424290076
HTML是用来开发网页的,它是开发网页的语言
全称HyperText Mark-up Language,超文本标记语言
标记就是标签
<标签名称></标签名称> 比如 <html></html> <h1></h1>等,标签大多数都是成对出现的。
超文本 两层含义:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
第一行<!DOCTYPE html>是文档声明
用来指定页面所使用的html的版本, 这里声明的是一个html5的文档
<html>...</html>标签是开发人员在告诉浏览器
整个网页是从<html>这里开始的,到</html>结束
也就是html文档的开始和结束标签
<head>...</head>标签用于定义文档的头部
是负责对网页进行设置标题、编码格式以及引入css和js文件的
<body>...</body>标签是编写网页上显示的内容
网页文件的后缀是.html, 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页
VS Code全拼是 Visual Studio Code 是由微软研发的一款免费、开源的跨平台代码编辑器
目前是前端(网页)开发使用最多的一款软件开发工具
下载网址: https://code.visualstudio.com/Download
选择对应的安装包进行下载:
安装一切默认
1 标签不区分大小写,但是推荐使用小写
2 根据标签的书写形式,标签分为双标签(闭合标签)和单标签(空标签) 2.1 双标签是指由开始标签和结束标签组成的一对标签,这种标签允许嵌套和承载内容,比如: div标签 2.2 单标签是一个标签组成,没有标签内容, 比如: img标签
标签的使用形式
列表标签
网页效果
表格标签
<table>标签:表示一个表格
<tr>标签:表示表格中的一行
<td>标签:表示表格中的列
<th>标签:表示表格中的表头
属性设置
border: 1px solid black:设置边框和颜色
border-collapse: collapse:设置边框合并
网页效果
表单标签
表单用于搜集不同类型的用户输入的数据,然后可以把用户数据提交到web服务器
<form>标签 表示表单标签,定义整体的表单区域
一个表单中有很多信息组成,比如 姓名,爱好,地址等,这些内容有很多其他标签来承载
这些标签称为表单元素标签
网页效果
表单用于搜集不同类型的用户输入的数据,然后可以把用户数据提交到web服务器
两种方式的区别:
表单元素属性设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
姓名 type="text" 定义单行文本输入框
密码 type="password" 定义密码输入框
性别 type="radio" 定义单选框
爱好 type="checkbox" 定义复选框
照片 type="file" 定义上传文件
个人描述 <textarea></textarea> 定义多行文本输入框
地址 <select></select> 定义下拉列表
提交 type="submit" 定义提交按钮
重置 type="reset" 定义重置按钮
按钮 type="button" 定义一个普通按钮
-->
<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密码:</label>
<input type="password" name="password">
<br>
<label>性别:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>爱好:</label>
<input type="checkbox" name="like" value="睡觉">睡觉
<input type="checkbox" name="like" value="吃饭">吃饭
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>个人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>
</body>
</html>
点击提交:
可以看到服务器收到了请求报文。
试了阿里、美团与滴滴后,我有了几个重大发现…>>>
html标签是由<>包围的关键词 html标签是成对出现的 有部分标签是没有结束标签的,叫单标签, 页面中所有的内容,都是要放在HTML标签中的
HTML标签分三部分:
标签名称
标签内容
标签属性
HTML标签具有语义化:
语义化就是仅通过标签名就能判断出该标签的内容
语义化的作用: 网页结构层次更清晰 更加容易被搜索出来 更加让屏幕阅读器读出该页面的内容
标签的内容就是在一对标签内部的内容 标签的内容可以是其他标签
class属性:用于定义元素的类名
id属性:用于指定元素的唯一id
style属性:用于指定元素的行内样式
title属性:用于指定元素的额外信息
accesskey属性: 用于指定激活元素的快捷键
tabindex属性:用于指定元素在tab键下的次序
dir属性:用于指定元素中内容的文本方向,属性值为ltr 或 rtl,left to right 和 right to left
leng属性: 用于指定元素内容的语言。
onload:在页面加载结束之后触发
onunload:在用户从页面离开时发生,如点击跳转,页面重载,关闭浏览器窗口等。
form:表单事件
onblur:当元素失去焦点时触发
onchange:在元素的元素值被改变时触发
onfocus:当元素获得焦点时触发
onreset:当表单中的重置按钮被点击时
onselect:在元素中文本被选中后触发
onsubmit:在提交表单时触发
keyboard:键盘事件
onkeydown:在用户按下按键时触发
onkeypress:在用户按下按键后,按着按键时触发,该属性不会对所有按键生效
不生效的有:alt, ctrl, shift, esc
onkeyup:当用户释放按键时触发
Mouse:鼠标事件
onclick:当在元素上发生鼠标点击时触发
onblclick: 当元素上发生鼠标双击时触发
onmousedown:当元素上按下鼠标按钮时触发
onmousemove:当鼠标指针移动到元素上触发
onmouseout:当元素指针移出元素时触发
onmouseover:当鼠标指针移动到元素上时触发
onmouseup: 当在元素上释放鼠标时触发
media:媒体事件
onabort:当退出时触发
onwaiting:当媒体已停止播放但打算继续播放时触发
文本标签
段落标签用来描述一段文字
标题标签用来描述一个标题
标题标签总有六级。
用于强调某些文字的重要性
多媒体标签
链接标签<a></a> 图片标签<img/> 视频标签<video></video>
<video src="da.mp4" controls="controls">
音频标签<audio></audio>
<audio src="a.mp3"></audio>
列表 无序列表标签
<ul><li></li></ul>
<li></li>代表无序列表中的每一个元素
有序列表
<ol><li></li></ol>
定义列表<dl></dl> <dt></dt>定义列表中的项目 <dd></dd>描述列表中的项目
<dl> <dt></dt> <dd></dd> <dd></dd> </dl>
表格: 表格标签<table> 表格的行<tr> 表头<th> 单元格<td>
表格合并
同一行内,合并几列colspan="2"
同一列内,合并几行rowspan="2"
表单标签<form>
<form></form>表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
action:浏览者输入的数据被传送到的地方,比如一个php页面
method:数据传送的方式
输入标签<input>
input name为文本框命名,用于提交表单,后台接收数据用 value为文本输入框设置默认值 type通过定义不同的type类型,input的功能有所不同
type功能: text,password,radio,checkbox,file,button,reset,submit,email,url,number,range,date,color
<button>按钮: button标签的功能与input按钮功能相同,button是双标签,内部可以嵌套其他行内元素。
下拉选择框select
<select> <option value="book"></option> <option value="go" selected="selected"> go </option> <option value="sport"></option> </select>
文本域textarea cols:多行输入域的列数 rows:多行输入域的行数
其他语义化标签 div盒子 俗称盒子,division分割
在网页制作过程中,可以把一些独立的逻辑部分划分出来,放在一个div标签中,这个div标签的作用就是相当于一个容器。
什么是逻辑部分,它是页面上相互关联的一组的元素,如网页中的独立的栏目版块,就是一个典型的逻辑部分。
网页头部header
html5新增语义化标签,定义网页的头部
主要用于布局,分割页面的结构
底部信息footer
html5新增语义化标签,定义网页的底部
主要用于布局,分割页面的结构
导航nav
html5新增语义化标签,定义一个导航 主要用于布局,分割页面的结构
文章article
html5新增语义化标签,定义一篇文章 主要用于布局,分割页面的结构
侧壁栏aside
语义化标签,定义主题内容外的信息 主要用于布局,分割页面的结构
时间标签time 语义化标签,定义一个时间
网页结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <div> </div> </html>
<!DOCTYPE html>定义文档类型,告知浏览器用哪一种标准解释HTML。
<html></html>可告知浏览器其自身是一个Html文档。
head定义文档的头部 头部元素title,script,style,link,meta
title定义文档的标题 link标签将css样式文件链接到html文件内
meta定义文档的元数据
每个网页都是由不同的功能模块组成的,因此在将制作网页的时候,我们要将网页的每个功能模块分开
常见多由头部区,展示图片区域,主题区域,底部信息区域组成。
网页由上到下,由内到外
div,header,footer,nav,article,aside等标签多用于模块划分
css全称为层叠样式表,它主要用于定义HTML内容在浏览器内的显示样式,如文字的大小,颜色,字体加粗等。
css代码通常存放在style标签内
css样式由选择符和声明组成,而声明由属性和值组成
选择符{属性:值}
选择符,叫选择器
css放置 直接书写在标签的style属性中,不建议使用
内联样式表 外联样式表
css中的继承
不可继承样式: display,margin,border,padding,background,height,min-height,max-height,width,min-width,max-width,overflow,position,left,right,top,bottom,z-index,float,clear
可以继承的样式 letter-spacing,word-spacing,white-space,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction,visibility,cursor
选择器的种类
标签选择器 通配符选择器 属性选择器 后代选择器 一级子元素选择器 id选择器 class选择器 伪类选择器
选择某个父元素的直接子元素 后代选择器是选择父元素的所有子孙元素,一级子元素原则器只选择第一级子元素。
:hover鼠标移入某个元素 .box:hover{ color:red; } :before在某个元素的前面插入内容 div:before{ content: '内容'; background-color: yellow; color: red; font-weight: bold; } :after在某个元素的后面插入内容 div:after{ content: '内容'; background-color: yellow; color: red; font-weight: bold; }
群组选择器 可以对多个不同的选择器设置相同的样式
选择器的优先级:
权重计算方式:
标签选择器:1, class选择器:10, id选择器:100, 行内样式:100, !important最高级别,提高样式权重,拥有最高级别 就近原则
css样式属性
background-color background-image background-position 背景图片不会占位
背景图片重复background-repeat
background-repeat: no-repeat no-repeat: 设置图像不重复,常用 round: 自动缩放直到适应并填充整个容器 space:以相同的间距平铺且填充满整个容器
背景图片定位 background-attachment
background-attachment:fixed
背景图像是否固定或者随着页面的其余部分滚动
background-attachment的值可以是scroll跟随滚动,fixed固定。
字体
font-family字体 font-size font-weight: normal,bold,bolder,lighter,100-900(400=normal,700=bold)
color字体颜色
字体斜体font-style normal文本正常显示 italic文本斜体显示 oblique文本倾斜显示
文本属性 行高line-height 文本水平对齐方式 text-align left,center,right
文本所在行高的垂直对齐方式vertical-align
baseline默认 sub垂直对齐文本的下标 super垂直对齐文本的上标 top对象的顶端与所在容器的顶端对齐 text-top对象的顶端与所在行文字顶端对齐
middle元素对象基于基线垂直对齐 bottom对象的底端与所在行的文字底部对齐 text-bottom对象的底端与所在行文字的底端对齐
文本缩进text-indent text-indent: 2em;
字母之间的间距letter-spacing
单词之间的间距word-spacing
文本的大小写: text-transform
capitalize:文本中的每个单词以大写字母开头 uppercase:定义仅有大写字母 lowercase:定义仅有小写字母
文本的修饰text-decoration none默认 underline下划线 overline上划线 line-through中线
自动换行word-wrap
word-wrap: break-word;
基本样式: width height
cursor鼠标样式: 定义鼠标的样式cursor:pointer
default:默认 pointer:小手形状 move:移动形状
透明度opacity opacity:0.3
可见性:visibillity
visibility: hidden visible 元素可见 hidden 元素不可见
collapse:当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局。
溢出隐藏overflow
设置当对象的内容超过其指定高度以及宽度时如何显示内容
visible默认值,内容不会被修剪,会呈现在元素框之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪,则浏览器会显示滚动条以便查看
边框颜色: outline
input文本框入框自带边框,我们可以通过outline修改边框
outline: 1px solid #ccc;
outline: none 清除边框
样式重置:
一开始没有css样式,为了界面美观,很多元素自带margin,padding等样式,但这些样式在不同浏览器的值都是不一样的,需要将css样式重置,保证在不同浏览器中显示一致。 清除元素的margin和padding 去掉自带的列表符 去掉自带的下划线
*请认真填写需求信息,我们会在24小时内与您取得联系。