写给女朋友看的html和css教程这不马上要期末考试了,突然想起大一时我们网页设计老师布置的期末大作业: 这个 WEB
这不马上要期末考试了,突然想起大一时我们网页设计老师布置的期末大作业:
用html和css做个牛逼的网站,不能少于7个页面。网站要用到div布局、段落、图片、列表、表格、超链接等常用元素。根据完成情况算作最后成绩,没做直接算挂科。
这个 WEB 大作业把我和女朋友折腾的够呛,其实是把我折腾的够呛。
女朋友不会做,她就折腾我帮她做。后来连着熬了几天夜,终于做出来了,幸运的是最后我俩都过了。
现在想想,其实 HTML 和 CSS 也就那么一回事,说白了就是复制粘贴标签,最重要的还是创意和审美
。
1. 啥是 html
官方解释:
HTML 全称 HyperText Markup Language,中文解释:超文本标记语言。
看完官方的解答你可能还是一脸懵逼。
说白了就是我们用一个前端开发工具遵守 html 语言的规范开发一段前端代码,然后放到浏览器上。
浏览器加载渲染我们写的 html 代码,我们就能看到渲染之后的页面了。
其实网上几乎所有的页面输出的都是 html 代码,我们随便打开一个网站页面然后点击查看源代码就能发现:
2. html 规范
2.1 html 元素
html 元素包含开始标签
和结束标签
,元素的内容是开始标签与结束标签之间的内容。例如:
<p> 求老师不挂科!!!</p>
html 中元素的标签一般成对出现,但是也有单标签
元素,例如:
<br> 换行
<hr> 分割线
<img> 图片
<input> 输入框
2.2 html 代码区域
-
- DOCTYPE html:声明一下该文档是 html 文档,这个不用管。
-
- html:HTML 页面的根元素,相当于房子的根基。
-
- head:头部元素,包含页面的标题。我们有时候也会在里面写内部 css 样式。
-
- body:我们主要在这里面写 html 代码,html 页面也主要显示 body 里面的内容。
总结:
html 规范定义了 html 的代码元素布局,我们主要在 body 标签里面写 html 代码,所以其他固定的部分(比如根标签、头部元素)直接复制粘贴就行。
2.3 开发工具
我们知道 html 文档的后缀为 .html
,所以不管用什么编辑器,写完html代码之后只要文档的后缀为.html
,就能用浏览器打开。
但是好的开发工具可以帮我们节省很多时间,这里推荐使用 VSCODE
,为什么推荐它?看图:
1.英文输入法,输入!
,回车之后初始化 html 页面元素。
2.快速打出成对标签或者单标签元素:输完元素直接Tab
键。
3.快速打出多个标签以及子标签。同级标签用+
,子标签用 >
。
4.给标签加 id 和 class。id 属性用#
,class 属性用.
。
所以用这个开发工具写 html 代码就是玩!当然啦别人推荐的不一定是最好的,大家可以找适合自己的工具,例如 sublime、webstorm 等。
3. html 基础用法
3.1 html 属性
- 属性表示元素的附加信息。
- 属性总是以名称/值对的形式出现,例如:title="这是标题"。
- 浏览器不会显示属性的信息。
例如:
<img id="img" src="www.baidu.com" alt="百度首页" title="点击显示百度网址">
html常用属性:
属性名 | 描述 |
---|---|
id | 元素的唯一标识,就像人的身份证。 |
class | 给元素定义一个或者多个类名,类名可以重复。 |
style | 元素的行内样式,下面讲到css会提到。 |
3.2 块元素和内联元素
块级元素在浏览器显示时独占一行
,例如:
<h1>静夜思</h1>
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
运行结果:
内联元素显示时占一行中的一部分
,其中单标签元素
都是内联元素。例如:
<a href="https://www.baidu.com">百度首页</a><span>点击显示百度首页</span>
<p>春节联欢晚会的结尾曲目是<span>难忘今宵</span></p>
<label for="name">姓名</label><input type="text" name="姓名" id="name" />
运行结果:
html 中常见的块级元素和内联元素:
块元素 | 内联元素 |
---|---|
div | a |
p | img |
h1-h6 | span |
ul | em |
ol | strong |
3.3 div 布局
我觉得网页布局是 html 中非常重要的一部分,它根据网页不同的功能将其划分成不同的区域。所以网页布局体现了网页的整体外观。
在 html 中我们使用 div
标签设计网页的布局,一般和css
结合使用。例如:
<body>
<div id="container" style="text-align: center;font-weight: bold;font-size: 50px;" >
<div id="header" style="height:130px;background: #00acee;line-height:130px;">这是头部信息</div>
<div id="main" style="height:700px;background: gainsboro;line-height:700px;">
<div id="left" style="width:50%;height:700px;background: palegreen;float: left;">中间左边</div>
<div id="right" style="width:50%;height:700px;background: #f5df2e;float: right;">中间右边</div>
</div>
<div id="footer" style="height:100px;background: #eff3f6;line-height:100px;">Copyright © 2010-2021 一颗雷布斯</div>
</div>
</body>
运行结果:
3.4 超链接
点击超链接,可以跳转到另一个页面,例如:
<a href="https://www.baidu.com/">点击访问百度</a>
除了可以跳转到不同的页面,超链接还可以跳转到同一个页面的不同位置,这就是 html 中的锚点。锚点的链接为#id属性
,例如:
<body>
<a href="#d1">跳转到d1位置</a>
<p id="a1">床前明月光</p>
<p id="b1">疑是地上霜</p>
<p id="c1">举头望明月</p>
<p id="d1">低头思故乡</p>
</body>
3.5 html 框架
3.5.1 同一浏览器窗口显示不同页面
通过使用 iframe
标签,可以在同一个浏览器窗口中嵌套
多个页面。例如:
hello.html:
<body>
<p id="a1">床前明月光</p>
<p id="b1">疑是地上霜</p>
<p id="c1">举头望明月</p>
<p id="d1">低头思故乡</p>
<iframe src="aa.html" frameborder="5">66666</iframe>
</body>
aa.html:
<body>
<a href="https://www.baidu.com/">百度首页</a>
</body>
运行结果:
3.5.2 去除边框
frameborder 属性用于定义 iframe 的边框大小,当属性值为0
时移除 iframe 的边框,例如:
<iframe src="aa.html" frameborder="0">66666</iframe>
3.5.3 设置高度与宽度
height 和 width 属性用来定义 iframe 标签的高度与宽度,例如:
<iframe src="aa.html" width="500" height="500" frameborder="5"></iframe>
3.5.4 显示目标链接页面
iframe 可以显示一个目标链接的页面,目标链接的 target 属性必须是 iframe 的 name 属性的值,例如:
运行结果:
3.6 图像
img
标签用来在页面上显示图像信息。
3.6.1 设置高度和宽度
height 与 width 属性用于设置图像的高度与宽度。例如:
<body>
<img src="http://photo.tuchong.com/2318623/f/975709119.jpg" alt="美女" title="哇哇哇!美女" width="280px" height="500px">
</body>
3.6.2 title 属性
鼠标移动到图片上面去,会显示这个图片指定的 title
的属性文字。
3.6.3 alt 属性
如果图像没有下载或者加载失败,会用 alt
属性设置的文字来代替图像显示。
4. 啥是 css
如果把网页设计比喻成盖房子,那 html 代码相当于盖了个毛坯房,css 就相当于精装房。
css 用来改变 html 元素的样式,比如字体的大小粗细、边框的颜色、页面的布局等。css 就像化妆术一样,把页面变得超级好看。
5. css 规范
CSS 规范由两部分构成:选择器和属性键值对。 例如:
6. css 三种引入方式
6.1 行间样式
行间样式意思就是直接在这一行给该元素设置样式,语法格式:
style=" 属性键值对 "
例如:
<p style="font-size: 20px;">我爱你祖国</p>
6.2 内部样式
内部样式相当于在同一代码文件中其他地方定义了 css 样式,语法格式:
<style>
属性键值对
</style>
例如:
<body>
<p>我爱你祖国</p>
<style>
p {
font-size: 20px;
color: red;
}
</style>
</body>
不过规范起见,我们一般在 html 的 head 里面写内部样式,例如:
<!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>一颗雷布斯</title>
<style>
p {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<p>我爱你祖国</p>
</body>
</html>
6.3 外部样式
外部样式就是我们将 css 样式专门放到一个文件里,这个文件以.css
为后缀,然后在 html
文件里面引入该样式。例如:
引入格式:
<link href="XXXXX.css" rel="stylesheet" type="text/css"/>
<!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>一颗雷布斯</title>
<link href="hello.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>我爱你祖国</p>
</body>
</html>
7. css 选择器
我们知道 html 文档的元素就是最基本的选择器,例如:
<style>
html{
text-align: center;
}
body{
margin: 10px;
}
p{
font-size: 20px;
}
h1{
font-size: 20px;
}
</style>
但是如果我们想单独给某一个元素
或者给一堆相同的元素
设置样式该怎么办?
对,给元素设置选择器。
7.1 id 选择器
CSS 中 id 选择器以#
来定义,id 选择器是唯一的,就像人的身份证一样。例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
#p1 {font-size: 10px;}
#p2 {font-size: 20px;}
#p3 {font-size: 30px;}
#p4 {font-size: 40px;}
</style>
</head>
<body>
<p id="p1">床前明月光</p>
<p id="p2">疑是地上霜</p>
<p id="p3">举头望明月</p>
<p id="p4">低头思故乡</p>
</body>
</html>
运行结果:
7.2 类选择器
CSS 中类选择器以.
来定义,类选择器表示同一类。例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
.poet {font-size: 20px;color: red;}
</style>
</head>
<body>
<p class="poet">床前明月光</p>
<p class="poet">疑是地上霜</p>
<p class="poet">举头望明月</p>
<p class="poet">低头思故乡</p>
</body>
</html>
运行结果:
7.3 组合选择器
组合选择器表明了两个选择器之间的关系。
7.3.1 子选择器
子元素选择器选取某元素直接一级子元素,元素之间用>
进行分隔,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
div > p{color: red; }
</style>
</head>
<body>
<div>
<h2>唐宋八大家</h2>
<p>唐代:柳宗元、韩愈,宋代:欧阳修、苏洵、苏轼、苏辙、王安石、曾巩</p>
</div>
</body>
</html>
运行结果:
7.3.2 后代选择器
后代选择器表示选取某元素的后代子元素,元素之间用空格分隔,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
div p{color: red; }
</style>
</head>
<body>
<div>
<h2>唐宋八大家</h2>
<p>唐代:柳宗元、韩愈,宋代:欧阳修、苏洵、苏轼、苏辙、王安石、曾巩</p>
<h2>古代四大美男</h2>
<p>潘安、兰陵王、宋玉、卫玠</p>
</div>
</body>
</html>
运行结果:
7.3.3 兄弟选择器
1.相邻兄弟元素选择器:选择与其紧挨着的第一个兄弟元素,并且两元素之间有相同的父亲。两元素之间用+
分隔,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
h2+p{color: red; }
</style>
</head>
<body>
<div>
<h2>唐宋八大家</h2>
<p>唐代:柳宗元、韩愈,宋代:欧阳修、苏洵、苏轼、苏辙、王安石、曾巩</p>
<p>古代四大美男</p>
<p>潘安、兰陵王、宋玉、卫玠</p>
</div>
</body>
</html>
运行结果:
2.所有兄弟元素选择器:选择指定元素所有的兄弟元素,这些元素必须是同一个父亲。元素之间用~
分隔,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
h2 ~ p{color: red; }
</style>
</head>
<body>
<div>
<h2>唐宋八大家</h2>
<p>唐代:柳宗元、韩愈,宋代:欧阳修、苏洵、苏轼、苏辙、王安石、曾巩</p>
<p>古代四大美男</p>
<p>潘安、兰陵王、宋玉、卫玠</p>
</div>
</body>
</html>
运行结果:
7.4 属性选择器
属性选择器用来设置特定属性的样式,语法格式:
[属性名]{
}
[属性名="属性值"]{
}
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
[title]{
color: red;
}
input[type="password"]{
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<a title="注册姓名" href="http://register/">注册姓名</a><br>
姓名:<input type="text" name="name" id=""><br>
密码:<input type="password" name="password" id=""><br>
</div>
</body>
</html>
运行结果:
8. css 常用样式
8.1 字体
8.1.1 字体大小
字体大小用 font-size
设置,例如
p{font-size: 20px;}
8.1.2 颜色
字体颜色用color
设置,例如:
p{color:red;}
8.1.3 加粗
字体加粗用font-weight
设置,例如:
p{font-weight:bold}
8.2 伪类
8.2.1 超链接伪类
伪类就是选取某一状态下
的元素。语法格式:
元素:状态{ 属性键值对}
对于超链接而言,一般有4种状态,例如:
状态 | 语法 |
---|---|
未访问 | a:link {color:red;} |
已访问 | a:visited {color:red;} |
鼠标悬浮 | a:hover {color:red;} |
已选中 | a:active {color:red;} |
注:设置顺序为 lvha
。
超链接伪类案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
a:link {color: black;}
a:hover { font-size: 20px;color: red;}
</style>
</head>
<body>
<div>
<a title="员工管理" href="javascript:;">员工管理</a><br>
<a title="部门管理" href="javascript:;">部门管理</a><br>
<a title="工资管理" href="javascript:;">工资管理</a><br>
</div>
</body>
</html>
运行结果:
8.2.2 表单伪类
表单常见伪类:
选择器 | 案例 | 描述 |
---|---|---|
:checked | input:checked | 选择所有选中的表单元素 |
:disabled | input:disabled | 选择所有禁用的表单元素 |
:enabled | input:enabled | 择所有启用的表单元素 |
:required | input:required | 选择有required属性的元素 |
8.3 元素显示
8.3.1 隐藏元素
p {display:none;}
8.3.2 将元素显示为内联元素
p {display:inline;}
8.3.3 将元素显示为块元素
span {display:block;}
8.4 盒子模型
所有 HTML 页面都可以看作一个盒子。
- margin: 表示div和浏览器,div和div之间的距离,又叫外边距。
- border: 表示div的边框。
- padding: 表示div里面的内容和div之间的距离,又叫内边距。
8.4.1 设置 div 的宽度和高度
div{
width: 20px;
height: 100px;
}
width和height的值除了可以是px(像素),还可以是百分比,例如
div{
width: 20%;
height: 50%;
}
8.4.2 设置 div 的边框
语法格式:
border: 线条大小 线条样式 线条颜色;
例如:
div{
border: 1px solid red;
}
8.4.2 设置 margin 和 padding
没设置之前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
div{
background-color: gainsboro;
width:50%;
height: 100px;
}
</style>
</head>
<body>
<div>
<p>我爱你祖国!!!</p>
</div>
</body>
</html>
设置之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
div{
background-color: gainsboro;
width:50%;
height: 100px;
border: 2px solid red;
margin: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<div>
<p>我爱你祖国!!!</p>
</div>
</body>
</html>
注:margin 和 padding 后面都可以跟上top、left、right、bottom,表示距离顶部、左、右、底部。设置div居中:{margin: 0 auto; }.
8.5 定位
html 中的定位用 position
属性表示。
- 固定定位:
position:fixed;
特点:位置固定不变,不占位置,只以浏览器进行定位。
- 相对定位:
position:relative;
特点:相对于自己原来的位置进行定位。
利用top、left、right、bottom 进行移动,定位后仍然占据自己原来的位置。
- 绝对定位:
position:absolute;
特点:相对于离自己最近并且已经定位的元素进行定位。
如果父元素没有定位,以浏览器当前屏幕对齐。如果父亲有定位,则以最近的已经定位的父元素进行定位。利用top、left、right、bottom 进行移动,定位后不占位置。
注:如果有父子元素,一般是父元素相对定位,子元素绝对定位。
8.6 浮动
8.6.1 浮动定义
css 中浮动的关键词是 float
,浮动会使元素向左或者向右漂浮起来,不占位置
。语法:
float:left;
或者
float:right;
没使用浮动案之前:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
div#a1 {
background-color: pink;
width: 300px;
height: 300px;
}
div#a2 {
background-color: palegreen;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="a1">
我爱你祖国!!!
</div>
<div id="a2">
我爱你祖国!!!
</div>
</body>
</html>
运行结果:
使用左浮动:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<style>
div#a1 {
background-color: pink;
width: 300px;
height: 300px;
float: left;
}
div#a2 {
background-color: palegreen;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="a1">
我爱你祖国!!!
</div>
<div id="a2">
我爱你祖国!!!
</div>
</body>
</html>
运行结果:
讲解:从上面的例子中我们可以看到第一个div使用了左浮动,它向左上角飘起来了,所以下面的div就占据了它的位置。
8.6.2 清除浮动
使用 clear
属性指定元素两侧不能出现浮动元素,语法格式:
div {clear:both;}
注意:加了定位和浮动的盒子,{margin: 0 auto} 失效。
9 推荐学习网站
html 和 css 其他用法大家可以自行在网上搜索,这里推荐两个自学网站:
https://www.runoob.com/ 菜鸟教程
https://www.w3school.com.cn/ W3School
10 总结
我觉得 html 中最总要的是 div 布局,css 中最重要的是盒子模型、定位和浮动。这几个需要好好理解一下,其他的不用过多记忆,如果忘记了去网上搜一下即可。
转载自:https://juejin.cn/post/7038586637403570189