HTML基础

一、HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行:

<!DOCTYPE html>

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<meta charset="UTF-8">

二、HTML常用标签

  1. 基础标签

标签

描述

<!DOCTYPE>

定义文档类型。

<html>

定义一个 HTML 文档

<title>

为文档定义一个标题

<body>

定义文档的主体

<h1> to <h6>

定义 HTML 标题

<p>

定义一个段落

<br>

定义简单的折行。

<hr>

定义水平线。

<!--...-->

定义一个注释

2、格式标签

<abbr>

定义一个缩写。

<address>

定义文档作者或拥有者的联系信息。

<b>

定义粗体文本。

<bdi>

允许您设置一段文本,使其脱离其父元素的文本方向设置。

<bdo>

定义文本的方向。

<blockquote>

定义块引用。

<cite>

定义引用(citation)。

<code>

定义计算机代码文本。

<del>

定义被删除文本。

<dfn>

定义定义项目。

<em>

定义强调文本。

<i>

定义斜体文本。

<ins>

定义被插入文本。

<kbd>

定义键盘文本。

<mark>

定义带有记号的文本。

<meter>

定义度量衡。仅用于已知最大和最小值的度量。

<pre>

定义预格式文本

<progress>

定义运行中的任务进度(进程)。

<q>

定义短的引用。

<rp>

定义不支持 ruby 元素的浏览器所显示的内容。

<rt>

定义字符(中文注音或字符)的解释或发音。

<ruby>

定义 ruby 注释(中文注音或字符)。

<s>

定义加删除线的文本。

<samp>

定义计算机代码样本。

<small>

定义小号文本。

<strong>

定义语气更为强烈的强调文本。

<sub>

定义下标文本。

<sup>

定义上标文本。

<time>

定义一个日期/时间

<u>

定义下划线文本。

<var>

定义文本的变量部分。

<wbr>

规定在文本中的何处适合添加换行符。

3、表单标签

<form>

定义一个 HTML 表单,用于用户输入。

<input>

定义一个输入控件

<textarea>

定义多行的文本输入控件。

<button>

定义按钮。

<select>

定义选择列表(下拉列表)。

<optgroup>

定义选择列表中相关选项的组合。

<option>

定义选择列表中的选项。

<label>

定义 input 元素的标注。

<fieldset>

定义围绕表单中元素的边框。

<legend>

定义 fieldset 元素的标题。

<datalist>

规定了 input 元素可能的选项列表。

<keygen>

规定用于表单的密钥对生成器字段。

<output>

定义一个计算的结果

4、图像标签

<img>

定义图像。

<map>

定义图像映射。

<area>

定义图像地图内部的区域。

<canvas>

通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。

<figcaption>

定义一个 caption for a <figure> element

<figure>

figure 标签用于对元素进行组合。

5、Audio/Video标签

<audio>

定义声音,比如音乐或其他音频流。

<source>

定义media元素 (<video> 和 <audio>)的媒体资源。media

<track>

为媒体(<video> 和 <audio>)元素定义外部文本轨道。

<video>

定义一个音频或者视频

6、链接标签

<a>

定义一个链接

<link>

定义文档与外部资源的关系。

<main>

定义文档的主体部分。

<nav>

定义导航链接

7、列表标签

<ul>

定义一个无序列表

<ol>

定义一个有序列表

<li>

定义一个列表项

<dl>

定义一个定义列表

<dt>

定义一个定义定义列表中的项目。

<dd>

定义定义列表中项目的描述。

<menu>

定义菜单列表。

<command>

定义用户可能调用的命令(比如单选按钮、复选框或按钮)。

8、表格标签

<table>

定义一个表格

<caption>

定义表格标题。

<th>

定义表格中的表头单元格。

<tr>

定义表格中的行。

<td>

定义表格中的单元。

<thead>

定义表格中的表头内容。

<tbody>

定义表格中的主体内容。

<tfoot>

定义表格中的表注内容(脚注)。

<col>

定义表格中一个或多个列的属性值。

<colgroup>

定义表格中供格式化的列组。

9、样式/节标签

<style>

定义文档的样式信息。

<div>

定义文档中的节。

<span>

定义文档中的节。

<header>

定义一个文档头部部分

<footer>

定义一个文档底部

<section>

定义了文档的某个区域

<article>

定义一个文章内容

<aside>

定义其所处内容之外的内容。

<details>

定义了用户可见的或者隐藏的需求的补充细节。

<dialog>

定义一个对话框或者窗口

<summary>

定义一个可见的标题。 当用户点击标题时会显示出详细信息。

10、元信息标签

<head>

定义关于文档的信息

<meta>

定义关于 HTML 文档的元信息。

<base>

定义页面中所有链接的默认地址或默认目标。

11、程序标签

<script>

定义客户端脚本。

<noscript>

定义针对不支持客户端脚本的用户的替代内容。

<embed>

定义了一个容器,用来嵌入外部应用或者互动程序(插件)。

<object>

定义嵌入的对象。

<param>

