html简介

最新推荐文章于 2024-10-03 22:12:17 发布
最新推荐文章于 2024-10-03 22:12:17 发布
阅读量200 收藏
点赞数
分类专栏： html 文章标签： html bash 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43376571/article/details/121807206
版权

何为HTML？

问HTML为何物？其实就是标记语言！

  • HTML（Hypertext Markup Language）超文本标记语言。
  • 它负责网页的三个要素之中的结构。
  • HTML使用标签的的形式来标识网页中的不同组成部分。
  • 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。

一个最基本的html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>

1、标签

  • HTML中的标记指的就是标签。
  • HTML使用标记标签来描述网页。
  • 结构：
    <标签名>标签内容</标签名>
    </标签名>

2、元素

  • 我们还将一个完整的标签称为元素。
  • 这里我们可以将元素和标签认为是一个同义词。
<h1>一级标题</h1>

上边的h1我们就称为元素。

<p>我是一个<em>段落</em></p>

p也是一个元素，em是p的子元素，p是em的父元素。

<body>
<p><em>内容</em></p>
</body>

  • body也是一个元素。

  • body是p和em的祖先元素。

  • p和em是body的后代元素。

3、属性

  • 可以为HTML标签设置属性。
  • 通过属性为HTML元素提供附加信息。
  • 属性需要设置在开始标签或自结束标签中。
  • 属性总是以名称/值对的形式出现。
  • 比如：name=“value”。
  • 有些属性可以是任意值，有些则必须是指定值。
<h1 title="我是一个标题">标题</h1>
<img src="" alt="" />

4、常见属性

id

  • id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。
<div id="id1"></div>

class

  • class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class。
<div class="class1"></div>
<div class="class1 class2 class3"></div>

title

  • title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。
<p title="友情提示语">友情提示语</p>

5、注释

  • HTML注释中的内容不会在网页中显示。
  • 格式:
<!-- 注释内容 -->
  • 合理的使用注释可以帮助开发人员理解网页的代码。
  • 注释不能嵌套！

HTML的发展

  • 1993年6月：HTML第一个版本发布。
  • 1995年11月：HTML2.0。
  • 1997年1月：HTML3.2（W3C推荐）。
  • 1999年12月：HTML4.01（W3C推荐）。
  • 2000年底：XHTML1.0（W3C推荐）。
  • 2014年10月：HTML5（W3C推荐）。

doctype

  • HTML总共有那么多的版本，而且这其中至少有三个版本在广泛使用，那么浏览器怎么知道我们在使用哪个版本呢？
  • 为了让浏览器知道我们使用的HTML版本我们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本。
<!DOCTYPE html>

HTML的编码问题

1、html的编码问题

  • 在计算机的内部，文件都是以二进制编码保存的。
  • 所谓的二进制编码就是指1和0，也就是我们的所有内容都需要转换为1和0。
  • 中国两个字在计算机的底层保存的可能要转换为10100101这种二进制码，这一过程称为编码。
  • 计算机在读取文件时需要将10100101在转换为中国给我们显示这一过程称为解码。

2、字符集

  • 这就带来一个问题，中国到底是10100101还是01011010到底由谁说了算。
  • 所以我们还需要一个东西称为字符集，字符集规定了如何将文本转换为3、二进制编码。
  • 常见的字符集：ASKII、ISO8859-1、GBK、GB2312、UTF-8。

4、乱码问题

  • 如果我们保存文件时使用的是utf-8进行编码，而浏览器读取页面时使用gb2312，这样就会导致页面中的内容不能正常显示，也就是我们所说的乱码。
  • 所以我们只需要统一两者使用的字符集就可以解决乱码问题。
  • 这里为了页面有更好的使用性，我们一般使用utf-8。

5、解决乱码

  • 保存文件的编码我们直接通过编辑器即可指定，接下来就是要告诉浏览器使用什么字符集去解析文件。
  • 在html5中只需要使用meta标签即可完成这个任务：
<meta charset="utf-8" />

6、 meta的使用场景

  • 设置页面的字符集
<meta charset="utf-8"/>
  • 设置网页的描述
<meta name="description" content=""/>
  • 设置网页的关键字
<meta name="keywords" content=""/>
  • 请求的重定向
<meta http-equiv="refresh" content="5;url=地址"/>

HTML的常用标签

1、html

  • 作用：

    • html标签用于告诉浏览器这个文档中包含的信息是用HTML编写的。

  • 用法:

    • 所有的网页的内容都需要编写到html标签中，一个页面中html标签只能有一个。
    • html标签中有两个子标签head和body 。
