HTML+CSS基础笔记

最新推荐文章于 2024-01-14 23:47:16 发布
最新推荐文章于 2024-01-14 23:47:16 发布
阅读量1k 收藏 20
点赞数 18
分类专栏： 前端 文章标签： html css 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sq91fra/article/details/135576483
版权

作者：FL

日期：2024年1月13日

版本：1.0

一、HTML

1.HTML简介

HTML 是用来描述网页的一种语言。

模板：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
    <style></style>
</head>

<body>
  <header >
    
  </header>

  <section >
    
  </section>

  <footer >
    
  </footer>

  
  <script </script>
</body>

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

2.HTML基础

2.1标题

HTML 标题（Heading）是通过<h1> ~ <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

2.2HTML 段落

HTML 段落是通过标签<p>来定义的。

<p>这是一个段落。</p> <p>这是另外一个段落。</p>

2.3超链接

HTML 链接是通过标签 <a> 来定义的。

2.4HTML 图像

<img src="url" alt="some_text">

2.5HTML 格式化标签

HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体

3.HTML 表格

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

  • tr：tr 是 table row 的缩写，表示表格的一行。
  • td：td 是 table data 的缩写，表示表格的数据单元格。
  • th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格生成器：https://c.runoob.com/front-end/7688/

4.HTML 列表

HTML 支持有序、无序和定义列表:

4.1HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

4.2HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

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

4.3HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

5.表单和输入

  • HTML 表单用于收集用户的输入信息。
  • HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
  • HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
  • <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）。
  • <label> 元素用于为表单元素添加标签，提高可访问性。
  • <input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
  • <select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。
<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

6.区块

HTML 可以通过<div>和 <span>将元素组合起来。

6.1HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

6.2HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

6.3HTML div 元素

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

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用， <div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

6.4HTML span 元素

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

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

7.input和button

7.1<input> 标签

功能

<input> 标签是用于创建表单中的输入控件，可以让用户在表单中输入数据的标签。它可以被用来创建各种不同类型的输入字段，比如文本框、密码框、单选框、复选框、提交按钮等。

使用方法

<input> 标签通常需要嵌套在 <form> 标签中，以便收集用户输入并将数据提交到服务器。

属性
  • type：指定输入字段类型，如 text、password、checkbox 等。
  • name：为控件定义唯一的名称，用于在表单提交时识别字段。
  • value：指定输入字段的初始值。
  • placeholder：在输入字段为空时显示的提示文本。
  • required：表明该字段是必填的，用于表单验证。
  • disabled：禁止用户编辑字段。
  • readonly：禁止用户编辑字段，但字段值可以被JavaScript修改。
应用场景示例
  1. 文本输入框：
<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名">
</form>
  1. 密码输入框：
<form>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" placeholder="请输入密码">
</form>
  1. 单选按钮：
<form>
  <input type="radio" id="male" name="gender" value="male" checked>
  <label for="male">男</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>
</form>
  1. 复选框：
<form>
  <input type="checkbox" id="vehicle1" name="vehicle" value="Bike">
  <label for="vehicle1">我有一辆自行车</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle" value="Car">
  <label for="vehicle2">我有一辆汽车</label>
</form>

7.2<button> 标签

功能

<button> 标签用于创建按钮，通常用于触发 JavaScript 函数或者提交表单数据。

使用方法

<button> 标签可以独立使用，也可以嵌套其他内容，如文本或图像。

属性
  • type：指定按钮的类型，如 submit、button、reset。默认为 button。
  • name：为按钮定义唯一的名称，用于在表单提交时识别按钮。
  • value：按钮的值，通常在提交表单时使用。
  • disabled：禁止用户点击按钮。
  • onclick：指定当按钮被点击时的行为，通常使用 JavaScript 代码。
应用场景示例
  1. 提交表单的按钮：
<form>
  <input type="text" name="username" placeholder="用户名">
  <button type="submit">提交</button>
</form>
  1. 使用 JavaScript 的按钮：
<button onclick="myFunction()">点击我</button>
<script>
function myFunction() {
  alert('按钮被点击了！');
}
</script>
  1. 带图像的按钮：
