前端三件套之HTML（二）

前端 HTML

字数统计: 6.5k阅读时长: 30 min

 2022/10/27 

HTML符号

HTML符号实体

若想将数学符号、希腊符号等符号添加到HTML页面，可以使用HTML实体名称。若不存在实体名称，可使用实体编号、十进制或十六进制进行引用。

<<!DOCTYPE html>
<html>  
<body>
    <p>我将显示 &</p>
    <hr />
    <p>我将显示 &#8364;</p>
    <hr />
    <p>我将显示 &#x20AC;</p>
</body>
</html>>

运行结果如下：

我将显示 &

我将显示 €

HTML 支持的一些数学符号

字符	数字	实体	描述
∀	`∀`	`∀`	FOR ALL
∂	`∂`	`∂`	PARTIAL DIFFERENTIAL
∃	`∃`	`∃`	THERE EXISTS
∅	`∅`	`∅`	EMPTY SETS
∇	`∇`	`∇`	NABLA
∈	`∈`	`∈`	ELEMENT OF
∉	`∉`	`∉`	NOT AN ELEMENT OF
∋	`∋`	`&ni;`	CONTAINS AS MEMBER
∏	`∏`	`∏`	N-ARY PRODUCT
∑	`∑`	`∑`	N-ARY SUMMATION

HTML 支持的一些希腊字母

字符	数字	实体	描述
Α	`Α`	`Α`	GREEK CAPITAL LETTER ALPHA
Β	`Β`	`Β`	GREEK CAPITAL LETTER BETA
Γ	`Γ`	`Γ`	GREEK CAPITAL LETTER GAMMA
Δ	`Δ`	`Δ`	GREEK CAPITAL LETTER DELTA
Ε	`Ε`	`Ε`	GREEK CAPITAL LETTER EPSILON
Ζ	`Ζ`	`Ζ`	GREEK CAPITAL LETTER ZETA

HTML 支持的一些其他实体。

字符	数字	实体	描述
©	`©`	`©`	COPYRIGHT SIGN
®	`®`	`®`	REGISTERED SIGN
€	`€`	`€`	EURO SIGN
™	`™`	`™`	TRADEMARK
←	`←`	`←`	LEFTWARDS ARROW
↑	`↑`	`↑`	UPWARDS ARROW
→	`→`	`→`	RIGHTWARDS ARROW
↓	`↓`	`↓`	DOWNWARDS ARROW
♠	`♠`	`&spades;`	BLACK SPADE SUIT
♣	`♣`	`&clubs;`	BLACK CLUB SUIT
♥	`♥`	`&hearts;`	BLACK HEART SUIT
♦	`♦`	`&diams;`	BLACK DIAMOND SUIT

HTML表格

表格由<table>标签来定义。每个表格均有由<tr>标签定义的若干行，每行被分隔为由<td>标签定义的若干单元格。字母td指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

HTML表格的基本结构

<table>..</table>：定义表格

<th>..</th>：定义表格的标题栏（文字加粗）

<tr>..</tr>：定义表格的行

<td>..</td>：定义表格的列

边框属性：

若不定义边框属性，表格将不显示边框。若要显示边框，可使用border来显示。

<!DOCTYPE html>
<html>  
<body>
    <table border="1">
    <tr>
        <td>row1,cell1</td>
        <td>row1,cell2</td>
    </tr>
    <tr>
        <td>row2,cell1</td>	
        <td>row2,cell2</td>
    </tr>
    </table>
</body>
</html>

运行结果如下：

row1,cell1	row1,cell2
row2,cell1	row2,cell2

表头单元格

表格的表头单元格使用<th>标签定义。

表格的表头单元格属性有：align、dir、width、height。

大多数浏览器会把表头显示为粗体居中的文本：

