HTML介绍

于 2024-08-17 16:30:29 发布
阅读量971 收藏 13
点赞数 18
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_72013756/article/details/141276657
版权

一、什么是HTML？

HTML​指的是​超文本标记语言（英语：HyperText Markup Language），是用来描述网页的一种语言。您可以使用 HTML 来建立自己的 Web 站点，HTML 运行在浏览器上，由浏览器来解析。 

  • ​HTML​不是​一种​编程语言​，​而是​一种​标记语言​，它有一套标记标签 。
  • 标签是由尖括号包围的关键字，例如：<html>
  • 标签有两种形式  1.双标签，例如:<html></html>2.单标签，例如:<img>
  • HTML​使用标记​标签​来​描述网页​。
  • ​​HTML​文档​包含了HTML标签​及​文本内容​，HTML文档也叫做 Web 页面。
  • ​HTML​文档的​后缀名​包含​.html​、​.htm​(常用的是.html)

二、HTML网页结构

只有 <body> 区域才会在浏览器中显示，显示效果如下图：

我们来解析一下：

  • <!DOCTYPE html> 声明为 HTML5 文档，doctype 声明是不区分大小写的。
  • <html> 与 </html> 之间的文本描述网页。
  • <head> 与 </head>之间的文本描述文档的（meta）元数据。 可以包含脚本、样式、meta 信息 以及其他更多的信息。
  • <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。如<meta charset="utf-8">定义网页编码格式为utf-8。（ <meta> 标签通常位于 <head> 区域内。）
  • <title> 与 </title> 之间的文本描述文档的标题。（<head> 中必须包含 <title>）
  • <body> 与 </body> 之间的文本是可见的页面内容。
  • <h1> 与 </h1> 之间的文本被显示为一个大标题。
  • <p> 与 </p> 之间的文本被显示为一个段落。

注意：

  • 对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
  • 虽然 Web 浏览器读取 HTML 文件作为网页显示，但并不直接显示 HTML 标签。
  • HTML 标签的使用决定了如何向用户展现 HTML 页面的内容。

三、单双标签与标签关系分类

HTML标签分类
  • 单标签：​<hr />​、​<input type="text" />​、​<!Doctype html>​等   
  • 双标签：​<html></html>​、​<head></head>​、​<title></title>​等
HTML标签关系
  • 包含（嵌套）关系：<head> <title></title> </head>   父子关系，<title>嵌套在<head>中​<head>为父​、​<title>为子​。
  • 并列关系：<html> <head></head> <body></body> </html>     兄弟姐妹，  ​<head>与<body>并列同级于<html>中，​<head>和<body>是兄弟关系。
注意：
  • 在并列关系的例子中，<head>和<body>两者与<html>也是父子关系。

四、HTML 属性

属性是 HTML 元素提供的附加信息。

  • HTML 元素可以设置​属性​
  • 属性可以在元素中添加​附加信息​
  • 属性一般描述于​开始标签​
  • 属性总是以​键值对（名称/值）​的形式出现，比如：​name="value"​。

属性实例：

这是一个链接使用了 ​href​ 属性。

键值对的定义：

  • 键：值的编号或名称。
  • 值：要存放的数据。

五、HTML 属性值

属性值应该始终被包括在​引号内​。

​双引号​是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

注意：

  • 属性和属性值对大小写不敏感。
  • 但在推荐标准中，依然推荐使用小写的属性/属性值。

六、HTML 常用的属性

下面列出了 HTML 常用的属性，适用于大多数 HTML 元素。

属性描述
class为 html 元素定义一个或多个类名（类名从外部样式文件引入或在 HTML 文件的<style>标签中定义）
id定义元素的唯一 id
style规定元素的内联样式
title规定元素的额外信息（可在工具提示中显示）

七、HTML class 与 id 属性

class 属性 

​class​ 属性为 HTML 元素​定义一个或多个类名​​。

class 属性通常用于指向​样式​表中的类。 

例子：

<p class="intro">这是一个段落，定义了一个类名。</p>

<p class="intro color">这是另一个段落定义多个类名。</p>

id 属性

​id​ 属性定义 HTML 元素的​唯一的 id​。

id 在 HTML 文档中必须是唯一的。 

例子：

<h1 id="header">天天开心</h1>
注意：
  • 一个 id 属性只能定义给一个 HTML 元素，即 id 是唯一的。