定义对象的参数。

三、HTML网页结构

下图是一个可视化的网页结构:

只有 <body> 区域 (白色部分) 才会在浏览器中显示。

四、HTML基础

1、HTML标题

<title>标题名</title>

2、段落

<p>分段</p>

3、HTML链接

HTML链接语法:

<a href="url">链接文本</a>

HTML 链接 - target 属性:使用 target 属性,你可以定义被链接的文档在何处显示。

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

HTML 链接- id 属性:

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips")":

<a href="#tips">访问有用的提示部分</a>

或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

4、HTML图像

<img decoding="async" src="/images/logo.png" width="258" height="39" />

图像的名称和尺寸是以属性的形式提供的。

五、HTML标题

1、HTML 标题

标题(Heading)是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

2、HTML注释

<!--注释内容-->

3、插入水平线

<hr><!--水平线-->

六、HTML头部

1、HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

2、HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

  • 定义了浏览器工具栏的标题

  • 当网页添加到收藏夹时,显示在收藏夹中的标题

  • 显示在搜索引擎结果页面的标题

3、HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

4、HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

5、HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<style type="text/css">
        body {background-color:aliceblue;}
        h1 {color:red}
        p {color:blue}
        a {color:black}    
        b {color:pink}
        </style>

6、HTML <meta> 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

<meta> 一般放置于 <head> 区域

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

7、HTML <script> 元素

<script>标签用于加载脚本文件,如: JavaScript。

七、HTML样式--CSS样式

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性

  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS

  • 外部引用 - 使用外部 CSS 文件

1、HTML 样式实例 - 字体, 字体颜色 ,字体大小

我们可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

2、HTML 样式实例 - 文本对齐方式

使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:

<h1 style="text-align:center;">居中对齐的标题</h1>

3、内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

4、外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

八、HTML图像

1、HTML 图像- 图像标签( <img>)和源属性(src)

  • 在 HTML 中,图像由<img> 标签定义。

  • <img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

  • 要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是:

<img src="url" alt="some_text">

URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中,那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

2、HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

3、HTML 图像- 设置图像的高度与宽度

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

九、HTML表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。

<table border="1">
    <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>

1、HTML 表格和边框属性

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

如果不定义边框属性,表格将不显示边框,通过border来定义边框

2、HTML 表格表头

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

<table border="1">
    <tr>
         <th>Header 1</th>
         <th>Header 2</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>

十、HTML列表

1、无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

2、有序列表

有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

3、自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

十一、HTML区块

1、HTML 区块元素

大多数 HTML 元素被定义为块级元素内联元素,块级元素在浏览器显示时,通常会以新行来开始(和结束);实例: <h1>, <p>, <ul>, <table>

2、HTML 内联元素

内联元素在显示时通常不会以新行开始;实例: <b>, <td>, <a>, <img>

3、HTML <div> 元素

  • HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。

  • <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

  • 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

  • <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

4、HTML <span> 元素

  • HTML <span> 元素是内联元素,可用作文本的容器。

  • <span> 元素也没有特定的含义。

  • 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

十二、HTML布局

1、HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>

2、HTML 布局 - 使用表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
 
</body>
</html>

十三、HTML表单

1、HTML 表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox) 等等。

我们可以使用 <form> 标签来创建表单:

<form>
.
input 元素
.
</form>

2、HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签 <input>。

输入类型是由 type 属性定义。

接下来我们介绍几种常用的输入类型:

文本域(Text Fields)

文本域通过 <input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
  • 文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签 <input type="password"> 来定义:

<form>
    Username:<input type="text" name="name"><br/>
    Password:<input type="password" name="password">
</form>

单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单的单选框选项:

<form action="">
    <input type="radio" name="sex" value="male">男<br/>
    <input type="radio" name="sex" value="female">女
</form>

复选框(Checkboxes)

<input type="checkbox"> 定义了复选框。

<form>
    <input type="checkbox" name="sport" value="basketball">篮球<br/>
    <input type="checkbox" name="sport" value="football">足球<br/>
    <input type="checkbox" name="sport" value="vollyball">排球
</form>

提交按钮(Submit)

  • <input type="submit"> 定义了提交按钮。

  • 当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

  • action 属性会对接收到的用户输入数据进行相关的处理:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 html_form_action.php 文件,该页面将显示出输入的结果。

以上实例中有一个 method 属性,它用于定义表单数据的提交方式,可以是以下值:

  • post:指的是 HTTP POST 方法,表单数据会包含在表单体内然后发送给服务器,用于提交敏感数据,如用户名与密码等。

  • get:默认值,指的是 HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 ?作为分隔符,一般用于不敏感信息,如分页等。例如:https://www.runoob.com/?page=1,这里的 page=1 就是 get 方法提交的数据。

十四、HTML 框架

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

1、iframe语法

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

该URL指向不同的网页。

2、iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%")。

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

3、iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:

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

4、使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

十五、HTML脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

1、HTML <script> 标签

  • <script> 标签用于定义客户端脚本,比如 JavaScript。

  • <script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

  • JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<script>
