HTML5 学习

fvcvv

已于 2022-11-28 18:05:46 修改

阅读量1.1k

点赞数

文章标签： html5 学习前端

于 2022-10-27 16:45:30 首次发布

本文链接：https://blog.csdn.net/fvcvv/article/details/127372114

版权

HTML5 学习笔记

前言
第一章：基础知识
第二章：高级技术
第三章：主流框架
- 3.1、Vue

前言

什么是HTML

HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。

什么是 HTML5

—HTML5是构建Web前端开发的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web前端开发中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。

页面排版

排版的重要性：将有限的视觉元素进行有机的排列组合，让逻辑清晰，阅读流畅，便捷，生产良好的视觉体验。
四大原则：重复 / 对比 / 亲密 / 对齐

重复原则：设计的某些元素需要在整个作品中重复，可能是一种粗字体，一条粗线，某一个项目符号，颜色，设计要素，某种格式，空间关系等。

亲密原则：指彼此相关的项应当靠近，归组在一起，如果多个项目之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素

对比原则：从图片大小，颜色，形状来进行对比，从而突出某一种主题

对齐原则：使页面的顶(头)部，底部，按照轴线的方式对齐。使整个页面设计看起来简单明了

第一章：基础知识

1.1、HTML5 基础

1.1.1、HTML 文件语法

.html 版本用的是 5
.html 后缀的文件为页面文件。
.html 文件由标签组成。

1.1.2、HTML 标签

一般标签是由开始标签和结束标签组成。
书写方式划分为：

双闭合(<div>   </div>)
单闭合(<img src="" alt="">)

例：
在这里插入图片描述

开始标签（Opening tag）：包含元素的名称，被大于号、小于号所包围。表示元素从这里开始或者开始起作用
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

当出现多个相同元素如何区分：这时我们需要使用属性(Attribute)名来区分
例：

<p class="editor-note">My cat us very grumpy</p>
------------------
class  是属性名称；editor-note  是属性的值。
---------------
class 属性可为元素提供一个标识名称
以便进一步为元素指定样式或进行其他操作时使用。

空元素:
不包含任何内容的元素称为空元素。比如 <img>元素：

<img src="图片地址" alt="在图像无法显示时的替代文本">

作用：图像元素不需要通过内容产生效果，它的作用是其特定位置嵌入一个图像

其中alt属性：不可见的原因可能是：

用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。
有些错误使图像无法显示。可以试着故意将 src属性里的路径改错。保存并刷新页面就可以在图像位置看到：

1.1.3、HTML 元素嵌套使用

原理：可以将一个元素置于其他元素之中 —— 称作嵌套。
例：
要表明猫咪非常暴躁，可以将“very”用 元素包围，爆字将突出显示：

<p>My cat is <strong>very</strong> grumpy.</p>

在使用元素嵌套时主次顺序必须要正确

<p>My cat is <strong>very grumpy.</p></strong>

元素必须正确的开始和结束，这样才能清楚的显示出正确的嵌套层次。虽说浏览器可以显示，但浏览器会根据自己猜测来显示效果，但很大程度不会给你期望的结果。所以一定要避免！

1.1.4、HTML 基本结构

<!DOCTYPE html><!--文档声明，位于文档最前面位置-->
<html lang="en"><!--为HTML页面的根元素 其中lang在这里表示为语言：”en”代表英语，”zh-CN”代表中文-->
<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>

1.1.5、HTML 标记文本

1.1.5.1、标题

标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题。
HTML 文档也是一样。HTML 包括六个级别的标题，<h1> </h1>--<h6></h6>，一般最多用到 3-4 级标题。

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

1.1.5.2、段落

如上文所讲，<p> 元素是用来指定段落的。通常用于指定常规的文本内容：

<p>这是一个段落</p>

1.1.5.3、列表

Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：

无序列表（Unordered List）在项目的顺序并不重要，就像购物列表为标题。用一个 <ul> 元素包围。
有序列表（Ordered List）在项目的顺序很重要，就像烹调指南。用一个 <ol> 元素包围。

其中列表的每个项目可以用一个列表项目（List Item）元素 <li> 包围。
例：

<p>驾驶证考试科目有：</p>
<ul>
  <li>科目一</li>
  <li>科目二</li>
  <li>科目三</li>
  <li>科目四</li>
