HTML之初级入门
一、简介
编辑器
-
学习 HTML 最好的方式就是边学边实践；
-
最简单的方式：在本地电脑上创建一个txt文件，保存成html格式，通过浏览器打开，没修改一下txt文件，刷新一下浏览器即可同步效果；
-
推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。
什么是 HTML？
HTML 是用来描述网页的一种语言
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)；
-
HTML 不是一种编程语言，而是一种标记语言 (markup language)；
-
标记语言是一套标记标签 (markup tag)；
-
HTML 使用标记标签来描述网页。
HTML 文档
HTML 文档也被称为网页
-
HTML 文档描述网页；
-
HTML 文档包含 HTML 标签和纯文本；
-
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
-
HTML 标签是由尖括号包围的关键词，比如 <html>；
-
HTML 标签通常是成对出现的，比如 <b> 和 </b>；
-
标签对中的第一个标签是开始标签，第二个标签是结束标签；
-
开始和结束标签也被称为开放标签和闭合标签。
HTML 元素语法
-
HTML 元素以开始标签起始，以结束标签终止；
-
元素的内容是开始标签与结束标签之间的内容；
-
某些 HTML 元素具有空内容(empty content)，空元素在开始标签中进行关闭，以开始标签的结束而结束；
-
大多数 HTML 标签元素拥有一系列的属性；
-
HTML 标签对大小写不敏感，属性和属性值对大小写也不敏感。推荐都用小写。
HTML 属性
-
HTML 标签可以拥有属性，提供了有关 HTML 元素的更多信息；
-
属性总是以 名称/值对 的形式出现，比如：name="value"；
-
属性总是在 HTML 元素的开始标签中规定；
-
属性值应该始终被包括在引号内。双引号是最常用的，在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号。
HTML 样式
-
style 属性提供了一种改变所有 HTML 元素样式的通用方法；
-
在 HTML 4 中，请避免使用这些被废弃的标签和属性，未来版本的HTML和XHTML中将不再提供支持，推荐使用CSS样式代替。
| 标签 | 描述 | 备注：替换的均为属性 |
|---|---|---|
| <center> | 定义居中的内容 | |
| <font> 和 <basefont> | 定义 HTML 字体 | font-family font-size color |
| <s> 和 <strike> | 定义删除线文本 | |
| <u> | 定义下划线文本 | |
| 属性 | 描述 | 备注：替换的均为属性 |
| align | 定义文本的对齐方式 | text-align |
| bgcolor | 定义背景颜色 | background-color |
| color | 定义文本颜色 |
示例Demo
<html>
<body bgcolor="yellow">
<h1 style="text-align:center; color:blue;">我的第一个标题，在页面中进行了居中排列</h1>
<p>我的第一个段落。</p>
</body>
</html>
-
<html> 与 </html> 之间的文本描述网页；
-
<body> 与 </body> 之间的文本是可见的页面内容；
-
<h1> 与 </h1> 之间的文本被显示为标题；
-
<p> 与 </p> 之间的文本被显示为段落；
-
通过 style 属性进行一系列的样式设置。
二、常用标签
HTML 标题
-
标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题；<h6> 定义最小的标题；
-
默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如标题、段落等元素前后；
-
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题，因为搜索引擎会使用标题，为网页的结构和内容编制索引；
-
<hr />标签：在 HTML 页面中创建水平线，可用于分隔内容。
HTML 段落
-
段落是通过 <p> 标签定义的；
-
浏览器会自动地在段落的前后添加空行( <p> 是块级元素)；
-
使用空的段落标记 <p></p> 去插入一个空行是个坏习惯，推荐使用 <br /> 标签代替它；
-
HTML 代码中的所有连续的空行(换行)，都会被显示为一个空格；
-
如果希望在不产生一个新段落的情况下进行换行 (新行)，请使用 <br /> 标签。
HTML 链接
-
HTML 使用超级链接与网络上的另一个文档相连，点击链接可以从一张页面跳转到另一张页面；
-
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手；
-
开始标签和结束标签之间的文字被作为超级链接来显示；
-
通过使用 <a> 标签在 HTML 中创建链接，有2种方法：
- href 属性：创建指向另一个文档的链接
- name 属性：创建文档内的书签
- 使用 name 属性创建 HTML 页面中的书签，它不会以任何特殊方式显示，对读者是不可见的。实现步骤：
- 命名锚(named anchors)，即页面中某小节的位置，点击链接时，会跳转到该位置，实现页面内容的快速导航
# 创建锚，name可以任意命名
<a name="tips">跳转到目标位置的文字内容</a>
- 创建页面内链接
<a href="#tips">链接处的文字内容</a>
- 如果需要从别的页面跳转到该页面位置，链接的 href 属性值：该页面网址后加井号(#)和锚名称；
- 如果浏览器找不到已定义的锚名称，那么就会定位到页面的顶端，不会有错误发生。
-
特别地，设置target="_blank" 时，被链接的页面，将在新的标签页中打开；
-
请始终将正斜杠添加到子文件夹，如：href="http://www.w3school.com.cn/html/"。假如链接忽略了最后的正斜杠：href="http://www.w3school.com.cn/html"，会向服务器产生两次 HTTP 请求，因为服务器会添加正斜杠到这个地址，然后创建一个新的请求。
HTML 列表
-
HTML 支持有序、无序和定义列表。三种不同类型的列表项目，可以进行各种嵌套；
-
列表项内部均可以使用段落、换行符、图片、链接以及其他列表等；
-
无序列表
- 无序列表是一个项目列表，项目使用粗体圆点进行标记；
- 无序列表使用 <ul> 标签，每个列表项使用 <li>；
- <ul> 标签的type属性，可以设置不同类型的无序列表，为disc表示实心圆点、为circle表示空心圆点、为square时表示实心方框。
<ul>
<li> python</li>
<li> Java </li>
</ul>
- 有序列表
- 有序列表也是一个项目列表，列表项目使用数字进行标记；
- 有序列表使用 <ol> 标签，每个列表项始于 <li> 标签；
- <ol> 标签，默认情况下，序列号为1，2， 3。其type属性可以设置不同类型的有序列表，为A时表示大写英文字母、为a时表示小写英文字母、为大写 I 时表示罗马字母、为小写 i 时表示小写罗马字母。
<ol>
<li> Window</li>
<li> Mac </li>
</ol>
- 定义列表
- 自定义列表不仅仅是一个项目列表，而是项目及其注释的组合；
- 自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，而每个自定义列表项的定义以 <dd> 开始；
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
示例Demo
- 代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是一个段落</p>
<p>这是另外一个段落</p>
<a href="http://www.w3school.com.cn">这是一个链接</a>
<br><br />
<img src="/Users/******/image1.jpg" width="400" height="300" />
</body>
</html>
-
效果图
三、基础知识
HTML <head> 元素
-
HTML <head> 元素是所有头部元素的容器，可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等；
-
<title>：定义文档的标题，在所有 HTML/XHTML 文档中都是必需的；
-
<base>：为页面上的所有链接规定默认地址或默认目标(target)；
-
<link>：定义文档与外部资源之间的关系；
-
<meta>：提供关于 HTML 文档的元数据信息；
-
<script>：定义客户端脚本，比如 JavaScript；
-
<style>：为 HTML 文档定义样式信息。
HTML 颜色名
- 基于HTML 4.0 标准，大多数浏览器支持常用的颜色名；
- 有16种：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow；
- 如果使用其它颜色的话，可使用十六进制的颜色值。
HTML 文本格式化
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字等。
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <strong> | 定义加重语气 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <big> | 定义大号字 |
| <small> | 定义小号字 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <code> | 定义计算机代码 |
| <bdo> | 定义文字方向，反向输出显示 |
| <pre> | 定义预格式文本，保留多个空格或空行 |
| <address> | 定义地址 |
HTML块
-
通过标签 <div> 和 <span>，可以将 HTML 元素组合起来，定义为块级元素或内联元素；
-
HTML <div> 元素
- HTML <div> 元素是块级元素，是组合其他 HTML 元素的容器，没有特定的含义，浏览器显示时，通常会在其前后进行换行；
- 与 CSS 一同使用时，<div> 元素用于对大的内容块设置样式属性；
<div> 元素也常用于文档布局，它取代了使用表格(<table>元素)定义布局的老式方法。<table> 元素的主要作用是显示表格化的数据； - 例子：<h1>, <p>, <ul>, <table>
- HTML <span> 元素
- HTML <span> 元素是内联元素，可用作文本的容器，没有特定的含义，浏览器显示时，通常不会进行换行；
- 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性；
- 例子：<b>, <td>, <a>, <img>
HTML 框架
- 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面，并且每个框架都独立于其他的框架。
- 使用框架的坏处：开发人员必须同时跟踪更多的HTML文档；很难打印整张页面；
- 框架结构标签(<frameset>)定义如何将窗口分割为框架，每个frameset 定义了一系列行或列，其rows/columns 的值规定了每行或每列占据屏幕的面积；其子标签 <frame> 定义了放置在每个框架中的HTML 文档；
- 如果一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况，可以在 <frame> 标签中加入noresize="noresize"；
- 特别地，不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！
- HTML <iframe> 标签，用于在网页内显示网页，定义内联的子窗口。其常用的4个属性：src表示嵌入的网页、height表示 iframe 的高度、width 表示 iframe 的宽度、frameborder 表示是否显示 iframe 边框。
HTML CSS
-
使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，移入一个独立的样式表；
-
当浏览器读到一个样式表，它会按照这个样式表，对文档进行格式化；
-
外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，实现更改一个文件来改变整个站点的外观；
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 内联样式：当特殊的样式需要应用到个别元素时，可以使用内联样式，即在相关的标签中使用样式属性，可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
四、其它
-
<!DOCTYPE> 声明HTML版本，帮助浏览器正确地显示网页。Web 世界中存在许多不同的文档，只有了解文档的版本类型，浏览器才能正确地显示文档，需要注意：<!DOCTYPE> 并不是 HTML 标签；
-
<! -- 注释内容 -->标签：在HTML代码中插入注释，增强可读性。开始括号之后(左边的括号)需要紧跟一个叹号，结束括号之前(右边的括号)不需要； -
HTML 中的文件路径，推荐使用相对路径。绝对文件路径是指向一个因特网文件的完整 URL，相对路径指向了相对于当前页面的文件，不会与当前的 URL 进行绑定，便于后续更新和维护；
-
HTML <script> 标签用于定义客户端脚本，使 HTML 页面具有更强的动态和交互性，比如 JavaScript。script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件，必需的 type 属性，用来声明脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新等。