<!DOCTYPE html>
<html>  
<body>
    <table border="1">
    <tr>
        <th>Header 1</th>	    
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row1,cell1</td>
        <td>row1,cell2</td>
    </tr>
    <tr>
        <td>row2,cell1</td>	
        <td>row2,cell2</td>
    </tr>
    </table>
</body>
</html>

运行结果如下：

Header 1	Header 2
row1,cell1	row1,cell2
row2,cell1	row2,cell2

表格标题

在<table>标签中可以使用<caption>...</caption>标签作为标题，并在表的顶部显示出来。但此标签在较新版本的HTML/XHTML中已经弃用。

<!DOCTYPE html>
<html>  
<body>
    <table border="1">
    <caption>这是标题</caption>
    <tr>
        <td>row1,cell1</td>
        <td>row1,cell2</td>
    </tr>
    <tr>
        <td>row2,cell1</td>	
        <td>row2,cell2</td>
    </tr>
    </table>
</body>
</html>

运行结果如下：

这是标题
row1,cell1	row1,cell2
row2,cell1	row2,cell2

表格高度和宽度

在<table>标签中可以使用width（宽）和height（高）属性类设置表格宽度和高度，可以按像素或可用屏幕区域的百分比来指定表格宽度或高度：

<!DOCTYPE html>
<html>  
<body>
    <table border="1" width="400" height="150">
    <tr>
        <td>row1,cell1</td>
        <td>row1,cell2</td>
    </tr>
    <tr>
        <td>row2,cell1</td>	
        <td>row2,cell2</td>
    </tr>
    </table>
</body>
</html>

运行结果如下：

row1,cell1	row1,cell2
row2,cell1	row2,cell2

表格背景

设置HTML表格的背景有以下几种方法：

bgcolor属性：为整个表格或仅为一个单元格设置背景颜色
background属性：为整个表设置背景图像或仅为一个单元设置背景图像，需要提供图像的URL地址。
bordercolor属性：设置边框颜色

但在HTML5中不推荐使用bgcolor、background和bordercolor，部分属性不会生效。

<!DOCTYPE html>
<html>  
<body>
    <table border="1" bordercolor="green" bgcolor="yellow">
    <!--<table border="1" bordercolor="green" background="图像地址">-->
    <tr>
        <td>row1,cell1</td>
        <td>row1,cell2</td>
    </tr>
    <tr>
        <td>row2,cell1</td>	
        <td>row2,cell2</td>
    </tr>
    </table>
</body>
</html>

运行结果如下：

row1,cell1	row1,cell2
row2,cell1	row2,cell2

表格空间

以下两个属性可用于调整HTML表格中单元格的空间：

cellspacing属性：定义表格单元格之间的空间
cellpadding属性：表示单元格边框与单元格内容之间的距离

<!DOCTYPE html>
<html>  
<body>
    <table border="1" cellpadding="50" cellspacing="5">
    <tr>
        <td>row1,cell1</td>
        <td>row1,cell2</td>
    </tr>
    <tr>
        <td>row2,cell1</td>	
        <td>row2,cell2</td>
    </tr>
    </table>
</body>
</html>

合并单元格

若要合并两列或更多列，可使用colspan属性。
若要合并两行或更多行，可使用rowspan属性。

<!DOCTYPE html>
<html>  
<body>
    <table border="1">
    <tr>
        <th>coulumn 1</th>
        <th>coulumn 2</th>
        <th>coulumn 3</th>
    </tr>
    <tr>
        <td rowspan="2">row1,cell1</td>	
        <td>row1,cell2</td>
        <td>row1,cell3</td>
    </tr>
    <tr>
        <td>row2,cell2</td>	
        <td>row2,cell3</td>
    </tr>
    <tr>
        <td colspan="3">row3 cell1</td>
    </tr>
    </table>
</body>
</html>

运行结果如下：

coulumn 1	coulumn 2	coulumn 3
row1,cell1	row1,cell2	row1,cell3
row1,cell1	row2,cell2	row2,cell3
row3 cell1

