• JAVAWEB学习笔记-前端基础

    文章目录

    HTML篇

    HTML简介

    参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML

    https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics

    HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

    “超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

    html是解释型语言。

    HTML元素

    HTML 元素

    这个元素的主要部分有：

    1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
    2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
    3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。
    4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

    下面列举一些常见的元素标签：

    元素是HTML的最基本部件，由成对尖括号**<>**及括号间的内容组成。例如：

    你今天码代码了吗？

    。

    html页面中由一对标签组成；

    是 开始标签， 是 结束标签

    title表示网页的标题，

    可以使用来指定编码方式


    表示换行，br标签是一个单标签

    单标签：开始标签和结束标签是同一个，斜杠放在单词后

    标签表示段落

    标签：

    ​ src属性表示图片路径

    ​ width和height表示图片的大小

    ​ alt表示图片的提示

    、

    、

    、

    、

    、
    ：标题标签

    列表标签：

      • 有序列表标签
        • start表示从*开始， type表示类型[ A,a,1(default),i,I ]
        1. 无序列表标签
        • 内容都用
        • 标签列举

        加粗标签：

        斜体标签：

        下划线标签：

        下标标签：

        上标标签：

        html实体：

        ​ 大于号>：>

        ​ 小于号<：<

        ​ 注册商标： ®

        ​ 更多实体可自行搜索

        不换行的块标记

        表示超链接(“anchor” 锚)，href属性表示链接地址(hypertext reference)

        traget属性
        _self 在本窗口打开

        ​ _blank 在一个新窗口打开

        ​ _parent 在父窗口打开

        ​ _top 在顶层窗口打开

        表格标签

        ​

        每一行

        ​

        每一列

        ​

        表格表头

        ​ border属性表示边框

        外部样式表：

        开始编写

        书写html文件非常方便，我这里用VSCODE进行。以下是文件demo1.html;的内容

        DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My testtitle>
  head>
  <body>
    <h1>Hello htmlh1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia nisi ullam sint delectus illo ad ea ipsam earum voluptatum adipisci voluptatem deleniti illum deserunt, qui aspernatur aliquid modi dicta quas.p>
    <br/>
    <a href="www.google.com">googlea>
    <br/>
    <br/>
    <img src="back.jpg" alt="img" width = "720">
  body>
html>


        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17

        lorem是html中生成随机文本的工具，输入lorem+数字可以自动生成指定词数的句段。

        生成的页面：

        在这里插入图片描述

        img

        CSS篇

        认识css

        参考：

        https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics

        https://developer.mozilla.org/zh-CN/docs/Web/CSS

        和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：

        p {
  color: red;
}

        • 1
        • 2
        • 3

        我们新建一个cssdemo.css文件，并且放在我们的demo1.html旁边，方便使用，把上面这三行代码放进去，再在html文件中连接。
        这里采用链接式引用，也是最推荐的方式。
        把下面这一行代码加载文件头的位置，也就是和的中间

        <link href="cssdemo.css" rel="stylesheet">

        • 1

        demo1.html

        DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My testtitle>
    <link rel="stylesheet"  href="cssdemo.css">
  head>
  <body>
    <h1>Hello htmlh1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia nisi ullam sint delectus illo ad ea ipsam earum voluptatum adipisci voluptatem deleniti illum deserunt, qui aspernatur aliquid modi dicta quas.p>
    <br/>
    <a href="www.google.com">googlea>
    <br/>
    <br/>
    <img src="back.jpg" alt="img" width = "720">
    
  body>
html>


        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19

        画面：
        在这里插入图片描述
        发现文字变成了红色

        CSS 中的注释以 /* 开头，以 */ 结尾。

        这就是一个简单的css使用，我们现在详细了解一下css

        “CSS 规则集”解释

        在这里插入图片描述
        整个结构称为 规则集（通常简称“规则”），各部分释义如下：

        选择器（Selector）
        HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

        声明（Declaration）
        一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

        属性（Properties）
        改变 HTML 元素样式的途径。（本例中 color 就是

        元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

        属性的值（Property value）
        在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

        注意其他重要的语法：

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

        • 1
        • 2
        • 3

        如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：

        p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

        • 1
        • 2
        • 3
        • 4
        • 5

        多元素选择
        也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

        p, li, h1 {
  color: red;
}

        • 1
        • 2
        • 3

        选择器
        选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

        在这里插入图片描述

        css的初步使用

        编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。
        这并不意外，CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

        padding：即内边距，围绕着内容（比如段落）的空间。
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。

        • 1
        • 2
        • 3

        在这里插入图片描述
        这里还使用了：

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

        • 1
        • 2
        • 3
        • 4
        • 5

        我们继续尝试在css中添加更多信息

        更改页面颜色

        html {
  background-color: #00539F;
}

        • 1
        • 2
        • 3
        body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}


        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8

        现在是元素。以上条声明，我们来逐条查看：

        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;
}

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6

        你可能发现页面的顶部有一个难看的间隙，那是因为浏览器会在没有任何 CSS 的情况下 给

        (en-US)等元素设置一些默认样式。但这并不是个好主意，因为我们希望一个没有任何样式的网页也有基本的可读性。为了去掉那个间隙，我们通过设置 margin: 0; 来覆盖默认样式。

        至此，我们已经把标题的上下内边距设置为 20 像素，并且将标题文本与 HTML 的背景颜色设为一致。

        需要注意的是，这里使用了一个 text-shadow 属性，它可以为元素中的文本提供阴影。四个值含义如下：

        第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
第四个值设置阴影的基色。

        • 1
        • 2
        • 3
        • 4

        图像居中

        img {
  display: block;
  margin: 0 auto;
}

        • 1
        • 2
        • 3
        • 4

        修改后的页面：

        p {
    color: red;
  }
img {
  display: block;
  margin: 0 auto;
}
h1 {
    margin: 0;
    padding: 20px 0;
    color: #00539F;
    text-shadow: 3px 3px 1px black;
  }
html {
  background-color: #00539F;
}
body {
    width: 600px;
    margin: 0 auto;
    background-color: #FF9500;
    padding: 0 20px 20px 20px;
    border: 5px solid black;
  }

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23

        在这里插入图片描述

        在HTML里使用CSS

        使用CSS有三种方法：
        内联样式，内部样式表，外部样式表

        外部样式表

        这是将 CSS 附加到文档中的最常见和最有用的方法，因为您可以将 CSS 链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。在大多数情况下，一个站点的不同页面看起来几乎都是一样的，因此您可以使用相同的规则集来获得基本的外观。

        外部样式表是指将 CSS 编写在扩展名为.css 的单独文件中，并从 HTML 元素引用它的情况：

        DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experimenttitle>
    <link rel="stylesheet" href="styles.css">
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12

        CSS 文件可能如下所示：

        h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9

        元素的 href 属性需要引用你的文件系统中的一个文件
        在这里插入图片描述
        在上面的例子中，CSS 文件和 HTML 文档在同一个文件夹中，使用的路径是相对路径，如果css文件在其他地方，可以使用绝对路径。

        内部样式表

        内部样式表是指不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件标签里的