HTML/CSS 基础知识

最新推荐文章于 2024-05-16 18:16:26 发布

venus小凡凡

最新推荐文章于 2024-05-16 18:16:26 发布

阅读量412

点赞数 1

分类专栏：前端知识文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_57688764/article/details/129688419

版权

前端知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML和CSS是前端开发的基础，以下是可能涉及到的一些HTML和CSS的基础知识：

HTML基础知识：

一、了解HTML的基本语法结构，包括DOCTYPE、html、head、body等标签的作用和用法。

DOCTYPE：文档类型声明，告诉浏览器使用哪种解析方式来渲染页面。是HTML5的文档类型声明，告诉浏览器使用HTML5的解析方式来渲染页面，必须位于HTML文档的第一行，否则会导致浏览器的怪异模式（quirks mode）。

html：用于定义HTML文档的根元素，包含lang属性，用于指定文档的语言类型。

head：用于定义HTML文档的头部，包含一些元数据信息和文档的引用资源等。例如，可以在head中定义网页的标题、字符集、关键字、描述、样式表等。

body：用于定义HTML文档的主体部分，包含网页的内容，例如文本、图片、链接等。

meta标签的一些作用和用法举例：

设置页面标题：设置该页面的标题，如下所示：

<meta name="title" content="前端开发">

设置页面关键字：设置该页面的关键字，如下所示：

<meta name="keywords" content="前端开发, HTML, CSS, JavaScript">

设置页面描述信息：设置该页面的描述信息，如下所示：

<meta name="description" content="这是一个关于前端开发的学习网站，包含丰富的HTML、CSS、JavaScript教程。">

设置页面字符集：设置该页面所使用的字符集，如下所示：

<meta charset="UTF-8">

设置移动端视口大小：设置该页面在移动端设备上的显示效果，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

二、熟悉HTML的常用标签，如div、p、span、img、a、ul、li、table、form等，了解其属性和用法。

<div>标签：用于定义HTML文档中的一个区块，可以用来进行样式和布局的控制。常用的属性有：class、id、style等。

<p>标签：用于定义HTML文档中的一个段落，常用的属性有：class、id、style等。

<span>标签：用于定义HTML文档中的行内元素，常用的属性有：class、id、style等。

<img>标签：用于在HTML文档中插入一张图片，常用的属性有：src、alt、width、height等。

<a>标签：用于定义HTML文档中的超链接，常用的属性有：href、target、class、id、style等。

<ul>标签：用于定义HTML文档中的无序列表，常用的属性有：class、id、style等。

<li>标签：用于定义HTML文档中的列表项，必须嵌套在<ul>或<ol>标签中，常用的属性有：class、id、style等。

<table>标签：用于定义HTML文档中的表格，常用的属性有：border、cellpadding、cellspacing、class、id、style等。

<form>标签：用于定义HTML文档中的表单，可以包含多种表单元素，如输入框、复选框、单选框、下拉框等，常用的属性有：action、method、class、id、style等。

三、掌握HTML表单的基本知识，包括input、select、textarea、label、submit等标签的属性和用法。

input标签：用于接收用户输入的内容，可以使用不同的类型属性来定义输入框的类型，如文本框、单选框、复选框等。

type属性：定义输入框的类型，包括text、password、email、number、radio、checkbox等。

name属性：定义输入框的名称，用于在提交表单时识别输入框。

value属性：定义输入框的默认值。

placeholder属性：定义输入框的提示文本。

required属性：定义输入框为必填项。

----------------------------------------------------

select标签：用于创建下拉列表框，提供多个选项供用户选择。

name属性：定义下拉列表框的名称。

size属性：定义下拉列表框可显示的选项数。

multiple属性：定义是否允许多选。

----------------------------------------------------

textarea标签：用于创建多行文本输入框。

name属性：定义文本框的名称。

rows属性：定义文本框的行数。

cols属性：定义文本框的列数。

----------------------------------------------------

label标签：用于关联表单元素和标签文本，提高表单的可用性和可访问性。

for属性：定义与表单元素关联的id值。

id属性：定义标签的id值。

submit标签：用于提交表单数据。

value属性：定义提交按钮的显示文本。

四、熟悉HTML5的新增标签和特性，如canvas、video、audio、header、footer、nav、section等。

canvas标签：用于绘制图形和动画。

width属性和height属性：定义画布的宽度和高度。

getContext()方法：获取绘制上下文，可以使用2D或3D上下文进行绘制。

----------------------------------------------------

video标签：用于嵌入视频内容。

