body标签中的相关标签1

本文详细介绍了HTML中的各种标签,包括块级元素、行内元素及行内块元素的特点和使用方法,同时还涵盖了文本级标签和容器级标签的区别。此外,还介绍了如何通过display属性对不同类型的元素进行转换。

body内标签级别

body标签内内有三种标签元素级:

  • 块级元素:独占一行,可设置宽高,如果不设置宽度,则为浏览器宽度
  • 行内元素:在一行内展示,不能设置宽高,它的宽高根据内容去填充
  • 行内块元素:在一行内展示,可以设置宽高

html内所有标签可以分为两种:

  • 文本级标签:p span a b i u em 文本标签内只能放文字,图片,表单元素
  • 容器级标签:div h系列 li dt dd 容器级标签里可以放任何东西

标签元素级

常见的块级元素 display: block

  • 标题 h1~h6
  • 盒子标签 div
  • 段落 p
  • 有序标签 ol
  • 无序标签 ul
  • li
  • 表格标签 table
  • 表单标签 form

常见的行内元素 display: inline

  • span
  • 按钮标签 button
  • 超链接标签 a
  • 换行 br
  • 加粗 b 或 strong
  • 上标 sup
  • 下标 sub
  • 下拉列表 select
  • 多行文本 textarea
  • 下划线 u
  • 删除线 del

常见的行内块元素 display: inline-block

  • 图片标签 img
  • 文本框 input

注意:可以通过display属性对块级元素、行内元素、行内块元素进行转换。

字体标签

标题 h1~h6 没有h7标题

标题使用 < h1 > 至 < h6 >。 < h1 >定义最大的标题,< h6 >定义最小的标题。具有 align 属性,属性值可以是: left、center、right

<body>
    <h1>路飞学诚</h1>
    <h2>路飞学诚</h2>
    <h3>路飞学诚</h3>
    <h4>路飞学诚</h4>
    <h5>路飞学诚</h5>
    <h6>路飞学诚</h6>
</body>

效果:
1130765-20180710133820658-783979258.png

粗体标签< b > 或 < strong >
<body>
    luffy
    <b>luffy</b>
    <strong>luffy</strong>
</body>

效果:
1130765-20180710133840999-556544408.png

下划线标记 < u > 中划线标记< s >
<body>
    <u>luffy</u>
    <s>luffy</s>
</body>

效果:
1130765-20180710133852610-136118620.png

上标< sup > 下标< sub >
<body>
    5<sup>2</sup>
    8<sub>2</sub>
</body>

效果:
1130765-20180710133902056-334429703.png

特殊符号
&nbsp;  空格
&lt;  小于号
&gt;  大于号
&amp;  符号&
&quot;  双引号
&apos;  单引号
&copy;  版权
&trade;  商标

其他特殊字符参考表:HTML特殊字符参考表

排版标签

段落标签 < p >

段落属性:

  • align="属性值": 对齐方式。属性值包括:left、center、right
<body>
    <p>这是一个段落</p>
    <p align="center">这是另一个段落</p>
</body>

效果:
1130765-20180710133914051-785781933.png

注意:p标签是一个文本级标签,p里面只能放文字,图片,表单元素,其他一律不能放

块级标签 div 和 span

div和span是非常重要的标签,div的语义是division"分割";span的语义就是span"范围,跨度",这两个是非常重要的盒子

div:把标签中的内容作为一个块来对待,必须独占一行
div标签的属性:

  • align="属性值": 设置块的位置。属性值可选择:left center right

span标签和div标签唯一的区别在于:span是不换行的,div是换行的

<body>
    <div>导航栏</div>
    <div>中心</div>
    
    <span>路飞</span>
    <span>学诚</span>
</body>

效果:
1130765-20180710133926582-703646367.png

内容居中标签< center >

此时center代表一个标签,而不是一个属性值了,只要在这个标签里面的内容,都会居中浏览器中间

