前言
通过本次web应用基础课程,加上我之前自学的相关内容,我了解并且学到了很多的前端的知识,在此,我将对我所学到的HTML&CSS进行知识的总结
提示:以下是本篇文章正文内容,下面案例可供参考
一、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> 简单的换行符
<hr> 水平线分割线
图像标签,导入图片时,使用其src属性
<img src="./demo.jpg" alt="这里将会有一张图片" >
表单输入控件,下面是一个表单输入框
<input type="text" name="name" >
定义文档与外部资源的关系,例如引入css样式
<link rel="stylesheet" type="text/css" href="demo.css" />
2.常用的双标签:
<h1>一级标题,共有六级不同的标题</h1>
<P>P是段落标签</P>
<strong>加粗</strong>
<strong>斜体</strong>
表格标签,用于展示数据
<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>
超链接标签,很重要!
<a href="https://www.baidu.com/" target="_blank">转到百度!</a>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<button>按钮标签</button>
表单标签,发送表单时的规范写法
<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>
3.什么是行内元素、行内块、块级元素。
1.块级元素
每个块级元素通常都会独占一行或者是多行,可以对其单独设置高度,宽度以及对齐等属性。
常见的块级元素有:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等
2.行内元素
行内元素(内联元素):不占有独立的区域,仅仅依靠自己的字体大小或者是图像大小来支撑结构。
一般不可以设置宽度,高度以及对齐等属性。
常见的行内元素有:<a >,<strong>,<b>,<em>,<del>,<span >等
默认的宽度就是它本身的宽度
3.行内块元素
块级元素,它既具有块级元素的特点,也有行内元素的特点,它可以自由设置元宽度和高度,
也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素,它可以设置高宽以及一行多个。
4.三种类型元素的相互转换
display:block ,定义元素为块级元素
display:inline ,定义元素为行内元素
display:inline-block,定义元素为行
三、什么是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>
2.行内式(内联样式):
内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2"> </标签名>
3.外部样式表(外链式)
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
2.CSS的语法及常用选择器
1.CSS的语法如下:
选择器 声明块
选择器:通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上。
声明块:声明块紧跟在选择器的后边,使用{ }括起来,声明块中实际上就是一组一组的名值对结构,而这一组组名值对称之为声明。
例如:p{ font-size:18px;}
2.CSS的常用选择器:
1.元素选择器
作用:通过元素选择器可以选择页面中的所有指定元素。
语法:标签名 { }
2.id选择器
作用:通过元素的id属性值选中唯一的元素。
语法:#id属性值 { }
3.类选择器
作用:通过元素的class属性值选中一组元素。
语法:.class属性值 { }
4.通配符选择器
作用:通过通配选择器可以选中页面中的所有元素。
语法:* { }
3.CSS的盒子模型:
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。在网页端要查看某元素的盒子模型(包括内外边距、边界、内容)可以打开F12调试,选择该元素,查看该元素的样式并滑到最下面的盒子模型。
具体:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
4.CSS的position(定位):
html元素是一个个的盒子模型,因此元素的位置是可以由我们来定位设置。元素的position属性有五个值:
1.static
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响
<style>
div.static {
position: static;
border: 1px solid #ccc;
}
</style>
2.fixed
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
<style>
div.pos_fixed
{
position:fixed;
top:1px;
right:1px;
}
</style>
3.relative
相对定位元素的定位是相对其正常位置。
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
</style>
4.absolute
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:"子绝父相",是我在学习position时印象最深刻的定理。儿子绝对定位,他的父亲使用相对定位。
h1
{
position:absolute;
left:100px;
top:150px;
}
5.sticky
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。这个我用的很少。
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px;
}
4.CSS的Float(浮动)
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。可用于图像,但它在布局时一样非常有用。设置float属性让某元素水平方向上向左或右进行移动,其周围的元素也会重新排列。
1.让一张图片浮动:
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动,下面的文本流将环绕在它左边:
<style>
img
{
float:right;
}
</style>
2.清除浮动
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素
<style>
.div{
clear:both;
}
</style>
5.伪类和伪元素
1.伪类
伪类(pseudo-class)是一个以冒号作为前缀,被添加到一个选择器末尾的关键字,当你希望样式在特定状态才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类。
2.伪元素
伪类(pseudo-class)是一个以冒号作为前缀,被添加到一个选择器末尾的关键字,当你希望样式在特定状态才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类。
<style>
a:link,
a:visited {
color: rebeccapurple;
font-weight: bold;
}
a:hover {
color:hotpink;
}
</style>
总结
以上就是今天对HTML&CSS的学习总结,本文简单总结了HTML&CSS使用,更多使用方法需读者在实践中自己尝试加以总结,祝大家在前端的学习道路上收获满满!!!