HTML入门学习和简单使用_学习运用html-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_52627845/article/details/111660830

这篇博客介绍了HTML的基本概念，包括网页的构成、HTML的概述和组成，详细讲解了HTML标签、属性以及创建标准页面的方法。还通过实例演示了文本、图文布局、表单元素的使用，帮助读者快速入门HTML。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

1. 网页

网页的构成
- HTML ：定义网页内容的含义和基本结构
- CSS：美化网页，用来描述网页的表现与展示效果
- JavaScript ：动态效果，用来执行网页的功能与行为

2. 概述

HTML（超文本标记语言——HyperText Markup Language），它是一种用来告知浏览器如何组织页面的标记语言。
所谓超文本Hypertext，是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。
所谓标记Markup ，是用来注明文本，图片等内容，以便于在浏览器中显示，例如<head>,<body>等。

3. 组成

3.1 HTML组成

HTML页面由一系列的元素（elements） 组成，而元素是使用标签创建的。

3.2 标签

一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等，在HTML中，<h1>标签表示标题，那么，我们可以使用开始标签<h1>和结束标签</h1>包围文本内容，这样其中的内容就以标题的形式显示了。

3.3 属性

HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值成对的形式出现，比如：name='value’
在HTML标签中，align 属性表示水平对齐方式，我们可以赋值为 center 表示居中

3.4 创建一个标准的初始化页面

<!DOCTYPE html>: 声明文档类型。规定了HTML页面必须遵从的良好规则，从HTML5后，<!DOCTYPE html>是最短的有效的文档声明。
`：这个标签包裹了整个完整的页面，是一个**根元素（顶级元素）**。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。
<head>：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。这里主要介绍两个标签：
- <meta charset="utf-8">：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容，能够避免页面乱码问题。
- <title>：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。
<body>：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。

4. 基本语法

4.1 关于注释

如同大部分的编程语言一样，在HTML中有一种可用的机制来在代码中书写注释。为了将一段HTML中的内容置为注释，你需要将其用特殊的记号包括起来

4.2 关于标签

不是所有元素都拥有开始标签，内容和结束标签。一些元素只有一个标签，叫做空元素。它是在开始标签中进行关闭的。例如：<br/>
你也可以把元素放到其它元素之中——这被称作嵌套。比如，我们想要强调第一个，可以将<b>标签包围第一个，这样b标签就是嵌套在了p标签中,如下所示
- <p>这是<b>第一个</b>页面</p>
在HTML中有两种重要元素类别，块级元素和内联元素
- 块级元素（block）：独占一行，在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现
- 行内元素：行内显示，不会导致换行，通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容
- 注意：一个块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素中
<div>是一个通用的内容容器，并没有特殊语义，它可以被用来对其他元素进行分组，一般用于样式化相关的需求，它是一个块级元素
<span>是短语内容的通用行内容器，并没有任何特殊语义，它可以被用来编组元素以达到某种样式，它是一个行内元素
注意：div和span在页面布局中有重要作用

4.3 关于属性

标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以name = value的格式展现。
- 属性名：同一个标签中，属性名不得重复。
- 大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。
- 引号：双引号是最常用的，不过使用单引号也没有问题
常用属性

属性名	作用
class	定义元素类名，用来选择和访问特定的元素
id	定义元素唯一标识符，在整个文档中必须是唯一的
name	定义元素名称，可以用于提交服务器的表单字段
value	定义在元素内显示的默认值
style	定义CSS样式，这些样式会覆盖之前设置的样式（第一天简单了解，第二天主要内容）

4.4 特殊字符

在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢

原义字符	等价字符引用
<	`<`
>	`>`
"	`"`
’	`'`
&	`&`
空格	` `

5. 文本案例

5.1 div样式布局

文本由几部分构成，我们可以使用div将页面分割布局
在head标签中，通过style标签加入样式。

基本格式

<style>
    标签名{
      
        属性名:属性值;
    }
</style>

多个属性名格式

<style>
    标签名{
      
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
    }
</style>

div的多样式

一个属性名可以含有多个值，同时设置多样式

格式：
<style>
    标签名{
      
        属性名:属性值1 属性值2 属性值3; 
    }
</style>

注：为了布局方便，我们通常可以先设置边框的样式，进行布局，结束后再去掉边框，直观显示完整的界面

5.2 文本标签

使用文本内容标签设置文字基本样式

标签名	作用
p	表示文本的一个段落
h	表示文档标题，`<h1>–<h6>` ，呈现了六个不同的级别的标题，`<h1>` 级别最高，而 `<h6>` 级别最低
hr	表示段落级元素之间的主题转换，一般显示为水平线
li	表示列表里的条目。
ul	表示一个无序列表，可含多个元素，无编号显示。
ol	表示一个有序列表，通常渲染为有带编号的列表
em	表示文本着重，一般用斜体显示
strong	表示文本重要，一般用粗体显示
font	表示字体，可以设置样式（已过时）
i	表示斜体
b	表示加粗文本

6. 图文案例

6.1 页面布局

想要将div布局成案例效果，首先需要对多个div进行区分，再分别设置每一个div自身的效果。
首先编写三个div，设置边框样式

<style>
     div{
     border: 1px solid blue;}
</style>

<div >left</div>
<div >center</div>
<div>right</div>

此时通过div设置的样式都是一致的，无法个性化布局。这时候需要区分不同的div
使用class的值

.class值{
	属性名：属性值；
}

<标签名 class="class值">

使用class的值，可以帮助我们区分div，更加精确的设置标签的样式
当有些部分是并列的时候，我们知道div是独占一行的，这时候我们就需要用到浮动属性
float：指定一个元素应沿其容器的左侧或者右侧放置，允许文本或者内联元素环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序
格式

<!-- 加入浮动 -->
float：none；不浮动
float：left；左浮动
float：right；右浮动

<!-- 清除浮动 -->
clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。

对前面示例中使用class的值进行浮动布局

        .left{
            width: 20%;
            float: left;
        }

        .center{
            width: 59%;
            float: left;
        }


        .right{
            width: 20%;
            float: left;
        }

6.2 图片标签

标签名	作用	备注
img	可以显示一张图片（本地或网络）	src属性，这是一个必须的属性，表示图片的地址

其他属性

属性名	作用
title	鼠标悬停时显示文本
alt	图形不显示时的替换文本
height	图像的高度
width	图像的宽度

插入图片示例

<img height="100%" width="100%" src="picture/j1.png"/>

6.3 超链接

标签名	作用	备注
a	表示超链接	href属性，表示超链接指向的URL地址

属性名	作用
target	页面的打开方式（_self当前页 _blank新标签页）

超链接示例

  <a href="#" target="_blank">文本或图片</a>

去掉超链接下划线

a{
	text-decoration:none; //none表示不显示
}

6.4 设置背景

背景色:
	 background-color: black;
背景图:
	 background-image: url("../img/bg.png");

设置哪个区域就给哪个div加上背景属性

7. 注册页面案例

7.1 表单标签

标签名	作用
form	表示表单，是用来收集用户输入信息并向web服务器提交的一个容器

代码示例

<form >
    //表单元素
</form>

表单的属性

属性名	作用	备注
action	处理此表单信息的Web服务器的URL 地址
method	提交此表单信息到Web服务器的方式	可能的值有get和post，默认为get
autocomplete	自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用	HTML5之后

举例

<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>

<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">