VS Code(html)基础标签及代码

一个小钢弹儿

已于 2023-08-12 15:02:19 修改

阅读量1.9k

点赞数 1

分类专栏：基础工具文章标签： html vscode css

于 2023-08-03 19:25:02 首次发布

本文链接：https://blog.csdn.net/qq_55633302/article/details/132090308

版权

基础工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浏览器F12 打开检查源代码

基础标签

头文件：<head><head> //包含元数据，如文档的标题，字符集，样式表链接等

包裹整个HTML文档：<html></html>

内容：<body><body>

网页标题：<title>页面标题</title> //定义文档的标题，显示在浏览器的标题栏或标签页

网页图标：<link rel="图片格式" href="图片链接"> //包含网页的所有内容，如文本，图像，音频，视频等

注释<-- -->：ctrl+/

定宽居中（只对块标签有用）：margin: auto;

区域块标签（独占一行）：<div>任意</div>

（可以在第一个<div>中直接设置样式：<div style=“需要的样式”>内容</div>）

（可以在第一个<div>中命名一个名字，在style中设置：<div class=".bgc"> 内容</div>）

段落块标签：<p>段落</p>
<h1>到<h6>：定义六个级别的标题，<h1>是最大的，<h6>是最小的

标题块标签样式（最多6种）：

h${任意}*6--->

<h1>任意</h1>

<h1>任意</h1>

<h1>任意</h1>

<h1>任意</h1>

<h1>任意</h1>

<h1>任意</h1>

行标签：水平排布：<span>任意<span>（不换行）

[上标]：<sub>[任意]</sub>

[下标]：<sup>[任意]</sup>

换行：<br>

水平显示列表：display: inline-block;

超链接（作用：实现页面之间的跳转）：

<a href="网址">任意</a>

倾斜：<i>任意<i>/<em>任意<em>

删除：<s>任意</s>/<del>任意</del>

加粗：<b>任意</b>/<strong>任意</strong>

行内块（添加图片）：<img src="图片链接" alt="任意（加载失败）">

输入框：<input type(输入类型)="默认text/password密码加密" placeholder(提示语)="任意">

单选按钮：<input type="radio(单选按钮)" name="任意" id="">任意（同组按钮之间name值保持一致，按钮之间互斥）

复选框：<input type="checkbox（复选框）" name="任意" id="">任意

字体大小：font-size: 数值px；

字体颜色：color: #0f2991;

背景颜色：background-color： #0f2991;

宽度：width: 数值px;

高度：height: 数值px;

圆角：border-radius: 数值px;

文本对齐居中：text-align: center;

行高：line-height: 数值px;

间距：margin: 数值px;

边框宽度、样式（solid实线 dashed虚线 dotted点状线）、颜色：

border:数值px solid rgb(数值, 数值,数值);

html代码

<!DOCTYPE html>
<!--html根标签 -->
<html lang="en">
<head>
    <!-- <meta charset="UTF-8"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道</title>
    <link rel="icon" href="https://www.baidu.com/favicon.ico">
    <style>
        div{
            /* 字体大小 */
            font-size: 30px;
            /* 字体颜色 */
            color: blueviolet;
            color: #0f2991;
            /* 背景颜色 */
            background-color: aqua;
            /* 宽度 */
            width: 300px;
            /* 高度 */
            height: 300px;
            /* 圆角 */
            border-radius: 150px;
            /* 文本对齐 居中 */
            text-align: center;
            line-height: 300px;
        }
        h2{
            /* 边框：宽度 样式（solid实线  dashed虚线
            dotted点状线）颜色 */
            border: 1px solid rgb(41, 101, 233);
        }
        p{
            width: 300px;
            line-height: 30px;
        }
        .bgc{
            background-color: rgb(184, 65, 253);
        }

    </style>
</head>
<body>
    <!-- ctrl / 注释 -->
    <!-- 块标签：独占一行 -->
    <div>新闻</div>
    <!-- <div>新闻</div> -->
    <div style="background-color: rgb(255, 0, 0);">a</div>
    <div class="bgc">b</div>
    <h1>标题标签</h1>
    <!-- h${内容}*6 -->
    <h1>祖国繁荣昌盛</h1>
    <h2>祖国繁荣昌盛</h2>
    <h3>祖国繁荣昌盛</h3>
    <h4>祖国繁荣昌盛</h4>
    <h5>祖国繁荣昌盛</h5>
    <h6>祖国繁荣昌盛</h6>
    <p>祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛</p>
    <p>段落</p>


    <!-- 行标签：水平排布 -->
    <!-- <br>换行标签 -->
    <span>显示一些文字   <sub>[上标]</sub></span> <br>
    <span>显示一些文字   <sup>[下标]</sup></span>
    <!-- 超链接  作用：实现页面之间的跳转 -->
    <a href="https://news.baidu.com/">新闻</a>
    <b>加粗</b>
    <strong>加粗</strong>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除</s>
    <del>删除</del>  <br>

    <!-- 行内块 -->
    <img src="http://opinion.people.com.cn/img/2020wbc/imgs/icon_download_video.png" alt="加载失败">
   
    <!-- 输入框  默认 text文本  placeholder提示语
                    password密码 
                    radio 单选按钮  同组按钮之间name值保持一致，按钮之间互斥
    -->
    <input type="text" placeholder="手机号">
    <input type="password" placeholder="密码"> <br>
    性别：
    <input type="radio" name="sex" id="">女生
    <input type="radio" name="sex" id="">男生  <br>
    爱好：
    <input type="checkbox" name="hobby" id="">学习
    <input type="checkbox" name="hobby" id="">睡觉
    <input type="checkbox" name="hobby" id="">游戏
    <input type="checkbox" name="hobby" id="">音乐
    in

</body>
</html>