HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体

最新推荐文章于 2024-07-16 15:20:45 发布

原创

最新推荐文章于 2024-07-16 15:20:45 发布 · 958 阅读

5 ·

CC 4.0 BY-SA版权

一、排版标签

1、标题标签

在新闻和文章的页面中都离不开标题，用来突出显示文章主题。

h系列标题

 <body>
       <h1>1级标题</h1> 
       <h2>2级标题</h2>
       <h3>3级标题</h3> 
       <h4>4级标题</h4> 
       <h5>5级标题</h5> 
       <h6>6级标题</h6>
 </body>

1-6级标题，重要程度依次递减，

文字都有加粗变大作用，并且从h1——h6逐渐减小

独占一行

h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻标题，网页的logo部分等。

2、段落标签

在文章和新闻页面中，用于分段显示

<p>我是一段文字</p>

段落之间存在间隙，独占一行

<h1>关雎</h1>
       <p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
       <p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>

3、换行标签

<br> 让文字强制换行显示

<h1>关雎</h1>
<p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。<br>参差荇菜，左右流之。窈窕淑女，寤寐求之。<br>
    求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
<p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。<br>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>

4、水平线标签

<hr> 分割不同主题内容的水平线，单标签，在页面中显示一条水平线

<h1>关雎</h1><hr>
<p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p><hr>
<p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p><hr>
<p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p><hr>
<p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p><hr>
<p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p><hr>

5、文本格式化标签

5.1标签介绍

需要让文字加粗、下划线、倾斜、删除线等效果

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

突出重要的强调语境

<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>

<br>

<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>

5.2、标签语义化

实际项目中选择标签的原则：标签语义化

即：根据语义选择正确的标签

如：需要写标题就用h系列的标签

需要写段落就用p标签

.......

好处：好理解，好记忆，有利于机器解析

推荐：strong 、ins 、em、 del ，表示的强调语义更强烈！

二、媒体标签

1、图片标签

1.1在网页中显示图片

属性名：src

属性值：目标图片的路径

当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）

<img src="./4.jpg" alt="我是替换文本">

属性名：alt

属性值：替换文本

当图片加载失败时才显示alt的文本，加载成功则不显示

 <img src="./4.jpg" alt="我是替换文本" title="我是提示文本">

属性名：title

属性值：提示文本

当鼠标悬停时才显示的文本，title属性不仅可以用于图片标签，还可以用于其他标签

<h1 title="我是标题">我是1级标题</h1>

1.2图片标签的width和height属性

属性名：width height

属性值：宽度高度

如果只设置width 或 height 中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）；

如果同时设置了width 和 height 两个，若设置不当则图片可能会变形；

1.3路径

页面加载需要的图片，需要先根据对应的地址路径找到图片</

最低0.47元/天解锁文章

200万优质内容无限畅学