HTML5教程

前端之HTML入门

本文主要是介绍前端之HTML入门，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前端之HTML入门

  • HTML
    • 什么是HTML？
    • HTML元素
      • HTML元素结构
      • 斜体强调
      • 嵌套元素
      • 块级元素和内联元素
        • 块级元素
        • 内联元素
      • 属性
        • 属性说明和示例
        • 布尔属性
      • 单引号或者双引号？
      • 剖析HTML文档
      • HTML注释
      • HTML中的空白与实体引用
      • 学习实践

——HTML所有基本理论

HTML

什么是HTML？

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

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

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

HTML元素

HTML元素结构

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

斜体强调

<em>斜体</em>

在这里插入图片描述

嵌套元素

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

在这里插入图片描述

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

块级元素和内联元素

块级元素

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

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

在这里插入图片描述

内联元素

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

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

在这里插入图片描述### 空元素
没有内容的元素

<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. 属性名称，后面跟着一个等于号。
  3. 一个属性值，由一对引号“ ”引起来。建议始终添加引号。
    在这里插入图片描述

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

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

在这里插入图片描述

布尔属性

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

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>

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

在这里插入图片描述

剖析HTML文档

↑↑↑点击标题

HTML注释

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

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>

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

这篇关于前端之HTML入门的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航