【无标题】HTML&CSS学习总结

qq_54636205

已于 2022-07-10 00:20:42 修改

阅读量43

点赞数

文章标签： html 学习

于 2022-07-10 00:16:54 首次发布

本文链接：https://blog.csdn.net/qq_54636205/article/details/125700936

版权

一、HTML是什么？
HTML（Hypertext Markup Language）翻译过来就是超文本标记语言.
是一种用于创建网页的标准标记语言。超文本即超越文本，可以显示文字图片视频音频，最重要的是可以包含超链接。

标记语言：当我们把特定的英文单词放入到我们的标记（单标记:</>、双标记<></>）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。

当我们将英语单词放入到标记当中，这时候我们可以称之为标签（单标签、双标签）。

二、HTML具体知识总结
关于开发的软件平台，我个人的选择是vscode。

1.HTML页面的基本结构
打开vscode，建立一个后缀为.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>

2.HTML的常用标签
通过本学期的学习加实践，我常用的HTML标签如下(HTML标签不区分大小写，不同标签有各自属性的用法)：

1.常用的单标签：
<br> 简单的换行符
1
<hr> 水平线分割线
1
图像标签，导入图片时，使用其src属性
<img src="./demo.jpg" alt="这里将会有一张图片" >
1
2
表单输入控件，下面是一个表单输入框
<input type="text" name="name" >
1
2
定义文档与外部资源的关系，例如引入css样式
<link rel="stylesheet" type="text/css" href="demo.css" />
1
2
2.常用的双标签：
<h1>一级标题，共有六级不同的标题</h1>
1
<P>P是段落标签</P>
1
<strong>加粗</strong>
1
<strong>斜体</strong>
1
表格标签，用于展示数据
<table border="1px" cellspacing="0" height="50px" width="100px">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
超链接标签，很重要！
<a href="https://www.baidu.com/" target="_blank">转到百度！</a>
1
2
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
1
2
3
4
5
6
7
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
1
2
3
4
5
6
7
<button>按钮标签</button>
1
表单标签，发送表单时的规范写法
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" />
Last name: <input type="text" name="lname" />
<input type="submit" value="Submit" />
</form>
1
2
3
4
5
6
3.什么是行内元素、行内块、块级元素。

1.块级元素
每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。
常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等
1
2
2.行内元素
行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。
一般不可以设置宽度，高度以及对齐等属性。
常见的行内元素有：<a >,<strong>,<b>,<em>,<del>,<span >等
默认的宽度就是它本身的宽度
1
2
3
4
3.行内块元素
块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元宽度和高度，
也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素，它可以设置高宽以及一行多个。
1
2
4.三种类型元素的相互转换
display:block ，定义元素为块级元素
display:inline ，定义元素为行内元素
display:inline-block，定义元素为行
1
2
3
三、什么是CSS？
CSS是级联样式表（Cascading Style Sheets）的缩写。前面我们总结了HTML的相关知识点，但是只有HTML代码，网页的外观是非常丑陋的！为了解决这个问题，我学习了CSS的相关知识。我们学习的HTML就像是小鸟的身体结构，此时只是一个雏形，所以不太美观，当我们学习了CSS后，小鸟就会长出鲜艳的羽毛，让我们赏心悦目。结合下期我们要总结的(JavaScript&TypeScript)，这只小鸟就会有相应的行为，最终能够在湛蓝的天空中自由的翱翔！！！

四、HTML具体知识总结
1.CSS的引入方式
为了实现结构和样式的分离，我们学习了CSS。CSS可以使我们的页面非常美观！CSS有如下几种引入的方式：

1.内部样式表：
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2}
</style>
</head>
1
2
3
4
5
2.行内式（内联样式）:
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2"> </标签名>
1
3.外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
1
2
3
2.CSS的语法及常用选择器
1.CSS的语法如下：
选择器声明块
选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。
声明块：声明块紧跟在选择器的后边，使用{ }括起来，声明块中实际上就是一组一组的名值对结构，而这一组组名值对称之为声明。
例如：p{ font-size:18px;}
1
2
3
4
2.CSS的常用选择器：
1.元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素。
语法：标签名 { }
1
2
2.id选择器
作用：通过元素的id属性值选中唯一的元素。
语法：#id属性值 { }
1
2
3.类选择器
作用：通过元素的class属性值选中一组元素。
语法：.class属性值 { }
1
2
4.通配符选择器
作用：通过通配选择器可以选中页面中的所有元素。
语法：* { }
1
2
3.CSS的盒子模型：
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。在网页端要查看某元素的盒子模型（包括内外边距、边界、内容）可以打开F12调试，选择该元素，查看该元素的样式并滑到最下面的盒子模型。
具体：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
1
2
3
4
4.CSS的position(定位):
html元素是一个个的盒子模型，因此元素的位置是可以由我们来定位设置。元素的position属性有五个值：

1.static
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响
<style>
div.static {
position: static;
border: 1px solid #ccc;
}
</style>
1
2
3
4
5
6
7
8
2.fixed
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
<style>
div.pos_fixed
{
position:fixed;
top:1px;
right:1px;
}

</style>
1
2
3
4
5
6
7
8
9
10
11
3.relative
相对定位元素的定位是相对其正常位置。
<style>
h2.pos_left
{
position:relative;
left:-20px;
}

</style>
1
2
3
4
5
6
7
8
9
4.absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:"子绝父相"，是我在学习position时印象最深刻的定理。儿子绝对定位，他的父亲使用相对定位。
h1
{
position:absolute;
left:100px;
top:150px;
}
1
2
3
4
5
6
7
5.sticky
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。这个我用的很少。
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px;
}
1
2
3
4
5
6
4.CSS的Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。可用于图像，但它在布局时一样非常有用。设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。

1.让一张图片浮动：
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：
<style>
img
{
float:right;
}
</style>
1
2
3
4
5
6
7
2.清除浮动
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素
<style>
.div{
clear:both;
}
</style>
1
2
3
4
5
6
5.伪类和伪元素
1.伪类
伪类（pseudo-class）是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。

2.伪元素
伪类（pseudo-class）是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。

a:hover {
color:hotpink;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
总结
以上就是今天对HTML&CSS的学习总结，本文简单总结了HTML&CSS使用，更多使用方法需读者在实践中自己尝试加以总结，祝大家在前端的学习道路上收获满满！！！

qq_54636205

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】HTML&CSS学习总结

一、HTML是什么？HTML（Hypertext Markup Language）翻译过来就是超文本标记语言.是一种用于创建网页的标准标记语言。超文本即超越文本，可以显示文字图片视频音频，最重要的是可以包含超链接。标记语言：当我们把特定的英文单词放入到我们的标记（单标记:、双标记）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。当我们将英语单词放入到标记当中，这时候我们可以称之为标签（单标签、双标签）。二、HTML具体知识总结关于开发的......
复制链接

扫一扫