html学习基础（一）

最新推荐文章于 2024-05-17 18:09:22 发布

Viper 3

最新推荐文章于 2024-05-17 18:09:22 发布

阅读量29

点赞数

分类专栏：学习笔记（一）文章标签：学习前端 html

本文链接：https://blog.csdn.net/dargon_11/article/details/134111440

版权

学习笔记（一）专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、关于html的介绍

1、html是什么，有什么用？

HTML：指的是超文本标记语言(Hyper Text Markkup Language)，用来描述网页（包含视频，音频，图片等等）的一种语言，不是编程语言，而是一种标记语言。

拓展：HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为。

2、html基础构成

<style></style>
<div></div>
<script></script>

如图所示，这时html中最常见的几个标签，他们成对出现，称为双标签。除此之外，还有单独出现的标签，称为单标签。

下面列举一些常见的标签及其作用：

1.段落标签：<p></p> 标识一个段落（段落之间有段间距）

2.换行标签：<br/> （单标签 “/” 可以没有）强制换行

3.div标签：没有具体含义，用来划分页面的区域，独占一行

二、html基础语法

1、基础样式设计

!+tab创建html原始代码，如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

其中，我们可以添加注释：

<!--注释的内容-->

注释虽然不对具体的设计有影响，但是它也非常重要：

1.把暂时不用的代码注释起来方便使用
2.对开发人员进行显示

下面，我们用著名的“盒子模型”来一步一步了解这些标签：

每一个标签都是一个矩形，像一个盒子，所以HTML页面布局可以理解为多个盒子组合嵌套排列而成。

由图片可以看到，当我们选择一个元素查看时，这个元素会被看成一个盒子，有宽度（width），高度（height），内边距（padding）,外边距（margin）。而一个盒子的边框，内边距，内容区决定大小，而外边距决定盒子的位置。

我们先新建一个标签，显示hello，如图：

<div>hello</div>

盒子的内容区由width和height决定大小的，我们写的内容只能放在内容区。而内容区需要我们在style标签中定义这个标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        div{
           width: 100px;
           height: 100px;
        }

    </style>
</head>
<body>
    <div>hello</div>
</body>
</html>

运行结果如图：

其中蓝色区域就是这个盒子内容区的大小，正如我们所设置的，高和宽都是一百。

下面，我们继续设置其他几个属性的值：

   div{
           width: 100px;
           height: 100px;
           padding:10px;
           border: 3px solid red;
           margin: 10px;
        }

运行结果如图：

其中蓝色内容区外面多了一层绿色的区域，这边是padding，由于我们直接设置的padding，所以上下左右的内边距都增加了10px，而绿色周围的红线，便是边框（border），正如我们所设置的，线的颜色为红色，宽度为3px，最后，我们可以看到，整个盒子与左侧有了一定的距离，这就是外边距（margin）。

值得一提的一点是，这几个属性都可以自由定义上下左右任何一个的值，只需要在其之后添加后缀，例如：margin-right（右侧外边距）。