HTML & CSS学习总结

文章目录

HTML & CSS学习总结
前言
一、HTML&CSS是什么？
二、HTML使用文档
- 1.文档结构
- - 剖析一个 HTML 元素
  - 剖析 HTML 文档
- 2.标题和文本格式 heading
- 3.超链接和图片文件路径 img
- - 超链接语法如下
  - 锚点
  - 图片和文件路径
  - 文件路径
- 4.表格 Table
- 5.列表 List
- - 无序列表
  - 有序列表
- 6.表单 Form
- 7.其他
- - 区块元素
  - 内联元素
  - 预设格式
三、CSS使用文档
- 1.CSS语法
- - 选择器
  - - id选择器
    - class选择器
  - 引入CSS
  - - 外部样式表
    - 内部样式表
    - 内联样式
    - 级联优先级
- 2.盒子模型
- 3.定位
- - static
  - relative
  - fixed
  - absolute
- 4.组合选择器
- - 后代选择器
  - 子选择器
- 5.其他
- - 溢出
  - 浮动
  - 不透明度
  - 伪和伪元素
总结

前言

以下是正文

一、HTML&CSS是什么？

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面就是所谓的网页。“超文本”（hypertext）是指连接单个网站或多个网站之间的网页的链接。链接是网络的基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。 CSS是级联风格表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定如何在屏幕上呈现这些内容。

二、HTML使用文档

1.文档结构

HTML 使用"标记"（markup）在浏览器中显示文本、图片等内容。

剖析一个 HTML 元素

插入图片描述：在这里插入图片描述 1.开始标签（Opening tag）：包含元素的名称(本例为 p），被左右括号包围。表示元素从这里开始或开始工作 —— 段落从这个例子开始。 2.结束标签（Closing tag）：类似于初始标签，但它在元素名之前包含了一个斜杠。这意味着元素的结尾 —— 在这种情况下，段落在这里结束。初学者经常犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。 3.内容（Content）：本例中输入的文本本身就是元素的内容。 4.元素（Element）：开始标签、结束标签和内容的结合是一个完整的元素。

剖析 HTML 文档

我们之前创造的 HTML 文档分析如下：

<!DOCTYPE html>: 声明文档类型。由于历史原因，现在可有可无。 <html></html>: 这个元素包裹着整个页面，是一个嵌套在其他元素中的根元素。 <head></head>: 这个元素是一个容器，它包含了你想要包含的一切HTML但不想在页面上HTML显示在页面上的内容。这些内容包括关键字和页面描述，您想要出现在搜索结果中，CSS样式、字符集声明等。 <meta charset="utf-8">: 该元素设置文档使用utf-8字符集编码，utf-8字符集包含了大部分人类文本。基本上，他可以识别你放的所有文本内容。毫无疑问，使用它可以避免未来的许多其他问题。 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 浏览器标签上出现指定页面的图标。(试一试:可以随意下载一个.ico工作目录中的图标文件) <title></title>: 在浏览器标签上设置页面标题，当您标记/收集页面时，可以用来描述页面。 <body></body>: 包括文本、图片、音频、游戏等。代码如下(示例):

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">     <title>Title/title> </head> <body> </body> </html>

2.标题与文本格式 heading

在页面中，标题非常重要：搜索引擎用标题来索引页面的内容用户也习惯以标题进行主要内容浏览，以决定是否查看该页面代码如下（示例）：

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

注意：除本节介绍的这些标签可用于文本的格式外，其它标签都不建议用来进行格式的设置，如：<font><big><center>等标签皆为不推荐使用的。HTML 是用来表现页面内容而不是对页面进行修饰的，专门的页面美化需要使用后面将要学习的 CSS。

<p>吾乃<mark>抽卡不歪真君</mark></p>
<p><del>吾乃抽卡不歪真君</del></p>
<p><s>吾乃抽卡不歪真君</s></p>
<p><ins>吾乃抽卡不歪真君</ins></p>
<p><u>吾乃抽卡不歪真君</u></p>
<p><small>吾乃抽卡不歪真君</small></p>
<p><label>吾乃抽卡不歪真君</label></p>
<p><em>吾乃抽卡不歪真君</em></p>

显示效果如下：

吾乃抽卡不歪真君

~~吾乃抽卡不歪真君~~

吾乃抽卡不歪真君

吾乃抽卡不歪真君

3.超链接与图片文件路径 img

超链接语法如下

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明：

1.href即为要跳转去的地址 URL（Uniform Resource Locator) 2.target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self） 3.超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

锚点

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

