1. 前端与后端
* 1. 前端开发指的是网页设置. 在浏览器看到网站的图片, 文件, 音频视频等内容排版都是由前端开发人员实现的.
后端开发是为前端提供数据内容和业务逻辑, 如: 提供文字内容, 图片, 音频视频的路径地址.
* 2. 前端开发人员必须掌握HTML, CSS, JavaScript的基础语言, 这个基础语言上延伸了许多前端框架,
如: jQuery, BootSTRAP, Vue, React, AngularJS等.
* 3. 后端开发人员必须掌握一种或多种后端开发语言, 数据库应用原理, Web服务器应用原理和基础运维技术.
目前较为热门的后端开发语言: Java, Python, PHP, GO语言等.
数据库: MySQL, MSSQL, Oracle, Redis等.
* 4. 在实际工作中要求后端开发人员掌握基本前端开发技术: 调整网站布局, 编辑简单的JavaScript脚本.
2. HTML
* 1. HTML 超文本标记语言. 超文本指的是页面内容可以包含图片, 链接, 音频视频, 程序等非文字元素.
* 2. 超文本语言的结构包含Head与Body两部分.(头和主体)
Head中: 提供网页的信息.
Body中: 提供网页的具体内容.
* 3. HTML文件是保存后缀为在.html的文件.
2.1 文档结构
* 1. 一个完整的网页必定以<html><html>为开头和结尾,
* 2. 整个HTML可分为两部分:
<head><head>: 主要是对网页的描述, 可以插入元信息, 脚本script, 样式文件CSS.
可以添加的元素标签有: <meta> <title> <style> <link> <script> <noscript> <base>
<body><body>: 是网页的主要载体, 该标签下可以包含很多类型的标签, 不同的标签有不同的作用,
标签以<>开头以</>结尾( 也有单<>的标签.), 在此之间的内容是标签的属性和值,
每个标签之间可以是相互独立的, 也可以是嵌套, 层层递进的关系.
2.2 标签关系
2.3 Body常用标签
| HTML 标签 | 中文释义 |
|---|
| img | 图片 | | a | 锚 | | strong | 加重(文本) | | em | 强调(文本) | | i | 斜体字 | | b | 粗体(文本) | | br | 换行 | | div | 分隔 | | span | 范围 | | ol | 排序列表 | | ul | 不排序列表 | | li | 列表项目 | | dl | 定义列表 | | h1~h6 | 标签1~标题6 | | p | 段落 | | table | 表格 | | 表格中的一行 | | th | 表格的表头 | | td | 表格中的一个单元格 | | form | 表单 | | input | 表单输入框 |
3. CSS
3.1 描述
CSS 是一种描述 HTML 文档样式的语言.
作用: 为HTML标签添加样式.
* 1. CSS样式是保存在后缀名为.css的文件, 然后在HTML代码中调用CSS样式文件.
* 2. HTML代码中存在多个不同的元素, 并且每个元素的网页布局各不相同, 因此需要使用CSS选择器定位每个元素.
常用选择器: 类别选择器, 标签选择器, ID选择器, 通用选择器, 群组选择器.
3.2 选择器
CSS选择器的语法格式:
选择器的类型 {
属性: 参数;
...
}
1. 在选择器后面添加中括号{}, 在中括号{}面编写具体的样式设置.
2. 多个样式之间需要使用;分号隔开.
3. CSS代码 单/多行注释 /* */
1. 通用选择器 使用 * 星号表示, 设置整个网页的所有元素, 用于网页的整体布局.
2. 标签选择器 使用标签名表示, 如果网页中有多个同名的标签, 会作用于多个标签.
3. 类别选择器 使用.类名标签(类名前面加.点), 作用于class属性设置的值为该类名的标签.
4. id选择器 使用#id值表示(id值前面加#井号), 作用于id属性设置该值的标签.
5. 群组选择器 多个选择器的组合, 选择器之间使用,逗号分隔.
3.3 选择器的使用
在D盘的Django_test下建立一个paga目录
在目录下创建一个index.html文件与index.csc文件.
在PyCharm中打开 page ( File --> open -->选择D盘的page )
编辑index.html文件.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>标题</h1>
<div class="center">
<p>文章段落</p>
<input type="text" id="id_message" placeholder="输入信息">
<br>
<button id="submit">提交</button>
</div>
</body>
</html>
link标签的作用: 在HTML代码中引入CSS文件, 使CSS文件的样式代码能在HTML代码中生效.
使用link标签引入同一个路径的index.css文件,
设置5个不同类型的HTML标签, 分别为<h1> <div> <p> <input> <button>,
为<div>设置class属性, 为<input>, <button>设置了id属性.
在index.css文件中使用选择器选中需要设置样式的标签.
* {
font-size: 30px;
}
h3 {
color: blue;
}
.center {
text-align: center;
}
#id_message {
width:500px
}
#submit, p {
color: red;
}
CSS样式可以直接在HTML文件里编写, 在开发中一般都是分离书写, 这样便于维护的管理.
4. JavaScript
JavaScript 检测JS, 是一种具有函数优先的轻量级, 解释性型的编程语言, 是开发Web页面的脚本语言.
基于原型编程, 多范式的动态语言脚本语言, 并支持面向对象, 命令式和声明式的编程风格.
能被浏览器解析并执行, 也能被用到非浏览器的环境中.
JS可以在HTML文件里编写, 企业开发中采用HTML和JS代码分离.
4.1 引用文件
在paga目录下创建一个index.js文件.
index.js文件中书写JS代码.
function getInfo() {
var txt = document.getElementById('id_message').value
if (txt) {
alert('你的留言: ( ' + txt + ' ) 已经提交!')
} else {
alert('输入为空, 请重新输入!')
}
}
打开index.html文件, 在HTML代码中引入JS文件, 并为button标签添加事件触发.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<h1>标题</h1>
<div class="center">
<p>文章段落</p>
<input type="text" id="id_message" placeholder="输入信息">
<br>
<button id="submit" onclick="getInfo()">提交</button>
</div>
</body>
</html>
在HTML中使用script标签引入JS文件, 使得JS文件的代码能在页面中生效.
button 标签添加了onclick属性, 在用户点击提交按键的时候浏览器会触发属性绑定的getInfo()函数.
4.2 JS事件
| 事假触发 | 说明 |
|---|
| onabort | 图片加载中断时触发 | | onblur | 元素失去焦点时触发 | | onchange | 用户改变文本内容时触发 | | onlick | 鼠标单击某个标签时触发 | | ondblclick | 鼠标双击某个标签时触发 | | onerror | 加载文档或图片时触发某个错误时触发 | | onfocus | 元素获得焦点时触发 | | onkeydown | 某个键盘的键被按下时触发 | | onkeypress | 某个键盘的键被按下或按住时触发 | | onkeyup | 某个键盘的键被松开时触发 | | onload | 某个页面或图像完成加载时触发 | | onmousedown | 某个鼠标按键被按下时触发 | | onmousemove | 鼠标移动时触发 | | onmouseout | 鼠标从某个元素移开时触发 | | onmouseup | 某个鼠标按键被松开时触发 | | onreset | 重置按钮被单击时触发 | | onresize | 窗口或框架被调整尺寸时触发 | | onsubmit | 提交按键被单击时触发 | | onunload | 用户退出页面时触发 |
4.3 DOM对象
JavaScript的document对象简称DOM对象, 它可以定位某个HTML标签并进行操作, 从而实现网页的动态效果.
| DOM 对象方法 | 说明 |
|---|
| close() | 关闭document.open()方法打开的输出流, 并显示选定的数据. | | getElementById(‘id值’) | 获取id=‘id值’的第一个HTML标签对象. | | getElementsByName(‘xxx’) | 获取name=‘xxx’的标签对象, 并以数组表示. | | getElementsByClassName(‘类名’) | 获取class=‘类名’的标签对象, 并以数组表示. | | getElementsByTagName(‘标签名’) | 获取所有该‘标签名’的标签对象, 并以数组表示. | | open() | 收集document.write()或document.writeln()的数据. | | write() | 编写HTML或JavaScript. | | writeln() | 等同write()方法, 但在每个表达式后面自动添加换行符. |
在开发中, 经常使用DOM对象方法定位HTML标签, 然后在对定位的标签进行操作.
|