html、css入门 - 技术栈

1.HTML

HTML全称是Hypertext Markup Language（超文本标记语言）

（1）HTML标签

HTML通过一系列的标签（也称为元素）来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。

标签通常成对出现，包括开始标签和结束标签（也称为双标签），内容位于这两个标签之间，例如：
<p>这是一个段落。</p>
<h1>这是一个标题。</h1>
<ahref="#">这是一个超链接。</a>

除了双标签，也存在单标签，例如：
<input type="text">
<br>
<hr>
区别：单标签用于没有内容的元素，双标签用于有内容的元素

（2）HTML文件结构

（3）实例：

（3）HTML 属性

属性在HTML中起到非常重要的作用，它们用于定义元素的行为和外观，以及与其他元素的关系。

基本语法：
<开始标签属性名="属性值">

每个HTML元素可以具有不同的属性

<p id="describe"class="section">这是一个段落标签</p>
<ahref="https://www.baidu.com">这是一个超链接</a>

属性名称不区分大小写，属性值对大小写敏感

适用于大多数HTML元素的属性

属性	描述
class	为HTML元素定义一个或多个类名（类名从样式文件引入)
id	定义元素唯一的 id
style	规定元素的行内样式

例如：
<h1 id="title"></h1>
<div class="nav-bar"></div>
<h2 class="nav-bar"></h2>

（4）HTML区块--块元素与行内元素

1）块元素(block)

块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。

①块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。

②可以包含其他块级元素和行内元素。

③常见的块级元素包括<div>,<p>,<h1>到<h6>,<ul>,<ol>,<li>,<table>,<form>等。

2) 行内元素(inline)

行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。

行内元素通常在同一行内呈现，不会独占一行。

它们只占据其内容所需的宽度，而不是整行的宽度。

行内元素不能包含块级元素，但可以包含其他行内元素。

常见的行内元素包括<span>,<a>,<strong>,<em>,<img>,<br>,<input>等。

（5）HTML表单

HTML 表单是网页中的一部分，它提供了一种便捷的方式来收集用户信息并将其发送到Web服务器。表单通常包含各种类型的输入字段，如文本框、密码框、单选按钮、复选框和下拉列表等。

表单控件

表单控件是用户可以与之交互的元素，它们允许用户输入数据。以下是一些常见的表单控件：

文本输入框 (<input type="text">)：允许用户输入文本。
密码输入框 (<input type="password">)：允许用户输入密码，输入的内容会被隐藏。
单选按钮 (<input type="radio">)：允许用户从多个选项中选择一个。
复选框 (<input type="checkbox">)：允许用户选择或取消选择一个或多个选项。
下拉列表 (<select> )：显示一个选项列表，用户可以从中选择一个选项。
提交按钮 (<input type="submit">)：用于提交表单数据到服务器。

2.css

CSS全名是Cascading Style Sheets，中文名层叠样式表。

用于定义网页样式和布局的样式表语言。

通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

（1）CSS 语法

CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式
选择器｛
属性1：属性值1;
属性2：属性值2;

}

①选择器的声明中可以写无数条属性

②声明的每一行属性，都需要以英文分号结尾；

③ 声明中的所有属性和值都是以键值对这种形式出现的；

示例:

/*这是一个p标签选择器*/
p{
color: blue;
font-size: 16px;

}

（2）CSS三种导入方式

下面是三种常见的CSS导入方式：

①内联样式(Inline Styles)

②内部样式表(Internal Stylesheet)

③外部样式表(ExternalStylesheet)
三种导入方式的优先级：内联样式>内部样式表>外部样式表

（3）选择器

选择器是CSS中的关键部分，它允许你针对特定元素或一组元素定义样式

元素选择器

类选择器

ID选择器

通用选择器

子元素选择器

后代选择器（包含选择器）

并集选择器（兄弟选择器）

伪类选择器

（4）块、行内、行内块元素

1）块元素(block):

块级元素通常会从新行开始，并占据整行的宽度。

可以包含其他块级元素和行内元素。

2）行内元素(inline):

行内元素通常在同一行内呈现，不会独占一行。

它们只占据其内容所需的宽度，而不是整行的宽度。

行内元素不能包含块级元素，但可以包含其他行内元素。

3）行内块元素(Inline-block):

水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性。

行内块元素可以包含其他行内元素或块级元素。

（5）盒子模型

盒子模型相关属性

|--------------|-----------------------------------------|
| 属性名 | 说明 |
| 内容（Content) | 盒子包含的实际内容，比如文本、图片等。 |
| 内边距(Padding) | 围绕在内容的内部，是内容与边框之间的空间。可以使用padding属性来设置。 |
| 边框(Border) | 围绕在内边距的外部，是盒子的边界。可以使用border属性来设置。 |
| 外边距(Margin) | 围绕在边框的外部，是盒子与其他元素之间的空间。可以使用margin属性来设置。 |

（5）浮动

1）传统网页布局方式

在学习浮动之前，先了解传统的网页布局方式

网页布局方式有以下五种：

标准流（普通流、文档流）：网页按照元素的书写顺序依次排列
浮动
定位
Flexbox和Grid(自适应布局）

标准流 是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素。
2）浮动

元素脱离文档流，根据开发者的意愿漂浮到网页的任意方向。

浮动属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。

语法:
选择器｛
float: left/right/none;

}

注意：浮动是相对于父元素浮动，只会在父元素的内部移动

3）浮动的三大特性

学习浮动要先了解浮动的三大特性：

脱标：脱离标准流。
一行显示，顶部对齐
具备行内块元素特性

（6）定位

定位布局可以精准定位，但缺乏灵活性

定位方式：

相对定位：相对于元素在文档流中的正常位置进行定位。
绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流。
固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动。