首页 > 其他分享 >html5,h5是什么?h5常用标签和标签的分类(2024-05-31)

html5,h5是什么?h5常用标签和标签的分类(2024-05-31)

时间:2024-05-31 09:33:36浏览次数:12  
标签:05 标签 元素 h5 HTML 文档 内容 标记


起源

HTML(Hypertext Markup Language,超文本标记语言)诞生于20世纪90年代初,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,如标题、段落、列表、指向其他网页的链接等。

HTML5是HTML的最新版本,它的大部分内容都可以兼容新旧浏览器,并新增了大量新的功能。HTML5还引入了原生的音频和视频播放功能。


1、html5是什么?

1.1 定义

HyperText Markup Language 超文本标记语言,是一种标记语言。

它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。


1.2 简介

HTML5实际上是一系列用来制作现代富Web内容的相关技术的总称。

其中最重要的三项技术是HTML5核心规范、CSS(Cascading Style Sheets,层叠样式表)和JavaScript。

 (1)HTML5核心规范定义用以标记内容的元素,并明确其含义。

 (2)CSS用于控制标记过的内容呈现在用户面前的外貌。

 (3)JavaScript用来操纵HTML文档的内容以及响应用户的操作。

同时HTML5引入了原生的多媒体支持,并引入了可编程内容(canvas元素,必须用到JavaScript)和语义Web。


1.3 网页代码结构

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

   <script>

   </script>

   </body>


</html>   
含义:

<!DOCTYPE html> 
声明文档类型 html5文档(用来标记文档内容的HTML所属的版本)

<html></html> 
根标记标签 它表明文档中HTML部分的开始 lang属性指定页面内容的默认语言,例如:en表示英语,es表示西班牙语,等

<head></head> 
头标记标签,向浏览器提供有关文档内容和标记的信息,还可以包含脚本和对外部资源(比如CSS样式表)的引用

<body></body> 
主体标记标签,文档body部分包含访问者可以看到的内容。
在有了这个基本的结构后,就可以将HTML的其它元素逐步添加进去。

<meta charset="utf-8"> 
元数据标签 charset设置字符编码 utf-8被称为万国码,
包含全世界所有国家所需要的字符,若无字符集则可能会出现乱码的状况。

<script>
定义客户端脚本

<style>	
定义文档的样式

提示:gbk / gb2312两种编码类型统称为国标码

2、html5常用的标签

名称标签用法
标题标签

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

一般用在文章的标题上

段落标签<p></p>

一般用在正文。

换行标签<br/>

一般用在段落中强制换行。

水平线标签<hr>一般用来分隔内容
范围标签<span></span>

1、一般在大段内容中,为了突出部分内容的时候使用的标签;很少独立使用,一般嵌套在其他的标签中使用。

2、是为了改变局部内容样子,我们才通过范围标签包裹,然后修改它的样式。

图片标签<img src="./cat.png"/>

一般用于显示图片

src::路径(相对路径,当前./ ,上一级./../)(绝对路径D:\path\cat.png 一般是以盘符开头)

列表标签

<ul><li></li></ul>

<ol><li></li></ol>

一般用于多个元素同等级排布
布局标签<div></div>

一般就是做容器,盛放其他标签的,将其他标签组合在一起用来布局

超链接<a></a>

1、用来实现页面间的跳转

2、实现锚链接功能

表格标签

<table>

    <tr><td></td></th>

</table>

一般用于表格

表单<form></form>

用于采集用户输入的数据。然后和服务器进行交互。

音频标签<audio></audio>多媒体标签 , 即可实现向浏览器中插入音频
视频标签<video></video>多媒体标签 , 即可实现向浏览器中插入视频
框架<iframe></iframe>

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。


3、标签分类(块元素,行内元素)

html标签可以分为块状元素和行级元素两类。 区分的简单方法:是否独占一行。

块状元素:一般都是新起一行,可以容纳行内元素和其他块级元素;

                  (h1-h6,p,hr,ol,ul,li,div,table。。。)

行级元素:一般都是语义级别的基本元素,一般只能容纳文本或者其他行内元素。                                   (span,img,a,i)

块状元素与行内元素的区别:

块级元素会独占一行,其宽度自动填满其父元素宽度;

行内元素会排列到同一行里,其宽度随元素的内容变化而变化。

块级元素可以设置宽高;行内元素设置宽高无效。

块级元素可以设置margin,padding属性;