document.write("Hello World!");
</script>

2、HTML<noscript> 标签

  • <noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

  • <noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

  • 只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容:

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
  • 不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容(文本)来替代。

3、JavaScript体验

JavaScript可以直接在HTML输出:

<script>
     document.write("Hello World!");
     document.write("<h1>这是一个标题</h1>");
     document.write("<p>这是一个段落。</p>");
</script>

JavaScript事件响应:

<p id="demo">
JavaScript 可以触发事件,就像按钮点击。</p>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我</button>

JavaScript处理 HTML 样式:

<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

十六、HTML 字符实体

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

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

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

&entity_name;

&#entity_number;

如需显示小于号,我们必须这样写:&lt; 或 &#60; 或 &#060;

1、不间断空格(Non-breaking Space)

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

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

2、结合音标符

音标符

字符

Construct

输出结果

̀

a

a&#768;

́

a

a&#769;

̂

a

a&#770;

̃

a

a&#771;

̀

O

O&#768;

́

O

O&#769;

̂

O

O&#770;

̃

O

O&#771;

3、HTML字符实体

显示结果

描述

实体名称

实体编号

空格

&nbsp;

&#160;

<

小于号

&lt;

&#60;

>

大于号

&gt;

&#62;

&

和号

&amp;

&#38;

"

引号

&quot;

&#34;

'

撇号

&apos; (IE不支持)

&#39;

&cent;

&#162;

£

&pound;

&#163;

¥

人民币/日元

&yen;

&#165;

欧元

&euro;

&#8364;

§

小节

&sect;

&#167;

©

版权

&copy;

&#169;

®

注册商标

&reg;

&#174;

商标

&trade;

&#8482;

×

乘号

&times;

&#215;

÷

除号

&divide;

&#247;

  • 实体名称对大小写敏感

十七、HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址。

1、URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。

当您点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

一个网页地址实例: http://www.runoob.com/html/html-tutorial.html 语法规则:

scheme://host.domain:port/path/filename

说明:

  • scheme - 定义因特网服务的类型。最常见的类型是 http

  • host - 定义域主机(http 的默认主机是 www)

  • domain - 定义因特网域名,比如 runoob.com

  • :port - 定义主机上的端口号(http 的默认端口号是 80)

  • path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。

  • filename - 定义文档/资源的名称

2、常见的 URL Scheme

Scheme

访问

用于...

http

超文本传输协议

以 http:// 开头的普通网页。不加密。

https

安全超文本传输协议

安全网页,加密所有信息交换。

ftp

文件传输协议

用于将文件下载或上传至网站。

file

您计算机上的文件。

3、URL 字符编码

  • 来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。

  • URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

  • URL 不能包含空格。URL 编码通常使用 + 来替换空格。

4、URL 编码实例

字符

URL 编码

%80

£

%A3

©

%A9

®

%AE

À

%C0

Á

%C1

Â

%C2

Ã

%C3

Ä

%C4

Å

%C5

十八、HTML 标签简写及全称

标签

英文全称

中文说明

a

Anchor

abbr

Abbreviation

缩写词

acronym

Acronym

取首字母的缩写词

address

Address

地址

alt

alter

替用(一般是图片显示不出的提示)

b

Bold

粗体(文本)

bdo

Direction of Text Display

文本显示方向

big

Big

变大(文本)

blockquote

Block Quotation

区块引用语

br

Break

换行

cell

cell

cellpadding

cellpadding

巢补白

cellspacing

cellspacing

巢空间

center

Centered

居中(文本)

cite

Citation

引用

code

Code

源代码(文本)

dd

Definition Description

定义描述

del

Deleted

删除(的文本)

dfn

Defines a Definition Term

定义定义条目

div

Division

分隔

dl

Definition List

定义列表

dt

Definition Term

定义术语

em

Emphasized

加重(文本)

font

Font

字体

h1~h6

Header 1 to Header 6

标题1到标题6

hr

Horizontal Rule

水平尺

href

hypertext reference

超文本引用

i

Italic

斜体(文本)

iframe

Inline frame

定义内联框架

ins

Inserted

插入(的文本)

kbd

Keyboard

键盘(文本)

li

List Item

列表项目

nl

navigation lists

导航列表

ol

Ordered List

排序列表

optgroup

Option group

定义选项组

p

Paragraph

段落

pre

Preformatted

预定义格式(文本 )

q

Quotation

引用语

rel

Reload

加载

s/ strike

Strikethrough

删除线

samp

Sample

示例(文本

small

Small

变小(文本)

span

Span

范围

src

Source

源文件链接

strong

Strong

加重(文本)

sub

Subscripted

下标(文本)

sup

Superscripted

上标(文本)

td

table data cell

表格中的一个单元格

th

table header cell

表格中的表头

tr

table row

表格中的一行

tt

Teletype

打印机(文本)

u

Underlined

下划线(文本)

ul

Unordered List

不排序列表

var

Variable

变量(文本)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值