搜索
首页web前端html教程详解前端开发常用的HTML标签

详解前端开发常用的HTML标签

May 23, 2017 am 10:13 AM
html标签

这篇文章主要为大家详细介绍了前端开发每天必学之HTML标签,帮助大家认识HTML标签,感兴趣的小伙伴们可以参考一下

2.1 语义化,让你的网页更好的被搜索引擎理解

这一章节我们要开始把网页中常用到的标签一 一向大家介绍,学习这一章节的时候要记住学习html标签过程中,主要注意两个方面的学习:标签的用途、标签在浏览器中的默认样式。

什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理),比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等。

2.2 body标签,网页显示内容放在这里

在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。

这里写图片描述


浏览器效果如下:

这里写图片描述

2.3 p标签,添加段落

如果想在网页上显示文章,这时就需要e388a4556c0f65e1904146cc1a846bee标签了,把文章的段落放到e388a4556c0f65e1904146cc1a846bee标签中。

语法:e388a4556c0f65e1904146cc1a846bee段落文本94b3e26ee717c64999d7867364b1b4a3注意一段文字一个标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个e388a4556c0f65e1904146cc1a846bee标签中。如下图所示:

这里写图片描述


浏览器显示效果如下:

这里写图片描述

e388a4556c0f65e1904146cc1a846bee标签的默认样式,可以在上图中看出来,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。段落验证代码:

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<h2>段落验证</h2>
<p>我的第一个段落。</p>
<p>我的第二个段落。</p>
</body>
</html>

2.4 hx标签,添加标题

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。4a249f0d628e2318394fd9b75b4636b1是最高的等级。

语法:4fc71829d7d7f105985af72054fc4928标题文本204c8ffa078c87c26d918bbcb1cc4f3c (x为1-6)

文章的标题前面已经说过了,可以使用标题标签,另外网页上的各个栏目的标题也可使用它们。如下图为腾讯网站:

 

这里写图片描述

注意:因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如:4a249f0d628e2318394fd9b75b4636b1腾讯网473f0a7621bec819994bb5020d29372ah1-h6标签的默认样式:


XML/HTML Code复制内容到剪贴板

<body>  
<h1>一级标题</h1>  
<h2>二级标题</h2>  
<h3>三级标题</h3>  
<h4>四级标题</h4>  
<h5>五级标题</h5>  
    <h6>六级标题</h6>  
</body>

在浏览器中显示样式:

这里写图片描述

从上面的图片可以看出标题标签的样式都会加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。

2.5 strong/em加入强调语气

有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到907fae80ddef53131f3292ee4f81644b或8e99a69fbe029cd4e2b854e244eab143标签。

两者在强调的语气上有区别:907fae80ddef53131f3292ee4f81644b 表示强调,8e99a69fbe029cd4e2b854e244eab143 表示更强烈的强调。并且在浏览器中907fae80ddef53131f3292ee4f81644b默认用斜体表示,8e99a69fbe029cd4e2b854e244eab143用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用8e99a69fbe029cd4e2b854e244eab143表示强调。

语法:

XML/HTML Code复制内容到剪贴板

  1. 0499741d817df04cdaef87efc4cb0587需要强调的文本e515c95378c88c2fc39e63dcdd82ab4f     

  2. 139e896fb12c527cdcbe5db452104bf9需要强调的文本6926dc29ccb30fc73ad109326f526d36  

举例说明em和strong标签:

 

这里写图片描述


在浏览器中显示为:

这里写图片描述

907fae80ddef53131f3292ee4f81644b的内容在浏览中显示为斜体,8e99a69fbe029cd4e2b854e244eab143显示为加粗。如果不喜欢这种样式,没有关系,以后可以使用css样式去改变它。

2.6 style/span标签,为文字设置单独样式

907fae80ddef53131f3292ee4f81644b、8e99a69fbe029cd4e2b854e244eab143、45a2772a6b6107b401db3c9b82c049c2这三个标签进行一下总结:

907fae80ddef53131f3292ee4f81644b8e99a69fbe029cd4e2b854e244eab143标签是为了强调一段话中的关键字时使用,它们的语义是强调。

