devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端之HTML入门_html 前端 从入门

作者：不正经 | 2024-05-27 04:33:46

赞

踩

html 前端 从入门

前端之HTML入门


——HTML所有基本理论

HTML

什么是HTML？

  1. 超文本标记语言(HyperTextMarkupLanguage)，标准通用标记语言下的一个应用。

  2. HTML不是一种编程语言，而是一种标记语言(markuplanguage)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

  3. 超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
    ——维基百科

HTML元素

HTML元素结构

标签结构
在这里插入图片描述

斜体强调

<em>斜体</em>

  • 1

在这里插入图片描述

嵌套元素

<p><strong>嵌套</strong>元素</p>

  • 1

在这里插入图片描述

用标签strong突出“嵌套”。
注意：开始标签结束标签都在标签内。

块级元素和内联元素

块级元素

块级元素在页面中以块的形式展现,开头结尾都会另起一行。

<p>块级元素</p><p>块级元素</p><p>块级元素</p>

  • 1

在这里插入图片描述

内联元素

内联元素不会导致文本换行，通常出现在一堆文字之间例如超链接元素a或者强调元素em>和 strong。

<em>内联元素</em><em>内联元素</em><em>内联元素</em>

  • 1

在这里插入图片描述

空元素

没有内容的元素

<img src="https://img2.baidu.com/it/u=3977027642,3661756691&fm=253&fmt=auto&app=138&f=JPG?w=300&h=300" alt="测试图片">


  • 1
  • 2

在这里插入图片描述

属性

属性说明和示例

属性包含元素的额外信息

一个属性必须包含如下内容：

  1. 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
  2. 属性名称，后面跟着一个等于号。
  3. 一个属性值，由一对引号“ ”引起来。建议始终添加引号。
    在这里插入图片描述

href: 这个属性声明超链接的web地址，也就是目的地
title: 为这个链接进行说明
target：链接的打开方式，target="_blank"表示在新标签页中显示链接。

    <a href="https://littlemonster.neocities.org/" title="主页" target="_blank" rel="noopener noreferrer">前端学习主页</a>

  • 1

在这里插入图片描述

布尔属性

它们的属性名和属性值一样

disabled 属性，使表单输入使之变为不可用(变灰色)
在这里插入图片描述

单引号或者双引号？

<p><a href="https://littlemonster.neocities.org/" title="主页" target="_blank" rel="noopener noreferrer">前端学习主页</a></p>
<p><a href='https://littlemonster.neocities.org/' title='主页' target='_blank' rel='noopener noreferrer'>前端学习主页</a></p>
<p><a href='https://littlemonster.neocities.org/' title="主页" target="_blank" rel='noopener noreferrer'>前端学习主页</a></p>

  • 1
  • 2
  • 3

以上使用都是允许的，看个人习惯。
但是不可以这样 href='内容" 同一个地方混用

在这里插入图片描述

剖析HTML文档

↑↑↑点击标题

HTML注释

<!-- <p>HTML注释</p> -->

  • 1

HTML中的空白与实体引用

无论HTML内容中使用多少空格(包括空白字符，包括换行)，当渲染代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。
于是出现的实体引用。

实体引用： 在HTML中包含特殊字符
在这里插入图片描述
实体引用列表

学习实践

学习实践一：
1.主标题。
2. 段落，你感兴趣的文本。
3. 突出任何重要的字词（斜体/粗体）。
4. 超文本链接。
5. 段落下方向你的文档添加一张图片（其他地方更好）。

<!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>html-all-page</title>
        <style>
            /* 颜色 */
            html {
                background-color: rgb(83, 62, 122);
            }
            /*左右边距 边框 颜色 */
            body {
                margin: 0 20px;
                border: 3px solid;
                background-color: rgb(125, 141, 156);
            }
            /* 相当div，文本居中 */
            section {
                text-align: center;
            }
            /* 设置为块显示，让margin起效 字体 字体阴影 */
            section h1 {
                display: block;
                color: rgb(0, 83, 159);
                font-size: xxx-large;
                text-shadow: 3px 3px 1px black;
                margin: 10px;
            }
            /* span内联元素 字体 */
            section span {
                font-size: small;
            }
            /* 段落字体 */
            section p {
                font-size: xxx-large;
            }
        </style>
    </head>
    <body>
        <section>
            <a href="https://hanyu.baidu.com/shici/detail?pid=e6b7157ccfb2483dafcd0f2e0d4e372d&from=kg0" target="_blank" title="百度汉语——春晓"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0629%252F707d253ep00qvgjr1002id200hs00a0g00hs00a0.png%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646130804&t=bcc540b35d3c93562fcfc6fe178d6472" alt="枝上花，花旁鸟"></a>
            <h1>春晓</h1>
            <p>
                <span>
                    <em>【作者】孟浩然</em>
                </span>
            </p>
            <p>春眠不觉<strong>晓</strong>，处处闻啼<strong>鸟</strong>。</p>
            <p>夜来<strong>风雨</strong>声，<strong>花</strong>落知多少。</p>
        </section>
    </body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

在这里插入图片描述
网页连接

下一节：前端之head和元数据

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/629884
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号