网页的大致框架

发布于 8 天前  61 次阅读


注:网页大致组成框架是html、css、js,以下是基于我个人的理解写的

1、html(网站的框架骨骼)

用来写文字标题和挂图片的,排好版的,把网站比作房子,这玩意就和装房子的砖头一样,个人觉得他就是核心,用来显示出你网页上可以看见的东西,文字,界面,图片,按钮,输入框,基本都要靠这玩意。

2、css(网站的美化)

当你大致骨架写好了,就要进行美化了,比如字体的样式和大小颜色,这就好比装修时的家具这些,当然你不用也不影响正常使用,当然那样很不美观,而且网站看起来会很反人类。

3、js(网站的交互)

你看很多网站你点击或者翻看,其都会有对应的反应,js就是用来处理这些事情的,不然你的网站就是个死的网页,没有任何交互功能。就好比新房子里的电视机你打开就会显示出界面。

4、总的一些基础语法

(1)html的语法

<!DOCTYPE html>

<html>

<head>

<title>标题内容</title>

</head>

<body>

主体内容

</body>

</html>

1、写标题:<h1>一级标题</h1><h2>二级标题</h2>(h1 最大,h6 最小)

2、写段落文字:<p>这是一段普通文字</p> 换行:<br>(用来另起一行的)

3、加图片:<img src="图片地址">(把图片地址换成自己的就行)

4、做链接:<a href="跳转地址">点我去百度</a>

5、加粗文字:<strong>重要的内容</strong>

6、列表

<ul>

<li>苹果</li>

<li>香蕉</li>

</ul>

7、按钮:<button>按钮</button>

(2)css的语法

<head>

<style>

/* 这里写样式 */

p { color: 红色; } /* 把所有段落文字改成红色 */

h1 { font-size: 30px; } /* 把一级标题调大 */

body { background-color: 浅灰色; } /* 给网页换背景色 */

.box { width: 200px; height: 200px; background: 白色; } /* 做一个白色方块 */

</style>

</head>

  1. 改文字颜色:color: 颜色名;(比如 red 红色、blue 蓝色)
  2. 改文字大小:font-size: 20px;
  3. 内容居中:text-align: center;
  4. 改背景颜色:background-color: 颜色名;
  5. 给方块加圆角:border-radius: 10px;

(3)js的语法

<script> // 互动代码 </script>

弹出提示

<button onclick="alert('你好呀!')">点我试试</button>

改网页文字

<p id="demo">原来的文字</p>

<button onclick="document.getElementById('demo').innerText = '改后的文字啦'">点我改字</button>

计算

<script> let a = 10; let b = 20; alert(a + b); // 弹窗显示结果30 </script>

这些都是最基础的,本人想到的,如果要真正详细的去学还要学习更多的东西。


成功只有一个——按照自己的方式,去度过人生。