前端学习——HTML
前端学习——HTML
- HTML 教程
-
- HTML 简介
-
- 什么是HTML?
- HTML 标签
- HTML 元素
- Web 浏览器
- 声明
- 通用声明
- HTML 元素
-
- HTML 元素语法
- HTML 空元素
- HTML 属性
- HTML 标题
- HTML 水平线
- HTML 注释
- HTML 段落
- HTML 折行
- HTML 文本格式化
-
- HTML 文本格式化标签
- HTML "计算机输出" 标签
- HTML 引文, 引用, 及标签定义
- HTML 链接
-
- HTML 链接语法
- HTML 链接 - target 属性
- HTML 链接- id 属性
- HTML 头部
-
- HTML < head> 元素
- HTML < title> 元素
- HTML < base> 元素
- HTML < link> 元素
- HTML < style> 元素
- HTML < meta> 元素
- HTML < script> 元素
- HTML 图像
-
- HTML 图像- 图像标签（ < img>）和源属性（Src）
- HTML 图像- Alt属性
- HTML 表格
-
- HTML 表格和边框属性
- HTML 表格表头
- HTML 表格标签
- HTML 列表
-
- HTML无序列表
- HTML 有序列表
- HTML 自定义列表
- HTML 列表标签
- HTML 区块
-
- HTML 区块元素
- HTML 内联元素
- HTML < div> 元素
- HTML < span> 元素
- HTML 分组标签
- HTML 表单
-
- HTML 表单
- HTML 表单 - 输入元素
-
- 文本域（Text Fields）
- 密码字段
- 单选按钮（Radio Buttons）
- 复选框（Checkboxes）
- 提交按钮(Submit Button)
- HTML 表单标签
- HTML 框架
-
- Iframe - 设置高度与宽度
- Iframe - 移除边框
- 使用iframe来显示目标链接页面
- HTML iframe 标签
- HTML 脚本
-
- HTML
HTML 教程
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
注意：对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。
HTML 简介
声明为 HTML5 文档元素是 HTML 页面的根元素元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。</code> 元素描述了文档的标题</li> <li><code><body></code> 元素包含了可见的页面内容</li> <li><code><h1></code> 元素定义一个大标题</li> <li><code><p></code>元素定义一个段落</li> </ul> <p>注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。</p> <h3>什么是HTML?</h3> <ul> <li>HTML 使用标记标签来描述网页</li> <li>HTML 文档包含了HTML 标签及文本内容</li> <li>HTML文档也叫做 web 页面</li> </ul> <h3>HTML 标签</h3> <ul> <li>HTML 标记标签通常被称为 HTML 标签 (HTML tag)</li> <li>HTML 标签是由尖括号包围的关键词，比如 <code><html></code></li> <li>HTML 标签通常是成对出现的，比如 <code><b></code>和 <code></b></code></li> <li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li> <li>开始和结束标签也被称为开放标签和闭合标签</li> </ul> <h3>HTML 元素</h3> <p>“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，</p> <h3>Web 浏览器</h3> <p>Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。<br> 浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。</p> <h3><!DOCTYPE> 声明</h3> <p>doctype 声明不区分大小写</p> <h3>通用声明</h3> <p>HTML5<br> <code><!DOCTYPE html></code><br> HTML 4.01<br> <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></code><br> XHTML 1.0<br> <code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code></p> <h2>HTML 元素</h2> <h3>HTML 元素语法</h3> <ul> <li>HTML 元素以开始标签起始,以结束标签终止,元素的内容是开始标签与结束标签之间的内容</li> <li>某些 HTML 元素具有空内容（empty content）,空元素在开始标签中进行关闭（以开始标签的结束而结束）</li> <li>大多数 HTML 元素可拥有属性</li> </ul> <h3></h3> <h3>HTML 空元素</h3> <ul> <li>没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。</li> <li><code><br></code> 就是没有关闭标签的空元素（<code><br></code> 标签定义换行）。</li> <li>在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。</li> <li>在开始标签中添加斜杠，比如 <code><br /></code>，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。</li> </ul> <h2>HTML 属性</h2> <p>属性是 HTML 元素提供的附加信息。</p> <ul> <li>属性一般描述于开始标签</li> <li>属性总是以名称/值对的形式出现，比如：name=“value”。</li> </ul> <h2>HTML 标题</h2> <p>标题（Heading）是通过 <code><h1></code> - <code><h6></code> 标签进行定义的。<br> <code><h1></code> 定义最大的标题。<code><h6></code> 定义最小的标题。<br> 注释: 浏览器会自动地在标题的前后添加空行。</p> <h2>HTML 水平线</h2> <p><code><hr></code>标签在 HTML 页面中创建水平线。<br> hr 元素可用于分隔内容。</p> <h2>HTML 注释</h2> <p>可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。<br> 注释写法如下:<br> <code><!-- 这是一个注释 --></code></p> <h2>HTML 段落</h2> <p>段落是通过 <code><p></code> 标签定义的。<br> 注意：浏览器会自动地在段落的前后添加空行。（<code></p></code> 是块级元素）</p> <h2>HTML 折行</h2> <p>如果希望在不产生一个新段落的情况下进行换行（新行），使用 <code><br></code>标签,<code><br /></code> 元素是一个空的 HTML 元素。</p> <h2>HTML 文本格式化</h2> <p>HTML 使用标签 <code><b></code>(“bold”) 与 <code><i></code>(“italic”) 对输出的文本进行格式, 如：<strong>粗体</strong> or <em>斜体</em><br> 通常标签 <code><strong></code> 替换加粗标签 <code><b></code>来使用, <code><em></code> 替换 <code><i></code>标签使用。然而，这些标签的含义是不同的：<br> <code><b></code> 与<code><i></code> 定义粗体或斜体文本。<br> <code><strong></code> 或者 <code><em></code>意味着你要呈现的文本是重要的，所以要突出显示。</p> <h3>HTML 文本格式化标签</h3> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code><b></code></td> <td>定义粗体文本</td> </tr> <tr> <td><code><em></code></td> <td>定义着重文字</td> </tr> <tr> <td><code><i></code></td> <td>定义斜体字</td> </tr> <tr> <td><code><small></code></td> <td>定义小号字</td> </tr> <tr> <td><code><strong></code></td> <td>定义加重语气</td> </tr> <tr> <td><code><sub></code></td> <td>定义下标字</td> </tr> <tr> <td><code><sup></code></td> <td>定义上标字</td> </tr> <tr> <td><code><ins></code></td> <td>定义插入字</td> </tr> <tr> <td><code><del></code></td> <td>定义删除字</td> </tr> </tbody> </table> <h3>HTML “计算机输出” 标签</h3> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code><code></code></td> <td>定义计算机代码</td> </tr> <tr> <td><code><kbd></code></td> <td>定义键盘码</td> </tr> <tr> <td><code><samp></code></td> <td>定义计算机代码样本</td> </tr> <tr> <td><code><var></code></td> <td>定义变量</td> </tr> <tr> <td><code><pre></code></td> <td>定义预格式文本</td> </tr> </tbody> </table> <h3>HTML 引文, 引用, 及标签定义</h3> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code><abbr></code></td> <td>定义缩写</td> </tr> <tr> <td><code><address></code></td> <td>定义地址</td> </tr> <tr> <td><code><bdo></code></td> <td>定义文字方向</td> </tr> <tr> <td><code><blockquote></code></td> <td>定义长的引用</td> </tr> <tr> <td><code><q></code></td> <td>定义短的引用语</td> </tr> <tr> <td><code><cite></code></td> <td>定义引用、引证</td> </tr> <tr> <td><code><dfn></code></td> <td>定义一个定义项目。</td> </tr> </tbody> </table> <h2>HTML 链接</h2> <p>HTML使用标签 <code><a></code>来设置超文本链接。在标签<code><a></code> 中使用了href属性来描述链接的地址。<br> 默认情况下，链接将以以下形式出现在浏览器中：</p> <ul> <li>一个未访问过的链接显示为蓝色字体并带有下划线。</li> <li>访问过的链接显示为紫色并带有下划线。</li> <li>点击链接时，链接显示为红色并带有下划线。</li> </ul> <p>注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。</p> <h3>HTML 链接语法</h3> <p><code><a href="url">链接文本</a></code><br> href 属性描述了链接的目标。.</p> <h3>HTML 链接 - target 属性</h3> <p>使用 target 属性，你可以定义被链接的文档在何处显示。</p> <h3>HTML 链接- id 属性</h3> <p>id属性可用于创建在一个HTML文档书签标记。<br> 提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。<br> 例如：<br> 在HTML文档中插入ID:<br> <code><a id="tips">有用的提示部分</a></code><br> 在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：<br> <code><a href="#tips">访问有用的提示部分</a></code><br> 或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：<br> <code><a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a></code><br> more:<br> 创建图片链接:<br> <code><a href="//www.runoob.com/html/html-tutorial.html"><img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></code><br> 创建无边框的图片链接:<br> <code><a href="//www.runoob.com/html/html-tutorial.html"><img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></code><br> 在当前页面链接到指定位置(使用书签):<br> <code><p><a href="#C4">查看章节 4</a></p></code><br> <code><h2>章节 1</h2></code><br> <code><p>这边显示该章节的内容……</p></code><br> <code><h2>章节 2</h2></code><br> <code><p>这边显示该章节的内容……</p></code><br> <code><h2>章节 3</h2></code><br> <code><p>这边显示该章节的内容……</p></code><br> <code><h2><a id="C4">章节 4</a></h2></code><br> <code><p>这边显示该章节的内容……</p></code><br> <code><h2>章节 5</h2></code><br> <code><p>这边显示该章节的内容……</p></code><br> 跳出框架：<br> <code><a href="//www.runoob.com/" target="_top">点击这里!</a></code><br> 创建电子邮件链接[链接到一个邮件（在安装邮件客户端程序后才能工作）]:<br> <code><a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">发送邮件</a></code><br> <code><a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a></code><br> 注意: 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。</p> <h2>HTML 头部</h2> <p><code><title></code> -定义HTML文档的标题<br> <code><base></code> -定义页面中所有链接默认的链接目标地址<br> <code><meta></code> - 提供了HTML文档的meta标记(描述HTML文档的描述，关键词，作者，字符集等。)</p> <h3>HTML < head> 元素</h3> <p><code><head></code> 元素包含了所有的头部标签元素。在 <code><head></code>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。<br> 可以添加在头部区域的元素标签为: <code><title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base></code>。</p> <h3>HTML < title> 元素</h3> <p><code><title></code>标签定义了不同文档的标题。<br> <code><title></code> 在 HTML/XHTML 文档中是必须的。<br> <code><title></code> 元素:</p> <ul> <li>定义了浏览器工具栏的标题</li> <li>当网页添加到收藏夹时，显示在收藏夹中的标题</li> <li>显示在搜索引擎结果页面的标题</li> </ul> <p>注：<br> HTML<code><title></code>元素不仅可以显示文本，也可以在左侧显示logo等图片。<br> 显示时，要将<code><link></code>标签放入<code><head></code>里。<br> <code><head></code><br> <code><link rel="shortcut icon" href="图片url"></code><br> <code><title>这是一个带图片的标签
HTML < base> 元素
HTML < link> 元素
标签定义了文档与外部资源之间的关系。
标签通常用于链接到样式表:
HTML < style> 元素
HTML < meta> 元素
meta标签描述了一些基本的元数据。
标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
使用实例:
为搜索引擎定义关键词:
为网页定义描述内容:
定义网页作者:
每30秒钟刷新当前页面:
HTML < script> 元素
HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。HTML 实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：
&entity_name;
或
&#entity_number;
如需显示小于号，我们必须这样写：<或<或<
提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。不间断空格(Non-breaking Space)
HTML 中的常用字符实体是不间断空格(
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用结合音标符
发音符号是加到字母上的一个"glyph(字形)"。
一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。
变音符号可以与字母、数字字符的组合来使用。
以下是一些实例:音标符 字符 Construct 输出结果 ̀ a àà ́ a áá ̂ a ââ ̃ a ãã ̀ O ÒÒ ́ O ÓÓ ̂ O ÔÔ ̃ O ÕÕ HTML字符实体
注：实体名称对大小写敏感！
显示结果 描述 实体名称 实体编号 空格 < 小于号 <<> 大于号 >>& 和号 &"" 引号 "’ 撇号 ' (IE不支持)'￠ 分 ¢¢£ 镑 ££¥ 人民币/日元 ¥¥€ 欧元 €€§ 小节 §§© 版权 ©©® 注册商标 ®®™ 商标 ™™× 乘号 ××÷ 除号 ÷÷HTML URL
HTML 统一资源定位器(Uniform Resource Locators)
URL 是一个网页地址。
URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住。URL - 统一资源定位器
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时，对应的标签指向万维网上的一个地址。
一个统一资源定位器(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 - 定义文档/资源的名称
常见的 URL Scheme
以下是一些URL scheme：
Scheme 访问 用于… http 超文本传输协议 以 http:// 开头的普通网页。不加密。 https 安全超文本传输协议 安全网页，加密所有信息交换。 ftp 文件传输协议 用于将文件下载或上传至网站。 file 您计算机上的文件。 URL 字符编码
URL 只能使用 ASCII 字符集.
来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
URL 编码实例字符 URL 编码 € %80 £ %A3 © %A9 ® %AE À %C0 Á %C1 Â %C2 Ã %C3 Ä %C4 Å %C5 HTML 速查列表
HTML 基本文档
文档标题
可见文本...
基本标签（Basic Tags）
最大的标题
. . .
. . .
. . .
. . .
最小的标题
这是一个段落。
（换行）
（水平线）
文本格式化（Formatting）
粗体文本
计算机代码
强调文本
斜体文本
键盘输入
预格式化文本
更小的文本
重要的文本（缩写）
（联系信息）
（文字方向）
（从另一个源引用的部分）
（工作的名称）
（删除的文本）
（插入的文本）
（下标文本）
（上标文本）
链接（Links）
普通的链接：链接文本
图像链接：
邮件链接： 发送e-mail
书签：
提示部分
跳到提示部分
图片（Images）
样式/区块（Styles/Sections）
文档中的块级元素
文档中的内联元素
无序列表
- 项目
- 项目
有序列表
第一项 第二项 定义列表
项目 1 描述项目 1 项目 2 描述项目 2 表格（Tables）
表格标题
表格标题
表格数据
表格数据
框架（Iframe）
表单（Forms）
实体（Entities）
< 等同于 <> 等同于 >© 等同于 © 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 | 变量（文本） |
XHTML简介
HTML - XHTML
XHTML 是以 XML 格式编写的 HTML。
什么是 XHTML?
- XHTML 指的是可扩展超文本标记语言
- XHTML 与 HTML 4.01 几乎是相同的
- XHTML 是更严格更纯净的 HTML 版本
- XHTML 是以 XML 应用的方式定义的 HTML
- XHTML 是 2001 年 1 月发布的 W3C 推荐标准
- XHTML 得到所有主流浏览器的支持
为什么使用 XHTML?
因特网上的很多页面包含了"糟糕"的 HTML。 这是一个段落
如果在浏览器中查看，下面的 HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）：
不规范的 HTML
XML 是一种必须正确标记且格式良好的标记语言。
今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。
所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。
与 HTML 相比最重要的区别：
文档结构
XHTML DOCTYPE 是强制性的
中的 XML namespace 属性是强制性的
、、
文档内容
XHTML 元素必须合理嵌套
在 HTML 中，一些元素可以不互相嵌套，像这样： 这是一个段落 这是另外一个段落 这是一个段落 这是另外一个段落 这是一个段落 这是一个段落 1.添加一个 XHTML 到你的网页中
粗体和斜体文本
在 XHTML 中，所有的元素都必须互相合理地嵌套，像这样：
粗体和斜体文本
XHTML 元素必须有关闭标签
错误示例：
正确示例：
空元素必须包含关闭标签
错误示例：
分行:
水平线:
图片: 
正确示例：
分行:
水平线:
图片:
XHTML 元素必须是小写
错误示例:
正确示例：
属性名称必须是小写
错误示例：
正确示例:
属性值必须有引号
错误示例：
正确示例：
不允许属性简写
错误示例：
正确示例：
如何将 HTML 转换为 XHTML
2.添加 xmlns 属性添加到每个页面的html元素中。
3.改变所有的元素为小写
4.关闭所有的空元素
5.修改所有的属性名称为小写
6.所有属性值添加引号你可能感兴趣的:(前端,html)