</ul>

1.1.5.4、链接

链接在网页布局中非常常见 — 它们赋予了文字生命力。当需要给文字植入一个链接时，我们需要使用一个简单的元素 : <a> </a> — a 是 “anchor” （锚）的缩写。
例：

<a href="https://www.baidu.com/">百度</a>

1.2、常用CSS

1.2.1 css是用来干什么的

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：

p {
   color: red;
}

css样式存放点：
1 ：

<!DOCTYPE html><!--文档声明，位于文档最前面位置-->
<html lang="en"><!--为HTML页面的根元素 其中lang在这里表示为语言：”en”代表英语，”zh-CN”代表中文-->
<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> <!--包含可见页面的所有内容-->
  <style>
  p {
     
       color: red;
    }
  </style>
</body>
</html>

采用外链接方式

<html lang="en"><!--为HTML页面的根元素 其中lang在这里表示为语言：”en”代表英语，”zh-CN”代表中文-->
<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">
  <link rel="stylesheet" href="./css/inder.css"><!--链接样式-->
  <title>Document</title>
</head>
<body>

</body>
</html>

在这里插入图片描述

1.2.2 css规则详解

首先让我们来看一看css规则：

p <!--Selector-->{
       color:                    red;
  <!--Properties-->          <!--Property value-->
}
<!----------------Declaration---------------->

整个结构称为规则集（通常简称“规则”），各部分释义如下：

选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration）
一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
属性（Properties）
改变 HTML 元素样式的途径。本例中 color 就是 <p> 元素的属性。
属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。
语法规则
每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。

如果需要同时修改多个属性，那么我们只需要将他们用分号进行隔开

p{
  font-size: 18px;
  color: red;
  border: 1px solid black;
}

同时我们也可以同时选择多个元素，当他们的元素具有相同样式时，我们将不同的选择器用逗号（,）分开。例如：

p, li, h1{
  font-size: 18px;
  color: red;
  border: 1px solid black;
}

1.2.3 字体和文本

在设置网页中我们需要设置一些特定字体应该如何设置呢

在网上找到我们需要的字体，并且参加文件夹导入到我们项目中
将其导入到css样式中

@font-face {/*字体*/
  font-family: BebasNeue; /*字体名*/
  src: url('../fonts/BebasNeue-webfont.eot'),
  url('../fonts/BebasNeue-webfont.ttf'),
  url('../fonts/BebasNeue-webfont.woff'),
  url('../fonts/BebasNeue-webfont.svg');
}

应用

p, li, h1{
  font-family: BebasNeue;/*字体名*/
  font-size: 18px;
  color: red;
  border: 1px solid black;
}

1.2.4 一切皆盒子

在编写 CSS 时你会发现，我们所写的代码好像都是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：
padding：即内边距，围绕着内容（比如段落）的空间。也可称为交互区域
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。
如图：
在这里插入图片描述
在这里我们还可能用到基础的属性有：

width：元素的宽度
height: 元素的高度;
background-color ：元素内容和内边距底下的颜色（该盒子区域内的背景颜色）
color ：元素内容（通常是文本）的颜色
text-shadow ：为元素内的文本设置阴影
text-align: center;文字居中
display ：设置元素的显示模式（暂略）
宽度（width)、高度（height）设置元素的高度和宽度。
- 可设置的值有：
  - auto - 默认。浏览器计算高度和宽度。
  - px、cm 等定义高度/宽度。
  - % 设置百分比定义高度/宽度。

例：