表格头部、主体、页脚

表格可氛围三个部分：头部、主体和页脚。其对应的标签是：

<thead>：创建单独的表头

<tbody>：表示表格的主体

<tfoot>：创建一个单独的表页脚

表可以包含多个<tbody>元素以指示不同的页面，<thread>和<tfoot>标签应出现在<tbody>之前。

<!DOCTYPE html>
<html>  
<body>
    <table border="1" width="100%">
    <thread>
        <tr>
            <td colspan="4">This is the head of the table</td>
        </tr>
    </thread>
    <tfoot>
        <tr>
            <td colspan="4">This is the foot of the table</td>	
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>cell1</td>	
            <td>cell2</td>	
            <td>cell3</td>
            <td>cell4</td>	
        </tr>
    </tbody>
    </table>
</body>
</html>

运行结果如下：

This is the head of the table
This is the foot of the table
cell1	cell2	cell3	cell4

表格的嵌套

在一个表中是使用另一个表：

<!DOCTYPE html>
<html>  
<body>
    <table border="1" width="100%">
    <tr>
        <td>
        <table border="1" width="100%">
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
        <tr>
            <td>张三</td>	
            <td>5000</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>7000</td>	
        </tr>
        </table>	
        </td>	
    </tr>
    </table>
</body>
</html>

运行结果如下：

Name	Salary
张三	5000
李四	7000

HTML表格标签总览

