HTML&&CSS学习总结

最新推荐文章于 2022-07-09 04:16:50 发布

Tilldark

最新推荐文章于 2022-07-09 04:16:50 发布

阅读量210

点赞数

文章标签： html css 学习

本文链接：https://blog.csdn.net/qq_57841179/article/details/125669445

版权

HTML&&CSS学习总结

1.元素

HTML由元素组成，元素可以嵌套，例如：
<p>hello world </p>
这就是一个元素，在元素当中有开始标签和结束标签，以上述语句为例也就是<p>和</p>，而hello world则是内容，内容和标签结合即是一个完整的元素。

2.HTML基本组成

在HTML当中文档都会带有以下内容：
<html></html>
在这个标签内包含了所有其他的标签，其他元素都会被嵌套在其中，在开始标签处一般会有<html lang=“en”>，这就代表着一个英文站点，如果要改为中文站点，只需要改为<html lang=“zh”>，但是这段代码是不影响整个内容的。。

3. HTML中的<head></head>

在head元素中包含了各种标签元素，在head元素中可以插入脚本（script），样式文件（CSS），以及各种meta信息，并且在此处可以添加的元素有：<title>, <style>, <meta>, <link>, <script>和 <base>。

<title>：1. 定义了浏览器工具栏的标题 2. 当网页添加到收藏夹时，显示在收藏夹中的标题 3. 显示在搜索引擎结果页面的标题

<style>：在此元素中定义了HTML文档的样式文件引用地址，也可以直接添加样式来渲染 HTML 文档。

<meta>：描述了一些基本的元数据,元数据不会显示在页面上，但是会被浏览器解析，<meta>元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

<link>：标签定义了文档与外部资源之间的关系，例如<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>，这就是调用了外部的CSS文件。。

<base>：描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接，例如：

3. HTML中的<body></body>

这个标签中包含了html页面的绝大部分显示内容

标题（heading）：搜索引擎用标题来索引页面的内容,在HTML中有六级标题，从<h1></h1>到<h6></h6>，其中<h1>最大，通常作为主标题，<h6>最小。

文本格式：文本格式标签推荐使用如下几种
<mark></mark>，<del></del>，<s></s>，<ins></ins>，<small></small>，<strong></strong>，<em></em>

文本格式不需要用于对页面进行美化，CSS更适合进行页面美化。

超链接：任何东西均可以使用超链接，通常超链接是图片、网址、文本等。语法如下：
百度一下这样我们就能够将其链接到百度上。

锚点：
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

插入图片：
src属性就是图片的路径，alt属性当获取图片出现问题时显示的文字（占位符），可以给图片指定高尺寸，但是可能导致图片变形。
例如：
<img src="图片链接 alt=“View” width=“240” height=“135”>

表格table：
在使用<table></table>，tr表示行, td表示行中的单元, th是表头的单元，

列表list：
列表可以分为有序列表和无序列表，无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志，有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

表单：
表单用于收集用户的输入信息。HTML中的表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。类型定义有多种，例如文本域text，密码字段password，单选按钮radio，复选框checkbox，提交按钮submit等。

1.CSS简介

CSS是改变html所呈现出来的的样式而出现的语法，其被称为级联样式表。css的诞生就是为了美化我们的界面的。

css可以来改变html中的元素所呈出的包括页面布局，元素素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等。

2.CSS语法

CSS的语法主要由两部分构成，一个选择器，还有一个是一条用｛｝包裹的多种生声明例如:

p{
color:red;
text-align:center; ｝
这部分代码就使得P这个选择器的元素其中有文字的颜色和文本居中。

3.CSS的用法

CSS引用到html文件中，一般使用三种方法：外部样式表，内部样式表和内联样式表。外部样式表是将html和css文件分别存放，在html文件中调用即可，内部样式表是直接将样式放到html文件中需要在<head>中用<style>和</style>将样式内容夹杂在中间就可以在body中使用了。内联样式直接在定义元素的时候就将样式写进去。我们一般都是使用外部样式表。需要注意的是当它们同时存在的时候离元素更近的生效。

3.颜色，尺寸，对齐

颜色

在css中的颜色有颜色和颜色值的区分，例如：
"color:Tomato;"和"background-color:#ff0000;"分别更改颜色色系和颜色值。

尺寸

在css中可以用height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 % 例如:

width: 100%;height: 200px;
分别是设置其宽度占屏幕的百分比和高度为200pixels。

对齐

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可，即语法为

text-align:

后面接属性就可以使与此相应的选择器改变文本要求。

4.盒子模型

html元素可以看作一个盒子，每个元素由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。内容一般为文本和图片，内边距就是内容和边框之间的距离，边框默认不显示，外边距就是边框以外与其他元素的距离。例如：

‘border: 10px solid red;
padding: 25px;
margin: 25px;’
分别指此盒子的边框宽度为10px并且颜色为红色，内容与边框的距离为25px，边框外与其他元素的距离为25px。

5.边框与边距

盒子模型中的属性里的边框，内外边距都是有上下左右四个方向。

边框

在边框"border"后面的内容就是此盒子里面的边框属性，比如说border-bottom是对下边框进行调整，“border-radius"就会使其四个边框角变成圆角形式。

边距

边距padding是在指属性与边框的距离，也分为上下左右四个边框，后续可以接-topd等的东西，然后分别输入其尺寸就可以了，或者直接不输入放入尺寸就会默认以上右下左的顺序，如果上下相等，相等，就可以设置为两个参数，前一个参数为上下，后一个参数为左右。例如padding: 25px 10px可以执行上下25px的边距，左右也是25px的边距。

6.定位

position属性用于元素定位，一般与以下的语句进行使用：1.static（静态）2.relative（相对）3.fixed(固定)4.absolute（绝对）.

static

设置为静态定位，以正常的形式按照元素在HTML出现的先后顺序从上到下，从左到右进行安排。

relative

相对定位码，将默认的元素位置进行偏移。在CSS中通过这个函数，可以在其中键入对应的移动参数和颜色等东西。

fixed

将属性定义为固定的位置，即使滚动条滑动，也会固定在窗口的区域中自定义的某一块同时它也是相对于视窗的位置固定在某一个地方。

absolute

绝对定位是需要寻找一个父元素进行相对偏移，如果没有这样的父元素则指定为body这个父元素。先用div class="example-relative"这样的指定父元素的定位属性，然后加入div class="example-absolute"子元素定位属性来相对于父元素的定位位置进行定位。

溢出

溢出也就是元素内容超过规定时，通过溢出overflow属性来处理这些溢出的部分。一般有以下几个值：1.visible默认值，溢出部分不被裁剪，在区域外显示。2.hidden裁剪溢出部分并且不可见.3.scroll裁剪溢出部分，但是提供上下和左右滚动条显示。4.auto裁剪溢出部分，视情况提供滚动条.

7.浮动

在一个容器或者区域内使用float浮动属性可以使这个元素进行移动，周围的元素也会跟随其进行合理布局。example-float-right然后加入水平移动的属性。

8.不透明度

使用opacity对元素多为图片设置不透明度。范围在[0-1]之间，越高说明元素越明显。

9.组合选择器

介绍过用元素，id，callss选择器现在可以进行组合，下面有两种组合选择器

后代选择器

子选择器

又叫直接后代选择器，以>作为分隔，如：.haha>p代表在.haha类的元素直接

元素.

10.伪类和伪元素

定义元素的某种特定的状态或者位置等也就是满足于各样的样式需求或者出现各种的状态改变。例如：

selector:pseudo-class/pseudo-element{property:value;}

选择器后使用":"号在跟上某个伪类/伪元素。前面带有pseudo就是代表着有伪这个属性的声明，在{}中加入自己想要的效果，颜色，大小等之类的需求。