html学习(二)之标签

最新推荐文章于 2022-10-27 14:46:07 发布

我先来一碗

最新推荐文章于 2022-10-27 14:46:07 发布

阅读量244

点赞数

分类专栏：前端日常文章标签： html

本文链接：https://blog.csdn.net/jack_bob/article/details/85102339

版权

前端日常专栏收录该内容

65 篇文章 11 订阅

订阅专栏

行标签：包含a、span、em、strong、img、var；

（1）a标签：主要用来链接一个其他的网页；

（2）span标签：主要用来对行内的文字进行一些样式以及其他的操作；

（3）em标签：一般用来对文字进行强调，使用斜体体现出来；

（4）strong标签：一般用来对文字进行强调，使用加粗字体体现出来；

（5）img标签：图片引用标签，其中 src属性中写入图片的地址；

（6）var标签：JavaScript中命名变量的标签。

块标签：包含p、div、ul、ol、li、dl、dt、dd、h1~h6；

（1）p标签：段落标签，段落文字使用，默认格式：段尾进行换行；

（2）div标签：划分块的主要使用标签；

（3）ul标签：无序列表的主标签，后面的标号为圆点（黑色）；

（4）ol标签：有序列表的主标签，后面一般跟有序的1,2,3,4,5...；

（5）li标签：列表中的主体使用标签

（6）dl标签：自定义标签的主标签；

（7）dt标签：自定义标签的表头；

（8）dd标签：自定义标签的表头的解释（描述）信息；

（9）h1~h6：6级标题标签、字体的大小依次变小。

块标签和行标签的区别：

（1）块标签：独自占领一行、可以进行宽高的数值的设定

（2）行标签：在一行内显示、不可以进行宽高的数值设定

嵌套规则：

（1）块标签可以套行标签，行标签不可以套块标签。

（2）P标签不要套块属性标签，可以套a，span，文本。

（1）嵌套的时候注意代码的缩进。

（一）：a标签 - 超文本引用（超级链接）

<a href="https://www.baidu.com/">百度一下</a>

在新窗口打开：target =“_ blank”

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

（二）打电话发邮件

              <a href="mailto:123@163.com">给客服发邮件</a>
              <a href="tel:17811119999">给客服打电话</a>

（三）锚点;

找人效果：

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <!-- 编码字符集charset -->
    <meta charset="utf-8" />
    <title>测试</title>
  </head>
  <body>
    <br>
    <br>
    <br>
    <div id="zhangsan" style="width:50px;height:20px;background-color:green;">张三</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="lisi" style="width:50px;height:20px;background-color:red;">李四</div>
      <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <a style="display:block;position:fixed;bottom:100px;border:1px solid black; right:1100px;width:200px;height:50px;background-color:red;" href="#zhangsan">找到张三</a>
    <a style="display:block;position:fixed;bottom:180px;border:1px solid black; right:1100px; width:200px;height:50px;background-color:red;"  href="#lisi">找到李四</a>
  </body>
 </html>

我先来一碗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html学习(二)之标签

行标签：包含a、span、em、strong、img、var；（1）a标签：主要用来链接一个其他的网页；（2）span标签：主要用来对行内的文字进行一些样式以及其他的操作；（3）em标签：一般用来对文字进行强调，使用斜体体现出来；（4）strong标签：一般用来对文字进行强调，使用加粗字体体现出来；（5）img标签：图片引用标签，其中 src属性中写入图片的地址；（6）va...
复制链接

扫一扫