标签	描述
`<table>`	定义表格
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<caption>`	定义表格标题
`<colgroup>`	定义表格列的组
`<col>`	定义用于表格列的属性
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚

HTML列表

HTML支持有序列表、无序列表和自定义列表。

无序列表

无序列表是一个项目的列表，此列项目使用粗体原点进行标记。无序列表适合成员之间无级别顺序关系的情况，无序列表始于<ul>标签，每个列表项始于<li>标签：

<!DOCTYPE html>
<html>  
<body>
    <ul>
        <li>Coffee</li>
        <li>Mikk</li>
    </ul>
</body>
</html>

运行结果如下：

Coffee
Mikk

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表适合各项目之间存在顺序关系的情况，有序列表始于<ol>标签，每个列表项始于<li>标签：

<!DOCTYPE HTML>
<html>
<body>
    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>
</body>	
</html>

运行结果如下：

Coffee
Milk

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。<dt>与<dd>在自定义列表中的数量不限、对应关系不限。自定义列表始于<dl>标签，每个列表项始于<dt>标签，每个自定义列表项的定义始于<dd>：

<!DOCTYPE HTML>
<html>
<body>
    <dl>
        <dt>Coffee</dt>
            <dd>-black hot drink</dd>
        <dt>Milk</dt>
            <dd>-white cold drink</dd>
    </dl>
</body>	
</html>

运行结果如下：

HTML区块

<div>和<span>：

HTML可以通过<div>和<span>将元素组合起来

区块元素

大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束），如：<h1>、<p>、<ul>、<table>

内联元素

内联元素在显示时通常不以新行开始，如：<b>、<td>、<a>、<img>

`<div>`元素

<div>标签可以把文档分割为独立的、不同的部分，它是块级元素，可用于组合其他HTML元素的容器，常用于文档布局。<div>元素没有特定的含义，与CSS一同使用时，<div>元素可用于对大的内容块设置样式属性。

<!DOCTYPE HTML>
<html>
<body>
    <p>这是一些文本。</p>
    <div style="color:#00ffff">
        <h3>这是一个在div元素中的标题</h3>
        <p>这是一个在div元素中的文本</p>
    </div>
    <p>这是一些文本。</p>
</body>	
</html>

运行结果如下：

`<span>`元素

<span>元素是内联元素，可用作文本的容器，<span>元素也没有特定的含义，与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。

<!DOCTYPE HTML>
<html>
<body>
    <p>我有一双
        <span style="color:gold">金色</span>的
        <span style="font-size:50px">大眼睛</span>和一头
        <span style="color:blue">蓝色的头发</span>
    </p>
</body>	
</html>

运行结果如下：

我有一双金色的大眼睛和一头蓝色的头发

HTML布局

大多数网站可以使用<div>或<table>元素来创建多列。CSS用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

使用`<div>`元素

可以使用<div>元素来改变页面的布局，如使用5个div元素来创建多列布局：

<!DOCTYPE HTML>
<html>
<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;">
    	Copyright
    </div>
</div>
</body>	
</html>

运行结果如下：

使用表格

<!DOCTYPE HTML>
<html>
<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;">Copyright</td>
    </tr>	
    </table>
</body>	
</html>

运行结果如下：

网页的主标题
菜单 HTML CSS JavaScript	内容就在这里
Copyright

HTML表单

HTML表单用于收集不同类型的用户输入。

表单

表单是一个包含表单元素的区域，使用变大标签<form>来设置。表单元素允许用户在表单中输入内容，如文本域、下拉列表、单选框、复选框等。其形式如下：

<form>
    ...
	input elements
    ...
</form>

输入元素

多数情况下被用到的表单标签是输入标签<input>。<input>元素是最重要的表单元素，输入类型是由类型属性定义的。经常被用到的输入类型如下：

文本域

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

<!DOCTYPE HTML>
<html>
<body>
    <form>
        姓名：<input type="text" name="firstname"><br />
        电话号码：<input type="text" name="lastname">
    </form>
</body>	
</html>

运行结果如下：

密码字段

密码字段通过标签<input type="password">来定义，密码字段字符不会明文显示，而是以星号或圆点替代：

<!DOCTYPE HTML>
<html>
<body>
    <form>
        密码：<input type="password" name="pwd"><br />
    </form>
</body>	
</html>

运行结果如下：

单选按钮

表单单选框选项通过<input type="radio">来定义：

<!DOCTYPE HTML>
<html>
<body>
    <form>
        <input type="radio" name="sex" value="male">男<br />
        <input type="radio" name="sex" value="female">女
    </form>
</body>	
</html>

运行结果如下：

复选框

复选框通过<input type="checkbox">来定义，用户需要从若干给定的选择中选取一个或若干个选项：

<!DOCTYPE HTML>
<html>
<body>
    <form>
        <input type="checkbox" name="vehicle" value="Bike">我有自行车<br />
        <input type="checkbox" name="vehicle" value="Car">我有小车
    </form>
</body>	
</html>

运行结果如下：

提交按钮

提交按钮通过<input type="submit"来定义，当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名，由目的文件通常会对接收到的输入数据进行相关的处理：

<!DOCTYPE HTML>
<html>
<body>
    <form name="input" action="目标文件名" method="get">
    	Username:<input type="text" name="User">
        <input type="submit" value="按钮名称">
    </form>
</body>	
</html>

运行结果如下：

HTML框架

<iframe>标签规定一个内联框架。一个内联框架被用来在当前HTML文档中嵌入另一个文档。通过使用框架可以在浏览器窗口中显示不止一个页面。语法如下：

1 2	<iframe src="URL"></iframe> <!--该URL指向不同的网页，将窗口内容显示为URL地址指向页面-->

设置高度与宽度

height和width属性用来定义iframe标签的高度与宽度。属性默认以像素为单位，但也可以指定其按比例显示，如“80%”：

<!DOCTYPE HTML>
<html>
<body>
    <iframe src="tangmenjue.top.html" width="80%" height="80%"></iframe>
</body>	
</html>

运行结果如下：

移除边框

frameborder属性用于定义iframe表示是否显示边框。设置属性值为0时，移除iframe边框：

<!DOCTYPE HTML>
<html>
<body>
    <iframe src="tangmenjue.top.html" frameborder="0"></iframe>
</body>	
</html>

使用`iframe`来显示目录链接页面

iframe可以显示是一个目标链接的页面。目标链接的属性必须使用iframe属性：

<!DOCTYPE HTML>
<html>
<body>
    <iframe src="tangmenjue.top.html" name="iframe_a"></iframe>
    <p>
        <a href="http://tangmenjue.top/2020/01/09/hello-world/" target="iframe_a">tangmenjue.top</a>
    </p>
</body>	
</html>

`iframe`标准属性

属性	说明
class	规定元素的类名（classname）
id	规定元素的唯一 id
style	规定元素的行内样式（inline style）
title	规定元素的额外信息（可在工具提示中显示）

HTML颜色

HTML颜色采用的是RGB颜色，是通过对红绿蓝三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

Color Values

HTML颜色由一个十六进制符号来定义，这个符号由红绿蓝的值组成。每种颜色的最小值是0（十六进制：#00），最大值是255（十六进制：#FF）。在项目过程中若要查询颜色码时，可以使用RGB颜色值与十六进制颜色码转换工具来查询。

颜色名

目前所有浏览器都支持以下颜色名：

141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色+其余的124种），其中17标准颜色为：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。

141个颜色的颜色名及其对应的16进制值可使用RGB颜色对照表来查询。

HTML脚本

JavaScript是可插入HTML页面的编程代码，其使HTML页面具有更强的动态和交互性。

`<script>`标签

<script>标签用于定义客户端脚本，<script>元素既可包含脚本语句，也可通过src属性指向外部脚本文件，若使用src属性，则<script>元素必须是空的。JavaScript常用于图片操作、表单验证以及内容动态更新：

<!DOCTYPE HTML>
<html>
<script>
document.write("Hello world!")        
</script>
</html>
<!--运行结果如下-->
Hello world!

`<noscript>`标签

当浏览器禁用脚本或浏览器不支持客户端脚本时，<noscript>标签提供无法使用脚本时的替代内容。<noscript>元素支持全局属性，可包含普通HTML页面的body元素中能找到的所有元素。只有在浏览器禁用脚本或不支持客户端脚本时，才会显示<noscript>元素中的内容：

<!DOCTYPE HTML>
<html>
<script>
document.write("Hello world!")        
</script>
<noscript>Sorry,your browser does not support JavaScript!</noscript>
</html>

JavaScript示例代码

JavaScript直接在HTML输出：

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

JavaScript事件响应：

<!DOCTYPE HTML>
<html>
<body>
    <p id="demo">JavaScript can react to events.Like the click of a button.</p>
<script>
	function myFunction()
    {
    	document.getElementById("demo").innerHTML="Hello JavaScript!";
    }
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</html>

JavaScript处理HTML样式：

<!DOCTYPE HTML>
<html>
<body>
    <p id="demo">JavaScript can change the css.Like the click of a button.</p>
<script>
	function myFunction()
    {
    	x=document.getElementById("demo")
        x.style.color="#FF0000"
    }
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</html>

对于老式浏览器

若浏览器没法识别<script>标签，那么<script>标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发送，应将脚本隐藏在注释标签中。老式浏览器将忽略这些注释，便不会将标签的内容显示到页面上，而新版本的浏览器将会读懂这些脚本而执行它们，即使代码嵌套在注释标签内：

<!DOCTYPE HTML>
<html>
<body>
    <p id="demo">JavaScript can change the css.Like the click of a button.</p>
<script type="text/javascript">
    //<!--
    function myFunction()
    {
    	x=document.getElementById("demo")
        x.style.color="#FF0000"
    }
    //-->
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</html>

HTML字符实体

HTML中的预留字符必须被替换为字符实体，一些在键盘上找不到的字符也可以用字符实体来替换，实体名称对大小写敏感。

HTML实体

在HTML中，某些字符是保留的，不能使用包含这些字符的文本。

在HTML中不能使用小于号和大于号，浏览器会误以为它们是标签。若希望正确地显示预留字符，则必须在HTML源代码中使用字符实体，字符实体类似于：&entiy_name或&#entity_number;。若要显示小于号，必须写成：<或<或<。

一些字符实体如下：

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

不间断空格

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

浏览器会截断HTML页面中的空格。若要在页面增加空格的数量，可以使用字符实体 

结合音标符

发音符号是加到字母上的一个字形。

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

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

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

一些音标符如下：

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

HTML URL

URL是一个网页网站，可以由字母组成，也可以由ip地址组成。大多数人进入网站使用网站域名来访问。

URL（统一资源定位器）

Web浏览器通过URL从Web服务器请求页面。当您点击HTMl页面中的某个链接时，对应的<a>标签指向万维网上的一个地址。URL用于定位万维网上的文档。

URL的语法规则：

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

其中：

scheme:定义因特网服务的类型，最常见的类型是http
host：定义域主机（http的默认主机是www）
domain：定义因特网域名，比如tangmenjue.top
:port：定义主机上的端口号（http默认端口号是80）
path：定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）
filename：定义文档/资源的名称

常见的scheme类型如下：

Scheme	访问	用于
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

URL字符编码

URL只用使用ASCII字符集。

URL编码会将字符转换为可通过因特网传输的格式来通过因特网进行发送。由于URL常包含ASCII集合以外的字符，URL必须转换为有效的ASCII格式。

URL编码使用"%"号及其后跟随两位的十六进制数来替换非ASCII字符，URL不能包含空格，常用“+”号来替换空格。

原文作者：唐抉

原文链接：http://tangmenjue.top/2022/10/27/%E5%89%8D%E7%AB%AF%E4%B8%89%E4%BB%B6%E5%A5%97%E4%B9%8BHTML%EF%BC%88%E4%BA%8C%EF%BC%89/

发表日期：October 27th 2022, 5:07:08 pm

更新日期：October 27th 2022, 5:07:08 pm

Next Post

前端三件套之CSS（一）
Previous Post

前端三件套之HTML（一）

CATALOG

1. HTML符号
2. HTML表格
3. HTML列表
4. HTML区块
5. HTML布局
1. 5.1. 使用<div>元素
2. 5.2. 使用表格
6. 网页的主标题
7. HTML表单
1. 7.1. 表单
2. 7.2. 输入元素
8. HTML框架
9. HTML颜色
1. 9.1. Color Values
2. 9.2. 颜色名
10. HTML脚本
11. HTML字符实体
12. HTML URL
1. 12.1. URL（统一资源定位器）
2. 12.2. URL字符编码

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

前端三件套之HTML（二）

HTML符号

HTML符号实体

HTML 支持的一些数学符号

HTML 支持的一些希腊字母

HTML 支持的一些其他实体。

HTML表格

HTML表格的基本结构

表头单元格

表格标题

表格高度和宽度

表格背景

表格空间

合并单元格

表格头部、主体、页脚

表格的嵌套

HTML表格标签总览

HTML列表

无序列表

有序列表

自定义列表

HTML区块

区块元素

内联元素

<div>元素

<span>元素

HTML布局

使用<div>元素

使用表格

网页的主标题

HTML表单

表单

输入元素

文本域

密码字段

单选按钮

复选框

提交按钮

HTML框架

设置高度与宽度

移除边框

使用iframe来显示目录链接页面

iframe标准属性

HTML颜色

Color Values

颜色名

HTML脚本

<script>标签

<noscript>标签

JavaScript示例代码

对于老式浏览器

HTML字符实体

HTML实体

不间断空格

结合音标符

HTML URL

URL（统一资源定位器）

URL字符编码

`<div>`元素

`<span>`元素

使用`<div>`元素

使用`iframe`来显示目录链接页面

`iframe`标准属性

`<script>`标签

`<noscript>`标签

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`