<button type="button">
  <img src="image.png" alt="点击这里">
</button>

iframe框架*

iframe（即“内联框架”）是一种用于在网页中嵌入其他网页或文档的标签。通过使用iframe，你可以在一个网页中显示另一个网页，就像在一个窗口中嵌套另一个窗口一样。

你可以在一个iframe中嵌套另一个iframe，形成多层嵌套结构。

重要的属性:

  • src属性：这是最重要的属性之一，它指定要在iframe中显示的页面的URL。可以使用相对路径或绝对路径指定URL。
  • width和height属性：这些属性用于设置iframe的宽度和高度。可以使用像素值或百分比来指定尺寸。
  • frameborder属性：该属性用于指定iframe周围是否显示边框。设置为0表示不显示边框，设置为1表示显示边框
  • allowfullscreen属性：如果你在iframe中嵌入了一个视频或地图等具有全屏模式的内容，你可以使用该属性来允许用户在全屏模式下查看
  • sandbox属性：该属性用于创建一个沙盒环境，限制嵌入的页面的行为，以增加安全性。
<!DOCTYPE html>
<html>
<head>
  <title>嵌入页面示例</title>
</head>
<body>
  <h1>主页面</h1>
  <p>这是主页面的内容。</p>
  
  <!-- 在iframe中嵌入另一个页面 -->
  <iframe src="https://www.example.com" width="600" height="400"></iframe>
  
  <h2>其他内容</h2>
  <p>这是主页面的其他内容。</p>
</body>
</html>

更多内容可参考：HTML iframe框架

Canvas*

HTML5 <canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。

<canvas>简单实例如下:
    <canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个<canvas>元素.

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

没有学习js的朋友可以先跳过该部分。

//首先，找到 <canvas> 元素
var c=document.getElementById("myCanvas"); 
//然后，创建 context 对象,为内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx=c.getContext("2d"); 
//下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000"; 
ctx.fillRect(0,0,150,75);

更多内容可参考： HTML5 Canvas

二、CSS

1.什么是 CSS

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • CSS其实就是为美化html的样式，html的内联样式不方便管理，所以才需要css

内联样式案例：

<h1 style="color: blue; font-size: 24px;">这是一个标题</h1>
<h1 style="color: blue; font-size: 24px;">这是一个标题</h1>

CSS案例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS样式示例</title>
  <style>
    /* CSS样式定义 */
    h1 {
      color: blue; /* 设置标题的文本颜色为蓝色 */
      font-size: 24px; /* 设置标题的字体大小为24像素 */
    }
    
    p {
      color: red; /* 设置段落的文本颜色为红色 */
      font-size: 16px; /* 设置段落的字体大小为16像素 */
    }
  </style>
</head>
<body>
  <h1>这是一个标题</h1>
    <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>
</html>

2.CSS 语法

  1. CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

在这里插入图片描述

p
{
    color:red;
    text-align:center;
}
  1. CSS 注释:

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{
    /*这是另一个注释*/
    color:black;
}

3.插入CSS的方法

插入CSS的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

外部样式表

  • 当样式需要应用于很多页面时，外部样式表将是理想的选择。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

  • 当单个文档需要特殊的样式时，就应该使用内部样式表。
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式(不推荐)

  • 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，请慎用这种方法。
  • 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

4.id 和 class 选择器

  • 如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
  • “id” 和 "class"选择器是css中最基础的选择器，选择器会在后面进一步讲解

4.1id 选择器

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

注意：ID属性只能在一个元素中使用；ID属性不要重复;ID属性不要以数字开头

示例：

		#h01{
            color: blue;
        }
        #h02{
            color: red;
        }
        #para{
            color: green;
        }

  <h1 id="h01">这是一个标题</h1>
    <h1  id="h02">这是一个标题</h1>
  <p id="para">这是一个段落。</p>

在这里插入图片描述

4.2class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

		.h01 {
            color: blue;
        }
        
        .para {
            color: red;
        }

