HTML小结

最新推荐文章于 2023-08-04 12:22:36 发布

IXingFu

最新推荐文章于 2023-08-04 12:22:36 发布

阅读量458

点赞数

文章标签： html

本文详细介绍了HTML的各种基础元素，包括文本格式化标签如<b>、<em>、<i>等，计算机输出标签如<code>、<kbd>，引文标签如<abbr>、<address>，链接<a>，头部<head>，样式CSS，图像<img>，表格<table>，列表<ol>、<ul>和<dl>，以及<div>和<span>元素的使用。通过这些元素，可以构建网页的基本结构和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、HTML文本格式化标签：

<b>：定义粗体文本。<em>：定义着重文字。<i>：定义斜体字。<samll>：定义小号字。<strong>：定义加重语气。<sub>：定义下标字。<sup>：定义上标字。<ins>：定义插入字。<del>：定义删除字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好(html)</title>
</head>
<body>
<b>粗体文本</b>
<br/>
<strong>代替加粗b标签</strong>
<br/>
<i>斜体字</i>
<br/>
<em>代替斜体i标签</em>
<br/>
<small>文本是缩小的</small>
<br/>
<sub>下标</sub>
<br/>
<sup>上标</sup>
<p>
<del>blue</del>
<br/>
<ins>red</ins>
</p>
</body>
</html>

2、HTML 计算机输出标签：

<code>：定义计算机代码。<kbd>：定义键盘码。<samp>：定义计算机代码样本。<var>：定义变量。<per>：定义预格式文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好(html)</title>
</head>
<body>
<code>计算机输出</code>
<br/>
<kbd>键盘输入</kbd>
<br/>
<samp>计算机代码文本</samp>
<br/>
<var>计算机变量</var>
<br/>
<pre>
定义
预  格式
文本
</pre>
</body>
</html>

3、HTML 引文，引用，及标签定义：

<abbr>：定义缩写。<address>：定义地址。<bdo>：定义文字方向。<blockquote>：定义长的引用。<q>：定义短的引用语。<cite>：定义引用、引证。<dfn>：定义一个定义项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好(html)</title>
</head>
<>
<p>
<addr title="Hello World">HW</addr>
<br/>
<address><a href="baidu@123.com">BD</a></address>
<br/>
<bdo dir="rtl">从右到左显示</bdo>
<br/>
<blockquote cite="https://baidu.com123">abcdefghijklmn</blockquote>
<br/>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.H5im5apF0lK8QYr23V8MVgHaC9?w=327&h=140&c=7&r=0&o=5&dpr=1.25&pid=1.7" width="237" height="140">
<cite>作品的标题</cite>
<br/>
<dfn>定义项目</dfn>
</p>
</body>
</html>

4、HTML 链接：使用标签 <a>来设置超文本链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好(html)</title>
</head>
<body>
<a href="https://www.baidu.com">打开百度链接</a>
</body>
</html>

5、HTML 头部：

<head>：定义文档信息。<title>：定义文档的标题。<base>：定义页面链接标签的默认链接地址。<link>：定义一个文档和外部资源之间的关系。<meta>：定义HTML文档中的元数据。<script>：定义客户端的脚本文件。<style>：定义HTML文档的样式文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好(html)</title>
    <base href="www.baidu.com/images" target="_blank">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <style type="text/css">
        h1 {color:red;}
        p {color:blue;}
    </style>
</head>
<body>
<p><img src="logo.png" ></p>
<script>document.write("Hello World!")
</script>
<h1>这是一个标题</h1>
<p>这是一个段落。</p
</body>
</html>

6、CSS用于渲染HTML元素标签的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好(html)</title>
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">标题</h2>
<p style="background-color:green;">段落</p>
<h1 style="font-family:verdana;">标题。</h1>
<p style="font-family:arial;color:red;font-size:20px;">段落。</p>
<h1 style="text-align:center;">居中对齐</h1>
</body>
</html>

7、HTML 图像由<img> 标签定义。要在页面上显示图像需要使用src属性，src属性值是图像的URL地址。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好(html)</title>
</head>
<body>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.H5im5apF0lK8QYr23V8MVgHaC9?w=327&h=140&c=7&r=0&o=5&dpr=1.25&pid=1.7" width="237" height="140" />
</body>
</html>

8、HTML 表格由 <table> 标签来定义。行由 <tr> 标签定义，单元格由 <td> 标签定义，表头使用 <th> 标签进行定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好(html)</title>
</head>
<body>
<table border="1">
    <tr>
        <th>表头 1</th>
        <th>表头 2</th>
    </tr>
    <tr>
        <td>行 1, 单元格 1</td>
        <td>行 1, 单元格 2</td>
    </tr>
    <tr>
        <td>行 2, 单元格 1</td>
        <td>行 2, 单元格 2</td>
    </tr>
</table>
</body>
</html>

9、HTML 列表：有序列表项有序列表始于 <ol> 标签，每个列表项始于 <li> 标签，使用数字来标记。无序列表使用 <ul> 标签，使用粗体圆点进行标记。自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好(html)</title>
</head>
<body>
<dl>
    <dt>饭</dt>
    <dd>- 吃</dd>
    <dt>牛奶</dt>
    <dd>- 喝</dd>
</dl>
</body>
</html>

10、HTML <div>元素：定义文档的区域。HTML <span>元素：对文本中的一部分进行着色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好(html)</title>
</head>
<body>
<div style="color:#0000FF">
    <h3>标题</h3>
    <p>文本</p>
    <p>我有 <span style="color:black">黑色</span> 的头发</p>
</div>
</body>
</html>