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」版。发表评论请点击：完整版 »

Web——网站开发基础

1.Web服务工作基本原理

2.前端开发三剑客

2.1 HTML

HTML的常用标签：

HTML的层级结构：

引用文件路径：

2.2 CSS

CSS的语法

CSS的使用

外部 CSS

内部CSS

行内CSS

2.3 JS

JS的作用

JS的使用

<script> 标签

JavaScript 函数和事件

<head> 或 <body> 中的 JavaScript

外部脚本