前端基础——web设计
一、常说的javaweb是什么？
如何进行网页设计？在csdn上的网页是如何设计出来的。在学完java基础后javaweb则是真正企业所需的技术。网页设计分为前端、后端、数据库端。前端就是我们能够看到的，后端则是我们看不到的，这部分代码负责逻辑运行。数据库端则是存放数据的。在进行网页开发是浏览器发挥着重要的作用，浏览器解析渲染前端代码展示给我们空架子。前端发送请求给后端，后端请求数据库端进行响应后在浏览器上展现实实在在的东西。在进行web开发时这三大类都是必不可少的，我们看到的往往是最简单的，接下来我将讲讲javaweb开发最简单的部分前端。
二、前端所需要的工具：html、css、js、vue以及所发挥的作用
①HTML
html负责网页元素、内容等网页结构的添加。当我们只用html设计网页时出现下面这幅图
②CSS
css负责网页颜色大小等网页表现的构造。通过html和css基本能够完成前端新闻网页设计
③javascript
javascript则是对网页行为进行设计，比如交互效果鼠标点击事件、跳转焦点凝聚等
④Vue
Vue则是真正进行企业开发的模版软件，具有模块化、组件化、规范化、自动化。
三、小案例之新闻页面制作
比如这则新闻，我们用html+css就能够制作出来排版。标题的制作、段落制作、作者图片如何引入等。用一端代码来解释一下：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星期五网---体育新闻</title>
<link rel="stylesheet" href="./新闻网页添加.css">
</head>
<body>
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png";
> <a href="https://news.sina.com.cn/china/" target="_self"> 首页</a>>正文
<h1>
欧洲杯今夜看点：豪门对决！姆巴佩PK卢<br>
卡库 C罗率葡萄牙能否破魔咒
</h1>
<!-- h1为最大标题，总共h1-h6 --> 注释ctrl+/
<p>
正文
</p>
</body>
</html>CSS代码：
h1{
position:absolute;
top: 140px;
left: 190px;
font-size: 40px;
color: #333333;
}h1{}这种就是css选择器，对h1标题元素进行css改造。还有类选择器、id选择器，比如：
html上进行：
<h1 class="标题">
正文
</h1>
<h2 id="123">
正文
</h2>css上进行类选择器对应.h1 id选择器对应#
.h1{
text-align:right;
}
#h2{
text-align:right;
}html与css的代码规范很松出现不规范的也不会出错。
四、JS小案例之交互
在进行JS时我们要学习一下JS的代码语法，其实他的代码与java非常相似。会java基本会JS了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DNM小案例</title>
<link rel="stylesheet" href="./dom练习.css">
</head>
<body >
<img id="h1" src="./off.gif" ><br><br>
<input type="button" value="点亮" id="ch55" >
<input type="button" value="熄灭" id="ch99"><br><br>
<input type="text" value="CS" id="name" ><br><br>
<input type="checkbox" name="comment">电影
<input type="checkbox" name="comment">动漫
<input type="checkbox" name="comment">电视剧<br>
<input type="button" value="全选" id="ch150">
<input type="button" value="反选" id="ch151">
<script src="./DOM行为.js"></script>
</body>
</html>
document.getElementById('ch55').onclick=function(){
var img=document.getElementById('h1'); //获取元素
img.src="./on.gif";
}
document.getElementById('ch99').onclick=function(){
var img=document.getElementById('h1') ; //获取元素
img.src="./off.gif";
}
document.getElementById('name').onfocus=function(){
var input=document.getElementById('name');
input.value=input.value.toLowerCase();
}
document.getElementById('name').onblur=function(){
var input=document.getElementById('name');
input.value=input.value.toUpperCase();
}
document.getElementById('ch150').onclick=function(){
var choose1=document.getElementsByName('comment');
for (let i1 = 0; i1 < choose1.length; i1++) {
const element1 = choose1[i1];
element1.checked=true;
}
}
document.getElementById('ch151').onclick=function(){
var choose2=document.getElementsByName('comment');
for (let i2 = 0; i2 < choose2.length; i2++) {
const element2 = choose2[i2];
element2.checked=false;
}
}这个基本实现了对JS对网页行为的设计鼠标点击事件等
原文地址：https://blog.csdn.net/2301_80788553/article/details/140105079
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！