<h1 class="h01">这是一个标题</h1>
    <h1 class="h01">这是一个标题</h1>
    <p class="para">这是一个段落。</p>

在这里插入图片描述

5.CSS常用样式

5.1CSS 背景

  • CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

背景颜色的简写属性为 “background”,当使用简写属性时，属性值的顺序为：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

5.2文本格式

文本颜色:

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

参阅 CSS 颜色值 查看完整的颜色值。

文本的对齐方式：

  • 文本排列属性是用来设置文本的水平对齐方式。
  • 文本可居中或对齐到左或右,两端对齐.
  • 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

5.3CSS 字体

所有CSS字体属性:

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。

5.4CSS 链接

链接状态：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

文本修饰：

  • text-decoration 属性主要用于删除链接中的下划线：

背景颜色：

背景颜色属性指定链接背景色

5.5CSS 列表

所有的CSS列表属性

属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。

5.6CSS 表格

所有的CSS列表属性

属性描述
border指定CSS表格边框
border-collapse设置表格的边框是否被折叠成一个单一的边框或隔开
Width和height定义表格的宽度和高度
text-align设置水平对齐方式，向左，右，或中心：

5.7尺寸

属性描述
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

5.8Display(显示) 与 Visibility（可见性）

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

  • visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
  • display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

6.CSS 盒子模型★

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
image-20240113203824320

6.1Margin(外边距)

属性描述
margin简写属性。在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

6.2Border(边框)

CSS边框属性允许你指定一个元素边框的样式和颜色。

属性描述
border简写属性，用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
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设置元素的上边框的宽度。
border-radius设置圆角的边框。

6.3Padding(内边距)

属性说明
padding使用简写属性设置在一个声明中的所有填充属性
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充
padding-right设置元素的右部填充
padding-top设置元素的顶部填充

6.4Content(内容)

width

height

7.定位★

7.1static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

7.2fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

7.3relative 定位

相对定位元素的定位是相对其正常位置。

7.4absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

7.5sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

8.Float(浮动)★

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

8.1元素怎样浮动

  • 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
  • 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
  • 如果图像是右浮动，下面的文本流将环绕在它左边

8.2彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

8.3清除浮动 - clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

属性描述值CSS
clear指定不允许元素周围有浮动元素。left right both none inherit1
float指定一个盒子（元素）是否可以浮动。left right none inherit1

9.其他样式

9.1Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

9.2轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

image-20240113210053140
属性说明值
outline在一个声明中设置所有的轮廓属性*outline-color outline-style outline-width *inherit
outline-color设置轮廓的颜色*color-name hex-number rgb-number *invert inherit
outline-style设置轮廓的样式none dotted dashed solid double groove ridge inset outset inherit
outline-width设置轮廓的宽度thin medium thick *length *inherit

10.弹性盒子（Flexbox）

CSS3中的弹性盒子（Flexbox）是一种布局模型，用于管理和对齐容器内的元素，使之能够响应空间变化，实现各种复杂的布局需求。弹性盒子模型主要包含弹性容器（Flex Container）和弹性子元素（Flex Item）两大类。

10.1概念

弹性容器是一个设置为弹性盒模型的元素，它的子元素将成为弹性子元素。弹性子元素可以是任何元素，包括文本、图片、其他容器等。

10.2特点

  1. 灵活性：弹性盒子能够在一维（水平或垂直）上伸展和收缩，以适应不同大小的屏幕和容器。
  2. 自动对齐：弹性子元素会根据容器的大小自动调整位置和对齐方式。
  3. 空间分配：容器可以自动分配多余空间给子元素，或让子元素根据空间不足自动缩小。
  4. 简化的布局：相比传统的使用浮动或定位进行布局，Flexbox提供了更简单、直观的方法。
  5. 响应式设计：易于创建响应式布局，使得页面在不同设备上都能保持良好的显示效果。

10.3应用场景

  • 响应式导航栏：实现移动端和桌面端导航栏的自动适配。
  • 图片轮播：轻松实现图片或项目的横向或纵向滚动展示。
  • 复杂组件布局：如搜索框、按钮组、导航菜单等。
  • 响应式表格：使表格内容在不同设备上都能正确显示。

