记录一下HTML的笔记

居中排列标题：

<h1 align="center"> </h1>

定义水平线:

<hr/>

改变背景颜色：

<body bgcolor="yellow">

举例：

<!DOCTYPE html>
<title>just for test</title>
<html>
    <body bgcolor="yellow">
        <h1>the fist title</h1>
        <p>
            Hello everyone. here im gonna tell something abou myself.
        </p>
    </body>
</html>
为元素定义背景颜色：
<p style="background-color:***"> </p>

插入单个折行：

<br/>

更改字体样式、颜色、大小：

<html>

    <body>
        <h1 style="font-family:verdana">A heading</h1>
        <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
    </body>

</html>

居中对齐文本：

style="text-align:center"

示例如下：

<html>
    <body>

        <h1 style="text-align:center">This is a heading</h1>
        <p>上面的标题相对于页面居中对齐。</p>

    </body>
</html>

旧方法使用align属性：

align="center"

文本格式化：

<html>

    <body>

        <b>加粗</b>

        <br />

        <strong>定义为语气更强的强调内容</strong><!--注：以上两种加粗方式效果相同-->

        <br />

        <big>将文字大小增加一级</big><!--注：html5不再支持big标签-->

        <br />

        <em>This text is emphasized</em><!--强调标签（根据将来浏览器不同，方式可能不只是斜体）-->

        <br />

        <i>This text is italic</i>

        <br />

        <small>This text is small</small><!--注：将字体缩小一级，可嵌套-->

        <br />

        This text contains
        <sub>subscript</sub><!--脚标-->

        <br />

        This text contains
        <sup>superscript</sup><!--上标-->

    </body>
</html>

预格式文本：

预格式文本保留了空格和换行，很适合用来写代码：

<html>

    <body>


        <p>pre 标签很适合显示计算机代码：</p>

        <pre>
            #include <iostream>
            using namespace std;
            int main(void)
            {
                cout << "Hello HTML!" << endl;
                return 0;
            }
        </pre>
    </body>
</html>

写地址：

address标签用于定义文档作者/所有者的联系信息，通常被包含在 footer元素的其他信息中。 address元素的文本通常呈现为斜体，大多数浏览器会在该元素的前后添加换行

<!DOCTYPE html>
<html>
    <body>

        <address>
            Written by <a href="https://awablog.me">Leonard</a>.<br>
            Visit us at:<br>
            Wuhan, China<br>
        </address>

    </body>
</html>

引用块：

<html>

    <body>

        这是长的引用：
        <blockquote>
            引用块。引用块。引用块。引用块。引用块。引用块。引用块。引用块。引用块。引用块。引用块。引用块。引用块。引用块。
        </blockquote>

        这是短的引用：
        <q>
            这是短的引用。
        </q>

        <p>
            使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
        </p>

    </body>
</html>

删除文本和下划线文本：

ins标签会呈现下划线文本

del标签会呈现删除文本

<html>

    <body>

        <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

        <p>大多数浏览器会改写为删除文本和下划线文本。</p>

        <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

    </body>
</html>

定义著作的标题:

标签用于定义著作标题，通常由斜体显示：

<p><cite>Harry Potter</cite> by J.K.Rowling.</p>

显示没有下划线的链接：

<a href="https://awablog.me" style="text-decoration:none">
    我的博客
</a>

分区块：

<html>
    <body>

        <h3>This is a header</h3>
        <p>This is a paragraph.</p>

        <div style="color:#00FF00">
            <h3>This is a header</h3>
            <p>This is a paragraph.</p>
        </div>

    </body>
</html>

div标签可定义文档中的分区或节（division/section）

列表（简）：

dl标签定义了定义列表

dt定义列表中的项目

dd描述列表中的项目

<html>

    <body>

        <h2>一个定义列表：</h2>

        <dl>
            <dt>计算机</dt>
            <dd>用来计算的仪器 ... ...</dd>
            <dt>显示器</dt>
            <dd>以视觉方式显示信息的装置 ... ...</dd>
        </dl>

    </body>
</html>

视频：

<video controls="controls"><!--显示控件-->
    <source src="name.mp4" type="video/mp4" />
</video>

以上代码在HTML页面中嵌入了mp4视频文件

链接：

基本链接语法：

<a href="url">Link text</a>

使用图像作为链接：

<html>

    <body>
        <p>
            使用图像作为链接：
            <a href="url">
                <img border="0" src="picture" />
            </a>
        </p>

    </body>
</html>

添加target="_blank"属性可以让链接在新窗口中打开：

<a href="url" target="_blank">Link text</a>

命名锚:

使用命名锚，可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

基本语法：

<a name="label">锚（显示在页面上的文本）</a>

id 属性来替代 name 属性，命名锚同样有效

命名锚使用方式：

  1. 在 HTML 文档中对锚进行命名（创建一个书签）:

    <a name="tips">基本的注意事项 - 有用的提示</a>

  2. 在同一个文档中创建指向该锚的链接：

    <a href="#tips">有用的提示</a>

  3. 也可以在其他页面中创建指向该锚的链接：

    <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

图像：

插入图像：

<img src="picture" width="128" height="128" />

背景图片：

<body background="picture">

</body>

排列图像：

<html>

    <body>

        <p>图像 <img src="picture" align="bottom"> 在文本中</p><!--底部对齐-->

        <p>图像 <img src="picture" align="middle"> 在文本中</p><!--中部对齐-->

        <p>图像 <img src="picture" align="top"> 在文本中</p><!--顶部对齐-->

        <p>请注意，bottom 对齐方式是默认的对齐方式。</p>

    </body>
</html>

表格：

表格由 table 标签来定义。每个表格均有若干行（由 tr标签定义），每行被分割为若干单元格（由 td标签定义）。

表格的表头：

表格的表头使用 th 标签进行定义。

<th>Heading1</th>
<th>Heading2</th>

每一个Heading分别对应每一单元格。

<table border="1">
    <tr>
        <th>Heading</th>
        <th>Another Heading</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

空单元格:

<td>&nbsp;</td>

添加一个空格占位符可以让表格边框显示出来。

向表格单元添加颜色：

<td bgcolor="color">text</td>

向表格单元添加背景图片：

<td background="picture">text</td>

列表：

无序列表：

<ul>
    <li>text1</li>
    <li>text2</li>
</ul>

无序列表始于

    标签。每个列表项始于
  • 。

    有序列表：

    <ol>
    <li>text1</li>
    <li>text2</li>
</ol>

    有序列表始于

      标签。每个列表项始于
    1. 标签。

      网页内显示网页：

      iframe语法：

      <iframe src="URL"></iframe>

      定义内嵌网页高度和宽度：

      <iframe src="url" width="200" height="200"></iframe>

      iframe删除边框：

      <iframe src="demo_iframe.htm" frameborder="0"></iframe>

      头部元素:

      title标签定义文档的标题:

      <head>
    <title>Title of the document</title>
</head>
Last modification：January 18, 2023
© Allow specification reprint
If you think my article is useful to you, please feel free to appreciate