<!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>
  <style>
    body {
     
      width: 600px;
      margin: 0 auto;
      background-color: #FF9500;
      padding: 0 20px 20px 20px;
      border: 5px solid black;
    }
    h1{
     
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>喜欢唱，跳，rep，篮球</h1>
</body>

</html>

在这里插入图片描述

根据上述<dody>元素。我们进行逐条解读：

width: 600px; — 强制性规定页面永远保持 600 像素宽。（在我们进行页面缩小时有滚动）
margin: 0 auto; — 为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中我们设置了它为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。
margin写法：
margin:两个值用空格隔开例：margin：10px 20px;上下10 左右20
margin：一个值例:margin:10px 上下左右都是10px
margin:四个值用空格隔开 (margin: 上右下左)
margin:三个值为(上左右下)(margin: 20px 40px 上是20px 右是40px)
background-color: #FF9500; — 如前文所述，指定元素的背景颜色。
padding: 0 20px 20px 20px;— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为 20 像素。值以上、右、下、左的顺序排列。
border: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框。

定位页面主标题并添加样式

 h1 {
      margin: 0;
      padding: 20px 0;
      text-align: center;
      color: #00539F;
      text-shadow: 3px 3px 1px black;
    }

修改后的样式
在这里插入图片描述
在这里我们对样式进行分析：

margin: 0;在原样式中margin存在一定的默认值，我们规定margin为0，是为了使margin看起来更好看
padding: 设置内边距
text-shadow:为元素中的文本提供阴影：
第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
第四个值设置阴影的基色。

1.2.5 块元素与行元素

块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；
行内元素：有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。但我们可以使用display:block;强制性将它转为块元素
常见的块元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>（地址引用）、<blockquote> （块引用）、<form>
常见的行元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
特点总结：
块特点：可以设置大小，独立成行
行级块特点：可以设置大小，不独立成行
(常用的用：<img>（图片）、<input>（输入框）)
行特点：不可以设置大小,不独立成
可以使用 display 相互转化一般为行转块 (行转行级块(display:block;) 块转行级块(display:inline))

1.2.6 图片

关于图片我们主要用途有：

在某一个地方插入图片

<img src="./imgs/3.jpg" alt=""><!--src="图片地址"-->

为某一个盒子设置背景图片

    h1 {
      margin: 0;
      padding: 20px 0;
      text-align: center;
      color: #00539F;
      text-shadow: 3px 3px 1px black;
      background-image: url('./10.1/imgs/4.jpg');
      /*url(‘图片地址')*/
    }

1.3、css属性

1.3.1、跟文字属性相关的

常用的属性有：
color: 设置文字颜色;
line-height: 设置行高;
font-size: 设置字体大小默认为16px 最小为12px;
letter-spacing：指定文本中字符之间的间距
word-spacing 指定文本中单词之间的间距。
white-space 指定元素内部空白的处理方式。
改变文本样子：
font-style:设置字体风格
- normal 默认值
- italic：显示一个斜体的字体样式。
- oblique：显示一个倾斜的字体样式。
font-weight: 设置字体粗细;
- normal 默认值与 400 相等
- bold 加粗与 700 相同
- lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。
- 100–900: 数值粗体值
text-transform:转换字体 ;
- none：禁止任何转型
- uppercase：转为大写
- lowercase: 将所有文本转为小写。
- capitalize: 转换所有单词让其首字母大写。
text-decoration: 取消/设置字体上的文本装饰，主要用在取消下划线
- none：取消存在的任何装饰
- underline：设置文本下划线
- overline: 文本上划线
- line-through: 穿过文本的线。
text-shadow: 文字阴影;
- 语法：text-shadow: h-shadow v-shadow blur color;
- h-shadow：必须，水平阴影的位置。允许负值。
- v-shadow：必须，垂直阴影的位置。允许负值。
- blur：可选。模糊的距离。
- color：可选。阴影的颜色。
text-align: 文本对齐;
- left: 左对齐文本
- right: 右对齐文本
- center: 居中文字
文本布局样式：
text-indent: 指定第一行留出多少水平空间(类似于首行缩进);
text-overflow: 当文本溢出包含元素的盒子时发生的事情。
- clip：修剪文本。
- ellipsis：显示省略符号来代表被修剪的文本。
- string
- fade:将会在截断行内溢出文本并在完全透明的行边缘添加一个淡出特效。

1.3.2、样式列表

<ul> 和 <ol> 元素会默认设置margin的顶部和底部的宽度分别为：16px(1em) 0;和 padding-left: 40px(2.5em); （注意：浏览器默认字体大小为 16px）
<li> 默认是没有设置间距的。
<dl> 元素设置 margin 的顶部和底部：16px(1em) ，无内边距设定。
<dd> 元素设置为： margin-left 40px (2.5em)。
在参考中提到的 <p> 元素设置 margin 的顶部和底部：16px(1em)，和其他的列表类型相同。
对于<ul>,<ol>,<li>,<dl>,<dd>,<p>虽然有一定的初始值但是我们也是可以进行重新设置：
以<ul>,<ol>为例我们可以设置的元素有：
list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
- 其中最主要的值有：none(无标记)
list-style-position ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。
- 语法为：list-style-image ：url("图片绝对地址")
在这里我们也可以直接使用
- list-style：list-style-type list-style-position list-style-image
- 例：list-style：square inside url('/i/arrow.gif');

1.3.2.1、列表计数

定义：在有时候，我们可能想在有序列表上进行不同的计数方式。
例如：从 1 以外的数字开始，或向后倒数，或者按步或多于 1 计数。在这里我们可以使用的有：

start允许我们可以从1以外的数进行计数。例：

<ol start="4">
  <li>《海与老人》</li>
  <li>《仙府长生》</li>
  <li>《嘉佑嬉事》</li>
  <li>《大奉打更人》</li>
</ol>

在这里插入图片描述

reversed这个我们可以结合 start属性进行使用：

  <ol start="4" reversed>
    <li>《海与老人》</li>
    <li>《仙府长生》</li>
    <li>《嘉佑嬉事》</li>
    <li>《大奉打更人》</li>
  </ol>

在这里插入图片描述

value 允许设置列表特点的值

 <ol>
    <li value="4">《海与老人》</li>
    <li value="9">《仙府长生》</li>
    <li value="12">《嘉佑嬉事》</li>
    <li value="14">《大奉打更人》</li>
  </ol>

在这里插入图片描述

1.3.2、超链接样式

对于超链接样式可以使用伪类来去设置样式其中应用的有：

:link 正常的，未访问的链接，
:visited 用户访问过的链接，
:hover 用户将鼠标悬停在链接上时。
:active 链接被点击时。

1.3.2.2、鼠标悬停样式

除此之外我们可以设置鼠标悬停样式这里我们直接上代码：
在这里我们用的属性是： cursor 更改鼠标悬停样式

<!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>
  <style>
    .crosshair {
   
      cursor: crosshair;
    }

    .pointer {
   
      cursor: pointer;
    }

    .move {
   
      cursor: move;
    }

    .text {
   
      cursor: text;
    }

    .wait {
   
      cursor: wait;
    }

    .help {
   
      cursor: help;
    }
  </style>
</head>

<body>
  <p>默认样式</p>
  <p class="crosshair">十字线</p>
  <p class="pointer">一只小手</p>
  <p class="move">可被移动</p>
  <p class="text">指示文本</p>
  <p class="wait">表示程序正忙</p>
  <p class="help">表示可用帮助</p>
</body>

</html>

1.3.3、CSS布局

1.3.3.1、display属性

在css页面布局中我们可以通过

display：值

属性来更改元素的默认行为方式其中常见的值有：

none 此元素不会被显示（主要作用:做隐藏可以特定的隐藏某一项在这个时间段不用的内容）
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
list-item 此元素会作为列表显示（类似于ul里面的li）。
inline-block 此元素会不独占一行的块级元素。
- 对于inline-block他的效果与float:left(浮动)类似，但又完全不相同。主要区别是
- - 1.对于父级来说float:left(浮动)会让父元素会高度坍塌
  - 2.所以在这时我们需要对父级使用overflow：hidden来闭合浮动
  - 3.对于浮动来说会出现参差不齐的现象

1.4、CSS基础

1.4.1、背景：background

在背景属性中我们主要用的有：

background-color：为背景添加颜色。
语法 : background-color：
background-image为背景添加图像（默认情况下，图像会重复，以覆盖整个元素。）
- 语法：background-image：url("图片决对地址")
- 注意背景颜色与颜色无法共存
background-repeat：图像重复方向/重复次数
- 语法 :background-repeat：值
- 水平方向重复 repeat-x
- 垂直方向重复 repeat-y
- 指定只显示一次背景图像：no-repeat
background-attachment：指定背景图像是应该滚动还是固定的
- 图像应随页面的其余部分一起滚动：scroll;
- 固定背景图像：fixed
background-position：指定背景图像的位置。
值有：top(上) left(左) right(右) bottom(下)
对于背景图片属性我们可以简写为：

background: 背景颜色背景图像重复方向/重复次数是否固定/滚动图像位置;
注意：属性值缺失并不要紧，但必须按照这个属性顺序来写

1.4.2、边框属性:border

1.4.2.1 、 border-style

在边框中我们可以设置不同的边框类型：

属性：border-style

----
  <style>
    .box {
   
     margin: 0 auto;
     width: 100px;
     height: 50px;
     border-style: dotted;//修改值
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>

值有：
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
对吧于边框我们于可以采用混合输出形式

border-style: 上右下左;

也可以特定某一边：
border-top-style: 上;
border-right-style: 右;
border-bottom-style: 下;
border-left-style: 左;

1.4.2.2 、 border-width

border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em 计），

border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px /
border-width: 20px 5px; / 上边框和下边框为 20px，其他边为 5px /
border-width: 25px 10px 4px 35px; / 上边框 25px，右边框 10px，下边框 4px，左边框 35px */

1.4.2.3 、 border-color

border-color 属性用于设置四个边框的颜色。
也可以指定不同边的颜色

border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */

注意：如果未设置 border-color，则它将继承元素的颜色。

1.4.2.4 、简写

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color
注意：边框样式是必需写的

在编写代码中，也可以在一个属性中指定所有单独的边框属性。

border-top：/上/
border-right ：/右/
border-bottom ：/下/
border-left：/左/

1.4.2.5、圆角边框属性:border-radius

border-radius 属性用于向元素添加圆角边框：

 border-radius: 5px;/*圆角角度*/

总结：

border	        简写属性，声明设置中所有边框属性。
border-color	简写属性，设置四条边框的颜色。
border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style	简写属性，设置四条边框的样式。
border-width	简写属性，设置四条边框的宽度。
---------------------------------------------------------
border-bottom	简写属性，在一条声明中设置所有下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
---------------------------------------------------------
border-left	简写属性，在一条声明中设置所有左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
---------------------------------------------------------
border-right	简写属性，在一条声明中设置所有右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
---------------------------------------------------------
border-top	简写属性，在一条声明中设置所有上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。

1.4.2.6、轮廓

定义：轮廓是在元素周围绘制的一条线，在边框之外从而凸显元素。
属性值与边框一样：

outline-style：轮廓样式
outline-color：轮廓颜色
outline-width：轮廓宽度
outline-offset：属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
outline：其中outline-style：（必需写）

1.4.3、外边距、内边距

外边距：margin：属性用于在任何定义的边框之外，为元素周围创建空间。
- 我们也可以指定任意一边的外边距：
  - margin-top
  - margin-right
  - margin-bottom
  - margin-left
- 注意：外边距可能会合并输出
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个新的外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
内边距：padding：属性用于在任何定义的边界内的元素内容周围生成空间。（交互空间）
- 我们也可以指定任意一边的内边距：
  - padding-top
  - padding-right
  - padding-bottom
  - padding-left

上两章总结：

背景属性有：

background-color：颜色
background-image：图像
background-repeat：重复
background-attachment：是否固定
background-position：位置

边框属性有：

border-style：边框样式
border-width：边框宽度
border-color：边框颜色
border-radius：添加圆角边框
margin：外边距
padding：内边距
width：宽度 height ：高度
outline-style：轮廓样式
outline-color：轮廓颜色
outline-width：轮廓宽度
outline-offset：轮廓偏移
font-family：规定文本的字体。

文本属性有：

color：颜色
text-align：对齐方式
text-decoration：用于设置或删除文本装饰。
text-transform：指定文本中的大写和小写字母。
text-indent：指定文本第一行的缩进：
letter-spacing：指定文本中字符之间的间距。
line-height：指定行之间的间距：
word-spacing：指定文本中单词之间的间距。
text-shadow：添加阴影
ont-style：属性主要用于指定斜体文本
font-weight ：指定字体的粗细：
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
font-size：属性设置文本的大小。

链接：

<a href="链接地址"> </a>
a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

列表：

无序列表（<ul>）- 列表项用的是项目符号标记
有序列表（<ol>）- 列表项用的是数字或字母标记

1.5、CSS中级

1.5.1、Display

display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline

1.5.1.1、block

块级元素总是从新行开始，并占据可用屏幕的全部宽度（尽可能向左和向右伸展）。
块级元素的一些例子：

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

1.5.1.2、 inline

内联元素不从新行开始，仅占用所需的宽度，可以使用padding来扩充。
行内元素的一些例子：

<span>
<a>
<img>

注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

1.5.1.3、display:none 也 visibility:hidden区别

display:none /主要配合定位，用于做下拉框，/

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中，类似于删除

visibility:hidden

通过将 visibility 属性设置为 hidden 可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：

例：

<!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>
  <style>
    .dsad {
   
      float: left;
      width: 200px;
      height: 200px;
      background-color: blue;
      /* visibility:hidden; */
    }

    .das{
   
      float: left;
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
      /* display:none; */
    }
    
    .dadss{
   
      float: left;
      width: 200px;
      height: 200px;
      background-color: rgb(223, 208, 9);
    }
  </style>
</head>

<body>
  <div class="dsad">visibility:hidden</div>
  <div class="das">display:none</div>
  <div class="dadss">参考</div>
</body>

</html>

原有样子
在这里插入图片描述

打开：display:none;
打开：visibility:hidden;

1.5.2、width与max-width区别

设置块级元素的 width 是为了防止其延伸到其容器的边缘。外面可以将外边距设置为 auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间进行平均分配

min-width 为浏览器设置最小宽度。
max-width 为浏览器设置最大宽度。

注意：max-width与min-width ，如果没给父级设置宽度，那么他将会默认父级的宽度为 100%，会随着浏览器的变小，而变小。

需要注意的是：当浏览器窗口小于max-width设置的宽度时当浏览器窗口小于元素的宽度时，浏览器会将水平滚动条添加到页面上。在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要。

1.5.3、定位：position

position 属性规定应用于元素的定位方法的类型。

其中有五个不同值：

静态定位的元素不受 top、bottom、left 和 right 属性的影响。
static：的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。（静态）
relative：不会对其余内容进行调整来适应元素留下的任何空间。
fixed：的元素是相对于视口定位的，这意味着即使滚动页面。固定定位的元素不会在页面中通常应放置的位置上留出空隙。例如：分享
absolute：元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
sticky：元素根据用户的滚动位置进行定位
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。例如：导航（其效果类似于excel的窗口冻结）
- 注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀。在这里我们还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

<!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>
  <style>
    body {
   
      width: 1100px;
    }

    .das {
   
      margin: 0 auto;
      max-width: 1000px;
      height: 2000px;
    }

    .sticky {
   
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: 5px;
      background-color: #cae8ca;
      border: 2px solid #4CAF50;
    }
  </style>
</head>

<body>
  <div class="sticky">我是有粘性的！</div>
  <div class="das">
    <p>英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。
《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”、“英雄联盟全球总决赛”、“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化 。</p>
  </div>
</body>

</html>

注意：可以使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

重叠元素 :z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）默认值为：auto

1.5.4、Overflow 属性

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

visible -：默认。溢出没有被剪裁。内容会在元素框外继续展示
hidden ：溢出被剪裁，其余内容将会不可见
scroll -：溢出被剪裁，并添加滚动条以便在框内滚动。
auto ：与 scroll 类似，但仅在必要时添加滚动条
overflow-x 和 overflow-y属性规定是水平或者是垂直地（或同时）更改内容的溢出方式
注释：overflow 属性仅适用于具有指定高度的块元素。

1.5.5、浮动：float

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下任意的一个值：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

1.5.5.1、去除浮动

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

其中 clear的值有：

none ：元素不会被向下移动以清除浮动
left ：元素被向下移动以清除左浮动。
right：元素被向下移动以清除右浮动。
both ：元素被向下移动以清除左右浮动。

1.5.6、水平和垂直对齐

对于对齐的方式我们主要有：

居中对齐元素：
如果要使块元素（例如 <div> ）水平居中，我们需要使用 margin: auto;。设置元素的宽度将防止其延伸到容器的边缘。然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：
需要注意的是：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。
居中对齐文本：
如果仅需使元素内文本居中，我们需要使用： text-align: center;
居中对齐图像：
如需将图像居中，我们需要为左右外边距设置为 auto，并将其设置为块元素例：

img {
   
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

使用定位设置对齐方式：
对齐元素的一种方法是使用 position: absolute; 例如:
注意：绝对定位的元素将从正常流中删除，并可能出现元素重叠。

.top {
   
  position: absolute;
  right

最低0.47元/天解锁文章

fvcvv

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML5 学习

HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。—HTML5是构建Web前端开发的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
复制链接

扫一扫