10.4CSS属性

  1. display：设置元素为弹性容器（flex）或行内弹性容器（inline-flex）。
  2. flex-direction：定义子元素的排列方向（row、row-reverse、column、column-reverse）。
  3. justify-content：控制子元素在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）。
  4. align-items：定义子元素在交叉轴上的对齐方式（stretch、flex-start、flex-end、center、baseline）。
  5. flex-wrap：控制子元素是否换行（nowrap、wrap、wrap-reverse）。
  6. align-content：当有多行子元素时，定义子元素在交叉轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）。
  7. order：定义子元素的排列顺序。
  8. flex-grow、flex-shrink、flex-basis：控制子元素的灵活性和基础尺寸。

10.5简单示例

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  width: 600px;
  height: 300px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>
</head>
<body>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
</body>
</html>

在这个示例中，.container 是一个弹性容器，它的子元素 .box 将会平均分布在容器内，并且当容器大小变化时，子元素能够相应地伸缩。

FL不凡
关注
  • 18
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html与css基础
xiaowu1127的博客
10-20 714
html与css基础
html+css notes (ongoing 20/4/12)
weixin_45743001的博客
03-03 549
HTML+CSS 笔记 注释 <!-- 注释内容 --> 元素 <a>内容</a> 超链接 <a href="https://www.baidu.com" title="baidu">百度</a> 属性的种类 全局属性：title 局部属性: 元素的种类 空元素：没有结束标记 <meta charset="UTF-8">...
HTML与CSS基础
Zzy2372的博客
10-09 732
H5+CSS3 第一章：HTML基础 1，HTML简介 HTML (Hyper Text Markup Language) 超文本标记语言 超文本 不仅仅包含文本信息，还包括图片，视频，音频… 标记：用来描述超文本的标签 百度一下 语言：高级计算机语言 2，HTML历史 创始人： Tim Berners-Lee（蒂姆·伯纳斯-李）【互联网之父、W3C创始人、HTML设计者】 1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他
html和css基础
浮若于心
10-04 432
1、标题标签 <hn></hn> 特点：加粗并变大 2、段落标签 <p> 特点：将内容单独放在一个段落里面有换行的效果 3、换行标签 <br /> 特点：就是换行的意思 4、分割线标签 <hr /> 特点：在页面上添加一条分割线 5、快捷键 ctrl + c 复制 ctrl + v 粘贴 ctrl + s 保存 ctrl + x ...
HTML和CSS基础
weixin_34343689的博客
08-19 89
本文内容主要是HTML和CSS基础知识的杂乱无章的回顾，所以知识点的出现无序的。 1. inline、block和inline-block     block元素的前后总是有空行，可以设置margin等参数。而inline元素是嵌在block里面的，它的高度不可单独设置，且inline (div)内部不能嵌入block (div)。     但有时候我们需要将block元素按inline方式...
html+css基础笔记
04-02
html+css基础笔记
JavaSE html+CSS基础笔记归纳.zip
08-08
总结来说，"JavaSE html+CSS基础笔记归纳.zip" 包含的内容是JavaSE的基础知识，HTML和CSS的网页设计，MySQL数据库的使用，以及Java面试的常见问题。对于初学者或复习者来说，这些资料可以帮助巩固基础，提升技能，并...
黑马基础学习html+css课程笔记和案例
06-29
在“黑马基础学习html+css课程笔记和案例”中，你可以找到学习这两门语言的详细资源，包括理论知识和实践案例。 HTML是网页内容的结构标记语言，它定义了网页的基本元素，如标题、段落、链接、图片等。学习HTML首先...
html+css基础.md
02-25
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体...此资源 原创HTML+CSS基础 实战51zxw.net 小清流吖羞羞萌芽之作。
黑马html+css笔记
08-03
黑马HTML+CSS笔记 本资源主要讲解HTML的基础知识，包括HTML的基本语法、网页组成、标签关系、注释、标题标签、段落标签、换行和水平线、文本格式化标签、图像标签、路径、超链接标签、音频和视频等知识点。 1. ...
HTML和CSS简单基础
李李的博客
09-22 139
网页由三部分组成：内容、表现和行为。 这第三部分内容一般依靠 HTML、CSS和JavaScript技术来实现。 Hyper Text Markup Language（HTML） 超文本标记语言 HTML通过标签来标记要显示的网页中的各个部分。 书写规范： <html> <!--表示整个HTML页面的开始 --> <head> <!--头信息--> <title>标题&lt
HTML+CSS基础
木易一
11-14 316
一、关于HTML     HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag)   HTML 使用标记标签来描述网页    HTML 标记标签通常被称为 HTML 标签 (HTML...
HTML和CSS基础知识
最新发布
m0_59583208的博客
01-14 352
（2） 绝对定位：position: absolute---- 参考body标签的左上角原点位置进行定位---释放原有空间位置---脱标（脱离标准流布局）----参考自己默认的原位置进行定位---不释放原有空间位置---没有脱标（脱离标准流布局）----参考浏览器窗口的左上角原点位置进行定位---释放原有空间位置---脱标（脱离标准流布局）（1）后代选择器---选择器1 选择器2{样式属性声明}，选择器1中的所有选择器2。（3）id选择器（#id名{样式属性声明}）---id名称在项目中是唯一的。
HTML基础和css基础学习
lxt118518的博客
10-14 258
第三天： 今天是学习的第三天，依旧学习的是HTML的知识 今日学习内容 1、表格标签 为啥使用表格标签？ 简单通用，结构稳定，基本结构 单元格 行 列 跨行 跨列 <!--表格table 行tr 列td border：宽度 --> 代码： <table border="1px"> <tr> <!--colspan跨列--> <td colspan="2">1-1</td>
HTML和CSS基础讲解
上善若泪
03-14 2199
文章目录1 HTML/CSS1.1 网站生成HTML静态页面的好处1.1.1 网站的访问速度更快1.1.2 网站运行更安全1.1.3 网站更容易被搜索到1.2 盒子模型1.3 行内元素,块级元素,空(void)元素,可变元素1.4 CSS实现垂直水平居中1.5 src与href的区别1.6 什么是CSS Hack1.7 同步和异步区别1.8 CSS中长度单位1.9 优雅降级和渐进增强1.10 CSS样式表控制背景图片大小1.10.1 背景图片的导入1.10.2 背景小图片展示1.10.3 背景大图片控制1.
HTML和CSS基础知识汇总
Venus熊的博客
08-02 613
今天学习了HTML的一些基础知识，总结为以下几个方面。 一、概念 html是一种超文本标记语言，超文本顾名思义就是不单只是文本而且包含图片、视频、音频、连接等非文字元素。注：标记语言不是编程语言。 html文件后缀名为.html或者.htm，但是一般使用前者更多。 HTML与HTML5的区别在于后者是HTML的下一代标准。 二、HTML文档 HTML5的文档类型<!DOCTYPE html> <html></html>:HTML的根元素，用来包含HTML文档.
HTML和CSS基础系列（一）
BIGDgreen
08-01 288
文章目录DoctypeHTML5 为什么只需要写 你知道多少种Doctype文档类型？行内元素和块级元素块级元素行内元素行内块级元素让块级元素一行显示的方法HTML5 表单验证全局监听错误的方法document.write和innerHTML的区别DOM属性datasetHTML5的离线缓存离线检测iframe的缺点与iframe有关的小知识``与`<h1>`的区别、`<b>`与`<strong>`的区别、`<i>`与`<em>`的区别？</
html&css基础知识汇总
大飞的博客
04-30 2305
html的基本标签 1、&lt;hn&gt; 标题标签 n表示不同大小的字体，n取值1-6 2、 &lt;hr/&gt;水平线标签 创建一个水平分割线，用于定义内容主题的变化 size属性： 水平线的高度，单位像素（px） noshade属性：没有阴影，取值：noshade，表示显示纯色 4、 &lt;font&gt;字体标签 &lt;font size="2...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值