03 hand与body内常用标签

211次阅读
没有评论

共计 1795 个字符,预计需要花费 5 分钟才能阅读完成。

一.hand 内常用标签

1.title : 定义网页标题

<title> 网页标题 </title>

2.style : 定义 CSS 样式

<style>
    [一堆 CSS 代码]
</style>

3.script : 定义 js 动态效果

<script>
    [一堆 js 代码]
</script>

4.link : 引入外部 CSS 文件或网站图标 ico

<link rel="stylesheet" href="test.css">

5.meta 标签

\元素可提供有关页面的元信息(mata-information), 针对搜索引擎和更新频度的描述和关键词

元数据不会显示在客户端, 但是会被浏览器解析

  • charset 属性

python
<meta charset="UTF-8"> # 指定文档的编码类型

  • http-equiv 属性

python
<meta http-equiv="refresh" content="3,http://www.baidu.com"> # 3 秒后跳转指定网页
<meta http-equiv="refresh" content="3"> # 3 秒后跳转当前所在的网页

  • name 属性

python
<meta name="keywords" content="网上购物, 京东, 支付"> # 关键字, 便于搜索引擎查找分类以及 seo 优化

二.body 内常用的标签

1.h : 标题标签

  • <h1><h2><h3><h4><h5><h6> 分六级标题
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6> 六级标题 </h6>  # 下面效果展示

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2.p : 段落标签

  • 每个段落都是通过 <p> 标签进行标记的, 有换行效果
<p> 所见即所得 </p>
<p> 拿来即可用 </p>

3.br : 换行标签

  • 相当于在文本中敲了一个回车

4.b : 加粗标签

5.i : 倾斜标签

6.u : 下划线标签

7.s : 删除线标签

8.hr : 分隔线标签

  • 演示
<!DOCTYPE html>
<html>
<head>
    <title> 常用标签演示 </title>
</head>
<body>
    <h3> 我是三级标题 </h3>
    <!-- 换行标签 br -->
    <br>
    <b> 我是加粗标签 </b>
    <i> 我是倾斜标签 </i>
    <!-- 分割线标签 hr -->
    <hr>
    <u> 我是下划线标签 </u>
    <s> 我是删除线标签 </s>
</body>
</html>

03 hand 与 body 内常用标签

9.div 标签与 span 标签

  • div (division 分隔) : 块级标签
  • span (范围) : 行内标签

上述的两个标签是在构造页面初期最常使用的, 页面的布局一般先用 div 和 span 占位之后再去调整样式, 尤其是 div 使用非常的频繁

div 你可以把它看成是一块区域, 也就意味着用 div 来提前规定所有的区域之后往该区域内部填写内容即可, 而普通的文本先用 span 标签

三.a : 超链接标签

a 标签主要用来设置超文本链接,超链接可以是任意字符,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手

  • a 标签的默认样式
1. 未访问过的链接显示为蓝色字体并带有下划线
2. 访问过的链接显示为紫色并带上下划线
3. 点击链接时,链接显示为红色并带上下划线
  • 常用参数解释
<a href="http://www.baidu.com" target="_blank" title=" 百度一下 " >
# herf : 定义连接的目标 URL(可以是网址, 本地路径, 邮件地址, 锚点, 空连接 #)
# target : 定义连接的目标窗口
    # _blank : 新窗口
    # _self : 当前窗口
# title : 定义悬浮链接时的提示信息
  • 设置锚点
<h2 id="section1"> 锚点 1 位置 </h2> 
<p> 文章内容 </p>
<p> 文章内容 </p>
<p> 文章内容 </p>
<p> 文章内容 </p>
<a href="#section1"> 跳到锚点一 </a>  
# 相当于一个定位, 可以从一个位置切到定位点, 网页中回到顶部就是这样实现的

四.img : 图片标签

  • 标签语法
<img src="" alt="">
  • 参数解释
# src : 图片的路径, 可以是本地的也可以是网上的(本地尽量使用相对路径)
# alt : 图片加载失败时的描述信息
# title : 鼠标悬浮图片时的提示信息
# height : 高度
# width : 宽度, 宽度与高度尽量值设置一个, 让另一个自适应, 否则会拉扯的不美观

五.

正文完
 
shawn
版权声明:本站原创文章,由 shawn 2023-06-16发表,共计1795字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)