45a2772a6b6107b401db3c9b82c049c2标签是没有语义的,它的作用就是为了设置单独的样式用的。

如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue(蓝色),但注意不是为了强调“美国梦”,而只是想为它设置和其它文字不同的样式(并不想让屏幕阅读器对“美国梦”这三个字加重音读出),所以这样情况下就可以用到45a2772a6b6107b401db3c9b82c049c2标签了。

语法:

<span>文本</span>

举例:

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>了不起的盖茨比</title>  
        <style>  
            span{   
                color:blue;   
            }   
        </style>  
    </head>  
    <body>  
        <p><span>美国梦</span>。</p>  
        <p><strong>菲茨杰拉德</strong></p>  
        <p><em>爱丽丝</em></p>  
    </body>  
</html>

在浏览器显示为:

这里写图片描述


使用span的变成了蓝色,使用strong标签的变化为粗体,使用em标签的变成斜体。

2.7 q标签,短文引用

想在你的html中加一段引用吗?比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么语法:

<q>引用文本</q>

注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

注意这里用

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>q标签</title>  
    </head>  
    <body>  
        <p>周瑜,确实也配的上那句<q>聪明秀出为之英,胆略过人为之雄。</q></p>  
    </body>  
</html>

代码中是没有引号的,但是因为是1244aa79a84dea840d8e55c52dc97869标签,所以自动加上引号。

2.8 blockquote标签,长文本引用

b8a712a75cab9a5aded02f74998372b4的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。

1244aa79a84dea840d8e55c52dc97869标签是对简短文本的引用,比如说引用一句话就用到1244aa79a84dea840d8e55c52dc97869标签。

语法:b8a712a75cab9a5aded02f74998372b4引用文本1aee16100a65d522474e4de7ff568f4a

浏览器对b8a712a75cab9a5aded02f74998372b4标签的解析是缩进样式。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>       
<head>           
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">           
<title>blockquote标签的使用</title>       
</head>       
<body>           
<h2>心似桂花开</h2>           
<p>大家都在忙于自认为最重要的事情,却没能享受到人生的乐趣,反而要吞下苦果?</p>           
<blockquote>暗淡轻黄体性柔,情疏迹远只香留。</blockquote>           
<blockquote>何须浅碧深红色,自是花中第一流。</blockquote>           
<p>这是李清照《咏桂》中的词句,在李清照看来,桂花暗淡青黄,性情温柔,淡泊自适,远比那些大红大紫争奇斗艳花值得称道。</p>       
</body>  
</html>

在浏览器中显示效果如下,可以看到被b8a712a75cab9a5aded02f74998372b4标签部分前后都缩进了:

这里写图片描述

2.9 br标签分行显示文本

怎么可以让每一句诗词后面加入一个折行呢?那就可以用到df250b2156c434f3390392d09b1c9563标签了,在需要加回车换行的地方加入df250b2156c434f3390392d09b1c9563,df250b2156c434f3390392d09b1c9563标签作用相当于word文档中的回车。

语法:
xhtml1.0写法:df250b2156c434f3390392d09b1c9563
html4.01写法:0c6dc11e160d3b678d68754cc175188a

与以前我们学过的标签不一样,df250b2156c434f3390392d09b1c9563标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有df250b2156c434f3390392d09b1c9563、231a563c997aa9e3e0ae614bd16728b0和6ed09268cbdd0015bce8dcbbdfa9bfe4

总结:在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入df250b2156c434f3390392d09b1c9563

XML/HTML Code复制内容到剪贴板<!DOCTYPE HTML>  
<html>       
<head>           
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">           
<title>br标签的使用</title>       
</head>       
<body>           
<h2>《咏桂》</h2>           
<p>               
暗淡轻黄体性柔,<br>               
情疏迹远只香留。<br>               
何须浅碧深红色,<br>               
自是花中第一流。           
</p>       
</body>  
</html>
浏览器效果:

2016062116323445.png

2.10 &nbsp为网页中添加一些空格

已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格,必须写入 

语法:

如下插入两个空格:


XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>空格讲解</title>  
    </head>  
    <body>  
        <h1>感悟梦想</h1>  
        来源:作文网  作者:为梦想而飞    
    </body>  