<!DOCTYPE html>
<html>
</html>

2、head

  • 作用：

    • head标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。

  • 用法:

    • head标签作为html标签的子元素的出现，一个网页中只能有一个head。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
</html>

3、title

  • 作用：

    • title标签表示网页的标题，一般会在网页的标题栏上显示。
    • title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。

  • 用法:

    • 建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签。
    • 网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
</html>

4、body

  • 作用：

    • body标签用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中。

  • 用法:

    • body标签作为html的子标签使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
</body>
</html>

5、h1~h6

  • 作用：
  • h1~h6都是网页中的标题标签，用来表示网页 中的一个标题，不同的是，从h1~h6重要性越来越低。
  • 标题标签相当于正文的标题，通常认为重要性仅次于页面的title。
  • 一般标题标签我们只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了。
  • 一个页面中只会使用一个h1标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>

6、p

  • 作用：
  • p标签表示网页中的一个段落。
  • 一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
<p>这是一个段落</p>
</body>
</html>

7、br

  • 作用：
  • br标签表示一个换行标签，使用br标签可以使br标签后的内容另起一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
<p>这是一个段落</p>
</br>
</body>
</html>

8、hr

  • 作用：
  • hr标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
<p>这是一个段落</p>
</hr>
</body>
</html>

9、img

  • 作用：
  • img标签是图片标签，可以用来向页面中引入一张外部的图片。
  • 用法:
    • src:
      • 指向一个外部的图片的路径。
    • alt:
      • 图片的描述。
<img src="图片路径" alt="图片描述"></img>

10、a

  • 作用：
  • a标签是超链接标签，通过a标签，可以快速跳转到其他页面。
  • 属性:
    • href:
      • 指向一个外部的图片的路径。
    • target:
      • 设置打开目标页面的位置，可选值：_blank新窗口、_self当前窗口。
<a href="http://www.w3school.com.cn" target="_blank">W3School</a>

实体（转义字符）

什么是实体？

在HTML中预留了一些字符。
这些预留字符是不能在网页中直接使用的。
比如 < 和 > ,我们不能直接在页面中使用 < 和 > 号，因为浏览器会将它解析为html标签。
为了可以使用这些预留字符，我们必须在html中使用字符实体。

字符实体

小于号<  &lt;  大于号> &gt; 空格 &nbsp; 和符号&  &amp; 
版权©  &copy;  引号” &quot; 注册商标®  &reg; 商标™  &trade;

总结

html标签的使用大同小异，具体详细的标签建议大家多查看w3c文档，文档地址:https://www.w3school.com.cn/