<!-- 文档其余部分 -->
<h2 id="C1">第一章 XXX</h2>
<!-- 文档其余部分 -->
<a href="#C1">跳到第一章</a>
<!-- 文档其余部分 -->
...

注意： 1.元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4 2.超链接中的地址需要有#符号

图片及文件路径

在页面插入一张图片如下：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

说明： src属性为要显示图片文件的位置 URL，即图片文件的路径 alt属性当获取图片出现问题时显示的文字（占位符）可为图片指定高宽度，但不建议（可能导致图片变形）

文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

上面图片的例子即为绝对路径。下面是相对路径的例子：上表中，.表示当前目录，…表示上一级目录。

4.表格 Table

有时，页面的内容需要用表格来进行呈现。我们使用<table>等标签即可。下面是一个简单运用的例子：

  <table>
        <tr>
            <th>角色</th>
            <th>属性</th>
            <th>国家</th>
        </tr>
        <tr>
            <td>温迪</td>
            <td>风</td>
            <td>蒙德</td>
        </tr>
        <tr>
            <td>钟离</td>
            <td>岩</td>
            <td>璃月</td>
        </tr>
    </table>

显示如下：

角色	属性	国家
温迪	风	蒙德
钟离	岩	璃月

代码中，表示行, 表示行中的单元, 是表头的单元（将会加粗显示）

5.列表 List

无序列表

无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

有序列表

有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。下面是本人写的一个例子：

<p><label>原神必修篇</label></p>
    <ul type="circle">
        <li>高等元素反应论</li>
        <li>普通破盾学</li>
        <li>伤害乘取论</li>
        <li>韧性力学</li>
    </ul>
    <p><label>实操技能</label></p>
    <ol type="I">
        <li>滑步弓</li>
        <li>躲技能与无敌帧</li>
        <li>速射与卡刀</li>
    </ol>

显示效果如下

原神必修篇

高等元素反应论
普通破盾学
伤害乘取论
韧性力学

实操技能

滑步弓
躲技能与无敌帧
速射与卡刀

6.表单 Form

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。下面是本人写的一个例子：

<form>
        <!-- 文本框，注意有 placeholder 提示符 -->
        昵称：
        <input type="text" name="name" placeholder="请输入昵称"><br>
        UID:
        <input type="text" name="uid" placeholder="请输入UID"><br>
        <!-- 密码框 -->
        密码：
        <input type="password" name="ps" placeholder="请输入密码"><br>
        服务器：
        <!-- 数字输入框，注意 min 和 value 属性-->
        <input type="radio" name="area" value="">天空岛
        <input type="radio" name="area" value="guanfu" checked>世界树<br>
        <!-- 单选按钮, 注意 checked 属性 -->
        年龄：
        <input type="number" name="age" min="1" value="18"><br>
        性别：
        <input type="radio" name="gender" value="male" checked> 男
        <input type="radio" name="gender" value="female"> 女
        <input type="radio" name="gender" value="other"> 其它<br>
        <!-- 下拉列表，注意 selected 属性 -->
        所属党派：<br>
        <select name="party">
            <option value="xp" selected>偏XP党</option>
            <option value="qd">偏强度党</option>
            <option value="xq">XP和强度均分</option>
        </select><br>
        <!-- 多选框 -->
        您有以下哪些角色：<br>
        <input type="checkbox" name="people1" value="Zhongli"> 钟离<br>
        <input type="checkbox" name="people2" value="Wanye"> 万叶<br>
        <input type="checkbox" name="people3" value="Keli"> 可莉<br>
        <input type="checkbox" name="people4" value="Youla"> 优菈<br>
        <!-- 日期选择器 -->
        您的入坑日期：
        <input type="date"><br>
        <!-- 文件选择器 -->
        上传您的照片:<br>
        <input type="file" name="photo"><br>
        <!-- 文本输入区域，注意 rows 和 cols 属性 -->
        您的建议：<br>
        <textarea name="message" rows="5" cols="30">请在此写下您的宝贵建议！</textarea><br>
        <hr>
        <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
        <input type="submit" value="提 交">
        <input type="reset" value="重 置">
    </form>

7.其他

区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

内联元素

内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

预设格式

如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。

<pre>
              blablabla
              blablabla
</pre>

三、CSS使用文档

1.CSS语法

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

h2{ 
        color:red;font-size:10px;}

这条规则表明，页面中所有的一级标题都显示为红色，字体大小为10像数。说明： 1.选择器是您需要改变样式的对象（上图的规则就二级标题生效）。 2.每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割） 3.属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

选择器

选择器种类众多，常见的有id选择器和class选择器