<body>
    <center>
        <p>luffy</p>
    </center>
</body>

效果:
1130765-20180710133934127-618430858.png

超链接

超链接有三种形式:、

1、外部链接:链接到外部文件

<a href="new.html">点击进入到新网页</a>

2、锚链接:链接到外部文件
给超链接起一个名字,作用是在本页面或者其他页面的不同位置进行跳转,如:在页面底部有一个向上箭头,点击箭头后回到顶部,这个就是利用锚链接

3、邮件链接

<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

效果:点击之后,会弹出outlook,作用不大

特殊几个超链接

返回页面顶部的位置

<a href="#">跳转到顶部</a>
超链接的属性
  • href:目标URL
  • title:悬停文本
  • name:主要用于设置一个锚点的名称
  • target:告诉浏览器用什么方式来打开目标页面

    target属性有以下几个值:

    • _self:在同一个页面来显示(默认值)
    • _blank:在新的窗口打开
    • _parent:在父窗口显示
    • _top:在顶部窗口显示

图片标签 < img / >

img:代表的就是一个图片。是单边标记
img是自封闭标签,也称为单标签

<img src=" " />
能插入的图片类型
  • 能够插入的图片类型:jpg(jpeg)、gif、png、bmp
  • 不能往网页中插入的图片格式是:psd、ai

html页面不是直接插入图片的,而是插入图片的引入地址,所以也要把图片上传到服务器上

src 属性:图片的相对路径和绝对路径
  • src 属性:指图片的路径

在写图片的路径时,有两种写法:相对路径、绝对路径

1、相对路径

相对当前页面所在的路径。两个标记...分别代表当前目录和父路径

<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src=".\2.jpg"> 
<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">

img 是image“图片”的简写,src 是英语source“资源”的缩写。

<img src="images/1.jpg">

上方代码的意思是说,当前页面有一个并列的文件夹images,在文件夹images中存放了一张图片1.jpg

2、绝对路径

1、以盘符开始的绝对路径

<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

2、网络路径

<img src="http://www.baidu.com/2016040102.jpg">

相对路径和绝对路径的总结

  • 我们现在无论是在a标签、img标签,如果要用路径。只有两种路径能用,就是相对路径和绝对路径。

  • 相对路径,就是../ image/ 这种路径。从自己出发,找到别人;

  • 绝对路径,就是http://开头的路径。

  • 绝对不允许使用 file://开头的东西,这个是完全错误的!

img标签的其他属性
  • width:宽度
  • height:高度
  • title:提示性文本。公有属性。也就是鼠标悬停时出现的文本。
  • align:指图片的水平对齐方式,属性值可以是:left、center、right
  • alt:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思。(有的浏览器不支持)

注意事项:

  • 如果要想保证图片等比例缩放,只设置width和height中其中一个
  • 如果要实现图文混排的效果,使用align属性,取值为left或right

转载于:https://www.cnblogs.com/xuzewen/p/9288565.html

