前言
随着网络技术的不断发展,前端技术目前已经和后端几乎平起平坐。这学期跟着老师学习了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学习内容的总结回顾,本文仅仅简单介绍了这两者的入门使用,要想开发出美观实用的网站需要进一步的学习。