id选择器

注意：元素的id值必须唯一，所以id选择器适用的范围只有一个。

/* 注意：id选择器前有 # 号。 */
#sky{ 
        
  color: blue;
}

这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色，如下所示的页面，蓝色的天空这几个字就将会是蓝色的。

<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>

class选择器

元素的class值可以有多个，也可以重复，所以应用实际中class选择器非常普遍。

/* 注意：class选择器前有 . 号。 */
.center{ 
        
  text-align: center;
}
.large{ 
        
  font-size: 30px;
}
.red{ 
        
  color: red;
}

以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。

<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

引入CSS

我们一般有三种方法：外部样式表，内部样式表，内联样式

外部样式表

在和要引用的HTML文件的同一目录新建一个样式表文件mycss.css（注意后缀名为css）利用下面的语句写进在HTML的head标签中即可引入CSS样式。

  <link rel="stylesheet" type="text/css" href="mycss.css">

引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

内部样式表

我们也可以将样式放在 HTML 文件中，这称为内部样式表。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 --> <link rel="stylesheet" type="text/css" href="mycss.css"> <title>页面标题</title> <style> body { 
        
      background-color: linen;
      text-align: center;
    }
    h1 { 
        
      color: red;
    }
    .haha { 
        
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>CSS用法总结</h1>
  <hr>
  <p class="title1">标题一</p>
</body>
</html>

该例子与上述例子一样的效果，但注意在<head>元素中引入了<style>标签，放入了样式。

内联样式

所谓内联样式，就是直接把样式规则直接写到要应用的元素中，如：

<h3 style="color:green;">We are the one！</h3>

级联的优先级

1.内联样式 2.内部样式表或外部样式表 3.浏览器缺省样式

2.盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示： Content 盒子的内容，如文本、图片等 Padding 填充，也叫内边距，即内容和边框之间的区域 Border 边框，默认不显示 Margin 外边距，边框以外与其它元素的区域注意：我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度。边框样式例子：

  border: 1px dotted black; /* 上下左右都相同 */
  border-bottom: 1px solid blue; /* 只设置底部边框 */
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */

内外边距样式例子：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

3.定位

position属性用于对元素进行定位。该属性有以下一些值： static 静态 relative 相对 fixed 固定 absolute 绝对设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

static

设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

relative

设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移

fixed

设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）

absolute

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。

4.组合选择器

后代选择器

以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。

<html> <head> <style> .haha p { 
        
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha>.</p>
    <span>
        <p>Paragraph 3 in the div .haha.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

上面例子中，段落1、2、3都将有黄色的背景，而段落4、5没有。

子选择器

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

元素。

<head> <style> .haha > p { 
        
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha.</p>
    <span>
        <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
    </span> <!-- not Child but Descendant -->
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。

5.其他

溢出

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

浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。我们常用这种样式来使图像和文本进行合理布局。下面是将图片浮动在右边。文字在左边绕着图片显示：

<html> <head> <style> .float-right { 
        
      float: right;
    }
  </style>
</head>
<body>
  <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="float-right" alt="">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
  corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
  modi nam vero!</p>
</body>
</html>

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。一个元素浮动后，其后的元素将尽可能包围它，或者说出现在这个浮动元素的左或右方。如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除

不透明度

采用用opacity对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。例子如下：

<style> img { 
        
      width: 25%;
      border-radius: 10px;
      float: left;
      margin: 10px;
    }
    .opacity2 { 
        
      opacity: 0.2;
    }
  </style>

伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。比如我们可能有这样的需求：鼠标移到某元素上变换背景颜色、超链接访问前后访问后样式不同、离开必须填写的输入框时出现红色的外框进行警示等等。

如果在下面的例子的链接已被访问，它会显示为红色。

a.red:visited { 
        color:#FF0000;}
<a class="red" href="https://baidu.com">百度一下</a>

在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：

p:first-letter
{ 
        
    color:#ff0000;
    font-size:xx-large;
}
p:first-line 
{ 
        
    color:#0000ff;
    font-variant:small-caps;
}

总结

以上就是今天要讲的内容，本文仅仅简单介绍了HTML和CSS的基本使用。HTML 是构成 Web 世界的一砖一瓦，它定义了网页内容的含义和结构，而使用 CSS 我们可以大大提升网页开发的工作效率！除 HTML 和CSS以外的其它技术的功能与行为（如 JavaScript），在后续会逐渐讲解后者的基本用法。

HTML $ CSS基本用法总结

文章目录

最近热搜

历史搜索 清除历史记录

历史搜索清除历史记录