自制预防校园暴力的智能监控系统:学习前端

本文是【小码哥李明杰老师】指导完成的山东大学引航计划公益人工智能科研实训项目。

自制预防校园暴力的智能监控系统。

学前须知

软件开发

分类

  • 客户端开发:
    • 移动开发(Android、iOS)
    • 桌面端开发(C++、C#、JS)
    • 前端开发(JS)
    • 嵌入式开发(C、汇编)
  • 后台开发(服务器):Java、C++、PHP、.NET、Python、Go(最重要最关键)
  • 算法开发:Python

项目简介

项目目标

基于Python全栈实现一个预防校园暴力的智能监控系统。

项目牵扯到的技术领域

前端(HTML、CSS、JS、React等)
后端(Python、Linux、云服务器)
算法实现(Python)

前端开发

开发网站

网页的组成

网站与网页的关系:一个网站由N个网页组成(N>=1)。
一个完整的网页一般由3部分组成:

  • HTML:内容(文字+图片)
  • CSS:美化(皮肤)
  • JavaScript(简称JS):灵魂

右键点“检查”或F12,网页右面会出现前端代码界面。
一般会把CSS拆开来单独讲解

HTML

body:内容
Ctrl+滚轮:可放大缩小
直接点图标:自动刷新,如下图:
在这里插入图片描述

写代码(工具):VSCode(微软)、WebStorm(JetBrains)

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的网页title>
head>
<body>
<img src="2.png">

<a href="https://www.baidu.com/" target="_blank">百度一下a>
<h1>我是h1h1>
<h1>我是h2h1>
<h1>我是h3h1>
<input type="color">
<input type="text">
<input type="checkbox">
body>
html>

自制预防校园暴力的智能监控系统:学习前端_第1张图片

DOCTYPE html>>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSStitle>
head>
<body>
<span>我是span1span>
<span>我是span2span>
<span>我是span3span>
<div>我是div1div>  /* 独占一行 */
<div>我是div2div>
<div>我是div3div>
<div>
    <span style="color: blue;font-size: 80px;">用户名:span>
    <input type="text">
div>
<div>
    <span style="color: red;font-size: 40px;">密码:span>
    <input type="password">
div>
<div>
    <button>登录button>
div>
body>
html>

自制预防校园暴力的智能监控系统:学习前端_第2张图片

你可能感兴趣的:(html,css)