Web——网站开发基础

2021-07-19T10:55:00

1.Web服务工作基本原理

1.接收数据 2. 发送数据 3. 数据处理
Web服务器的本质就是 接收数据 ⇒ HTTP解析 ⇒ 逻辑处理 ⇒ HTTP封包 ⇒ 发送数据
高级的服务器无非就是将这三个部分更加细致的设计了

2.前端开发三剑客

基本的前端实现常用:HTML+CSS+JS
html:是一些网页控件
css:是美化这些控件的代码(层叠样式表)
js(javascript):是种增强表现力的脚本语言,可以做出很多动态及交互性较强的效果

2.1 HTML

  • HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)

HTML的常用标签:

w3cschool有更全面的常用标签:[button color="info" icon="" url="https://www.w3school.com.cn/tags/index.asp" type="round"]Click Here[/button]

HTML的层级结构:

一个HTML文档就像一个大的家族树,有父母、兄弟姐妹、子女、祖先和后裔。
它来自于HTML元素之间相互嵌套的能力。就像:

<!DOCTYPE html>
<html>
    <head>
        <title>a</title>
    </head>
    <body>
        <table>
            <caption>Flight list</caption>
            <tr>
                <th>Category1</th>
                <th>Category2</th>
            </tr>
                <td>this is 1</td>
                <td>this is 2</td>
        </table>
    </body>
</html>

引用文件路径:

绝对路径:C:/draw/pic/IMG/img.gif

相对路径:./IMG/img.gif

2.2 CSS

  • CSS 是一种描述 HTML 文档样式的语言。
  • CSS 描述应该如何显示 HTML 元素。

CSS的语法

CSS 规则集(rule-set)由选择器和声明块组成
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。

如下例子:

p {
  color: red;
  text-align: center;
}

在此例中,所有 <p>元素都将居中对齐,并带有红色文本颜色:

CSS的使用

有三种插入样式表的方法:

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

外部 CSS

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

<link rel="stylesheet" type="text/css" href="mystyle.css">

内部CSS

内部样式是在 head 部分的 <style> 元素中进行定义。

<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>

行内CSS

如需使用行内样式,请将 style 属性添加到相关元素

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

2.3 JS

JavaScript 是 Web 的编程语言,它对网页行为进行编程,所有现代的 HTML 页面都使用 JavaScript。

JS的作用

  • JavaScript 能够改变 HTML 内容
  • JavaScript 能够改变 HTML 属性
  • JavaScript 能够改变 HTML 样式 (CSS)
  • JavaScript 能够隐藏 HTML 元素
  • JavaScript 能够显示 HTML 元素

JS的使用

<script> 标签

在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。
实例:

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

JavaScript 函数和事件

JavaScript 函数是一种 JavaScript 代码块,它可以在调用时被执行。
例如,当发生事件时调用函数,比如当用户点击按钮时。

<head> 或 <body> 中的 JavaScript

您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中,或兼而有之。

外部脚本

脚本可放置与外部文件中:
外部脚本很实用,如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js
如需使用外部脚本,请在 <script> 标签的 src (source) 属性中设置脚本的名称:
例如外部文件:myScript.js 在其中引用

//本地文件
<script src="myScript.js"></script>
//网络文件
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

您可以在 <head> 或 <body> 中放置外部脚本引用。
该脚本的表现与它被置于 <script> 标签中是一样的。
但它有如下优势:

  • 分离了 HTML 和代码
  • 使 HTML 和 JavaScript 更易于阅读和维护
  • 已缓存的 JavaScript 文件可加速页面加载

以上便是HTML/CSS/JS的基础内容 想要了解更多也可以前往

w3school : https://www.w3school.com.cn/

runoob : https://www.runoob.com/

.....
等教程站探索耶!

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »