搜索

HTML 教学

基本介绍

认识 HTML 使用 HTML 编辑器

基础知识

HTML 标签与架构 HTML 格式规范 HTML 缩排与注解 HTML 元素显示类型 HTML 元素属性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸单位 HTML 网址与路径 HTML 套用 CSS 样式 HTML 套用 JavaScript 如何观察 HTML 源代码

网页信息元素

网页标题 <title> 网页信息 <meta> 加载外部资源 <link> 重设根目录 <base>

常用元素

标题 <h1>~<h6> 段落 <p> 行内容器 <span> 区块容器 <div> 超链接 <a> 图片 <img> 换行 <br> 水平分隔线 <hr> 内嵌页框 <iframe>

文字样式元素

粗体字 <strong><b> 斜体字 <em><i> 删除线文字 <del> 插入 ( 底线 ) 文字 <ins> 小型文字 <small> 上标下标 <sup><sub> 凸显文字 <mark> 引用 <blockquote><q> 预先格式化 <pre> 程序码内容 <code> 收折文字内容 <details> 标示注音 <ruby><rt> 标示联络方式 <address> 标示键盘按键 <kbd> 标示时间日期 <time> 标示缩写 <abbr> 标示可换行位置 <wbr>

表格&清单元素

无序清单 <ul><li> 有序清单 <ol><li> 自订清单 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表单元素

表单 <form> 输入 <input> 按钮 <button> 多行文字输入 <textarea> 下拉选单 <select> 进度条 <progress> 字段标题 <label> 字段数据清单 <datalist> 表单元素分组 <fieldset>

语意结构元素

页首区块 <header> 主要区块 <main> 章节区块 <section> 文章区块 <article> 侧边栏区块 <aside> 引用区块 <figure> 导航链接区块 <nav> 页尾区块 <footer>

影音&图形元素

播放影片 <video> 播放声音 <audio> 响应式图片 <picture> 点阵画布 <canvas> 向量图形 <svg>

弹出视窗

alert() 警告视窗 confirm() 确认视窗 prompt() 输入视窗

网页嵌入应用

嵌入 YouTube 影片 嵌入 Google 地图 嵌入 Google 日历 嵌入 Google 表单 嵌入 Google 简报 嵌入 Google 文件 嵌入 Google 试算表 嵌入 Google 试算表图表 嵌入 Twitter 推文 嵌入 Facebook 粉丝团 嵌入 Facebook 影片 嵌入 Canva 简报 嵌入 Scratch 创作

HTML 特殊字元

由于 HTML 是标记语言,在撰写语法时常常会使用一些特殊字元作为标记,例如大于小于符号、单引号双引号...等,因此如果想要透过浏览器呈现这些字元,就必须使用指定的字元编码,这篇教学将会列出常用的特殊字元编码。

常用特殊字元

虽然现在的浏览器已经可以呈现大部分的特殊字元,但仍有少数无法呈现 ( 特别是跟 HTML 语法相同的字元 ),如果需要正确呈现,则需使用下方的实体名称或字元编码。

完整特殊符号可以参考:特殊符号、特殊字元

字元 实体名称 字元编码
不换行空格    
< &lt; &#60;
> &gt; &#62;
" &quot; &#34;
' &apos; &#39;
& &amp; &#38;

例如下方的 HTML,就算两个字母之间在程序码中有“多个空白”,但是呈现出的结果也会只有一个空白 ( HTML 规范一次最多只出现一个空白 )。

<p>hello          world</p>

HTML 教学 - HTML 特殊字元 - 无法连续空白

如果要让画面正确呈现,就必须使用“不换行空格”的编码 &#160; 或实体名称 &nbsp;。

<p>hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world</p>

HTML 教学 - HTML 特殊字元 - 可以连续空白

小结

现在的浏览器已经支援大多数的特殊字元,因此除了本篇列出的特殊字元需要使用编码呈现外 ( 单引号与双引号通常也支援 ),其他特殊符号应该都可直接呈现。

意见反馈

微信二维码 微信扫码关注 抖音二维码 抖音扫码关注