基础
元素
-
HTML元素以开始标签起始,以结束标签终止
<h>标题</h>`<p>` 段落 `</p>` -
元素的内容是开始标签与结束标签之间的内容
<br>(在br标签前的一段文字后直接跳转至下一行) -
某些空元素在开始标签事就进行关闭
-
大多数元素可以拥有属性
属性
-
属性可以在元素中添加附加信息
-
属性一般描述于开始标签
-
属性总是以名称/值对的形式出现，比如：name="value"
HTML 链接由
<a>标签定义。链接的地址在 href 属性中指定：<a href="http://www.runoob.com">这是一个链接</a> -
属性一般使用小写
-
一般情况属性值应该被引用在双引号内,但是如果本身属性值就含有双引号,那么就必须使用单引号来对属性值引用
-
完整的HTML属性列表 HTLM标签参考手册
-
更多标准属性说明HTML 标准属性参考手册
标题
-
标题(Heading)是通过
<h1>-<h6>标签来进行定义的 -
<h1>定义的标题最大,<h6>定义的标题最小
段落
-
段落是通过
<p>标签定义的。 -
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
<br>标签 -
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
-
如果需要连续多个空格和连续多行换行,则需要使用
<pre>
文本格式化
-
文本格式化形式:
<文本格式开始标签> 文本内容 <文本格式结束标签>
-
< pre > 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体.
-
< a >元素可以实现HTML文件中写地址
格式:
<a href="地址"> 地址显示名</a> -
更多文本格式化信息点击查阅
链接
-
herf属性描述了链接的目标
<a href="url">链接文本</a> -
target属性
使用 target 属性，你可以定义被链接的文档在何处显示。如果你将 target 属性设置为 "_blank", 链接将在新窗口打开.
-
id属性
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在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> -
-
HTML超链接还可以以图片形式链接、直接跳转到指定位置等
更多实例点击此处查看
头部
- 元素包含了所有的头部标签元素。在 < head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: < title>, < style>, < meta>, < link>, < script>, < noscript> 和 < base>。
-
< title> 标签定义了不同文档的标题。
< title> 在 HTML/XHTML 文档中是必须的。
< title> 元素:
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
-
< base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
<head> <base href="http://www.runoob.com/images/" target="_blank"> </head> 之后的所有链接都会以_blank的模式打开 -
< link> 标签定义了文档与外部资源之间的关系。
< link> 标签通常用于链接到样式表:
-
< style> 标签定义了HTML文档的样式文件引用地址.
在< style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> 页面背景色变为黄色,字的颜色变为蓝色 -
-
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"> -
-
< script>标签用于加载脚本文件，如： JavaScript。
< script> 元素在以后的章节中会详细描述。
HTML样式CSS
-
如何使用CSS
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 区域使用
HTML 图像
-
图像标签（ < img>）和源属性（Src）
-
在 HTML 中，图像由< img> 标签定义。
-
< img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
-
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
-
URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
<img src="url" alt="some_text">- 浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
-
-
Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
<img src="boat.gif" alt="Big Boat"> -
设置图像的高度与宽度
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素:
提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
<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>HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>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. HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 < ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2. HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于
- 标签。每个列表项始于
- 标签。
列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
-
HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以
-
标签开始。每个自定义列表项以
开始。每个自定义列表项的定义以
- 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML 区块
-
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: < h1>, < p>, < ul>, < table>
-
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: < b>, < td>, < a>, < img>
-
HTML < div> 元素
HTML
元素是块级元素，它可用于组合其他 HTML 元素的容器。元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，< div> 元素可用于对大的内容块设置样式属性。
< div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 < table> 元素进行文档布局不是表格的正确用法。< table> 元素的作用是显示表格化的数据。
-
HTML < span> 元素
HTML < span> 元素是内联元素，可用作文本的容器
< span> 元素也没有特定的含义。
当与 CSS 一同使用时，< span> 元素可用于为部分文本设置样式属性。
HTML 布局
使用 HTML
标签是创建布局的一种简单的方式。 大多数站点可以使用
HTML 表单和输入
1. HTML 表单用于收集不同类型的用户输入。
2. 表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 < form> 来设置:
<form>
.
input 元素
.
</form>
-
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签（）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
-
文本域（Text Fields）
文本域通过< input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>浏览器显示如下：
First name:
Last name: -
密码字段
密码字段通过标签< input type=“password”> 来定义:
<form> Password: <input type="password" name="pwd"> </form>浏览器显示效果如下:
Password: -
单选按钮（Radio Buttons）
< input type=“radio”> 标签定义了表单单选框选项
Male<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
Female -
复选框（Checkboxes）
< input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
I have a bike<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
I have a car -
提交按钮(Submit Button)
< input type=“submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
Username:<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
-
HTML 框架
<iframe src="URL"></iframe>
该URL指向不同的网页
HTML 颜色
颜色值
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
HTML 脚本
-
JavaScript 使 HTML 页面具有更强的动态和交互性。
HTML < script> 标签
< script> 标签用于定义客户端脚本，比如 JavaScript。
< script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
-
HTML< noscript> 标签
< noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
< noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 < noscript> 元素中的内容：
HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
-
HTML实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：
&entity_name;
或
&#entity_number;
如需显示小于号，我们必须这样写：< 或 < 或 <
HTML URL
URL 是一个网页地址。
URL可以由字母组成，如"runoob.com"，或互联网协议（IP） 地址： 192.68.20.50。大多数人进入网站使用网站域名来访问,因为 名字比数字更容易记住。
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 - 定义文档/资源的名称
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