qq_1635111063
关注
专栏目录
HTML简介（网页的基本组成，什么是HTML，Web标准的三大组成部分），HTML标签（HTML语法规范，标签关系），HTML结构标签（第一个HTML）
shy的博客
02-22 4011
网页的基本组成 网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，通常我们看见的网页都是.htm和.html后缀结尾的文件，因为都称为HTML文件 什么是HTML HTML是一种超文本标记语言，是一种用来描述网页的一种语言 HTML不是编程语言，而是标记语言，是一套标记标签 超文本: 可以加入声音，视频，动画，多媒体等（超越了文本限制） 可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本） Web标准的三大组成部分 主要包括结构、表现、行为 三个方
第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：父标签、子标签和后代标签
陈子的专栏
04-11 1246
（七）父标签、子标签和后代标签 HTML标签嵌套后，两个直属嵌套的标签，外层的标签称为父标签，内层的标签称为子标签；子标签的子标签则称为父标签的后代标签，子标签也属于后代标签。如： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;...
html基础
qq_1403034144的博客
05-24 995
目录最简单代码1 标签1.1 标题 < hi>< /hi>1.2 段落< p>< /p>浏览器会自动地在段落的前后添加空行1.3 样式 - style属性1.3.1 查看电脑支持的字体1.3.2 文本格式化同时上小标1.3.3 特殊符号水平线 < hr/>换行 < br/> 最简单代码 <html> <head> <title>欢迎你的到来！</title> </head&
21.HTML、CSS
weixin_43911672的博客
09-25 601
HTML、CSSHTML概述HTML是什么HTML的结构HTML语法(了解)HTML标签图像标签超链接标签表格标签表单标签表单项标签表单细节问题注册表单案例CSS概述什么是CSS？(了解)在HTML中引入CSSCSS选择器标签名选择器class选择器id选择器后代选择器属性选择器常用属性总结文本属性字体属性背景属性边框（border）其他属性补充: 颜色设置网页开发实战扩展内容display属性元素类型(了解) HTML: 用于开发网页的一门技术 CSS: 用于修饰、渲染网页的一门技术 HTML标签搭建网页
HTML简介
m0_56161893的博客
06-29 5450
HTML是：Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。 HTTP超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。 HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义...
HTML是什么？HTML简介
ccc369639963的博客
01-22 1万+
HTML是什么？HTML简介 HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。 使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。 每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL）
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
热门推荐
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
12-16 9万+
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)。一款非常简洁，亮丽的个人简介模板，适用于个人主页，个人简历等相关主题，界面分为个人信息，基本资料，专业技能，教育经历，工作经验等五个版块，支持扩张，具体效果见下面的原文链接，里面有视频和代码讲解。代码容易上手，下载后直接运行。
HTML简介及基本结构
h_h33的博客
11-09 9624
一:HTML的定义 二：编码格式 三：html文件的基本结构 四:html设计原则
学生个人简介html网页
11-17
这个"学生个人简介html网页"项目是一个非常适合初学者学习的实例，它可以帮助理解HTML和CSS的基本概念以及如何结合使用它们来构建网页。 首先，HTML负责网页的内容结构。在个人简介网页中，HTML标签会用来定义不同...
前端第二章：1.HTML简介、Linux 命令行打开 .html 文件、常用标签（一）
励志成为会前后端、Linux运维、嵌入式开发、AI和自动化技术的创业小老板！
04-25 6286
一、HTML 简介 1.HTML 是 超文本标记语言（Hypertext Markup Language） 2.负责 网页三要素 中的 结构 3.使用标签的形式 识别 网页中不同的组成部分 4.超文本 指的是 超链接，使用超链接能够让我们从一个界面跳转到另一个界面 二、Linux 命令行打开 .html 文件 1.命令： 浏览器名 文件名.html & 1.1 示例： 三、常用标签（一） 1.告诉浏览器 哪些内容 是 哪些内容 2.标签的语法： <标签名> 标签体 </标签
html+css基础教程之html简介和元素
html前端基础入门教程
03-01 3701
HTML 简介 什么是 HTML？ HTML即超文本标记语言 (Hyper Text Markup Language)， 是用来描述网页的一种语言。 超文本标记语言的结构包括"头"部分（外语：Head）、和"主体"部分（外语：Body），其中"头"部提供关于网页的信息，"主体"部分提供网页的具体内容。 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 如下代...
HTML5快速入门（一）—— HTML简介
黑森林工作室
06-08 1万+
前言：1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我 2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时
使用html写一个能发起请求的登录界面
最新发布
2301_79431343的博客
10-03 500
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
基于HTML、CSS和JavaScript的滚动数字显示效果，类似于老式计数器或电子表上的数字滚动效果
2201_76060199的博客
09-29 1127
这段代码创建了一个数字滚动显示效果，用户可以通过输入框输入金额，或点击按钮生成随机数字，金额数字会以滚动的方式显示。CSS负责布局和样式，JavaScript负责动画效果和逻辑处理。代码中多次使用了相同的IDcounter，这在实际开发中是不推荐的，ID应该是唯一的，这里可能是为了简化示例而重复使用。
【CSS/HTML】左侧固定，右侧自适应的布局方式理解margin负值理论
mengran_code的博客
09-29 680
简单解释下flex: 0 0 200px的用处，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。它的默认值为auto，即项目的本来大小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。是固定宽度的div脱离文档流。
【工欲善其事】巧用 Sublime Text 生成带格式的 HTML 片段
PeacefulWinter的博客
09-30 1156
本文介绍了 Sublime Text 自定义代码片段的操作技巧，非常适合需要快速输入一系列高度格式化的文本内容。配合大量截图，可以快速掌握该技巧，提升日常工作效率。
CSS选择器的全面解析与实战应用
会思想的苇草i的博客
09-27 1004
本文全面介绍了CSS选择器的种类与应用技巧，从基本的选择器如类型、类和ID选择器，到复合选择器如后代、相邻及通用兄弟选择器等，再到伪类和伪元素的选择器使用方法。通过详细的示例和最佳实践，帮助读者理解和掌握如何精确地定位页面元素，从而更高效地管理和优化CSS样式表，实现复杂的设计布局需求。
JavaScript基础：运算符与HTML简介
HTML的发展历程中，经历了多个版本，由IETF（互联网工程任务组）和W3C（万维网联盟）制定和维护，包括HTML 1.0、2.0、4.0，以及后来的XHTML、DHTML和HTML/CSS/JavaScript的集成应用。 尽管不同浏览器可能对某些旧...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值