欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

一.标签及样式

程序员文章站 2022-03-04 09:54:38
1.相关链接1.1Visual Studio Code下载链接：https://code.visualstudio.com/1.2Visual Studio Code安装教程：https://blog.csdn.net/weixin_37590454/article/details/894365771.3谷歌浏览器下载链接：https://www.google.cn/chrome/index.html1.4在线打字链接：https://dazi.kukuw.com/typing.html?t...

1.相关链接

1.1Visual Studio Code下载链接：

https://code.visualstudio.com/

1.2Visual Studio Code安装教程：

https://blog.csdn.net/weixin_37590454/article/details/89436577

1.3谷歌浏览器下载链接：

https://www.google.cn/chrome/index.html

1.4在线打字链接：

https://dazi.kukuw.com/typing.html?t=4b95b76db503e973ae572f69ac1036d9

2.VS code创建文件

2.1直接创建

创建一个文件夹，直接拖入code图标可直接将文件在code中打开。
一.标签及样式
文件夹在资源管理器中查看。（资源管理器：ctrl+shift+E）

2.2快捷方式

一.标签及样式
如图四个标依次为：新建文件，新建文件夹，刷新资源管理器，在资源管理器中折叠文件夹。
建立文件夹名以.html结尾。注释格式：<!--注释-->。
建立的文件夹以.css结尾。注释格式：/*注释*/。

3.元素和标签

3.1元素

1.块级元素：可以设置宽高，独占一行，垂直排列（默认宽度为100%，默认高度为内容高度）。
2.行内元素：不可设置宽高，水平排列（默认宽高为内容宽高）。
3.行内块元素：可以设置宽高水平排列。

3.2三种元素可以相互转化

转块级  display：black
转行内级  display：inline 
//转行内级必须有内容，因为行内级元素宽高为内容宽高，默认值为零看不见效果。//
转行内块级 display： inline-block

3.2.1块转行内示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 100px;
            background-color: chocolate;
            display: inline;
            font-size: 50px;
           
        }
        .box1{
            width: 200px;
            height: 100px;
            background-color: cyan;
            display: inline;
            font-size: 20px;

        }
    </style>
</head>
<body>
   <div class="box">
       块转行内内容不能为空
   </div>
   <div class="box1">
       因为行内不能设置宽高，默认为零。
   </div>
</body>
</html>

一.标签及样式

3.2.2转行内与转行内块区别（第一个转行内快，第二个转行内）

一.标签及样式

一.标签及样式

3.3常见标签

<body>
    <div>自定义标签</div>
    <h1>标题标签1</h1>
    <h2>b标题标签2</h2>
    <p>段落标签</p>
    <br><!--可实现行内换行-->
    <span>行内标签</span>
</body>

示例:

<!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>
    <div>第一个块</div>
    <div>第二个块</div>
    <div>第三个块</div>
    <span>第一个行内</span>
    <span>第二个行内</span>
    <span>第三个行内</span>
</body>
</html>

一.标签及样式

3.4标签加样式

（优先级：行内加样式>内联加样式）

3.4.1行内加样式

<body>
    <div style="front-size:  30px;width: 100px; height:  200px;">
</body>

示例

<!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>
    <div style="font-size: large;color: blue;height: 100px;width: 200px;background-color: burlywood;">第一个块</div>
    <div>第二个块</div>
    <div>第三个块</div>
    <span>第一个行内</span>
    <span>第二个行内</span>
    <span>第三个行内</span>
    <p style="font-size: 50px;color:black;width: 300px;height: 400px;background-color: chocolate">这个是P标签</p>
</body>
</html>

一.标签及样式

3.4.2内联加样式

（优先级：id选择器>类选择器>标签选择器>link选择器）

1.标签选择器加样式
<head>
    <style>
        ddd{width: 15px;}
    /<style>
</head>
2.类选择器加样式
<head>
    <style>
        .ddd{width: 15px}
    </style>
</head>
3.id选择器（唯一的）加样式
<head>
    <style>
        #ddd{width: 15px}
    </style>
</head>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aaa{color: red;font-size: 20px;width: 200px;height: 60px;background-color: green;}
        #ggg{color: wheat;font-size: 30px;width: 400px;height: 40px;background-color: blue;}
        div{color: orchid;font-size: 50px;width: 400px;height: 80px;background-color: brown;}
    </style>
</head>
<body>
    <div class="aaa">第一个块</div>
    <div class="sss">第二个块</div>
    <div class="ddd">第三个块</div>
    <span class="fff">第一个行内</span>
    <span class="ggg">第二个行内</span>
    <span class="aaa">第三个行内</span>
    <p>这个是P标签</p>
</body>
</html>

一.标签及样式

4.link选择器加样式

1.先在当前位置建立.css文件夹，在head中用link语句引入.css文件的相对位置（相对位置路径：当前位置./上一级位置../）

<head>
    <link rel="stylesheet" href="./1--waibu.css">
</head>

2.在建立的.css文件夹中编辑样式

.sss
{
    color: red;font-size: 70px;
    width: 700px;height: 500px;background-color: black;
}

3.5 高度坍塌示例（左浮右浮）

浮动：

dsfds{float：right}
wada{float：left}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aaa{color: red;font-size: 20px;width: 100px;height: 60px;background-color: green;}
        #ggg{color: wheat;font-size: 30px;width: 100px;height: 40px;background-color: blue;}
        div{color: orchid;font-size: 50px;width: 100px;height: 80px;background-color: brown;}
        .ddd{float: right;} 
        .sss{float: right;}
    </style>
    <link rel="stylesheet" href="./1--waibu.css">
</head>
<body>
    <div class="aaa">第一个块</div>
    <div class="sss">第二个块</div>
    <div class="ddd">第三个块</div>
    <span class="fff">第一个行内</span>
    <span class="ggg">第二个行内</span>
    <span class="aaa">第三个行内</span>
    <p>这个是P标签</p>
</body>
</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>
    <style>
        .box{
            width: 200px;
            height: 100px;
            background-color: chocolate;
            display: inline;
            text-align: center;
            font-size: 50px;
        }
        .box1{
            width: 200px;
            height: 100px;
            background-color: cyan;
            display: inline;

        }
    </style>
</head>
<body>
   <div class="box">
       123456
   </div>
   <div class="box1">

   </div>
</body>
</html>

本文地址：https://blog.csdn.net/qq_50304932/article/details/112512448

上一篇： html+css

下一篇： elment-ui文件上传详解

推荐阅读