src属性：定义视频文件的URL。

controls属性：显示视频播放控件。

----------------------------------------------------

audio标签：用于嵌入音频内容。

src属性：定义音频文件的URL。

controls属性：显示音频播放控件。

----------------------------------------------------

header标签：用于定义文档或部分的页眉。

footer标签：用于定义文档或部分的页脚。

nav标签：用于定义导航链接的容器。

section标签：用于定义文档的一个区域。

使用h1-h6标签定义区域的标题。可以嵌套其他HTML元素，如p、ul、ol等

article标签：用于表示一个独立的文章或新闻内容。

可以包含题目、作者、发布日期、正文等内容。

通常应该包含完整的、独立的、可以单独使用的内容。

aside标签：用于表示和页面主要内容相关但不是主要内容的部分。

可以包含侧边栏、广告、相关链接等内容。

通常显示在页面的侧边或底部。

details标签：用于表示一个可以展开或折叠的详细内容。

包含一个summary标签作为标题，可以点击标题展开或折叠详细内容。

通常用于展示帮助文档、FAQ等内容。

figure标签：用于表示一段独立的内容，如图片、图表、代码段等。

可以包含figcaption标签作为标题或说明文本。

通常用于与主要内容相关但不是主要内容的部分。

figcaption标签：用于表示figure标签的标题或说明文本。

main标签：用于表示页面的主要内容。

一个页面只能包含一个main标签，用于标识页面的主要内容区域

css基础知识：

一、熟悉CSS的基本语法结构，包括选择器、属性和值的组成方式。

/* 元素选择器 */
p {
  color: red;
  font-size: 16px;
}

/* 类选择器 */
.my-class {
  background-color: #eee;
  padding: 10px;
}

/* ID选择器 */
#my-id {
  border: 1px solid #000;
}

/* 属性选择器 */
a[href="http://www.example.com"] {
  text-decoration: none;
}
a[href] {
  color: red;
}

/* 后代选择器 */
p strong {
    color: purple;
}

/* 子元素选择器 */
div > p {
    color: orange;
}

/* 兄弟选择器 */
h1 + p {
    color: gray;
}

/* 通用兄弟选择器，所有在 p 元素之后的 span 元素 */
p ~ span {
  color: red;
}

/* 通用选择器 */
* {
    color: gray;
}

/* 伪类选择器 */
a:hover {
  text-decoration: underline;
}

/* 伪元素选择器，元素中的虚拟元素 */
p::first-line {
  font-weight: bold;
}

/* 伪对象选择器，如:required、:optional、:valid、:invalid等 */
input:required {
  border-color: #FF0000;
}

二、掌握CSS的盒模型概念，包括元素的内容、内边距、边框、外边距等部分

<div class="box">Hello, world!</div>

