HTML常用标签

一、HTML标签的语义化（语义化即标签的含义）

目的：根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。

二、HTML常用标签

1、排版标签（排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签

⑴标题标签h（熟记）⭕

单词缩写: head  头部、标题； title  文档标题

为了使网页更具有语义化，我们经常在页面中使用标题标签，HTML提供了6个等级的标题

①标题标签语义：作为标题使用，并且依据重要性递减

②基本语法格式：

<h1>  标题文本  </h1>

<h2>  标题文本  </h2>

<h3>  标题文本  </h3>

<h4>  标题文本  </h4>

<h5>  标题文本  </h5>

<h6>  标题文本  </h6>

显示效果：

标题文本 

标题文本 

标题文本

标题文本

标题文本  

标题文本 

小结：①加了标题的文字会变得加粗，字号从1到6依次变小

②一行只能放一个标题

2、段落标签p（熟记）⭕

①单词缩写：paragraph  段落

②语义：可以把HTML文档分割为若干段落，使其在网页中有条理的显示出来

③语法格式：<p>文本内容</p>（没有p1、p2的写法，只需写p)

3、水平线标签hr（认识）

①单词缩写：horizontal  横线

②语义：在网页中常常可以看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明，

这些水平线可以通过插入图片实现，也可以简单的通过标签实现

③语法格式：<hr/>是单标签

4、换行标签br(熟记）⭕

①单词缩写：break  打断、换行

②语义：在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行，

如果希望某段文字强制换行显示，就需要使用换行标签，不像word中可以直接敲回车键。

③语法格式：<br/>是单标签

④br与p区别，显示效果：

br:(行间紧凑）

人间如逆旅,
我亦是行人。
----苏轼《临江仙﹒送钱穆父》

p:（行间空隙较大）

人间如逆旅,

我亦是行人。

----苏轼《临江仙﹒送钱穆父》

5、div和span标签（重点）⭕

①单词缩写：div（division ）分割、分区

                     span  跨度、跨距;范围

②语义：没有语义，是网页布局主要的2个盒子

③语法格式：<div>文本内容</div>

 　　　　　  <span>文本内容</span>

④div标签：用来布局的，但是现在一行只能放一个div

   span标签：用来布局的，一行上可以放好多个span

⑤显示效果：div：苏轼

      　　　　　　  李白　　　　　　

span：苏轼呀 李白呀

6、文本格式化标签（熟记）⭕（重点记前两组）

⑴、粗体标签

①语法格式：<b>文本内容</b>；<strong>文本内容</strong>

②显示效果：文字以粗体显示（XHTML推荐使用strong）

③区别：b只是加粗，strong除了加粗还有强调的意思，语义更强烈

⑵、斜体标签

①语法格式：<i>文本内容</i>;<em>文本内容</em>

②显示效果：文字以斜体方式显示（XHTML推荐使用em）

③区别:同上

⑶、删除线标签

①语法格式：<s>文本内容</s>；<del>文本内容</del>

②显示效果：文字以加删除线方式显示(XHTML推荐使用del）

③区别：同上

⑷、下划线标签

①语法格式：<u>文本内容</<u>；<ins>文本内容</ins>

②显示效果：文字以加下划线方式显示（XHTML不赞成使用u）

③区别：同上

 7、标签属性

①、语义：属性就是外部特征，即手机的颜色，手机的尺寸，手机的。。。

②、想让HTML标签提供更多信息时

语法格式：<标签名  属性1=‘’属性值1‘’  属性2=‘’属性值2‘’...> 内容 </标签名>

　　　　　如：<手机  颜色=‘’红色‘’  大小=‘’5寸‘’>  </手机>

8、图像标签img(重点）⭕

⑴单词缩写：image  图像

⑵语义：想在网页中显示图像就需要使用图像标签

⑶语法格式：<img src=''图像URL''/>（语法中的src属性用于指定图像文件的路径和文件名，是img标签的必需属性）

⑷<img/>标记属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面百分比）	设置图像的高度
border	数字	设置图像边框的宽度

 

 

 

 

 

 

 

 

 

⑸区别：①alt：替换文本,图片不能正常显示，就显示文字

　　　　②title：提示文本，鼠标放在图片上，显示的文字

　　　　③width，height：一般两个不同时修改，改一个另一个会同时等比例修改

　　　　④border：要用css来做

⑹注意：①标签可以拥有多个属性，必须写在开始标签中，位于标签名后

②属性之间不分先后顺序，标签名和属性、属性与属性之间均以空格分开

③采取 键值对 的格式 key=‘’value‘’的格式（即属性=值，如width=‘’300‘’）

④图像标签中 src 是必需要写的

9、链接标签（重点）⭕

⑴单词缩写：anchor  锚，铁锚

⑵语法格式：<a href=''跳转目标‘’  target=''目标窗口的弹出方式''>文本或图像</a>

⑶

属性	作用
href	用于指定链接目标的 url 地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有 self 和 blank 两种，其中 self 为默认值，blank 为在新窗口中打开方式

 

 

 

 

 

 

⑷注意①外部链接:需添加https://www.baidu.com/

②内部链接：直接链接内部页面名称即可，比如：<a href=''index.html''>首页</a>

③如果当时没有确定链接目标时，通常将链接标签的href属性值定义为‘’#‘’（即href=‘’#‘’），表示链接暂时为一个

空连接

④不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

⑤链接标签中 href 是必须要写的

⑥target="_blank"（要记得加下划线）

10、注释标签

⑴语义：如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就

可以看到。

⑵语法格式：<!--注释语句-->

   快捷键是：ctrl + /  或者 ctrl + shift +/

⑶总结：注释是给人看的，目的是为了更好的解释这部分代码是干嘛的，程序是不执行这个代码的

⑷注意：①一般用于简单的描述，如某些状态描述，属性描述等

②注释内容前后各加一个空格字符，注释位于要注释代码的上面，单独占一行