HTML & CSS 学习总结

A125de

于 2022-07-09 21:08:39 发布

阅读量112

点赞数

文章标签： web

本文链接：https://blog.csdn.net/A125de/article/details/125698309

版权

HTML

什么是HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

基本标签：

<!DOCTYPE html>

声明文档。

<html> 元素这个标签存放了该页面完整的内容，是最外层、最基本的元素，其它元素都存放在其中。

<body>元素里包含了页面所需展示的主要元素，即网页内容。

HTML中拥有<h1> <h2> <h3> <h4> <h5> <h6> 六级标题，通常用于板块内容的标题。

<a></a>

<a>超链接标签，通常用于新页面的转跳，，是很重要的一类标签。如：

新增标签：

header头部标签 nav导航标签 articel内容标签 section块级标签

aside侧边栏标签 footer尾部标签

contenteditable 规定是否可编辑元素的内容 data* 嵌入自定义数据

hidden 规定对元素进行隐藏。如果使用该属性，则会隐藏元素，隐藏的元素不会被显示，可以通过js来设置hidden属性为true,使得元素变得可见

对类名的操作

①获取单个元素,参数可以是我们任意的选择器。
document.querySelect('选择器');
②获取多个元素，参数是任意的选择器
document.querySelectAll('选择器');

add(value) 添加一个类
contains(value) 判断有没有某个类
remove(value) 删除一个类
toggle(value) 切换一个类
replace() 替换一个类

自定义属性值

我们可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。
获取自定义的属性名oDiv.dataset.test
设置自定义属性
oDiv.dataset.自定义属性名=值
CSS

什么是CSS：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言）的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS可以把丑陋的网页变得更为美观，对元素的属性进行控制。

一条css样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明

h1{
color:red
font-size=12px;
}

定位方法：

position属性用于对元素进行定位，该属性拥有以下值：

static 静态:

元素的默认定位方式，元素按正常的页面布局进行。

relative 相对:

把元素相对于他的静态位置进行偏移。

fixed 固定:

让元素固定不动。

absolute 绝对:

将使元素相对于其最近设置了非静态属性的元素进行偏移。

h1 { position:absolute; left:100px; top:150px; }

CSS的盒子模型：
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。在网页端要查看某元素的盒子模型（包括内外边距、边界、内容）可以打开F12调试，选择该元素，查看该元素的样式并滑到最下面的盒子模型。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

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

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