HTML & CSS 学习总结

@aln

已于 2022-07-10 01:57:05 修改

阅读量150

点赞数 1

文章标签： html 前端 javascript

于 2022-07-10 01:38:43 首次发布

本文链接：https://blog.csdn.net/weixin_52166467/article/details/125701403

版权

HTML & CSS 学习总结

1HTML

1.1HTML定义

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。当然了这是比较官方的阐述，我自己的语言来解释就是网页设计语言里算是最基础的语言，有了它才能进一步的去展开完整的网页设计,地位类似数学里的加减乘除，或者说是英语里的单词

1.2HTML学习环境

通过老师的教学，学习html我使用的是visual studio code这款开发软件，软件本身很简洁但是由于插件带来的拓展，使得这软件的实际使用效果非常的舒服，其中建立一个html后缀文档，然后安装go service这款插件，写好相应语言后点击go live便可以简单的实现一个HTML网页的创建，并且利用自己的浏览器展示

1.3HTML具体内容

1.3.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>

其中的，，被称为html元素，每个元素都有头有尾，头尾之间着对应的内容进行写入，以下是一些简单的对应内容解释

<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。

<html>元素：这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。

<head>元素：这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等

<body>元素：包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等

当然这些是html元素，还有比较小的元素，比如p是一个html元素，内容是写入标题，那么则可以对这个p继续进行元素修饰，那么这个修饰就是叫元素的属性，如下代码

 <p title="属性">喜喜啊对对对！</p>

1.3.2html超链接

1.3.1说到了html元素可以进行写属性，其中超链接就是其中的一个属性实现，超链接通常用来加在文本，或者图片上面进行网页跳转

<a href="https://www.huya.com/lpl" target="_blank">学习必备</a>

1.3.3htm图片，文件

在一个完整的网页里，图片或文件时必不可少的，下面以一段简单的进行图片插入代码

<img src="https://ts2.cn.mm.bing.net/th?id=OIP-C.GW3qXSY3BscDJuJrUz5SqAHaKx&w=207&h=301&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2"  width="100" height="100">

其中的https://ts2.cn.mm.bing.net/th?id=OIP-C.GW3qXSY3BscDJuJrUz5SqAHaKx&w=207&h=301&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2是图片的链接，width,height等是对图片样式的设计，当然这图片是从别人的网页上找来的，除此外还可以利用文件技术把自己的图片展示出来，也就是获取文件路径

<img src="./images/picture.jpg">

其中.表示在所建立的文件目录下

1.3.4html表

表首先有list,form,table，是比较常见的，其中list表又可以分为有序表，和无序表，table就较为复杂

  <table>
   <tr>
   <th></th>
    </tr>
   <tr>
   <td></td>
    </tr>
   </table>

上面代码里展示了table<tr>表示行, <td>表示行中的单元, <th>是表头的单元

<ul>
  <li></li>
</ul>
<ol>
  <li></li>
</ol>

代码里展示了有序表ol和无序表ul

<form>
 <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
</form>

上面代码展示了form的元素组成及其用法

2css

2.1css定义

css(Cascading Style Sheet)层叠样式表，它是用来美化页面和控制页面布局的一种语言。当然这也是比较官方的阐述，按我各人总结来看，css就是画画流程里面的上色，在对网页进行大体的轮廓设计后，为了让其更加实用，美观，人性化，进而用到css语言进行’上色’

2.2css学习环境

和html一样用vscod学习，建立css后缀文件

2.3css具体内容

2.3.1css选择器

CSS 选择器的作用是用于“查找”（或选取）要设置样式的 HTML 元素，也是css样式的体现，其中 CSS 选择器可以分为五类，简单选择器（根据名称、id、类来选取元素），组合器选择器（根据它们之间的特定关系来选取元素），伪类选择器（根据特定状态选取元素），伪元素选择器（选取元素的一部分并设置其样式），属性选择器（根据属性或属性值来选取元素）

比较基础的有元素选择器，id选择器，class选择器，元素选择器根据元素名称来选择 HTML 元素,id 选择器使用 HTML 元素的 id 属性来选择特定元素,要选择具有特定 id 的元素，类选择器选择有特定 class 属性的 HTML 元素,三个选择器代码实例如下


p {
  text-align: center;
  color: red;
}
#abc {
  text-align: center;
  color: red;
}
.center {
  text-align: center;
  color: red;
}

（当然实现css时需要将其和html联合，联合方法有外部样式表，内部样式表，内联样式这三种）

比较复杂点的组合选择器里面也有一些是比较重要的部分，如后代选择器，以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素，如子选择器也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素。

2.3.2css盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，见下图
请添加图片描述

其中盒子里的元素属性都可以进行定量设计，如下代码，并且结合html代码进行展示

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}

请添加图片描述

2.3.3定位，溢出，浮动

定位：可以修改框盒子的定位方式，static（正常的文档流中的位置）、absolute（相对于最近一个被定位（非static定位）了的祖先元素的位置，脱离了文档流）、relative（相对于正常的文档流的位置，保留原来的位置）、fixed（相对于窗口，脱离了文档流）。

浮动：浮动会导致元素脱离文档流，元素会浮动到父亲元素的边缘或其它浮动元素的边缘，如果遇到空间不够就会下降寻找足够的空间，浮动一般伴随着清除，清除会让元素的左右没有任何浮动元素

溢出：当元素内容超过其指定的区域时，我们通过溢出属性来处理这些溢出的部分，具体溢出属性有visible，hidden，scroll，auto，visible 默认值，溢出部分不被裁剪，在区域外面显示，hidden 裁剪溢出部分且不可见，scroll 裁剪溢出部分，但提供上下和左右滚动条供显示，auto 裁剪溢出部分，视情况提供滚动条

定位展示代码（static,relative）

div.static {
  position: static;
  border: 3px solid #73AD21;
}
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

定位展示代码（absolute）

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

浮动展示代码

img {
  float: right;
}

溢出展示代码（多行文本溢出）

<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

2.3.4伪类和伪元素

伪类用于定义元素的特殊状态，它可以用于设置鼠标悬停在元素上时的样式，为已访问和未访问链接设置不同的样式，设置元素获得焦点时的样式

selector:pseudo-class {
  property: value;
}

伪元素用于设置元素指定部分的样式，例如，它可用于设置元素的首字母、首行的样式在元素的内容之前或之后插入内容

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

@aln

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