JAVAWEB学习笔记-前端基础
文章目录
- HTML篇
-
- HTML简介
- HTML元素
- 开始编写
- CSS篇
-
- 认识css
- “CSS 规则集”解释
- css的初步使用
- 在HTML里使用CSS
-
- 外部样式表
- 内部样式表
- 内联样式
- @规则
- 速记属性
- CSS工作原理
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元素
这个元素的主要部分有：
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
下面列举一些常见的元素标签：
元素是HTML的最基本部件，由成对尖括号**<>**及括号间的内容组成。例如：你今天码代码了吗？
。
html页面中由一对标签组成；
是 开始标签， 是 结束标签
title表示网页的标题，
可以使用来指定编码方式
单标签：开始标签和结束标签是同一个，斜杠放在单词后
标签表示段落
src属性表示图片路径
width和height表示图片的大小
alt表示图片的提示
、
、
、
、
、
列表标签：
start表示从*开始， type表示类型[ A,a,1(default),i,I ]
- 内容都用
标签列举
加粗标签：
斜体标签：
下划线标签：
下标标签：
上标标签：
html实体：
大于号>：>
小于号<：<
注册商标： ®
更多实体可自行搜索
不换行的块标记
表示超链接(“anchor” 锚)，href属性表示链接地址(hypertext reference)
traget属性
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开
外部样式表： 书写html文件非常方便，我这里用VSCODE进行。以下是文件 lorem是html中生成随机文本的工具，输入lorem+数字可以自动生成指定词数的句段。 生成的页面： 参考： 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： 我们新建一个 画面： CSS 中的注释以 /* 开头，以 */ 结尾。 这就是一个简单的css使用，我们现在详细了解一下css 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。 注意其他重要的语法： 如果要同时修改多个属性，只需要将它们用分号隔开，就像这样： 多元素选择 选择器 编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。 我们继续尝试在css中添加更多信息 更改页面颜色 现在是 定位页面主标题并添加样式 你可能发现页面的顶部有一个难看的间隙，那是因为浏览器会在没有任何 CSS 的情况下 给 至此，我们已经把标题的上下内边距设置为 20 像素，并且将标题文本与 HTML 的背景颜色设为一致。 需要注意的是，这里使用了一个 text-shadow 属性，它可以为元素中的文本提供阴影。四个值含义如下： 图像居中 修改后的页面： 使用CSS有三种方法： 这是将 CSS 附加到文档中的最常见和最有用的方法，因为您可以将 CSS 链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。在大多数情况下，一个站点的不同页面看起来几乎都是一样的，因此您可以使用相同的规则集来获得基本的外观。 外部样式表是指将 CSS 编写在扩展名为 CSS 文件可能如下所示： 内部样式表是指不使用外部 CSS 文件，而是将 CSS 放在 表格标签
border属性表示边框 开始编写
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>
CSS篇
认识css
p {
color: red;
}
cssdemo.css文件，并且放在我们的demo1.html旁边，方便使用，把上面这三行代码放进去，再在html文件中连接。
这里采用链接式引用，也是最推荐的方式。
把下面这一行代码加载文件头的位置，也就是和的中间<link href="cssdemo.css" rel="stylesheet">
demo1.htmlDOCTYPE 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>
发现文字变成了红色
“CSS 规则集”解释
整个结构称为 规则集（通常简称“规则”），各部分释义如下：选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。声明（Declaration）
一个单独的规则，如 color: red; 用来指定添加样式元素的属性。属性（Properties）
改变 HTML 元素样式的途径。（本例中 color 就是 属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。
p {
color: red;
width: 500px;
border: 1px solid black;
}
也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：p, li, h1 {
color: red;
}
选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：
css的初步使用
这并不意外，CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：padding：即内边距，围绕着内容（比如段落）的空间。
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。
这里还使用了：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;
}
(en-US)
第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
第四个值设置阴影的基色。
img {
display: block;
margin: 0 auto;
}
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;
}
在HTML里使用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>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
元素的 href 属性需要引用你的文件系统中的一个文件
在上面的例子中，CSS 文件和 HTML 文档在同一个文件夹中，使用的路径是相对路径，如果css文件在其他地方，可以使用绝对路径。内部样式表
HTML 文件标签里的