</html>

2.11 hr标签,添加水平横线

在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。比如下面网页

语法:

html4.01版本 f32b48428a809b51f04d3228cdf461fa
xhtml1.0版本231a563c997aa9e3e0ae614bd16728b0

<span style="font-family:NSimsun">839032d215e2b989c8ef55d8978580b0</span>标签和df250b2156c434f3390392d09b1c9563标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。

231a563c997aa9e3e0ae614bd16728b0标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。


XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>       
<head>           
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">           
<title>hr标签使用</title>       
</head>       
<body>           
<p>火车飞驰过暗夜里的村庄,月光,总是太容易让思念寂寞,太容易让人觉得孤独。</p>           
<hr>           
<p>每一枚被风吹起的蒲公英,都载满了一双眼睛的深情告别与一个目光的依依不舍。</p>       
</body>  
</html>

浏览器中效果:

这里写图片描述

2.12 address标签,为网页加入地址信息

一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。

语法:

<address>联系地址信息</address>
<address> 本文的作者:<a href="mailto:lilian@imooc.com">lilian</a> </address>

在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用 css 样式来修改它208700f394e4cf40a7aa505373e0130b标签的默认样式。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>       
<head>           
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">           
<title>address标签介绍</title>       
</head>       
<body>           
<h2>慕课网</h2>           
<p>超酷的互联网、IT技术免费学习平台!公司地址:<address>北京市西城区德外大街10号</address></p>        
</body>  
</html>

2.13 code标签,加入一行代码

在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用ffbe95d20f3893062224282accb13e8f标签了,注意:在文章中一般如果要插入多行代码时不能使用ffbe95d20f3893062224282accb13e8f标签了。如下面例子:

<code>var i=i+300;</code>

注:如果是多行代码,可以使用e03b848252eb9375d56be284e690e873标签。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  
<html>       
<head>           
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">           
<title>code标签介绍</title>       
</head>       
<body>           
<p>我们可能知道水平渐变的实现,类似这样:<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>       
</body>  
</html>

浏览器效果:

这里写图片描述

2.14 pre标签,加入大段代码

在上节中介绍加入一行代码的标签为ffbe95d20f3893062224282accb13e8f,但是在大多数情况下是需要加入大段代码的,如下图,怎么办?不会是每一代码都加入一个ffbe95d20f3893062224282accb13e8f标签吧,没有这么复杂,这时候就可以使用e03b848252eb9375d56be284e690e873标签:

这里写图片描述

e03b848252eb9375d56be284e690e873标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。注意:e03b848252eb9375d56be284e690e873 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是e03b848252eb9375d56be284e690e873标签的一个常见应用就是用来展示计算机的源代码。

XML/HTML Code复制内容到剪贴板<!DOCTYPE HTML>  
<html>       
<head>           
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />           
<title>pre标签的使用</title>       
</head>       
<body>           
<pre class="brush:php;toolbar:false">var message="欢迎";for(var i=1;i<=10;i++){    
alert(message);}           

浏览器效果:

这里写图片描述

在上面的例子中可以看到代码中的空格,换行符都保留下来。如果用以前的方法,回车需要输入0c6dc11e160d3b678d68754cc175188a签,空格需要输入&nbsp;

【相关推荐】

1. HTML免费视频教程

2. 通过marquee标签完成滚动效果的纯html代码

3. 用HTML编写个人简历的代码实例

4. 分享三种创建新元素的方法

5. html中关于meta标签的实例详解

以上是详解前端开发常用的HTML标签的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站:HTML的力量从文本到网站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言,通过标签和属性定义网页结构和内容。1)HTML通过标签组织文档结构,如、。2)浏览器解析HTML构建DOM并渲染网页。3)HTML5的新特性如、、增强了多媒体功能。4)常见错误包括标签未闭合和属性值未加引号。5)优化建议包括使用语义化标签和减少文件大小。

了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML,CSS和JavaScript:Web开发人员的基本工具HTML,CSS和JavaScript:Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

HTML,CSS和JavaScript的角色:核心职责HTML,CSS和JavaScript的角色:核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

HTML容易为初学者学习吗?HTML容易为初学者学习吗?Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中