2021年8月15日总结笔记【Web开发】

Web开发

设计网页外观

  • 做出计划

    你的网站要达到哪种目的？

    网站的主题是什么？是狗、上海城市还是吃豆人？
    基于所选主题要展示哪些信息？写下标题和几段文字，构思一个用于展示的图形。
    网站采用怎样的外观？用高阶术语说就是，选什么背景色？什么字体（正式的还卡通的，粗体还是细体）？

    我们要先写出包含了标题、图像，以及数段文字的简单网页。

  • 绘制草图

    接下来，拿出纸笔画出网站草图。虽然第一个简单网页能做的不多，但最好在一开始就该养成这样的习惯。（画草图很有用，而且并不需要梵高的手法。）
    image

处理文件

  • 网站应该保存在何处

    对于本地网站，应将所有相关文件放在一个单独文件夹中，可以映射出服务器端站点文件结构。文件夹存在哪儿都可以，只要容易找到，比如桌面、用户目录，或是系统根目录。

  • 关于大小写和空格

    很多计算机，特别是 Web 服务器，是对大小写敏感的。比如，如果你保存一张图片 test-site/MyImage.jpg，然后在另一处试图以 test-site/myimage.jpg 访问这张图片，可能会失败。
    浏览器、Web 服务器，还有编程语言处理空格的方式不一致。一些系统会将包含空格的文件名其视为两个；一些服务器将会把文件名里的空格替换为 “%20”（URI 里空格的编码），从而使链接遭到破坏。最好使用中划线，而不是下划线来分离单词：对比 my-file.html 和 my_file.html 。
    文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符， 但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线而不是空格来分隔。可以避免许多问题。（HTML和CSS用中划线命名，JS用驼峰命名法。）

  • 网站应该采用什么结构

    下面来看看测试网站应该使用什么结构。最基本、最常见的结构是：一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹：

    index.html ：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像。使用文本编辑器在 test-site 文件夹中新建 index.html。
    images 文件夹 ：这个文件夹包含站点中的所有图像。在 test-site 文件夹中新建 images 文件夹。
    styles 文件夹 ：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）。在 test-site 文件夹中新建一个 styles 文件夹。
    scripts 文件夹 ：这个文件夹包含提供站点交互功能的 JavaScript 代码（比如读取数据的按钮）。在 test-site 文件夹中新建一个 scripts 文件夹。

  • 文件路径

    文件路径的一些通用规则：

    若引用的目标文件与 HTML 文件同级，只需直接使用文件名。
    要引用子文件夹中的文件，要在路径前写下目录名并加一个斜杠，比如 xx/xx 。
    若引用的目标文件位于 HTML 文件的上级，需要加上两个点。比如： ../xx。
    以上方法可以随意组合，比如 ../xx/xx/xx。

注：Windows 文件系统使用反斜杠而不是正斜杠，比如 C:\Windows 。但与 HTML 没什么关系，即使在 Windows 上做 Web 开发，代码中仍应使用正斜杠。

HTML（HyperText Markup Language）

  • HTML：超文本标记语言。他不是一种编程语言，而是一种标记语言，作用是构建网页结构。
    HTML由一系列元素组成，一个元素具有标签（开始标签、结束标签）、内容、属性。
    属性应包括空格：与上一个属性或元素名称之前做间隔；属性的名称并且接上等于号；由引号包围的属性值。 <p class="example">这是一个示例</p>

  • 嵌套元素：将一个元素置于其他元素之中。
    <p> 这是一个<strong>嵌套</strong>的例子</p>

    必须保证嵌套顺序正确,元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测，虽然它会竭尽全力，但很大程度不会给你期望的结果。所以一定要避免！

  • 空元素：不包含任何内容的元素称为空元素。比如<img>元素。

    例：<img src="images/firefox-icon.png" alt="测试图片">

    此元素包含两个属性，但是并没有</img>结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

  • HTML文档格式：

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>

    <!DOCTYPE html> 文档类型：
    混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。 DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。

    <html></html> <html> 元素：该元素包含整个页面的内容，也称作根元素。

    <head></head> <head> 元素：该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。

    <meta charset="utf-8"> 该元素指定文档使用 UTF-8 字符编码 ，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。

    <title></title> <title> 元素：该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。

    <body></body> <body> 元素：该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

