前端之HTML基础

一只爱吃萝卜的小兔子

已于 2022-01-27 16:29:44 修改

阅读量578

点赞数 1

分类专栏：前端基础文章标签： html 前端 css

于 2022-01-20 20:55:24 首次发布

本文链接：https://blog.csdn.net/weixin_46372074/article/details/122562936

版权

前端基础专栏收录该内容

53 篇文章 4 订阅

订阅专栏

前端之HTML基础

HTML
标记文本
做一个下方的简单网页

HTML

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言,由一系列的元素组成，元素可以用来包围不同部分的内容呈现不同的效果。
元素由开始标签，内容，结束标签组成。

段落标签

1.单独一行，自动换行。

        <p>这是一个段落</p>

在这里插入图片描述
2.添加属性
属性名称=“属性值1 属性值2”
类=“类名1 类名2 ……”
class=“value1 value2 ……”

   <style>
        .red{
            color:red;
        }
    </style>
    <p class="red">这是一个段落</p>

在这里插入图片描述

嵌套元素

一个元素置于其他元素之中 —— 称作嵌套
要注意层次
加粗标签strong

 <p class="red">这是一个 <strong>段落</strong></p>

加粗标签例子

空元素

不包含任何内容的元素，如img标签：
src=“路径”
alt=“解释/描述”

        <p><img src="https://img2.baidu.com/it/u=3977027642,3661756691&fm=253&fmt=auto&app=138&f=JPG?w=300&h=300" alt="csdn的logo">这是csdn的logo</p>

在这里插入图片描述

HTML文档说明

<!DOCTYPE html>
<!-- 文档类型 -->

<html lang="zh-cmn-Hans">
    <!-- 
        html是根元素包含整个页面
    
        lang指定文档使用语言
        1. 简体中文页面：html lang=
    
        2. 繁体中文页面：html lang=zh-cmn-Hant
    
        3. 英语页面：html lang=en 
    -->

    <head>
        <meta
        charset="utf-8">
        <!-- 指定文档使用 UTF-8 字符编码 -->

        <title>测试页面</title>
        <!-- 页面的标题 -->
    </head>
    <body>
        <!-- body元素包含让用户看到的所有内容 -->
        <img src="https://img2.baidu.com/it/u=3977027642,3661756691&fm=253&fmt=auto&app=138&f=JPG?w=300&h=300" alt="测试图片">
    </body>
</html>

在这里插入图片描述

标记文本

HTML 常用的文本标签

标题

h1到h6
p是段落

        <h1>主标题</h1>
        <h2>顶层标题</h2>
        <h3>子标题</h3>
        <h4>次子标题</h4>
        <h5>h5</h5>
        <h6>h6</h6>

在这里插入图片描述

列表

无序列表

        <h2>列表（list）</h2>
        <h3>三种无序列表，可嵌套使用</h3>
        <ul>
            <li>无序列表</li>
            <li>默认disc</li>
            <li>类型</li>
        </ul>

        <ul type="circle">
            <li>无序列表</li>
            <li>circle</li>
            <li>类型</li>
        </ul>

        <ul type="square">
            <li>无序列表</li>
            <li>square</li>
            <li>类型</li>
        </ul>

在这里插入图片描述

有序列表

        <h2>有序列表</h2>
        <ol>
            <li>默认情况下</li>
            <li>item one</li>
            <li>item two</li>
            <li>item three</li>
        </ol>

        <ol reversed>
            <li>reversed情况下</li>
            <li>item one</li>
            <li>item two</li>
            <li>item three</li>
        </ol>

        <ol start="5">
            <li> start="5" 情况下</li>
            <li>item one</li>
            <li>item two</li>
            <li>item three</li>
        </ol>

        <ol start="5" reversed>
            <li> start="5" reverse情况下</li>
            <li>item one</li>
            <li>item two</li>
            <li>item three</li>
        </ol>
        <ol type="I">
            <li>item one</li>
            <li>item two</li>
            <li>item three</li>
        </ol>
        <ol  type="i" reversed>
            <li> type="i" reversed情况下</li>
            <li>item one</li>
            <li>item two</li>
            <li>item three</li>
        </ol>

在这里插入图片描述

做一个下方的简单网页

在这里插入图片描述
我的代码：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <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>
            ul li,
            p {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <article>
            <h1>Mozilla酷毙了!</h1>

            <img src="./firefox.png" alt="火狐logo">

            <p>Mozilla是一个全球社区，这里聚集着来自五湖四海的
                <ul>
                    <li>技术人员</li>
                    <li>思考者</li>
                    <li>建造者</li>
                </ul>
            </p>

            <p>我们致力于让 Internet保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>
            <p>为了达成我们共同的理想，我们遵循一系列的价值观和理念，请参阅 <a href="https://www.mozilla.org/zh-CN/about/manifesto/" target="_blank">Mozilla 宣言</a></p>
        </article>
    </body>
</html>

在这里插入图片描述

官方代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试页面</title>
    </head>
    <body>
        <h1>Mozilla 酷毙了！</h1>
        <img src="images/firefox-icon.png" alt="Firefox 标志：一只盘旋在地球上的火狐">

        <p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的</p>

        <ul>
            <li>技术人员</li>
            <li>思考者</li>
            <li>建造者</li>
        </ul>

        <p>我们致力于让 Internet 保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>

        <p>为了达成我们共同的理想，我们遵循一系列的价值观和理念，请参阅
            <a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>。</p>
    </body>
</html>

学自MDN
本节网页链接
下一节:前端之CSS基础

一只爱吃萝卜的小兔子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之HTML基础

前端之HTML基础——学自MDNHTML 基础段落标签嵌套元素空元素HTML文档说明标记文本HTML 基础HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言,由一系列的元素组成，元素可以用来包围不同部分的内容呈现不同的效果。元素由开始标签，内容，结束标签组成。段落标签1.单独一行，自动换行。 <p>这是一个段落</p>2.添加属性属性名称=“属性值1 属性值2”类=“类名1 类名2 ……”class=“value1 value2 ……
复制链接

扫一扫