首页 > 作文

一.标签及样式

更新时间:2023-04-07 17:25:44 阅读：评论：0

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 chart="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 chart="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 chart="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 chart="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 chart="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 chart="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>