HTML & CSS 学习总结

等流年

已于 2022-06-30 11:09:39 修改

阅读量157

点赞数

文章标签： html 学习前端

于 2022-06-30 11:02:42 首次发布

本文链接：https://blog.csdn.net/qq_61850094/article/details/125406778

版权

HTML的学习笔记

初识HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。在HTML中可以使用下面的形式来表示：


<!-- <p>我在注释内！浏览器将忽略我</p> -->

HTML的元素

（1）HTML的一些通用元素：HTML 标记包含一些规定的"元素"如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等。

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

（2）HTML的空元素：在HTML中是存在空元素，一般来说元素都是由开始标签，内容，结束标签组成的。都是某些元素只有一个开始标签，这样的元素被称为空元素。

（3）HTML的元素属性：元素是可以拥有相关属性的，其属性就相当于拥有额外的消息，都是这些消息并不会出现在浏览器中。就如下面的例子一样

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

元素的属性必须要包含以下的一些内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个 = 号。
一个属性值，由一对引号 "" 引起来。
嵌套的HTML元素：大多数HTML元素可以嵌套使用，即HTML元素可以包含其他HTML元素，HTML文档由互相嵌套的HTML元素构成。

HTML的标签

HTML的标签通常是由被<>包围起来的关键字组成如<p>,标签通常是有开始和结束的，即标签通常成对出现。如：<p>内容</p>，这里＜ｐ＞是开始标签，＜／ｐ＞是结束标签，结束标签就是在开始标签的基础上在关键字前面加上了一个斜杠。

<!DOCTYPE> 声明

<!DOCTYPE> 是声明文档类型，有些时候为了能够使得部分浏览器能够正确显示网页的内容使用合适的声明来使得浏览器能够正确显示出网页。

HTML文档的简单解析

（1）标题：HTML的标题通常有六级标题分别是用<h1>，<h2>，<h3>，<h4>，<h5>，<h6>来代表一到六级标题。标题的醒目程度按照一到六级逐渐递减。

（2）HTML的段落：HTML的段落可以用<p>段落</p>来表示。

（3）HTML的超链接：实际上我们可以通过超链接实现跳转功能。超链接的语法详细示例如下

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

锚点：也叫做书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

（4）HTML的头部元素<head>：<head>元素包含了所有的头部标签，可以在<head>元素里面插入scripts,样式文件，以及各种meta文件。可以在头部标签中加入的元素标签有：<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

<title>:该元素标签定义不同文档的标题，浏览器的标题等等。

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

<meta>

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

一般放置于区域。

(5)HTML的换行：使用标签<br>即可换行。

HTML的图片及文件路径

（1）图片：图片是由<img>标签来定义的，src属性为要显示图片文件的位置 URL，即图片文件的路径。alt属性当获取图片出现问题时显示的文字（占位符）。下面是图片的示例：其中height和width分别表示图片的高度和宽度。

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

（2）文件路径：当我们需要获取某个图片的时候，我们需要之处该图片位于何处

相对路径：1.图片与当前文档处于就同一目录下

<img src="picture.jpg">

2.图片与当前文件处于当前目录的images目录中

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

3.图片文件在上一级目录中

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

绝对路径：上面图片的示例中就是绝对路径的体现。

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
        <tr>
            <td>你好</td>
            <td>你好</td>
        </tr>
        <tr>
            <td>你好</td>
            <td>你好</td>
        </tr>
    </table>

列表

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

    <ul>
        <li>java</li>
        <li>python</li>
    </ul>

（2）有序列表：使用<ol>标签，使用数字来进行标记每个标签，当然每个标签但是由<li>标签为起始点。

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

表单

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

<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 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

区块

HTML的元素可以称为区块或者内联的方式进行显示，大多数HTML元素被定义为块级元素或内联元素。

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

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

HTML的div元素

<div>元素是块级元素，用于组合其他HTML元素的容器。

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

HTML的span元素

<span>是内联元素，可以用作文本容器。

 <h2><span style="color:chartreuse">唐</span> -李白</h2>

HTML的表单

二.HTML布局、

布局用于改善网站的外观，我们可以使用<div>或者<table>添加网页布局，大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

1.使用div元素添加网页布局
div 元素是用于分组 HTML 元素的块级元素。

CSS学习笔记

CSS：级联样式表缩写，HTML用于撰写页面内容，CSS将绝对这些内容该如何在屏幕上呈现。

