HTML5基本元素使用

最新推荐文章于 2021-10-13 09:58:32 发布
置顶 最新推荐文章于 2021-10-13 09:58:32 发布
阅读量1.2k 收藏 5
点赞数
分类专栏： Html5 UI 文章标签： html5 HTML5基本元素 H5 元素 function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011730649/article/details/43938565
版权
本文详细介绍了HTML5的基本元素，包括标题、文本格式化、语义相关、超链接、列表、图像、表格、框架、以及HTML5新增的属性。通过实例展示了如何使用这些元素，如加粗文本、斜体文本、引用、图片、表格布局等，帮助读者快速掌握HTML5的基础知识。
摘要由CSDN通过智能技术生成

        Html5的使用越来越广泛了，不仅仅在传统的PC端制作网页的界面，现在在移动的APP界面上，在移动端的游戏开发上也使用的越来越多，如同雨后春笋一般。当然，学习Html5（简称：H5）时，得从最开始的基本元素学起，下面一个网页讲述的是H5的基本元素用法：

<!DOCTYPE html>

<html>

<head>

<title>HTML5保留的常用元素</title>

<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>

<style type="text/css">

   div div{

   display:inline-block;

   padding:10px;

   background-color:#aaa;

   margin:3px;

   }

</style>

</head>

<body>

 <!--1.基本标签-->

 <!--采用标题一到标题六来输出文本-->

<h1>Crazy JAVA</h1>

<h2>Crazy JAVA</h2>

<h3>Crazy JAVA</h3>

<h4>Crazy JAVA</h4>

<h5>Crazy JAVA</h5>

<h6>Crazy JAVA</h6>

<!--输出一条水平线-->

 <hr/>

<!--使用span定义三节，不进行换行-->

<span>Tomcat</span>

<span>Jetty</span>

<span>OBA</span>

 <!--使用div定义三节，进行换行-->

<div>Tomcat</div>

<div>Jetty</div>

<div>OBA</div>

<!--使用P定义三节-->

<p>Tomcat</p>

<p>Jetty</p>

<p>OBA</p>

<!--2.文本格式化标签-->

<span><b>加粗文本</b></span><br/>

<span><i>斜体文本</i></span><br/>

<span><b><i>加粗斜体文本</i></b></span><br/>

<span><em>被强调的文本</em></span><br/>

<span><strong>粗体文本</strong></span><br/>

<span><big>大号文本</big></span><br/>

<span><small>小号文本</small></span><br/>

<span>X<sup>2</sup></span><br/>

<span>X<sub>2</sub></span><br/>

<span><bdo dir="ltr">从左到右显示</bdo></span><br/>

<span><bdo dir="rtl">从右到左显示</bdo></span><br/>


<!--3.语义相关标签-->

<!--使用q表示一段短的引用文本,会带上引号-->

<p>疯狂Java精神是<q cite="http://www.fkjava.org">疯狂缘自梦想,技术成就辉煌。</q></p>

<!--使用blockquote表示一段長的引用文本-->

<div>

<blockquote>

业精于勤,荒于嬉。<br/>

行成于思,毁于随。<br/>

</blockquote>

</div>

<!--cite常用于表示作品的标题-->

<p>

<cite>《芙蓉镇》</cite>.<cite>《蓝风筝》</cite>是国内很有影响力的电影。

</p>

<!--code使用-->

<p>

下面定义一个Java类<br/>

<code>

 public class Cat<br/>

 {<br/>

   private int name="abc";<br/>

 }<br/>

</code>

</p>

<!--pre元素包含预定义格式的文本-->

<pre>

pubic class Cat

{

   private int name="bcd";

}

</pre>

<p>

<!--使用abbr定义缩写-->

疯狂Java教育中心的缩写是<abbr title="疯狂教育">fkjy</abbr><br/>

<!--使用address定义地址-->

疯狂软件地址是<address>中国软件基地</address>

</p>

<p>

<!--使用dfn定义专业术语-->

