html_标签二

柔光的暖阳◎ 2022-05-25 04:40 99阅读 0赞

1. **iframe**

创建包含另外一个文档的内联框架（即行内框架）

![20180508105631768][]

![2018050810564037][]

2. **特殊符号**

![20180508105728502][]

![2018050810573931][]

3. **pre**

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

可以导致段落断开，<p>和 <address> 标签绝不能包含在 <pre> 所定义的块里

![20180508105858931][]

![20180508105906748][]

4. **div**

定义文档中的分区或节，有时候用它来进行分层或者布局，因此经常有人说网页布局用Div+CSS，其中的Div就是指div标签

Div可编辑 contenteditable=”true”

点击到编辑框中时，默认出现蓝色边框，样式中添加outline:none;去掉蓝色边框。

5. **span**

Span标签通常用于在行内文本中标记某写文本，与它相似使用的标签还有i标签（斜体）、b标签（粗体 ）等，所以span标签经常在段落（p）和大文本中（div）。

![20180508110029292][]

6. **<base>**

网页默认打开方式声明标签

如，整个页面都希望点击时产生一个新的页面显示，而不是在当前页面跳转。

上面的a标签中的target可以去掉了。在<head>标签中添加：

![20180508110212570][]

那么本页面中所有的a标签，iframe等只要与跳转有关的，都会弹出一个新窗体。

7. **无序列表**

</ul>

** ![20180508110306924][]![20180508110313738][]**

**Jd案例：**

** ![20180508110439502][]**

** **去掉前面的小黑点：

使用样式：list-style:none;

** **

8. **有序列表**

<ol type=”1,a,A,i,I”>

</ol>

![20180508110607139][]![20180508110614756][]

9. **自定义列表**

**<dl>标签：**定义列表

语法：

<dl>

<dd>是一种水果</dd>

<dd>是一种蔬菜</dd>

</dl>

<dt>:定义列表中的项目

<dd>:描述列表中的项目

jd案例：

![20180508110750961][]

![20180508110759475][]

百度案例：

![20180508110809599][]

![20180508110832573][]

[20180508105631768]: /images/20220525/7304ac451d834430a22b76c848e8a398.png
[2018050810564037]: /images/20220525/256bcbc71bf84346ad2d264b6ef6763b.png
[20180508105728502]: /images/20220525/9cf53e9efcc54df0aa1ef53f29b46960.png
[2018050810573931]: /images/20220525/e8112ee64a534dcf8e95ea96b926114a.png
[20180508105858931]: /images/20220525/9ffc6ceb769a475f81e6f3439c448a64.png
[20180508105906748]: /images/20220525/687f279e982848158eadcd90e670b623.png
[20180508110029292]: /images/20220525/1b5ca665048149bdba03fc6be03052f2.png
[20180508110212570]: /images/20220525/4f2230b6dc014c1c91aab4c3bdf66f65.png
[20180508110306924]: https://img-blog.csdn.net/20180508110306924
[20180508110313738]: /images/20220525/dac9928147e5453184d95076568cc143.png
[20180508110439502]: /images/20220525/f5fd6bc987154d0bb4c0262dc9d5916c.png
[20180508110607139]: https://img-blog.csdn.net/20180508110607139
[20180508110614756]: /images/20220525/25bf019b0a1c41f3984b8a433b1be8c6.png
[20180508110750961]: /images/20220525/10b29b7651c4482e8b9aca9f4f61f2d6.png
[20180508110759475]: /images/20220525/09dab168212a4b3a9f62fcefba225dcc.png
[20180508110809599]: /images/20220525/ad94fc8ab3ea4ed298a0cf13b8f183e1.png
[20180508110832573]: /images/20220525/c7c1775746ab40edb7dec04b7496d776.png