body标签中的相关标签1

最新推荐文章于 2023-01-10 01:46:29 发布

weixin_30675967

最新推荐文章于 2023-01-10 01:46:29 发布

阅读量566

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuzewen/p/9288565.html

本文详细介绍了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>

效果：

粗体标签< b > 或 < strong >

<body>
    luffy
    <b>luffy</b>
    <strong>luffy</strong>
</body>

效果：

下划线标记 < u > 中划线标记< s >

<body>
    <u>luffy</u>
    <s>luffy</s>
</body>

效果：

上标< sup > 下标< sub >

<body>
    5<sup>2</sup>
    8<sub>2</sub>
</body>

效果：

特殊符号

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

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

排版标签

段落标签 < p >

段落属性：

align="属性值": 对齐方式。属性值包括：left、center、right

<body>
    <p>这是一个段落</p>
    <p align="center">这是另一个段落</p>
</body>

效果：

注意：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>

效果：

内容居中标签< center >

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

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

效果：

超链接

超链接有三种形式：、

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