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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值