一、初识web网页
web应用程序分为前端与后台 。
后台总而言之就是负责数据处理。
前端不仅仅是用户界面,一些简单的安全性要求不高的数据处理就可以放在前端进行(比如用js编写),以及对场景的渲染、动画的处理、页面逻辑、基本骨架。
二、web前端
分为html、css、javascript三块内容
三、初识html (hypertext markup language) 超文本标记语言
首先展示一下html基本框架
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
代码解释:网页全部信息都包括在<html></html>标记中,<head></head>标记包含网页一些说明性的或者配置性的信息,<body></body>标记包含网页的主要信息。
Html 是由标签组成的脚本语言,大小写不敏感。约定使用小写(约定优先于配置)。
<!DOCTYPE>不是html标记,全称是 document type html 意思是:文件类型是html。
四、Html 重要标签
在<head></head>中有:
<title>XXXXX</title>顾名思义“XXXXX”就是你想要的网站标题。
<meta charset=”UTF-8”> 这个是说明网站的编码格式是UTF-8。
Meta 常用的属性:name、content。name常用的属性值是keywords 用于搜素引擎对关键字的搜索使用形式如下:
<meta name=”keywords” content=”XXXXXXX”>
<body></body>中:
常见的文本修饰标记:
<b></b> 定义粗体
<i></i> 定义斜体
<u><u/> 定义下划线
<del></del> 定义删除线
<sup></sup> 定义上标
<sub></sub> 定义下标
<strong></strong> 定义着重文字
<em></em> 定义加重文字
<small></small> 定义小号文字
<big></big> 定义大号文字
其中<strong></strong>可以代替<b></b>,<em></em>可以代替<i></i>
现在还常见的计算机输出标记
<code></code> 定义计算机代码
<var></var> 定义变量
上述的两类标记看一下就好一般用不着,因为大部分标记的功能可以通过其他标记加CSS实现
几种常用的标记:
<div></div>、<span></span>,这两个前者叫块标记后者叫行标记(行内标记)。
区别是 快标记需要独占一行被快标记包含的元素会自动换行,行标记可以包含html的各种元素,只不过其中的元素会在一行内显示。
段落p标记
<p></p> 是一个快标记该标记不能包含其他标记。
换行br标记
<br>或者</br> 是一个单标记,什么是单标记?单标记就是又开始没有结尾或有结尾没有开始的标记
水平分割线hr标记
<hr> 在屏幕上出现一条水平的线
框架
在一个页面显示多个网页的技术
<frameset></frameset>是框架集用以代替<body></body>。在frameset中不能有body,frameset是frame的集合。frame是框架<frame></frame>,也只能存在与frameset中。
frameset属性:
frameborder: 设置框架的显示效果(是否显示边框“0或1”)
framespacing : 设置框架间的间距
border : 设置框架集边框的宽度
bordercolor: 设置框架集边框的颜色
rows: 设置框架集水平分割
cols: 设置框架集的垂直分割
frame的设置
name : 设置框架的名字
src: 设置框架中加载的html的路径
scrolling: 设置滚动条“yes|no|auto”,yes(显示滚动条),no(不显示),auto(自 动)
marginwidth: 设置边框的宽度
marginheight: 设置边框的高度
noresize: 可以赋值“noresize”,也可以不赋值,表示不允许调整窗体大小。
浮动框架iframe
浏览器窗中孤立的子窗口(也称为内联框架)。
主要的属性为 name、src、width、height。
超链接a标记
<a href=”url” name=”” title=”提示信息” target=”窗口名称”>超链接标题</a>
属性说明:
Href:链接指向的目标文件
Name: 规定锚的名称(用于后台定位)。
Title;指向链接的提示信息。
Target:指定打开的目标窗口。
Target的取值
_self 在当前框架中打开链接
_blank 在一个全新的空白窗口中打开链接
_top 在顶层框架中打开链接
_parent 在当前框架的上一层打开链接
framename 在指定的框架或浮动框架内打开链接,框架名称可以自定义
图像与多媒体文件
图像<img src=”URL” alt=”替代文本”>
音频和视频
<bgsound src=”背景音乐地址” loop=”循环播放的次数”> //这个不会出现播放的控制界面打开页面自动播放。
<embed></embed> 可以播放的文件类型有SWF、MOV、MPS、WMV、AVI、RMTB。
src: 设置媒体文件的路径
width、height: 设置播放界面的宽度和高度单位为像素,必须设置。
autostart: 逻辑值,ture自动播放,false不自动播放
loop: 逻辑值,ture循环,false不循环。
上述音频和视频标记是过去式来,新版本:
<video></video>、<auido></auido>
video和audio的属性
属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性,则视屏在就绪后马上播放 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮 |
height,width | 像素 | 设置播放器的高度和宽度 |
loop | loop | 循环播放 |
preload | preload | 如果出现该属性,则在页面加载的时候加载视屏,并预备播放。如果使用“autoplay”,则忽略该属性 |
src | url |