网页组成的三部分
W3C 标准规定,网页主要由三部分组成:
-
结构:对应的是 HTML 语言
-
表现:对应的是 CSS 语言
-
行为:对应的是 JavaScript 语言
HTML/CSS/JavaScript,是编写网页最基础的语言,也被称为 "Web前端开发三剑客"。
HTML
HTML 是一门语言,所有的网页都是用HTML 这门语言编写出来的,也就是HTML是用来写网页的
HTML(HyperText Markup Language):超文本标记语言:
-
超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。 如上图看到的页面,我们除了能看到一些文字,同时也有大量的图片展示;有些网页也有视频,音频等。这种展示效果超越了文本展示的限制。
-
标记语言:由标签构成的语言 之前学习的XML就是标记语言,由一个一个的标签组成,HTML 也是由标签组成 。
实现网页
实现页面,我们需要从以下三步进行实现:
1.新建文本文件,后缀名改为 .html
2.编写 HTML 结构标签
3.定义文字
html标签是根标签,下面有 head
标签和 body
标签这两个子标签。而 head
标签的 title
子标签是用来定义页面标题名称的,它定义的内容会展示在浏览器的标题位置
例子 <html> <head> <title>html 快速入门</title> </head> <body> <h1>hello world</h1> <img src="1.png" /> </body> </html>
标签
编写基础标签 我们只需要在 body
标签中书写标签。
标题标签< h1> < h2> < h3> < h4> < h5> < h6> h1最大,h6最小。
字体标签:< font>
font:字体标签
-
face 属性:用来设置字体。如 "楷体"、"宋体"等
-
color 属性:设置文字颜色。颜色有三种表示方式
-
-
英文单词:red,pink,blue... 这种方式表示的颜色特别有限,所以一般不用。
-
rgb(值1,值2,值3):值的取值范围:0~255 此种方式也就是三原色(红绿蓝)设置方式。 例如: rgb(255,0,0)。 这种书写起来比较麻烦,一般不用。
-
#值1 值2 值3:值的范围:00~FF 这种方式是rgb方式的简化写法,以后基本都用此方式。 值1表示红色的范围,值2表示绿色的范围,值3表示蓝色范围。例如: #ff0000
-
-
size 属性:设置文字大小
hr标签hr
标签在浏览器中呈现出 横线 的效果
居中标签 < center> 文本居中 </ center>
加粗、斜体、下划线标签
-
b:加粗标签
-
i:斜体标签
-
u:下划线标签,在文字的下方有一条横线
换行标签 < br>
段落标签 < br> 如果有一段文件比较长,不方便阅读,此时我们可以根据文章的内容适当的进行换行操作
段落标签< p>
图片、音频、视频标签
-
img:定义图片
-
-
src:规定显示图像的 URL(统一资源定位符)
-
height:定义图像的高度
-
width:定义图像的宽度
-
-
audio:定义音频。支持的音频格式:MP3、WAV、OGG
-
-
src:规定音频的 URL
-
controls:显示播放控件
-
-
video:定义视频。支持的音频格式:MP4, WebM、OGG
-
-
src:规定视频的 URL
-
controls:显示播放控件
-
尺寸单位:
height属性和width属性有两种设置方式:
-
像素:单位是px
-
百分比。占父标签的百分比。例如宽度设置为 50%,意思就是占它的父标签宽度的一般(50%)
资源路径:
图片,音频,视频标签都有src属性,而src是用来指定对应的图片,音频,视频文件的路径。此处的图片,音频,视频就称为资源。资源路径有如下两种设置方式
绝对路径:完整路径 这里的绝对路径是网络中的绝对路径。 格式为: 协议://ip地址:端口号/资源名称。
相对路径:相对位置关系 找页面和其他资源的相对路径。
./ 表示当前路径
../ 表示上一级路径
../../ 表示上两级路径
超链接标签
a
标签属性:
-
href:指定访问资源的URL
-
target:指定打开资源的方式
-
-
_self:默认值,在当前页面打开
-
_blank:在空白页面打开
-
_parent:在父窗口中打开链接。
-
_top:在当前窗体打开链接,并替换当前的整个窗体(框架页)。
-
表格标签
格可以使用如下标签定义
-
table :定义表格
-
-
border:规定表格边框的宽度
-
width :规定表格的宽度
-
cellspacing:规定单元格之间的空白
-
-
tr :定义行
-
-
align:定义表格行的内容对齐方式
-
-
td :定义单元格
-
th:定义表头单元格
布局标签
>
div
标签 在浏览器上会有换行的效果,而 span
标签在浏览器上没有换行效果
表单标签
表单就是用来采集用户输入的数据,然后将数据发送到服务端,服务端会对数据库进行操作,比如注册就是将数据保存到数据库中,而登陆就是根据用户名和密码进行数据库的查询操作
表单组成:
表单:在网页中主要负责数据采集功能,使用标签定义表单
表单项(元素):不同类型的 input 元素、下拉列表、文本域等
form
是表单标签,它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。
form标签属性
action:规定当提交表单时向何处发送表单数据,该属性值就是URL 以后会将数据提交到服务端,该属性需要书写服务端的URL。而今天我们可以书写 #
,表示提交到当前页面来看效果。
method :规定用于发送表单数据的方式
method取值有如下两种
get:
默认值。如果不设置method属性则默认就是该值
请求参数会拼接在URL后边
url的长度有限制 4KB
post:
浏览器会将数据放到http请求消息体中
请求参数无限制的
表单项标签
<input>:表单项,通过type属性控制输入形式 ,不同的表单项标签有不同的展示效果
input
标签有个 type
属性。 type
属性的取值不同,展示的效果也不一样
:定义下拉列表 定义列表项
-
以上标签项的内容要想提交,必须得定义
name
属性。 -
每一个标签都有id属性,id属性值是唯一的标识。
-
单选框、复选框、下拉列表需要使用
value
属性指定提交的值。
css
CSS 是一门语言,用于控制网页表现
css 引入方式
其实就是 css 代码和 html 代码的结合方式。CSS 引入 HTML有三种方式:
1.内联样式:在标签内部使用style属性,属性值是css属性键值对
2.css 选择器
元素选择器 元素名称{color: red;}
id选择器 #id属性值{color: red;}
类选择器 .class属性值{color: red;}
JavaScript
JavaScript 是一门跨平台、面向对象的脚本语言,而Java语言也是跨平台的、面向对象的语言,只不过Java是编译语言,是需要编译成字节码文件才能运行的;JavaScript是脚本语言,不需要编译,由浏览器直接解析并执行。
控制网页行为的:JavaScript 改变页面内容、修改指定元素的属性值、对表单进行校验等
JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种:
-
内部脚本:将 JS代码定义在HTML页面中
-
外部脚本:将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中
内部脚本在 HTML 中,JavaScript 代码必须位于 <script>
与 </script>
标签之间
外部脚本
第一步:定义外部 js 文件。如定义名为 demo.js的文件
第二步:在页面中引入外部的js文件
输出语句
window.alert() 写入警告框
document.write() 写入 HTML 输出
console.log() 写入浏览器控制台
变量
格式 var 变量名 = 数据值;
js 中的变量名命名也有如下规则,和java语言基本都相同
-
组成字符可以是任何字母、数字、下划线(_)或美元符号($)
-
数字不能开头
-
建议使用驼峰命名
JavaScript 中 var
关键字有点特殊,有以下地方和其他语言不一样
作用域:全局变量
变量可以重复定义 var可重复定义 let 不允许重复定义
ECMAScript 6 新增了 let
关键字来定义变量。它的用法类似于 var
,但是所声明的变量,只在 let
关键字所在的代码块内有效,且不允许重复声明。
数据类型
JavaScript 中提供了两类数据类型:原始类型 和 引用类型。
原始数据类型
number:数字(整数、小数、NaN(Not a Number))
string:字符、字符串,单双引皆可
boolean:布尔。true,false
null:对象为空
undefined:当声明的变量未初始化时,该变量的默认值是 undefined
运算符
-
一元运算符:++,--
-
算术运算符:+,-,*,/,%
-
赋值运算符:=,+=,-=…
-
关系运算符:>,<,>=,<=,!=,==,===…
-
逻辑运算符:&&,||,!
-
三元运算符:条件表达式 ? true_value : false_value
==和===区别
==会自动类型转换比较
判断类型是否一样,如果不一样,则进行类型转换
再去比较其值
===是js 中的全等于 ,不自动类型转换比较
判断类型是否一样,如果不一样,直接返回false 再去比较其值
类型转换
其他类型转为number
string 转换为 number 类型:按照字符串的字面值,转为数字。如果字面值不是数字,则转为NaN。将 string 转换为 number 有两种方式
使用 +
正号运算符
使用 parseInt()
函数(方法)
boolean 转换为 number 类型:true 转为1,false转为0
-
number 类型转换为 boolean 类型:0和NaN转为false,其他的数字转为true
-
string 类型转换为 boolean 类型:空字符串转为false,其他的字符串转为true
-
null类型转换为 boolean 类型是 false
-
undefined 转换为 boolean 类型是 false
-
流程控制语句
-
-
if
-
switch
-
for
-
while
-
dowhile
-
-
建议for循环小括号中定义的变量使用let
-
函数
-
function 函数名(参数1,参数2..){ 要执行的代码 }
-
var 函数名 = function (参数1,参数2..){ 要执行的代码 }
-
形式参数不需要类型。因为JavaScript是弱类型语言
-
返回值也不需要定义类型,可以在函数内部直接使用return返回即可
-
JS中,函数调用可以传递任意个数参数 但必须有变量去接收