您现在的位置是：网站首页> 编程资料编程资料

前端开发每天必学之认识HTML标签（1） _HTML/Xhtml_网页制作_

2023-11-14 427人已围观

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

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

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

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

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

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

这里写图片描述


浏览器效果如下：

这里写图片描述

2.3 p标签，添加段落

如果想在网页上显示文章，这时就需要

标签了，把文章的段落放到

标签中。

语法：

段落文本

注意一段文字一个标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个

标签中。如下图所示：

这里写图片描述


浏览器显示效果如下：

这里写图片描述

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

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html>       
  3. <head>           
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">           
  5. <title> p标签title>       
  6. head>       
  7. <body>           
  8. <h2>段落验证h2>           
  9. <p>我的第一个段落。p>           
  10. <p>我的第二个段落。p>       
  11. body>  
  12. html>  

2.4 hx标签，添加标题

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。

是最高的等级。

语法：标题文本 (x为1-6)

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

 

这里写图片描述

注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：

腾讯网

h1-h6标签的默认样式：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <h1>一级标题h1>  
  3. <h2>二级标题h2>  
  4. <h3>三级标题h3>  
  5. <h4>四级标题h4>  
  6. <h5>五级标题h5>  
  7.     <h6>六级标题h6>  
  8. body>  

在浏览器中显示样式：

这里写图片描述

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

2.5 strong/em加入强调语气

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

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

语法：

XML/HTML Code复制内容到剪贴板
  1. <em>需要强调的文本em>     
  2. <strong>需要强调的文本strong>  

举例说明em和strong标签：

 

这里写图片描述


在浏览器中显示为：

这里写图片描述

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

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

对、、这三个标签进行一下总结：

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

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

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

语法： 

文本

举例：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.         <title

相关内容

点击排行

本栏推荐

猜你喜欢