html中常用标签的分析（附代码）-html教程-PHP中文网

首页

web前端

html教程

html中常用标签的分析（附代码）

不言

Aug 30, 2018 am 11:54 AM

html标签

本篇文章给大家带来的内容是关于html中常用标签的分析（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.1 标签的分类

1.1.1 按主体分类：

1.带主体的标签：如240cb830ca84ebaabbd07850110b414d数据 e6e38b3c62e8df885fe2e3986461aa63

2.不带主体的标签：如076402276aae5dbec7f672f8f4e5cc81 换行标签

判断一个表是否需要带主体，你可以思考该标签是否需要封装数据，如果需要封装数据，那么该标签必定带主体，如果不需要封装数据，那么就不需要带主体。

2.1.2 按行分类：

1.如果一个标签的内容需要独立占一行，我们称作为块标签。比如：4a249f0d628e2318394fd9b75b4636b1标题标签

2.如果一个标签不需要独立占一行，我们称作为内联标签。比如：240cb830ca84ebaabbd07850110b414d字体标签

2.2 文本标签：

标签名	标签描述	常用属性
h1~h6	标题标签，所有标题都是加粗的，1表示1级标题，字最大，6级标题最小	属性是在开始标签里面的 align:设置标题对齐方式 center:居中、right：右对齐、left：左对齐
hr	画一条水平线	width：线长度 size: 粗细 color:颜色
b	对字体加粗，与strong标签功能相同
i	设置字体为斜体
br	换行
font	字体（在HTML5中已经淘汰了）	color：颜色 size：大小 face：指定字体的名字
p	分段，每个p标签就是一个段落，没有首行缩进。段落之间有间隔	如果要缩进，使用；半角空格也可全角空格 title：鼠标移上去以后，显示文字提示信息

2.3 块标签与内联标签：

1.div：块标签，需要独立占一行。

2.span:内联标签，不需要独立占一行。

案例文字素材

World Wide Web Consortium94b3e26ee717c64999d7867364b1b4a3万维网联盟创建于1994年

代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
<div style="background-color: red">World Wide Web Consortium</div>
万维网联盟创建于1994年
<span style="background-color: aqua">World Wide Web Consortium</span>
万维网联盟创建于1994年
</body>
</html>

2.4 列表标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
今天早上吃什么?
<ol style="color: black" type="A">
    <li>
        油条
    </li>
    <li>
        豆浆
    </li>
    <li>
        稀饭
    </li>
</ol>
明天早上吃什么？
<ul style="color: black" type="disc">
    <li>面</li>
    <li>糯米鸡</li>
</ul>
</body>
</html>

2.5 实体字符

2.5.1 为什么需要使用到实体字符：

在HTML页面中，有些字符是有着特殊含义的字符，如果需要在网页上显示这种特殊的字符，那么就需要使用到该特殊字符对应的实体字符。比如：1419bbb8796a47bb047bc6a86db1bff3 大于号

2.5.2 实体字符列表：

注释：实体名称对大小写敏感！

2.5.3 常用的实体字符：

特殊的字符	对应的实体字符
5acd248ed1b924abd09ea8af7be12d21	>
空格
￥	¥
© 版本所有	©
®	®

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
&lt;h1&gt;标签是标题标签<br/>
       百度（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。
1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，
抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。<br/>
青岛啤酒：&yen;16元一瓶。<br/>
《java从入门到放弃》:&copy; XXX版权所有<br/>
本次活动解释权归XXX公司所有：&reg;XXX有限公司
</body>
</html>

2.6 图像标签（img）

2.6.1 标签的作用：

在网页中显示图片。

2.6.2 常用的属性：

属性名	作用
src	source图片文件地址，注：不能使用客户端本地地址，如：c:/aaa.jpg
width	图片宽度，如果只指定宽和高，另一个参数会等比例缩放
height	图片高度
alt	如果图片丢失，图片显示的文字
title	如果鼠标移到图片上，显示提示文字信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
<img src="img/11.jpg" height="500" width="200" title="这个是一辆豪车" />
</body>
</html>

相关推荐：

html标签之meta标签_html/css_WEB-ITnose

HTML常用标签

以上是html中常用标签的分析（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越HTML：网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站，仅靠HTML是不够的，还需要以下技术：JavaScript赋予网页动态和交互性，通过操作DOM实现实时变化。CSS负责网页的样式和布局，提升美观度和用户体验。现代框架和库如React、Vue.js和Angular，提高开发效率和代码组织结构。

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。