基础
HTML 标题(Heading)是通过<h1> – <h6> 标签来定义的。
HTML 段落是通过标签 <p> 来定义的。
HTML 链接是通过标签 <a> 来定义的。
<a href="http://tingyuzhe.rovn.ink/">这是链接</a>//在 href 属性中指定链接的地址。
HTML 图像是通过标签 <img> 来定义的。
<img src="/images/logo.png" width="258" height="39" />//图像的名称和尺寸是以属性的形式提供
元素
开始标签 * | 元素内容 | 结束标签 * |
---|---|---|
<p> | 这是一个段落 | </p> |
<a href=”default.htm”> | 这是一个链接 | </a> |
<br> | 换行 |
*开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。
*元素的内容是开始标签与结束标签之间的内容
*某些 HTML 元素具有空内容(empty content)
*空元素在开始标签中进行关闭(以开始标签的结束而结束)
*大多数 HTML 元素可拥有属性
<p>元素定义段落
<body>元素定义文章主体
<html>元素定义整个html文章
<html> <body> <p>tingyuzhe的一个橘子</p> </body> </html>
关闭标签是可选的,但不要依赖浏览器,忘记使用会产生不可预料的结果或错误
HTML标签对大小写不敏感,但推荐使用小写
属性
*HTML 元素可以设置属性
*属性可以在元素中添加附加信息
*属性一般描述于开始标签
*属性总是以名称/值对的形式出现,比如:name=”value”
<a href="http://tingyuzhe.rovn.ink/">这是一个链接</a>
文字被标签标记,属性赋给文字内涵
属性值应该始终被包裹在引号中,双引号比较常用,但单引号也没问题
在某些个别的情况下,比如属性值本身就含有双引号,那么就必须使用单引号
HTML属性和属性值同样对大小写不敏感,但推荐使用小写
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |
标题
标题(Heading)是通过 <h1> – <h6> 标签进行定义的。<h1> 定义最大的标题,<h6> 定义最小的标题。
水平线
<hr> 标签在 HTML 页面中创建水平线,用于分割内容。
HTML注释
<!--这是一个注释-->
HTML段落
<p>这是我的注释</p>
浏览器会自动地在段落前后添加空行
HTML折行
在不产生新段落(空行)的情况换行,请使用<br>标签
HTML输出注意事项
无法确定确切效果,无法通过添加空格符或换行来改变输出效果,因为浏览器会自动移除多余的空格或换行,算作一个空格。
HTML格式化标签
html使用标签对文本进行格式化
如
<b>粗体文本</b> <i>斜体文本</i> <strong>粗体文本</strong> <em>斜体文本</em>
<b>与<strong>等效,<i>与<em>等效,但等效不代表意义相同,<b><i>是单纯格式变化,而<strong><em>代表强调,意味着你要呈现的文本是重要的,所以要突出显示。
HTML 文本格式化标签
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
预格式文本
使用<pre>标签来预格式化文本,使文本按你设置好的格式(空格个数、换行等)输出。
<pre> 这是一段有 空格的字 </pre>
HTML “计算机输出” 标签
标签 | 描述 |
---|---|
<code> | 定义计算机代码 |
<kbd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
标签 | 描述 |
---|---|
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用语 |
<cite> | 定义引用、引证 |
<dfn> | 定义一个定义项目。 |
HTML链接
HTML使用标签 <a> 来设置超文本链接,在标签 <a> 中使用了 href 属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线。
注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
HTML 链接语法
以下是 HTML 中创建链接的基本语法和属性:<a>
元素:创建链接的主要HTML元素是<a>
(锚)元素。<a>
元素具有以下属性:
href
:指定链接目标的URL,这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。target
(可选):指定链接如何在浏览器中打开。常见的值包括_blank
(在新标签或窗口中打开链接)和_self
(在当前标签或窗口中打开链接)。title
(可选):提供链接的额外信息,通常在鼠标悬停在链接上时显示为工具提示。rel
(可选):指定与链接目标的关系,如 nofollow、noopener 等。
链接的 HTML 代码很简单,它类似这样:
<a href="url">链接文本</a>
href 属性描述了链接的目标。
<a href="http://tingyuzhe.rovn.ink/">访问</a>
上面这行代码显示为:访问tingyuzhe‘site
点击这个超链接会把用户带到tingyuzhe的首页。
提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
文本链接:最常见的链接类型是文本链接,它使用 <a> 元素将一段文本转化为可点击的链接,例如:
<a href="https://www.example.com">访问示例网站</a>
图像链接:您还可以使用图像作为链接。在这种情况下,<a> 元素包围着 <img> 元素。例如:
<a href="https://www.example.com"> <img src="example.jpg" alt="示例图片"> </a>
锚点链接:除了链接到其他网页外,您还可以在同一页面内创建内部链接,这称为锚点链接。要创建锚点链接,需要在目标位置使用 <a> 元素定义一个标记,并使用#符号引用该标记。例如:
<a href="#section2">跳转到第二部分</a> <!-- 在页面中的某个位置 --> <a name="section2"></a>
name已弃用,可用id代替
下载链接:如果您希望链接用于下载文件而不是导航到另一个网页,可以使用 download 属性。例如:
<a href=“document.pdf” download>下载文档</a>
html头部
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
HTML <title> 元素
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必需的。
<title> 元素:
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时,显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
一个简单的 HTML 文档:
HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
HTML <meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
<meta> 一般放置于 <head> 区域
<meta> 标签- 使用实例
为搜索引擎定义关键词:
<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">
HTML <script> 元素
<script>标签用于加载脚本文件,如: JavaScript。
<script> 元素在以后的章节中会详细描述。
HTML head 元素
标签 | 描述 |
---|---|
<head> | 定义了文档的信息 |
<title> | 定义了文档的标题 |
<base> | 定义了页面链接标签的默认链接地址 |
<link> | 定义了一个文档和外部资源之间的关系 |
<meta> | 定义了HTML文档中的元数据 |
<script> | 定义了客户端的脚本文件 |
<style> | 定义了HTML文档的样式文件 |
CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用”style” 属性
- 内部样式表-在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用-使用外部 CSS 文件
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style=“color:blue;margin–left:20px;“>这是一个段落。</p>
背景色属性(background-color)定义一个元素的背景颜色:
<body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p> </body>
HTML 样式实例 – 字体, 字体颜色 ,字体大小
我们可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:
现在通常使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义文本样式,而不是使用<font>标签。
HTML 样式实例 – 文本对齐方式
使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<head> <style type=“text/css”> body {background–color:yellow;} p {color:blue;} </style> </head>
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel=“stylesheet” type=“text/css” href=“mystyle.css”> </head>
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。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。
HTML 图像- Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
HTML 图像- 设置图像的高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
属性值默认单位为像素:
提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。
HTML 图像标签
标签 | 描述 |
---|---|
<img> | 定义图像 |
<map> | 定义图像地图 |
<area> | 定义图像地图中的可点击区域 |
HTML 表格
HTML 表格由 <table> 标签来定义。
HTML 表格是一种用于展示结构化数据的标记语言元素。
每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义),表格可以包含标题行(<th>)用于定义列的标题。
- tr:tr 是 table row 的缩写,表示表格的一行。
- td:td 是 table data 的缩写,表示表格的数据单元格。
- th:th 是 table header的缩写,表示表格的表头单元格。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格生成器:https://www.jyshare.com/front-end/7688/。
以下是一个简单的 HTML 表格实例:
<table>
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1,列1</td>
<td>行1,列2</td>
<td>行1,列3</td>
</tr>
<tr>
<td>行2,列1</td>
<td>行2,列2</td>
<td>行2,列3</td>
</tr>
</tbody>
</table>
以上的表格实例代码中,<table> 元素表示整个表格,它包含两个主要部分:<thead> 和 <tbody>。
- <thead > 用于定义表格的标题部分: 在 <thead > 中,使用 <th > 元素定义列的标题,以上实例中列标题分别为”列标题1″,”列标题2″和”列标题3″。
- <tbody > 用于定义表格的主体部分: 在 <tbody > 中,使用 <tr > 元素定义行,并在每行中使用 <td > 元素定义单元格数据,以上实例中有两行数据,每行包含三个单元格。
通过使用 <th > 元素定义列标题,可以使其在表格中以粗体显示,与普通单元格区分开来。
HTML 表格还可以具有其他部分,如 <tfoot > (表格页脚)和 <caption > (表格标题),<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。 <caption > 可用于为整个表格定义标题。
HTML 表格还支持合并单元格和跨行/跨列的操作,以及其他样式和属性的应用,以满足各种需求。
我们也可以使用 CSS 来进一步自定义表格的样式和外观。
HTML 表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性border来显示一个带有边框的表格:
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
HTML 表格标签
标签 | 描述 |
---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
HTML列表
HTML无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用 <ul> 标签
<ul> <li>Coffee</li> <li>Milk</li> </ul>
浏览器显示如下:
- Coffee
- Milk
HTML 有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
浏览器中显示如下:
- Coffee
- Milk
HTML <div> 和<span>
HTML 可以通过 <div> 和 <span>将元素组合起来。
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
HTML 分组标签
标签 描述
<div> 定义了文档的区域,块级 (block-level)
<span> 用来组合文档中的行内元素, 内联元素(inline)
HTML表单
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
以下是一个简单的HTML表单的例子:
<form>
元素用于创建表单,action
属性定义了表单数据提交的目标 URL,method
属性定义了提交数据的 HTTP 方法(这里使用的是 “post”)。<label>
元素用于为表单元素添加标签,提高可访问性。<input>
元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type
属性定义了输入框的类型,id
属性用于关联<label>
元素,name
属性用于标识表单字段。<select>
元素用于创建下拉列表,而<option>
元素用于定义下拉列表中的选项。
form action="/" method="post">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox) 等等。
我们可以使用 <form> 标签来创建表单:
<form> . input 元素 . </form>
HTML 表单 – 输入元素
多数情况下被用到的表单标签是输入标签 <input>。
输入类型是由 type 属性定义。
接下来我们介绍几种常用的输入类型。
文本域(Text Fields)
文本域通过 <input type=”text”> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
浏览器显示如下:
注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。
密码字段
密码字段通过标签 <input type=”password”> 来定义:
<form> Password: <input type="password" name="pwd"> </form>
浏览器显示效果如下:
注意:密码字段字符不会明文显示,而是以星号 * 或圆点 . 替代。
单选按钮(Radio Buttons)
<input type=”radio”> 标签定义了表单的单选框选项:
<form action=""> <input type="radio" name="sex" value="male">男<br> <input type="radio" name="sex" value="female">女 </form>
浏览器显示效果如下:
复选框(Checkboxes)
<input type=”checkbox”> 定义了复选框。
复选框可以选取一个或多个选项:
<form> <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br> <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车 </form>
浏览器显示效果如下:
提交按钮(Submit)
<input type=”submit”> 定义了提交按钮。
当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
浏览器显示效果如下:
假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 html_form_action.php 文件,该页面将显示出输入的结果。
以上实例中有一个 method 属性,它用于定义表单数据的提交方式,可以是以下值:
- post:指的是 HTTP POST 方法,表单数据会包含在表单体内然后发送给服务器,用于提交敏感数据,如用户名与密码等。
- get:默认值,指的是 HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 ?作为分隔符,一般用于不敏感信息,如分页等。例如:https://www.runoob.com/?page=1,这里的 page=1 就是 get 方法提交的数据。
<!-- 以下表单使用 GET 请求发送数据到当前的 URL,method 默认位 GET。 -->
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 表单使用 fieldset, legend, 和 label 标签 -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
HTML框架
frame语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。
iframe – 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如:”80%”)。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框:
使用 iframe 来显示目标链接页面
iframe 可以显示一个目标链接的页面
目标链接的属性必须使用 iframe 的属性,如下实例:
HTML iframe 标签
标签 | 说明 |
---|---|
<iframe> | 定义一个内联的iframe |