浅笑心柔142
关注
一、HTML技术
qq_54398027的博客
11-20 1537
一、HTML 1.什么是HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 2.HTML基本标记 二、CSS技术 1.什么是CSS CSS是一种样式表语言，用于为HTML文档定义布局。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字
个人网页介绍家乡纯html
10-26
设计工具用Dreamweaver8.0、Flash8.0、Photoshop CS 网站基本栏目（至少就包含以下5个栏目） 1）个人网站首页（） 2）自我介绍 注：运用表格布局 3）我的家乡 家乡概况、家乡地标、家乡美食、家乡名胜 等 注：综合运用框架、DIV+CSS布局 4）我的相册 快乐的童年、校园生活 等 5）雁过留声(表单) 用表单制作一个留言表的框架
HTML技术简介
weixin_34015566的博客
07-18 2525
1.DHTML:"Dynamic HTML"动态HTML技术的简称。DHTML并不是一项新技术,而是HTML,CSS,JavaScript技术组合的术语。DHTML背后的含义是: (1)利用HTML把网页标记为各种元素; (2)利用CSS设置元素样式和他们的显示位置; (3)利用Javascript实时地操控页面和改变样式；   2.在DHTML时代,是一个各种浏览器混战的时代。每个浏览...
HTML5技术简介
zz_xyz的博客
08-21 1222
1. 介绍 HTML是超文本标记语言的英文缩写，这是一种标记语言，不需要进行编译，直接由浏览器执行。HTML文件是一个文本文件，包含了一些HTML元素、标签等。目前HTML语言最新版本为4，W3C发布了最新的HTML5工作草案，HTML工作组包括AOL、Apple、Google、IBM、 Microsoft、Mozilla、Nokia、Opera等数百个开发上。 HTML5解决了HTML4...
HTML
weixin_30814319的博客
02-07 105
前端概述 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8089)) sock.listen(5) while True: connection,...
HTML基本元素
gedoua的博客
08-21 161
[code="java"] 这是网页的标题 .center{text-align: center; color:red} 这是网页显示的内容 This paragraph will be right-aligned. This paragraph will be center-alig...
一款好看的HTML介绍页、引导页源码
END
05-11 6726
一款好看的个人极简介绍页、引导页源码，图标引用的是阿里巴巴矢量图标库，可引入自己的图标项目更换。 图标项目更换在index.html第9行里面 logo图片在index.html第29行里面 名字在index.html第32行里面 介绍在index.html第65行里面 地图引入了高德的map lab 数据可视化，可用来做足迹，记录去过的地方。 下载地址：好看的扁平化风格的HTML单页面、引导页、介绍页源码-Webpack文档类资源-CSDN下载 ...
html语言详细介绍
jcf52的博客
03-16 5559
一.html介绍 HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。 HTML是由WEB的发明 者 Tim Berners-Lee （蒂姆·伯纳斯·李）和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言（SGML）的应用。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如 ， 等)。 使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTM
用html做自我介绍
hduugdh的博客
05-01 7388
话不多说上代码 顺便挑战一天爆肝三篇文章 <html> <head> <title>朱**</title> <mate name="keywords" content="个人简历"/> <mate name="description" content="朱**的个人简历"/> </head> <body> <table border=5 bordercolor=red align=center&g
1-1-HTML技术
daqi1983的博客
08-02 3125
一、html简介 它是一门描述网页的语言，HyperText MarkUp Language,超文本标记语言。 * 超文本：超出文本的范畴，指的在网页上面可以描述文本、图片、视频等内容 * 标记：标签，在标签里面书写内容。 * 语言：html就是用户和浏览器交互的工具，简单来讲，浏览器会解析html的标记，以特定的效果给展示出来 二、 html的主要组成部分： *文档的声明<!DOCTYPE>: 声明了html的类型和版本号 *htm...
(一)HTML介绍
lpfwhu的博客
05-07 764
(一)HTML介绍一，Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观
HTML的简单介绍
学代码的咸鱼的博客
01-03 2320
简单讲解HTML基本标签！
关于HTML的基础知识的介绍
qq_43698078的博客
12-12 3547
一、导读      首先感谢一下一直以来支持我的读者，你们对文章的阅览以及点赞评论是我不断去努力学习的动力，如果我写的文章热度可以继续上升，我决定在写完关于前端的知识的博文后写一个带有高科技含量的表白墙和一个对你喜欢的人表白的网站，以此来回报大家。今天，我们先来先来聊聊前端的“三剑客”之一的“HTML”.     在开始正文之前，为了让小白也能看懂后面的知识，咱们先引入一点Web的基本概念和常识。 1.1.Web应用      所谓的Web应用特指我们平时用浏览器打开的一些应用，也就是网站。 1.2.浏览器
【前端技术】HTML基础入门篇
最新发布
软件测试知识输出
04-23 1176
1.1 HTML简介 ​ HTML（HyperText Markup Language：超文本标记语言）是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 ​ 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台
html 标签 中 的Lang 有什么用
weixin_34010949的博客
12-24 210
&lt;html lang="en" style=""&gt;     表示当前文档显示的语言在很多国际化的网站中会遇到&lt;html lang="ar"&gt;....&lt;/htm&gt;表示当前页面的显示文本是阿拉伯语 HTML lang 属性 lang 属性 -- HTML语言声明属性 示例 &lt;html xmlns="http://www.w3.org
节日介绍html网页
05-31
好的，我可以帮您介绍一下如何制作一个节日介绍的HTML网页。 首先，你需要用到HTML语言来编写网页内容，可以使用任何文本编辑器如Notepad++、Sublime Text等，或者直接在在线编辑器中编写。 以下是一个基本的HTML模板，你可以在其中填写自己的网页内容： ```html <!DOCTYPE html> <html> <head> <title>节日介绍</title> <meta charset="utf-8"> </head> <body> <h1>节日介绍</h1> <p>这里是节日介绍的内容。</p> </body> </html> ``` 在上面的代码中，`<title>`标签定义了网页的标题，`<meta>`标签用来设置网页的字符编码为UTF-8，`<h1>`标签定义了网页的一级标题，`<p>`标签定义了网页的段落。 你可以把节日介绍的内容填写在`<p>`标签中，也可以添加图片、链接等元素来丰富网页的内容。 例如，你可以在网页中添加一张节日的图片，代码如下： ```html <!DOCTYPE html> <html> <head> <title>节日介绍</title> <meta charset="utf-8"> </head> <body> <h1>节日介绍</h1> <p>这里是节日介绍的内容。</p> <img src="节日图片的URL" alt="节日图片"> </body> </html> ``` 其中，`<img>`标签用来添加图片，`src`属性指定了图片的URL地址，`alt`属性用来为图片添加一个描述文本，当图片无法加载时，该文本将作为替代品显示。 除了图片，你还可以添加链接、列表、表格等元素来丰富网页的内容。在编写HTML网页时，你需要注意语法的正确性，遵循HTML标准。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值