CSS（Cascading Style Sheet）

  • CSS：层叠样式表，是为网页添加样式的代码。和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，也就是说人们可以用它来选择性地为 HTML 元素添加样式。

    要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：p {color: red;}
    不妨试一下：首先新建一个 styles 文件夹，在其中新建一个 style.css 文件，将 CSS 保存在这个新文件中。
    然后再将该 CSS 文件连接至 HTML 文档，否则 CSS 代码不会对 HTML 文档在浏览器里的显示效果有任何影响。

    在head里写下：<link href="styles/style.css" rel="stylesheet">

  • CSS规则集

    image

    选择器（Selector）
    HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
    声明（Declaration）
    一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
    属性（Properties）
    改变 HTML 元素样式的途径。（本例中 color 就是<p>元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。
    属性的值（Property value）
    在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

    注意其他重要的语法：

    • 每个规则集（除了选择器的部分）都应该包含在成对的大括号里{ }。
    • 在每个声明里要用冒号:将属性与属性值分隔开。
    • 在每个规则集里要用分号;将各个声明分隔开。

    如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：
    p {color: red;width: 500px;border: 1px solid black;}

  • 多元素选择
    也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：
    p, li, h1 {color: red;}

  • 不同类型的选择器
    元素选择器（标签选择器）：p 选择 <p>
    ID选择器：#my-id 选择 <p id="my-id"> 或 <a id="my-id">
    类选择器：.my-class 选择 <p class="my-class"> 和 <a class="my-class">
    属性选择器：img[src] 选择 <img src="myimage.png"> 而不是 <img>
    伪类选择器：a:hover 仅在鼠标指针悬停在链接上时选择 <a>。（特定状态下的特定元素）

  • 字体和文本
    这条规则首先为整个页面设定了一个全局字体和字号（因为<html>是整个页面的父元素，而且它所有的子元素都会继承相同的 font-size 和 font-family）：

    html {
    /* px 表示 “像素（pixels）”: 基础字号为 10 像素 */
    font-size: 10px;
    /* Google fonts 输出的 CSS */
    font-family: 'Open Sans', sans-serif;
    }
    注：CSS 文档中所有位于 /* 和 */ 之间的内容都是 CSS 注释，它会被浏览器在渲染代码时忽略。你可以在这里写下对你现在要做的事情有帮助的笔记。CSS 不接受 // 注释。

    接下来为文档体内的元素<h1>、<li> 和 <p>设置字号。将标题居中显示，并为正文设置行高和字间距，从而提高页面的可读性。
    h1 {
    font-size: 60px;
    text-align: center;
    }
    p, li {
    font-size: 16px;
    /* line-height 后而可以跟不同的参数，如果是数字，就是当前字体大小乘上数字 */
    line-height: 2;
    letter-spacing: 1px;
    }

  • 一切皆盒子
    编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

    并不意外，CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：
    padding：即内边距，围绕着内容（比如段落）的空间。
    border：即边框，紧接着内边距的线。
    margin：即外边距，围绕元素外部的空间。
    image
    这里还使用了：

    width ：元素的宽度
    background-color ：元素内容和内边距底下的颜色
    color ：元素内容（通常是文本）的颜色
    text-shadow ：为元素内的文本设置阴影
    display ：设置元素的显示模式（暂略）

    更改页面颜色
    html {
    background-color: #00539F;
    }
    文档体格式设置
    body {
    width: 600px;
    margin: 0 auto;
    background-color: #FF9500;
    padding: 0 20px 20px 20px;
    border: 5px solid black;
    }

    • width: 600px; —— 强制页面永远保持 600 像素宽。
    • margin: 0 auto; —— 为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，参考 这里 。
    • background-color: #FF9500; —— 如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的 元素形成反差，你也可以尝试其它颜色。
    • padding: 0 20px 20px 20px; —— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为20像素。值以上、右、下、左的顺序排列。
    • border: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框。

    定位页面主标题并添加样式
    h1 {
    margin: 0;
    padding: 20px 0;
    color: #00539F;
    text-shadow: 3px 3px 1px black;
    }

    你可能发现页面的顶部有一个难看的间隙，那是因为浏览器会在没有任何 CSS 的情况下 给 <h1> 等元素设置一些默认样式。但这并不是个好主意，因为我们希望一个没有任何样式的网页也有基本的可读性。为了去掉那个间隙，我们通过设置 margin: 0;来覆盖默认样式。

    需要注意的是，这里使用了一个 text-shadow 属性，它可以为元素中的文本提供阴影。
    四个值含义如下：
    第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
    第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
    第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
    第四个值设置阴影的基色。

    图像居中
    img {
    display: block;
    margin: 0 auto;
    }
    最后，我们把图像居中来使页面更美观。可以复用 body 的 margin: 0 auto ，但是需要一点点调整。 <body> 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。

JavaScript：

  • JavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。

    • JavaScript（缩写：JS）是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。

    • JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

    • JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

    浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。
    第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
    第三方框架和库 —— 用来快速构建网站和应用。

参考

posted @ 2021-08-14 22:54  bokZhang  阅读(60)  评论(0)    收藏  举报