html中的标签是什么

发布时间:2020-12-05 10:55:21 作者:小新
来源:亿速云 阅读:178

这篇文章主要介绍html中的标签是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

HTML标签是HTML语言中最基本的单位,HTML标签是HTML最重要的组成部分。网页的内容需在<html>标签中,标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中,而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示,但还是应该养成正规编写习惯。

1.文档结构标签:主要用来标识文档的基本结构

a) <html></html>:标识HTML文档的起始和终止

b) <head></head>:标识HTML文档的头部区域

c) <body></body>:标识HTML文档的主体区域

2.文本格式标签:主要用来标识文本区块,并附带一定的显示格式

a) <title></title>:表识网页标题

b) <hi></hi>:标识标题文本,其中i表示1~6,分别表示一级、二级等标题

c) <p></p>:标识段落文本

d) <pre></pre>:标识预定义文本

e) <blockquote></blockquote>:标识引用文本

3.字符格式标签:主要用来标识部分文本字符的语义,如加粗/斜体/下划线显示

a) <b></b>:标识强调文本,以加粗效果显示

b) <i></i>:标识引用文本,以斜体效果显示

c) <blink></blink>:标识闪烁文本,以闪烁效果显示(IE浏览器不支持该标签)

d) <big></big>/<small></small>:标识放大/缩小文本,以放大/缩小效果显示

e) <sup></sup>:标识上文本,以上标效果显示

f) <sub></sub>:标识下文本,以下标效果显示

g) <cite></cite>:标识引用文本,以引用效果显示

使用各种字符格式标签显示一个数学方程式的解法

<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>字符格式标签</title>
</head>
<body>
<p>针对下面这个一元二次方程:</p>
<p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>
<p>我们使用<big><b>分解因式法</b></big>来演示解题如下:</p>
<p><small>由:</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>
<p><small>得:</small><br/><i>x</i><sub>1</sub>=1
                    <br/><i>x</i><sub>2</sub>=4</p>
</body>
</html>

4.列表标签:在HTML中列表结构可以分为两种类型:有序列表和无序列表.无序列表使用项目符号来标识列表,而有序列表则是用编号来标识列表的项目顺序.

a) <ul><li>...</li></ul>:标识无序列表.<li></li>:标识列表项目

b) <ol><li>...</li></ol>:标识有序列表.<li></li>:标识列表项目

i. 使用无序列表和有序列表分别显示一元二次方程求解的4种方法

<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>列表标签</title>
</head>
<body>
<h2>解一元二次方程</h2>
<p>无序列表列出4种方法:</p>
<ul>
   <li>直接开平方法</li>
   <li>配方法</li>
   <li>公式法</li>
   <li>分解因式法</li>
</ul>
<p>有序列表列出4种方法:</p>
<ol>
   <li>直接开平方法</li>
   <li>配方法</li>
   <li>公式法</li>
   <li>分解因式法</li>
</ol>
</body>
</html>

c) <dl><dt>...</dt><dd>...</dd></dl>:自定义列表,包括词条和解释两部分内容.

i. <dl></dl>标识定义列表;<dt></dt>:标识词条;<dd></dd>:标识解释

ii. 使用定义列表显示两个成语的解释

<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>列表标签</title>
</head>
<body>
<dl>
   <dt>知无不言,言无不尽</dt>
   <dd>知道的就说,要说就毫无不保留</dd>
   <dt>智者千虑,必有一失</dt>
   <dd>不管多聪明的人,在很多的考虑中,也一定会出现个别错误</dd>
</dl>
</body>
</html>

5.链接标签:实现把多个网页联系在一起

a) <a></a>:标识超链接.还可以定义锚点.锚点是一类特殊的超链接,它可以定位带网页中某个具体的位置.例如在下面实例中单击超链接文本,就可以跳转到页面的顶部.

<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>链接标签</title>
</head>
<body>
<spanid="top">底部锚点位置</span>
<divid="box"style="height:2000px;border:solid1px red">撑开浏览器的滚动条</div>
<ahref="#top">单击返回顶部</a>
</body>
</html>

6.多媒体标签:主要用于引入外部多媒体文件进行显示.

a) <img></img>:嵌入图像

b) <embed></embed>:嵌入多媒体

c) <object></object>:嵌入多媒体

7.表格标签:用来组织和管理数据.

a) <table></table>:定义表格结构

b) <caption></caption>:定义表格标题

c) <th></th>:定义表头

d) <tr><td>...</td></tr>:<tr></tr>定义表格行;<td>...</td>定义表格单元格

<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>表格</title>
</head>
<body>
<tablesummary="使用表格结构显示3行2列数据集"border="1">
   <caption>ASCII字符集</caption>
   <tr>
       <th>十进制</th>
       <th>十六进制</th>
   </tr>
   <tr>
       <td>9</td>
       <td>9</td>
   </tr>
   <tr>
       <td>10</td>
       <td>A</td>
   </tr>
</table>
</body>
</html>

8.表单标签:主要用来制作交互式表单.

a) <form></form>:定义表单结构

b) <input/>:定义文本域、按钮和复选

c) <textarea></textarea>:定义多行文本框

d) <select></select>:定义下拉列表

e) <option></option>:定义下拉列表中选择项目

<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>表单</title>
</head>
<body>
<formaction=""method="post">
   <p>单行文本域:<inputtype="text"/></p>
   <p>密码域:<inputtype="password"/></p>
   <p>多行文本域:<textareaname="textareafield"value=""></textarea></p>
   <p>复选框:<br>复选框1<inputtype="checkbox"name="box1"value=""/>跳舞<br>
                复选框2<inputtype="checkbox"name="box2"value=""/>唱歌<br>
   </p>
   <p>单选按钮:
       <inputtype="radio"name="radio"value="nan">按钮1
       <inputtype="radio"name="radio"value="nv">按钮2<br>
   </p>
   <p>下拉菜单:
       <selectname="selectlist">
           <optionvalue="1">选项1</option>
           <optionvalue="2">选项2</option>
           <optionvalue="3">选项3</option>
       </select>
   </p>
   <p><inputtype="submit"name="button"id="button"value="提交"/></p>
</form>
</body>
</html>

以上是“html中的标签是什么”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. HTML中框架标签是什么
  2. html中td标签是什么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html 标签

上一篇:HTML5 Video标签的属性、方法和事件汇总介绍

下一篇:html链接标签的用法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》