HTML入门 --------DAY1

最新推荐文章于 2024-10-04 20:51:01 发布

好吃的都给你呀

最新推荐文章于 2024-10-04 20:51:01 发布

阅读量217

点赞数

分类专栏：前端杂文文章标签： html 入门

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102502927

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

这下面的内容是HTML最初级的结构介绍，还有一些最基本的简单语句。

<!-- ctrl+? 打出标签中的注释符号，起到解释说明的作用，浏览器不解析此处语句 
新建文件：1.ctrl+n  2.右下角选择语言模式 html 3.ctrl+s 命令 并保存路径 
每一个网页都有基本结构  <开始标签>显示内容</结束标签>
html 超文本标记语言  由标签对构成， 包含html 网页的根部标签，包含 head头部和body主体 -->
<html>
    <head>
        <!-- meta 元数据 对网页做基本设置 ，在中文网页中防止乱码出现
        设置编码方式为utf-8，这是程序中众多编码方式中的一种
        char字符set设置，集合 charset字符集 -->
        <meta charset="utf-8">
        <!-- title网页标题 -->
        <title>10月11日下午开始写的网页</title>
    </head>
    <body>
        第一天2019年10月11日

        <p>段落标签，独占一个区域(隐含换行功能)</p>    
        <span>文本标签 行内元素(不隐含换行功能)</span>
        <!-- <a></a>是超链接标签     后面的br换行-->
        <a href="http://www.baidu.com">百度一下啦</a><br>

        <!-- image 图片 src(source资源路径 网络/本地  alt(alter提示语
            当图片无法正常加载时的备注信息)) -->
        <img src="image/猫1.jpg" alt="异常">


        <!-- 小标题 由大到小的方式呈现1最大6最小 -->
        <h1>111</h1>
        <h2>222</h2>
        <h3>333</h3>
        <h4>444</h4>
        <h5>555</h5>
        <h6>666</h6>


        <!-- hr水平线 -->
        <hr>
        <!-- &nbsp; 和 &#x3000 都是空格元素 &nbsp; 没有 &#x3000宽 -->
        <div>万能标签，<br>独立模块, 块&nbsp;元&#x3000;素</div>
    </body>

</html>

下面图片是界面效果

这下面是一个入门级介绍标签样式（css）的内容

<html>
    <head>
        <meta charset="utf-8">
        <title>样式</title> 
        <style>
            /* ctrl+? css中的注释符号，css(cascading层叠 style 样式/风格 
            sheet列表，总称层叠样式表，美化布局)   */
            p{
                /* 字体大小 尺寸 px像素 大小，每个符号都是英文，每句话结束时都要分号结束 */
                font-size: 80px;
                color: red;
            }
            div{
                /* 设置宽高 */
                width: 200px;
                height: 200px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <p>111</p>
        <span>22222</span>
        <div>
            <p>333</p>
        </div>
    </body>
</html>

界面效果