JavaWeb前端技术总结

文章目录

  • 前言
  • 一、HTML
  • 二、CSS
  • 三、JavaScript
  • 四、总结


前言

总的来说,JavaWeb所实现的功能就是网页设计,也可以说是前端开发。而网页主要由三部分组成:内容(结构)、表现、行为。

  1. 内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 html 技术来展示。
  2. 表现,指的是这些内容在页面上的展示形式。比如布局,颜色,大小等等。一般使用 CSS 技术实现
  3. 行为,指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。

一、HTML

  1. HTML全称:Hyper Text Markup Language (超文本标记语言)

HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件, 通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画 面如何安排,图片如何显示等)

  1. 书写格式:
    JavaWeb前端技术总结_第1张图片

注释:在这里插入图片描述

  1. 在IDEA中创建JavaWeb工程,就可以新建一个html文件

hello.html

DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <title>四川成都title>
head>

<body >
hello
<button onclick="alert('中国必胜!!!')">按钮button>
百年<br/>奋斗
<hr/>
为中华之崛起而读书!
body>
html>

4.网页效果:
JavaWeb前端技术总结_第2张图片

二、CSS

  1. CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

  2. 语法规则
p{ color:red;
   font-size:30px; 
   }

JavaWeb前端技术总结_第3张图片

选择器:浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素(标签)。

属性 (property) 是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并 由花括号包围,这样就组成了一个完整的样式声明(declaration),例如:p {color: blue}

多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)

一般每行只描述一个属性

注释: /* */

  1. css编写方式
  • 方式一:直接在html文件中编写(html语句)

1-css.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    
    <div style="border: 1px solid red;">div标签1div>
    <div style="border: 1px solid red;">div标签2div>
    <span style="border: 1px solid red;">span标签1span>
    <span style="border: 1px solid red;">span标签2span>
body>
html>

JavaWeb前端技术总结_第4张图片

  • 方式二:在html文件中编写(在head中:style标签中书写css代码;在body中:直接使用)
    2-css.html
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style type="text/css">
        /* 需求1:分别定义两个 div、span标签,分别修改每个 div 标签的样式为:边框1个像素,实线,红色。*/
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    style>
head>

<body>
    <div>div标签1div>
    <div>div标签2div>

    <span>span标签1span>
    <span>span标签2span>
body>
html>

JavaWeb前端技术总结_第5张图片

  • 方式三:单独编写css文件,然后在html文件中引入css文件

1.css

div{
     border: 1px solid yellow;
 }
span{
    border: 1px solid red;
}

3-css.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <link rel="stylesheet" type="text/css" href="1.css"/>

head>

<body>
    <div>div标签1div>
    <div>div标签2div>

    <span>span标签1span>
    <span>span标签2span>
body>
html>

JavaWeb前端技术总结_第6张图片

三、JavaScript

  1. 定义

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行 JavaScript 代码。

  1. 书写格式

注释://

JavaScript通常与html语言结合使用:

  • 方式一:直接在html文件中编写javascript代码,并执行
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <script type="text/javascript">
    	//js语句注释:
        // alert是JavaScript语言提供的一个警告框函数。
        // 它可以接收任意类型的参数,这个参数就是警告框的提示信息
        alert("hello javaScript!");
    script>
head>
<body>

body>
html>

JavaWeb前端技术总结_第7张图片

  • 方式二:单独编写js文件(里面是js语句),然后在html文件中调用

1.js文件

alert("1125 hello!");

02-hello.html文件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <script type="text/javascript" src="1.js">script>
    <script type="text/javascript">
        alert("国家富强!");//方式一
    script>
head>
<body>

body>
html>

JavaWeb前端技术总结_第8张图片
JavaWeb前端技术总结_第9张图片

四、总结

JavaWeb前端技术总结_第10张图片

你可能感兴趣的:(前端设计,前端,html,javascript,css)