CSS样式是有有两个主要部分构成：选择器，和以{}包裹起来的一条或者多条声明,就如下面的声明，表示页面的一级标题为蓝色，字体大小为12个像素。

h1 {color:blue;font-size:12px}

选择器：选择器是需要改变的对象。

如果需要在HTML元素中使用CSS样式，那么就可以在元素中使用选择器。

选择器分为：id选择器和class选择器。

（1）id选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

  color: blue;
}

上面表示id为sky的元素呈现为蓝色。

（2）class选择器：class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用，class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

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

上面的代码表示，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。

每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS如何生效

方法：外部样式表，内部样式表，内联样式

（1）外部样式表：当样式需要应用于很多界面时，通常使用外部样式表，外部样式表可以通过改变某个文件来达到改变整个HTML文档布局的目的，每个页面使用<link>标签连接到样式表。<link>标签在文档的头部。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.haha {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

（2）内部样式表：当文档的需要特殊样式的时候就应该使用内部样式表。使用<style>标签在文档头部定义内部样式表。

<style>
        hr {
            color: sienna;
        }

        p {
            color: red;
        }

        body {
            background-color: aqua;
        }
    </style>

（3）内联样式：当样式只需要在元素上应用一次时可以使用内联样式，但是由于内联样式把表现和内容混在一起，所以不建议使用！

<p style="color:red">内联样式不建议使用!</p>

（4）级联的优先级：从高到低依次为：内联样式，内部样式表和外部样式表，浏览器缺省样式

CSS背景

CSS 背景属性用于定义HTML元素的背景。CSS背景有以下的效果：

1.背景颜色
background-color 属性定义了元素的背景颜色，在body选择器中使用！

body {background-color:grey;}
1
CSS中的颜色通常有以下三种定义方式：

十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”
2.背景图像
background-image 属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

background-image: url('images/1.jpg');
1
3.背景图像 - 水平或垂直平铺
background-image属性默认会在页面的水平或者垂直方向平铺。但是有时候图片在水平和垂直方向平铺不能达到想要的效果，可以选择只在某一方向平铺。

4.背景图像- 设置定位与不平铺

为了让背景图片不影响文本的排版可以使用 background-repeat属性让图片不平铺，以达到预期的效果！

同时可以通过background-position属性设置图片显示的位置，让文本达到最佳的显示效果！

body
{
background-image:url('images/pai.jpg');
background-repeat:no-repeat;
background-position:right top;/*设置背景图像的起始位置。*/
}

5.背景- 简写属性
为了简化页面背景属性的代码，可以将这些属性合并在同一个属性中。背景颜色的简写属性为 "background"。

body {background:grey url('images/pai.jpg') no-repeat right top;}

CSS尺寸

CSS中的尺寸单位：px: Pixel 像素、pt: Points 磅、pc: Picas 派卡、in: Inches 英寸、mm: Millimeter 毫米、cm: Centimeter 厘米、q: Quarter millimeters 1/4毫米

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

对齐

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

文本排列属性是用来设置文本的水平对齐方式。

文本的水平排列方式有居中，对齐到左，对齐到右，两端对其。

盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：

说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

新建如下 HTML 文件：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
    <div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
  </body>
</html>

再建对应的 CSS 文件如下：

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

打开浏览器看看效果。

提示：在页面上点击鼠标右键，选择审查元素，你可清楚看到如下图所示的布局。

留意上图，你会发现一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距

因此，我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度。

边框与边界

边框：使用border属性指定CSS表格的边框。

.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

1.链接样式
不同的链接可以有不同的样式，链接的不同状态也可以有不同的样式。

链接的四种状态：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link {color:black;} /* 未访问链接*/
a:visited {color:greenyellow;} /* 已访问链接 */
a:hover {color:red;} /* 鼠标移动到链接上 */
a:active {color:blue;} /* 鼠标点击时 */
1
2
3
4
a:hover 必须跟在 a:link 和 a:visited后面,a:active 必须跟在 a:hover后面。

2.文本修饰
text-decoration 属性主要用于删除链接中的下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

3.背景颜色
背景颜色属性指定链接背景色：

a:link {background-color:#B2FF99;} /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;} /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;} /* 鼠标点击时 */

等流年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML & CSS 学习总结

HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。在HTML中可以使用下面的形式来表示：HTML的元素（1）HTML的一些通用元素：HTML 标记包含一些规定的"元素"如 atalist>，，，，，，等等。声明为 HTML5 文档元素是 HTML 页面的......
复制链接

扫一扫