<dfn>HTML</dfn>是一种广为认知标签语言。

</p>

<p>

可通过输入如下命令:<br/>

<kbd>list -l</kbd>

在Linux的shell窗口中查看当前目录下所有文件,目录的详细信息。

</p>

<!--使用samp定义示范文本内容-->

<samp>

我在阅读xxxx图书的第一章

</samp>

<!--使用var变量-->

<var>i</var>.<var>j</var>.<var>k</var>通常用作循环计数变量。

<!--使用del和ins表示修订-->

<p>

Android是一个<del>开发</del><ins>开放</ins>式的手机.平板电脑操作系统。

</p>


<!--4.超链接和锚点-->

<a href="http://www.baidu.com">百度一下,你就知道?</a><br/>

<a href="http://www.baidu.com" target="_blank">百度一下,你就知道?</a><br/>

<a href="http://www.baidu.com"><img src="imgs/1.jpg" alt="百度"/></a>


<!--5.列表相关元素-->

<!--无序-->

<ul>

最低0.47元/天 解锁文章
zyxNobita
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5中的基本元素
weixin_44599578的博客
03-05 2957
一、了解什么是分组元素 用于对页面中的元素进行分组 二、掌握figure、figcaption、hggroup三种分组元素的用法及用途 1、figure元素用于定义独立的流内容，如图像、图表、照片、代码等，一般指一个单独的单元。 figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。 2、figcaption元素用于为figure元素组添加标题，一个figure元素内最多允...
HTML5基本元素
weixin_33806300的博客
05-29 107
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML5的基本元素
呰辞
09-22 492
<！–…–>: 定义HTML注释。位于<！–与–>之间的内容为注释。 < html>: 为HTML根元素。可忽略。 < head>: 页面头部分，可忽略。 < title>: 页面标题。 < body>: 主体部分。 < style>: 用于引入样式定义，用法参考CSS。 < h1>到< h6>: 定义标题1到标题6. < p>: 定义段落，可指定id、class、style等核心属性
HTML5常用的基本元素
icontent
10-13 290
转自：HTML5常用的基本元素文章《HTML5语法概述》中，介绍了HTML5文档的组成，HTML5的组成可以用下图来表示：除了上面的DOCTYPE标记以及html、head、title、meta、body元素外，我们编写HTML5https://www.pinlue.com/article/2020/10/0823/3311282531427.html ...
H5页面基础元素
weixin_30882895的博客
04-27 211
H5页面结构元素示例 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
Html5元素及基本语法详解
09-27
本文将详细解释HTML5中的元素和基本语法。 首先，让我们来理解HTML5中的元素。HTML元素由开始标签和结束标签组成，例如`<p>`和`</p>`，它们之间可以包含内容。元素定义了网页的结构和内容。大部分HTML元素可以嵌套...
HTML5 Canvas标签使用收录
01-19
 是一个新的 HTML 元素，这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前 HTML5 规范还在草稿阶段...
