HTML基础知识3（完结）

搬砖搬到互联网

已于 2023-07-15 09:25:07 修改

阅读量59

点赞数 1

文章标签： html 前端

于 2023-07-15 09:22:30 首次发布

本文链接：https://blog.csdn.net/m0_64204485/article/details/131734955

版权

续HTML基础知识2

文章目录

四丶HTML标签通用属性
- 4.1元素属性语法
- 4.2属性语法
五丶特殊字符（字符实体）

3.6列表标签

3.6.1无序列表

<ul> 标签用于创建无序列表。
使用 <li> 标签来定义列表项。

示例：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

效果：

列表项1
列表项2
列表项3

3.6.2有序列表

<ol> 标签用于创建有序列表。
使用 <li> 标签来定义列表项。

示例：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

效果：

列表项1
列表项2
列表项3

3.6.3自定义列表

<dl> 标签用于创建自定义列表。
使用 <dt> 标签来定义术语，使用 <dd> 标签来定义描述。

示例：

<dl>
        <dt>商品名称1</dt>
        <dd>描述1</dd>
        <dd>描述2</dd>
        <dd>描述3</dd>
        <dd>描述4</dd>
        <dt>商品名称2</dt>
        <dd>描述1</dd>
        <dd>描述2</dd>
        <dd>描述3</dd>
        <dd>描述4</dd>
      </dl>

效果：

在这里插入图片描述

3.6.4嵌套列表

列表标签可以嵌套在其他列表标签中以创建更复杂的列表结构。

示例：

<ul>
  <li>列表项1</li>
  <li>列表项2
    <ul>
      <li>嵌套列表项1</li>
      <li>嵌套列表项2</li>
    </ul>
  </li>
  <li>列表项3</li>
</ul>

效果：

列表项1
列表项2
- 嵌套列表项1
- 嵌套列表项2
列表项3

3.7内嵌框架

通过使用内嵌框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法：

<iframe id="header" runat="server" src="URL" width="980" height="136" frameborder="0" 
            scrolling="no"></iframe>

该URL指向不同的网页。

为什么用<iframe>

<frameset>需要使用多个文件，目录结构复杂；
内嵌较为灵活，可以在网页的任何位置使用；
可以作为模板，在本网站的多个页面复用；

Iframe - 设置高度与宽度:

height和width属性用来定义iframe标签的高度与宽度
属性默认以像素为单位，但是你可以指定其按比例显示（如：“80%”）。当然，我们完全可以使用CSS样式实现。

Iframe - 移除边框：

height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。当然，我们完全可以使用CSS 样式来实现。

Iframe - 框架命名:

name：自定义框架名,规定 iframe 的名称。

3.8文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

示例：

<p>
        <strong>粗体</strong>的文本
    </p>
    <p>
        <em>斜体</em>的文本
    </p>
    <p>
        加<del>删除线</del>的文本
    </p>
    <p>
        加<ins>下划线</ins>的文本
    </p>
    <p>
        <small>小号</small>的文本
    </p>
    <p>
        上标线文本:10 <sup>2</sup>
    </p>
    <p>
        下标线文本: H<sub>2</sub>O
    </p>
    <pre>
        var text = 'Hello World';
    </pre>
    <code>
        alert(text);
    </code>

在这里插入图片描述

四丶HTML标签通用属性

4.1元素属性语法

HTML元素以开始标签开始
HTML元素以结束标签终止
元素内容是开始标签与结束标签之间的内容
某些HTML元素具有空内容（empty content）
空元素在开始标签中进行关闭
大多数HTML元素可拥有属性

4.2属性语法

HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：type=“button”

属性	描述
class	为html元素定义一个或多个类名
id	定义元素的id，在同一个页面中唯一
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息

<a href="https://www.baidu.com" id="link-baidu" class="link" title="百度一下，你就知道" style="color: red;">百度</a>

五丶特殊字符（字符实体）

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

5.1HTML实体

在HTML中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：

&entity_name;
或
&#entity_number

如需显示小于号，我们必须这样写：<或&#60;或<

大于号：>或&#62;或>

提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

5.2不间断空格

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。

 代表一个空格

&ensp;代表空一个英文字母

&emsp;代表空一个汉字

5.3结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如尖音符 ( ̀) 和抑音符 ( ́) 。

变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

以下是一些实例:

音标符号	字符	Construct	输出结果
̀	a	`à`	à
́	a	`á`	á
̂	a	`â`	â
̃	a	`ã`	ã

5.4HTML字符实体

注意：实体名称对大小写敏感

字符	实体编号	实体名称	描述
	` `	` `	非间断空格
¥	`¥`	`¥`	人民币/日元符号
©	`©`	`©`	版权符
®	`®`	`®`	注册商标符

完整地HTML实体：HTML实体参考手册

HTML基础知识完结，后续会继续发布有关CSS的基础知识。