<think>好的,我现在需要回答用户关于HTML中body标签的作用和用途的问题。首先,我得回忆一下HTML的基础知识,确保自己理解正确。根据用户提供的引用内容,特别是引用[3]和引用[4],body标签是HTML文档的主体部分,包含网页的所有可见内容,比如文本、图片、链接等。 首先,body标签的基本功能是包裹页面内容。所有用户看到的元素都应该放在body里面,比如段落、标题、图像等。这点在引用[3]的代码示例中可以看到,body里面包含了“您好”和换行符,还有另一个文本节点。这说明body是内容的容器。 然后,body标签的结构位置也很重要。根据HTML的标准结构,body标签位于head标签之后,与head标签并列。引用[3]的例子显示,整个HTML文档由html标签包裹,内部有head和body两部分,body在head之后。这说明body在文档结构中的位置是固定的,作为内容区域存在。 接下来,用户交互相关的元素,比如JavaScript脚本,通常也放在body里。引用[2]提到script标签可以放在body中,这样在页面加载时逐步执行,可能影响性能。但用户的问题主要关注body本身,所以可能不需要深入脚本位置,但可以提到body内的脚本处理用户交互。 另外,body标签还可以设置页面属性,比如背景颜色、边距等,虽然现在更推荐使用CSS来样式化。引用[4]中的link标签用于设置网站图标,虽然通常放在head里,但body里可能有其他资源链接。不过主要样式还是通过CSS控制,body本身的属性可能较少直接使用。 需要确保回答的结构清晰,分点说明功能,比如内容容器、结构位置、交互元素容器、属性设置(尽管过时)。同时要引用提供的资料,比如引用[3]说明body的内容,引用[4]可能涉及资源链接,但可能更相关的是引用[3]的结构示例。 可能还要注意用户提到的其他引用,比如引用[5]提到body标签在DW中显示的问题,但用户的问题是关于功能和用途,所以这部分可能不需要涉及,除非有影响功能的地方。比如body标签只能出现一次,而错误的第二个body标签可能不会被正确渲染,如引用[5]所述,但用户的问题可能更关注正确用法。 总结回答的结构应该是:首先定义body标签,然后分点说明其功能,包括内容容器、结构位置、交互支持、属性设置(过时方法),最后总结其重要性。引用相关的资料,特别是引用[3]的结构示例和内容说明。 现在检查是否有遗漏的部分,比如body标签中的事件属性(如onload),但用户提供的引用中没有提到,可能需要根据常识补充,但如果没有引用支持,可能不提及。根据现有的引用资料,主要围绕内容容器和结构位置来展开。 确保回答使用中文,行内公式正确(但这里可能不需要数学公式),独立公式无。语法正确,结构清晰,生成相关问题。</think>HTML中`<body>`标签是网页内容的核心容器,用于定义文档的主体部分,包含所有用户可见的元素和交互内容[^3]。其功能和用途可分为以下几个方面: --- ### 1. **内容容器** - **所有可见内容**:`<body>`标签内包含网页的文本、图像、链接、表格、表单等用户可直接感知的元素。例如: ```html <body> <h1>标题</h1> <p>段落文本</p> <img src="image.jpg" alt="示例图片"> </body> ``` 这些内容会被浏览器渲染并展示给用户。 - **多媒体资源**:支持嵌入音频、视频等标签(如`<video>`、`<audio>`)。 --- ### 2. **文档结构定位** - **与`<head>`并列**:HTML文档的标准结构为`<html>`标签包裹`<head>`和`<body>`,其中`<body>`必须位于`<head>`之后,例如: ```html <html> <head> <meta charset="utf-8"> <title>页面标题</title> </head> <body> <!-- 页面内容 --> </body> </html> ``` 这种结构确保了浏览器正确解析元数据和内容[^3]。 --- ### 3. **交互与脚本支持** - **JavaScript操作**:`<body>`标签内可直接嵌入`<script>`标签或通过DOM操作实现动态交互。例如: ```html <body> <button onclick="alert('点击事件')">按钮</button> <script>console.log('脚本执行');</script> </body> ``` 脚本通常放在`<body>`末尾以优化加载速度[^2]。 --- ### 4. **样式与属性设置(已过时方法)** - **传统属性**:早期HTML版本允许通过`<body>`属性设置背景颜色、边距等(如`bgcolor`、`marginwidth`),但现代开发中已由CSS替代: ```html <body style="background-color: lightgray; margin: 0;"> ``` --- ### 5. **页面生命周期事件** - **事件处理**:可通过`<body>`标签定义页面级事件,如`onload`(页面加载完成时触发): ```html <body onload="init()"> ``` --- ### 注意事项 - **唯一性**:一个HTML文档中只能有一个`<body>`标签,重复定义会导致渲染错误[^5]。 - **语义化**:应避免在`<body>`外放置内容,否则可能被浏览器自动修正或忽略。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值