.box { width: 200px; height: 100px; padding: 20px; border: 1px solid #ccc; margin: 30px; }

内容（content）：元素的实际内容，例如文本、图片等。
内边距（padding）：内容区域与边框之间的距离。
边框（border）：包围元素的边框线，可设置颜色、宽度和样式。
外边距（margin）：元素与相邻元素之间的距离。

box-sizing：content-box //标准盒模型
 元素实际宽：content（200px）  
 总宽：（200px + 20px + 20px + 2px + 2px）

box-sizing：border-box //IE盒模型 (元素的总宽等于内容区域、内边距和边框的宽度之和)
 元素实际宽：content + padding +border （200px - 20px -20px -2px -2px ）
 总宽： 200px

三、了解CSS的常用属性，如颜色、字体、背景、定位、浮动、清除浮动等。

颜色属性
（1）color：设置文字颜色。

（2）background-color：设置元素的背景颜色。

（3）border-color：设置元素边框的颜色。

（4）opacity：设置元素的透明度。

字体属性
（1）font-family：设置字体样式。

（2）font-size：设置字体大小。

（3）font-weight：设置字体粗细。

（4）line-height：设置行高。

（5）text-align：设置文字对齐方式。

（6）text-decoration：设置文字装饰线条。

（7）text-transform：设置文字大小写转换。

（8）font-style：设置文字样式，包括normal、italic和oblique。

定位属性
（1）position：设置元素的定位方式，可选值为static、relative、absolute和fixed。

（2）top、right、bottom、left：设置元素相对于其父元素或文档的定位位置。

浮动属性
（1）float：设置元素的浮动方式，可选值为left、right和none。

（2）clear：清除浮动，避免浮动元素影响其他元素布局，可选值为left、right、both和none。

背景属性
（1）background-color：设置元素的背景颜色。

（2）background-image：设置元素的背景图片。

（3）background-repeat：设置背景图片是否重复显示。

（4）background-position：设置背景图片的位置。

（5）background-size：设置背景图片的大小。

动画属性
（1）animation：设置元素的动画效果，包括动画名称、动画持续时间、动画速度曲线、动画延迟时间、动画次数等。

（2）transition：设置元素的过渡效果，包括过渡属性、过渡持续时间、过渡速度曲线、过渡延迟时间等。
盒模型属性
（1）width和height：设置元素的宽度和高度。

（2）padding：设置元素内边距的大小。

（3）border：设置元素边框的大小、样式和颜色。

（4）margin：设置元素外边距的大小。

（5）box-sizing：设置元素的盒模型，可选值为content-box（标准盒模型）和border-box（IE盒模型）。

文本属性
（1）color：设置文字颜色。

（2）font-family：设置字体样式。

（3）font-size：设置字体大小。

（4）font-weight：设置字体粗细。

（5）text-align：设置文字对齐方式。

（6）text-decoration：设置文字装饰线条。

（7）line-height：设置行高。

列表属性
（1）list-style-type：设置列表项的标记类型。

（2）list-style-image：设置列表项的标记图片。

（3）list-style-position：设置列表项的标记位置。

（4）list-style：以上三个属性的简写形式。

四、掌握CSS的布局方式，包括相对定位、绝对定位、固定定位、浮动等。

------相对定位
不会改变元素在文档流中的位置，其他元素的布局不会受到影响。
例如：

<div style="position: relative; top: 10px; left: 20px;">
  相对定位
</div>

------绝对定位
通过设置元素的position属性为absolute，再通过top、right、bottom、left属性来确定元素的位置。绝对定位会使元素脱离文档流，不再占据原来的位置，其他元素的布局会受到影响。

例如：

<div style="position: relative;">
  <div style="position: absolute; top: 10px; left: 20px;">
    绝对定位
  </div>
</div>

------固定定位
通过设置元素的position属性为fixed，再通过top、right、bottom、left属性来确定元素的位置。固定定位与绝对定位类似，但是固定定位的元素会相对于浏览器窗口固定位置，不随页面滚动而移动。
场景：固定导航栏、固定广告

例如：
<div style="position: fixed; top: 10px; left: 20px;">
  固定定位
</div>

------浮动
通过设置元素的float属性为left或right，使元素脱离文档流并向左或向右浮动，其他元素会围绕浮动元素排列。
场景：两栏布局或三栏布局等
例如：
<div style="float: left;">
  浮动
</div>

网页布局：

1.单列布局：整个页面只有一列，适合简单的页面。

2.两列布局：页面分为左右两列，左侧通常放置导航或菜单，右侧放置主要内容。

3.三列布局：页面分为左、中、右三列，适合复杂的页面。

常见方式：双飞翼布局和圣杯布局

双飞翼布局：通过使用浮动和负外边距来实现。中间列使用了最小宽度，使得左右两列可以自适应宽度。

圣杯布局：中间列使用了浮动，而左右两列则使用了相对定位和负边距。

4.栅格布局：将页面分为多个等宽的列，可以实现响应式布局。

5.流式布局：页面元素的宽度根据浏览器窗口大小自适应调整，适合移动设备。

6.混合布局：将多种布局方式结合使用，灵活适应不同的页面需求。

7.绝对定位布局：通过设置元素的绝对定位，实现自由排列和定位。

8.响应式布局：根据设备的屏幕大小和分辨率自适应调整布局，使得网页在不同的设备上都能够良好地展示。

9.flex布局：一种基于弹性盒子的布局方式，可以方便地实现元素的排列和对齐。

10.grid布局：一种基于网格的布局方式，可以实现复杂的布局和对齐效果。

五、熟悉CSS3的新增特性，如圆角、阴影、渐变、动画、转换等。

圆角（border-radius）：可以将元素的边角变成圆角。

阴影（box-shadow）：可以添加元素的阴影效果。

渐变（gradient）：可以让元素的背景色渐变。

动画（animation）：可以让元素产生动态效果。

转换（transform）：可以让元素产生形状、大小、位置等变化效果。

媒体查询（media query）：可以根据不同设备的屏幕大小，自适应调整页面布局。

多列布局（multi-column layout）：可以让文本按照多列进行排版。

伸缩布局（flexbox）：可以让元素按照自适应的方式进行排列。

过渡效果（transition）：可以让元素在状态改变时产生平滑的过渡效果。