HTML常用标签

Posted 2022-12-06 acrifhy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML常用标签相关的知识，希望对你有一定的参考价值。

html常用标签

html文件基本结构：

<!DOCTYPE html> 声明遵循html格式
<html lang="en"> 声明这个网页语言是英语
<head> 头部标签
    <meta charset="utf-8"/> 声明编码格式
    <title>SRRDHY</title> 标题
</head>
<body> 内容主体标签
    
</body>
</html>

标题：

html一共有六级标题，从h1到h6大小递减，一般一个网页的h1标签只用一次，标题会默认占一行

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落：

当我们需要在网页中显示几段文字时，并不是直接分段文字插入到body中即可的：

可以看到实际网页里三段话连在一起了

html中的段落用标签p来声明：

现在显示就与我们设想的一样了

同时我们F12打开开发者工具也会看到使用p标签后每个段落都会自动产生一定的间距，使其美观

注意点：

< p >中的文字行数取决于浏览器窗口的宽度
< p >中的连续空格最终会渲染成一个空格
想要显示多个空格要使用到空格符
```
&nbsp;
```

结构标签

Div标签

div是division的意思，用于划分区域，代表网页中的块，一般把它叫做块标签
div是最通用的页面容器
div是块级元素

span标签

span是内联标签，用于一行文本中修饰文字
span是内联元素

我们来简单看一下效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hello,world</div>
    <div>srrdhy</div>
    <div>mikasa</div>
    <span>hello,world</span>
    <span>srrdhy</span>
    <span>mikasa</span>
</body>
</html>

发现div标签里的内容会单独占一行，而span元素则是都放在一行去了。

这两个标签还可以内嵌：

<body>
    <div>abc
        <div>
            srrdhy
        </div>
    </div>
    <span>abc
        <span>
            srrdhy
        </span>
    </span>
</body>

效果如图：

那么我们会发现内嵌是不影响div元素独占一行的，span同理

链接：

链接是HTML页面重要的一环，没有它，每个HTML页面就会孤立

< a > 标签是anchor的缩写，用于定义网页链接

链接属性：

href属性表示链接的地址，可以是相对地址或绝对地址
target属性表示点击链接后打开的方式，默认值self，代表在当前窗口打开新链接，除此之后，还可以设置为blank，代表在新窗口中打开

示例：

<body>
    <div>
        <a href="https://www.baidu.com/" target="_blank">百度官网</a>
    </div>
</body>

页面会出现

点击就是百度了

但是当我们设置多个这种链接时，要是想都在新窗口打开，一个个加blank会很麻烦，这时base标签就派上用场了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base target="_blank"/>
</head>
<body>
    <div>
        <a href="https://www.baidu.com/">百度官网</a>
        <a href="https://bh3.mihoyo.com/">崩坏3官网</a>
        <a href="https://www.bilibili.com/">bilibili官网</a>
    </div>
</body>
</html>

我们只要在head标签内嵌套一个base标签，这样只要把blank写一次就可以了。如果有一个网址就是想在当前窗口打开，那只要在那条网址补上self属性即可。

这里再介绍一个特殊的链接，空链接，这个链接点开只有一个空白网页，有两种写法：

<a href="javascript:void(0)">空链接</a>
<a href="javascript:;">空链接2</a>

图片：

img标签用于定义一张图片，属于单标签，它有两个属性，src代表图片地址，alt属性代表当图片无法显示时的替代文本。
图片地址可以使用相对或绝对路径
alt属性是为了兼容无图浏览器，图片会提示alt属性内的文字
img标签上还可以扩充height与width属性来设置图片宽高

我们先来张图片试试：

<div>
    <img src="src=http___www.17qq.com_img_qqtouxiang_85981045.jpeg&refer=http___www.17qq.jpg" alt="樱岛麻衣">
</div>

很好，再试试改成我们想要的大小

<img src="src=http___www.17qq.com_img_qqtouxiang_85981045.jpeg&refer=http___www.17qq.jpg" alt="樱岛麻衣" height="200">

当我们只修改高或宽属性时，图片也会按原先比例缩放

除此之外，我们还可以给图片增加title属性

<img src="src=http___www.17qq.com_img_qqtouxiang_85981045.jpeg&refer=http___www.17qq.jpg" alt="樱岛麻衣" height="200" title="我老婆">

这时我们把鼠标放在图片上，title里的图片说明就有了

列表：

无序列表

使用< ul >定义无序列表，< li >定义列表项
可以在ul标签上使用type属性定义图形符号方式，属性值为disc时，显示为点；属性值为square时，显示为方块；属性值为circle时，显示为圆；属性值为none则不显示符号；默认值是圆。

<ul>故乡三人组
    <li>亚妮</li>
    <li>莱纳</li>
    <li>贝尔托特</li>
</ul>

有序列表

使用< ol >标签定义有序列表，< li >标签定义列表项
有序列表前缀一般为数字或字母（字母需要在ol添加type属性值比如a或A）

<ol>故乡三人组
    <li>亚妮</li>
    <li>莱纳</li>
    <li>贝尔托特</li>
</ol>

自定义列表

使用< dl >标签（definition list）定义自定义列表，内部可有多个列表项，每个列表项用< dt >定义标题，用< dd >定义列表项

<dl>城市
<dt>广东省
    <dd>广州市</dd><dd>深圳市</dd><dd>珠海市</dd>
</dt>
</dl>

以上是关于HTML常用标签的主要内容，如果未能解决你的问题，请参考以下文章