HTML的标签分类有人明白吗

Posted 2023-05-02

参考技术A 根元素: 文档元数据:、、 参考技术B

html标签的类型可分为三种:块级标签,行内标签,内联块状标签。

块级标签：

块状标签：标签独占一行，可指定宽、高。

特性：

能够识别宽高

margin和padding的上下左右均对其有效

可以自动换行

多个块状元素标签写在一起，默认排列方式为从上至下

可以使用margin:0 auto居中对齐

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

内联标签：

内联(行级)标签：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。

特性：

无法设置宽高

margin上下无效，只有左右有效果，padding都有效果，会撑大空间；box-sizing:border-box;无效，因为该属性针对盒模型。

不会自动换行

常用的内联元素有：

<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联块状标签：

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

特性：

不会自动换行

能够设置宽高

默认排列方式为从左到右

可以使用text-align:center使内容相对于父盒子水平居中对齐，例如img标签，可以使用text-align:center，相对父盒子居中对齐、margin:0 auto无效

水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。

常用的内联块状元素有：

<img>、<input>

HTML标签类型是可以转换的：

display:inline;转换为行内元素

display:linline-block;转换为行内块元素

display:block;转换为块级元素

有人可以帮我解决这个问题吗

【中文标题】有人可以帮我解决这个问题吗

【英文标题】：can some help me work this out

【发布时间】：2012-04-25 21:03:32

【问题描述】：

这是我的网站。我正在尝试制作自己的测试网址：

http://boats.instantonlinesuccess.co.uk/boat-names.html

如果你看它，你就会明白我在做什么。我正在尝试将 JavaScript 链接到我的 PHP，因此文字会出现效果/效果颜色/颜色。这一切都是通过我正在尝试编写的 PHP 脚本生成的。

这是我的 PHP：

<?php header("Content-type: image/png");
    $string = $_GET['text'];
    $currentFont =$_GET['font'];
    $currentTextColour = $_GET['colour'];
    $currentEffect = $_GET['effect'];
    $currentEffectColour = $_GET['effectcolour'];
    $im = imagecreatefrompng("images/test.png");
    $px = (imagesx($im) - 7.5 * strlen($string)) / 2;
    //if you exactly know the RGB color indexes//
    $rgb = imagecolorexact($im, 0, 0, 0);
    //or keep the rgb color by position so at top 0 left 0 
    $rgb = imagecolorat($im, 0, 0);
    imagecolortransparent($im, $rgb);
    imagestring($im, 64, $px, 16, $string, $currentTextColour);
    imagepng($im); imagedestroy($im); 
?>

如果您需要 JavaScript，请告诉我。

【问题讨论】：

能否让您的标题具有描述性？

请在您的代码块中使用适当的换行符。您不必为每行付费。

您可以尝试将第一行更改为此来调试问题：那是真的 header('Content-Type: text/plain');

【参考方案1】：

您可以尝试将第一行更改为此来调试问题：

header('Content-Type: text/plain');