HTML标签 CSS基础

开心就来soul

已于 2022-03-09 11:52:34 修改

阅读量150

点赞数 3

文章标签： elementui javascript vue.js

于 2022-03-01 21:46:45 首次发布

本文链接：https://blog.csdn.net/m0_67316947/article/details/123216646

版权

本文介绍了前端开发中的块元素和行内元素概念，包括它们的特点和常见标签。此外，还讲解了行内块元素的特性，并举例了如<img>和<input>等标签。最后，概述了CSS的基本概念及三种引入方式：行内样式、内部样式表和外部样式表。

摘要由CSDN通过智能技术生成

下面是学习前端所做的一些笔记，仅供参考！

块元素

什么是块元素？

块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。

块元素有以下特点：

总是另起一行
可以设置高度、宽度、内外边距
可以容纳行内元素和其他块元素。

下面是一些常用的块元素：

<p></p>        段落标签
<h1></h1>        一级标题标签
<ul></ul>        无序列表标签
<ol></ol>        有序列表标签
<hr>        水平线
<div></div>        典型块标签
<form></form>        表单

行内元素

行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

块元素有以下特点：

总是和相邻的行内元素在同一行上
设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效
默认宽度是他自身内容的宽度
行内元素只能容纳其他行内元素或者文本

行内块元素

在行内元素中有几个特殊标签，比如<img>，<input>，<td>,可以给他们设置宽高、对齐属性，把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。

块元素有以下特点：

和相邻行内元素在同一行，但是之间会有空白缝隙
默认宽度是他本身内容的宽度
宽度、高度、行高、外边距以及内边距都可以手动设置

css

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

css有三种引入方式

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

<h1 style="color:red;"></h1>

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

三、外部样式表

CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

1、链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式
<style type="text/css">
@import url("css文件路径");
</style>