行内元素的水平方向的padding会有边距效果,但是竖 直方向的padding没有效果。


标签:05,标签,元素,h5,HTML,文档,内容,标记
From: https://blog.csdn.net/hap1994/article/details/139300509

相关文章

  • 前端开发(2)--HTML常用的标签
    100编程书屋_孔夫子旧书网HTMl的标签可以分为单个标签和成对标签。单个标签:html4规定单个标签要有一个/表示结尾,html5则不用<!--单个标签--><meta><!--成对标签--><div></div>以下是HTMl中常用的一些标签div标签div标签主要用来将相关的内容组合到一块,就......
  • 使用HC—05实现单片机HAL库双蓝牙通信
     一.蓝牙HC-05简介(主要为AT模式介绍)1.接线要点:(六个引脚中左右两侧的两个不用连接)    TX-RX     RX-TX        GND -GND    VCC -VCC(5V)2.AT模式:  进入方法:使用CH340串口工具链接HC-05及电脑USB端(提前下好CH340驱动)按......
  • P10531 [XJTUPC2024] 圣诞树
    题目大意一个有$n$个节点的树,对于任意一个点$v$为根的子树如果树上的颜色$\gek$那么就把$v$为根的子树删去答案就加一。思路这个地方我们第一个就会想到贪心当一颗子树颜色$\gek$时就立马删掉这一颗树答案加一,在操作时用set来维护就行了。在这我介绍......
  • P10526 [XJTUPC2024] 命令行题解
    题目大意对于一个字符串$s$在输入的最后一行读入的字符,如个字符不为$E\(,\)T\(,\)B$那么这一个字符就添加至字符串$s$的末尾。对于操作$B$那么执行删除字符串$s$的最后一个字符,如果$s$为空那么跳过这个操作。对于操作$T$找到一个以字符串......
  • P10530 [XJTUPC2024] 生命游戏 题解
    题目大意一棵树一共$n$个点如果有$k$个点与某一个点相连那么这一轮的结尾这个点就会死。思路这道题有几个坑!并没有说哪一个节点是根节点。双向边记得开双倍数组。等这一轮的点消除完了才能再次判断哪一些点可以消除。首先我们创建一个数组$Size_{n}$来......
  • CF/505/D 题解
    思路这道题的思路其实是根据样例图片来的。首先第一张:这张图片可以得知$n$个点没有环的时候最少需要$n-1$个点。再看第二张:这个图确实很难思考,但稍微思考一下如果我们把含有一个强连通分量的图变成一整个强连通图。这个图的边数不就变成$n$了吗?来推一下......
  • RFS_Server_05 云服务器配置及域名解析
    操作描述:在阿里云购买两项服务【云服务器ECS】和【域名】后,配置云服务器,注册域名,最终实现通过域名访问服务器,需要做以下事情:域名:1.ICP域名备案。此服务由云服务商代理,按照指引填写主体信息、域名用途等信息,等待客服联系通过审核即可。(此次遇到的阿里云客服态度非常不耐烦......
  • Gym-100520A Andrew Stankevich Contest 45 A 题解
    AnalogousSetsGym-100520ASol1.集合生成函数将可重集合\(M\)映射为生成函数:\[F(M)=\sum_{m\inM}(\#m)\cdotx^m\]如果\(M\)的元素在\(\mathbbN\)上取值,那么,\(F(M)\)是多项式。2.\(\theta\)算子\[\theta(F)=x\cdotF'\]其中\(F'=\frac{dF}{dx}\)......
  • PostgreSQL 小课推广-20240529
    目前PostgreSQL小课在持续更新中,PostgreSQL小课专栏新人优惠券到2024年6月1日到期,有需要的伙伴还请关注下。优惠券马上到期,领取券后,也就只需要30元(也就一杯咖啡的钱)就可以解锁专栏,先到先得。目前专栏的50元/年,后续到期不需要续费,等到专栏完成,会有一个......
  • 【GoMaxAI】最新的AI创作系统源码包括ChatGPT网站H5系统源码和Midjourney-AI绘画系统
    一、系统前言GoMaxAI创作系统是基于ChatGPT开发的智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型和国内AI全模型。针对源码系统的完美测试结果,你想了解如何搭建部署AI创作ChatGPT系统,我这里提供一个详细的图文教程。系统已支持GPTs、GPT语音对话、GPT-4模型、联网提......