前言
随着网络技术的不断发展，前端技术目前已经和后端几乎平起平坐。这学期跟着老师学习了Web应用基础这门课程，在此对学习的HTML以及CSS内容做一个总结回顾。
（本文章中代码都使用VScode编辑而成）
一、HTML
要学习web技术，首先便是要了解所谓的前端三剑客：“HTML”、“CSS”以及“JavaScript”。
在最开始的部分，首先就要认识定义了网页内容的结构和含义的超文本标记语言（HyperText Markup Language），也即是HTML。
需要注意HTML并不是一门语言，而是一种用于定义内容结构的标记语言。
1. html的文档结构与运行
首先我们要做的就是创建自己的文件，运行VScode后打开你的目标文件夹，在其中新建文件，只要输入后缀为.html，就会成功创建一个html文件了！
随后我们进入文件，小技巧输入“!”后直接按tab键就可以直接生成标准的HTML文件格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>可以注意到HTML文件中代码都被<html lang='en'>和</html>包裹着，而中间又分为两大块<head>以及<body>，分别代表着头部设置和页面主体。
下面我们可以试着书写自己的第一个HTML文件了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index页</title> <!-- 页面的名称 -->
</head>
<body> <!-- 页面的内容 -->
我的第一个web页
</body>
</html>这样就非常简单的完成了自己的第一个HTML文件的书写。
接下来我们可以在VScode中加载插件Live Server，这是个非常方便的插件，只要下载后在html文件页面点击右下方出现的Go Live字样就会自动在你的浏览器中跳出当前html文件所对应的页面，甚至你对html做出的任何更改都可以实时展示在页面上，非常地方便。
随后我们就可以看到我们简单编写的第一个html所对应的页面了！
可以看到我们写在<body>中输入的内容确实展示在了浏览器的页面当中。
HTML文件中各项内容的具体说明
<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。<html></html>:<html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。<head></head>:<head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。<body></body>:<body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
2. 各种HTML元素
（1）标题元素
HTML中提供有六级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
（2）文本元素
HTML中提供有以下这些文本形式标题
<p>你可以<mark>高亮</mark>文本。</p>
<p><del>这行文本意味着被删除了</del></p>
<p><ins>这行文本有下划线</ins></p>
<p><small>这行文本字比较小</small></p>
<p><strong>这行文本被加粗了</strong></p>
<p><em>这行文本是斜体</em></p>
（3）超链接
超链接某种意义上就是互联网的本质（）
<a href="https://www.bilibili.com/video/BV1uT4y1P7CX?spm_id_from=333.337.search-card.all.click&vd_source=5ce37ffef8b26b46c0e75ac69418ce70" target="_blank">你被骗了</a>
点击该连接以后：
（4）图片和路径
src属性为要显示图片文件的位置 URL，即图片文件的路径alt属性当获取图片出现问题时显示的文字（占位符）- 可为图片指定高宽度，但不建议（可能导致图片变形）
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
上面图片的例子即为绝对路径。下面是相对路径的例子：
例子
解释
<img src="picture.jpg">该图片文件与当前文档在同一目录中
<img src="./images/picture.jpg">该图片文件在当前目录下的
images目录中
<img src="../picture.jpg">该图片文件在上一级目录中
（5）表格
HTML中提供有以下这种表格形式
<table>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>20000岁</td>
</tr>
<tr>
<td>002</td>
<td>嬴政</td>
<td>3000岁</td>
</tr>
</table>
（6）<input>
HTML依靠<input>向后台输入数据
<input>元素中都由type属性：
text 定义单行输入字段，默认宽度为 20 个字符
password 定义密码字段，该字段字符被掩码
radio 定义单选按钮
checkbox 定义复选框
button 定义可点击按钮（一般通过 Javascript 启动脚本）
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
file 定义输入字段和“浏览”按钮，供文件上传
reset 定义重置按钮，清楚表单中所有数据
submit 定义提交按钮，把表单数据发送到服务器
<div>
用户名：<input type="text" name="username" value="请输入用户名"> <br>
密码：<input type="password" name="password"> <br>
</div>
二、css
在对HTML有了一定的了解之后，我们肯定会有疑惑，只靠那些HTML中的元素完全不能做出现在那些主流网站的视觉效果，那么这里就要引入css了。
css，即是级联样式表（Cascading Style Sheets）的缩写。是专门负责编写网页中各项元素的样式的。
也就是说，css负责让你的页面变得好看。
1. css的语法
值得一提的是，css有些时候也并不是指独立于html文件而单独存在的.css文件。这就要说道css的三种方式：外部样式表，内部样式表，内联样式。
外部样式表：建立独立于html文件的css文件，随后在html的<head>书写路径从而引用对应的样式，如：
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mycss.css">
<!-- 上面这个语句就导入了外部的 mycss.css 样式表文件 -->
<title>页面标题</title>
</head>内部样式表：将样式放在 HTML 文件的<head>元素中，如：
<head>
<meta charset="utf-8">
<title>页面标题</title>
<style> <!--内联样式表-->
body {
background-color: linen;
text-align: center;
}
</style>
</head>内联样式：直接在每个单独的元素中进行设置，如在HTML文件中提到的各种文本形式
而不管是哪种形式的样式表，语法都是一样的，即：
选择器 { 属性:值 属性:值 ... 属性:值 }
选择器分为id选择器（前有 # 号
#item{
color: blue;
}和class选择器（前有 . 号）
.item{
color: blue;
}而属性和值将在下一节中具体展示。
2. css可以定义的各项属性
我们创建一个内部样式表用来观察样式表调整各项属性的效果：
<style>
.item{
}
</style>并创建一个<div>元素来接收样式表所改变的样式：
<div class="item">
我爱中国
</div>（1）颜色、尺寸、对齐
.item{
color: rgb(255, 0, 0);
background-color: antiquewhite;
width: 50%;
height: 100px;
text-align: center;
}效果：
（2）盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的
.item{
color: rgb(255, 0, 0);
background-color: antiquewhite;
width: 50%;
height: 100px;
text-align: center;
border: 5px solid green;
padding: 25px;
margin: 25px;
}效果：
（3）定位
position属性用于对元素进行定位。该属性有以下一些值：
- static 静态 这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行，即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
- relative 相对 这将把元素相对于他的静态（正常）位置进行偏移
- fixed 固定 这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
- absolute 绝对 将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
.item{
color: rgb(255, 0, 0);
background-color: antiquewhite;
width: 50%;
height: 100px;
text-align: center;
border: 5px solid green;
padding: 25px;
margin: 25px;
position: relative;
left: 90px;
}效果，可以看到向右偏移了位置：
（4）不透明度
我们可以用
opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高。
.item{
color: rgb(255, 0, 0);
background-color: antiquewhite;
width: 50%;
height: 100px;
text-align: center;
border: 5px solid green;
padding: 25px;
margin: 25px;
position: relative;
left: 90px;
opacity: 0.1;
}效果，可以几乎透明至看不见：
（5）浮动
在一个区域或容器内，我们可以设置
float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
.item{
color: rgb(255, 0, 0);
background-color: antiquewhite;
width: 10%;
height: 100px;
text-align: center;
border: 5px solid green;
padding: 25px;
margin: 25px;
position: relative;
left: 90px;
float: left;
}为了展示效果，多加了几个<div>元素：
<div class="item">
我爱中国
</div>
<div class="item">
中国爱我
</div>
<div class="item">
爱国的我
</div>
总结
以上就是这次对html和css学习内容的总结回顾，本文仅仅简单介绍了这两者的入门使用，要想开发出美观实用的网站需要进一步的学习。
2634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