html内联元素和块级元素的基本概念及使用示例
12-13
html标签分为两种，内联元素和块级元素，首先我们先了解一下内联元素和块级元素的概念： 块级元素：一般是其它元素的容器，可容纳内联元素和其它块级元素，块级元素排斥其它元素与其位于同一行，可设置宽度(width)...
HTML5 Time元素倒计时特效.zip
最新发布
11-18
首先，`<time>`元素的基本用法是在HTML中表示日期和时间。例如： ```html <time datetime="2023-06-08T10:30:00">2023年6月8日 10:30 ``` 这里的`datetime`属性提供了机器可读的时间值，而显示的内容则对人类用户...
使用HTML5canvas进行Web绘图
02-26
HTML5canvas元素的出现填补了这种不足，开发人员可以使用JavaScript脚本语言在canvas中进行一系列基于命令的图形绘制操作，本文将通过讲解如何使用canvas元素进行基本绘图操作，以及完成简单的动画和用户交互任务，...
html5的基本元素,HTML5基本元素HTML5基本元素.pdf
weixin_36239971的博客
06-20 119
HTML5基本元素HTML5基本元素基本元素介绍• HTML 文档和HTML 元素是通过HTML 标签进行标记的• HTML 标签由开始标签和结束标签组成• 开始标签是被括号包围的元素名• 结束标签是被括号包围的斜杠和元素名• 某些HTML 元素没有结束标签，比如HTML标签• HTML 标题(Heading )是通过 - 等标签进行定义的This is a headingThis is a h...
HTML5基本元素的使用。
LingDu
01-15 1381
HTML5常用的一些标签
html5页面的基本组成元素,HTML5中的基本元素
weixin_39607240的博客
06-07 1042
一、了解什么是分组元素用于对页面中的元素进行分组二、掌握figure、figcaption、hggroup三种分组元素的用法及用途1、figure元素用于定义独立的流内容，如图像、图表、照片、代码等，一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。2、figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个...
html5的基本元素,前端——HTML5的基本元素和属性
weixin_31319027的博客
06-20 151
HTML5保留的基本元素有如下几个：注释根元素，允许省略页面标题页面主体部分，可指定各种通用属性和事件属性到标题从大到小段落换行水平线文档中的节，通用的分块容器类似div，span只表示一段一般性文本，默认不会换行上例为给div元素设置style属性的属性值，height表示高，width表示宽，background-color表示背景色，属性值内部用;隔开，用:赋值，#333表示色号，可为6位1...
html5的基本结构及部分元素和属性
kaiwen的博客
05-31 1745
html5的网页结构 一、什么是html5 首先了解HTML HTML即超文本标记语言（HyperText Markup language）,这是一种语法简单、结构清晰的语解释型文档,他不同于其他的编程语言。 HTML5就是HTML网页标记语言的第五次重大更新产品，在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。 html5的出现使得大量由于版本或者是不同编译语言所造成的在各大浏览器之间存在的不兼容问题得到了很好的解决。 二、html5网页的基本结构： <!DOC
HTML5元素大全
h083417172_的博客
03-29 1660
虚元素 指只能使用一个标签表示，在其中放置任何内容都不符合html规范。 表示方法 用单个开始标签表示 用空元素结构表示 自定义属性 用户可以自定义属性，这种属性必须以data-开头 用户代理 用于处理html文档的各种软件的共同名称，浏览器是最流行的用户代理，但不是唯一的一种 元素分类 html5将元素分为三大类 元数据元素 用来构建html文档的基本结构，以及就如何处理文档向浏览器提供信息和指示 流元素 流元素和短语元素都是确定一个元素合法的父元素和子元素的范围，短语元素是ht
HTML5常用元素
qq_35892775的博客
09-18 781
HTML5是对以前版本的HTML及XHTML的妥协，在无法完美规范HTML规则的情况下采取的折中方法，对之前任何版本的HTML都最大可能性的兼容，所以学习起来并不像学习一门新语言一样费劲。 HTML5最基本的代码格式如下：  &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;HELLO&lt;/...
Html5元素的作用（1）
jgh113的博客
06-07 831
1.&lt;p&gt;,&lt;/p&gt;的作用这是网页设计中定义段落的标记，&lt;p&gt;称为开始标记，&lt;/p&gt;称为结束标记。把一段话写在这两个标记中间，在用浏览器浏览的时候，浏览器会把这一段话显示为一个段落。例如:&lt;p&gt;计算机应用能力已经成为社会各行各业从业人员最重要的工作技能要求之一，而计算机教材质量的好坏会直接影响人才素质的培养。&lt;/p&gt; &l...
HTML5表单元素详解与验证实践
本文档概述了HTML5中几种关键表单元素及其使用方法，以及表单验证的基本概念。以下是主要内容的详细解读： 1. **表单元素** - `<form>`: 是HTML5中的核心表单元素，用于定义一组输入控件和提交处理逻辑。`<form>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值