HTML学习教程之高阶学习

最新推荐文章于 2024-04-13 16:13:13 发布

cug-jdc

最新推荐文章于 2024-04-13 16:13:13 发布

阅读量575

点赞数

分类专栏： HTML 文章标签： html

原文链接：https://www.runoob.com/html/

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML图像

HTML图像<img>

在 HTML 中，图像由<img> 标签定义，<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。如果名为 "log.png" 的图像位于 www.csdnimg.cn 的 images 目录中，那么其 URL为https://csdnimg.cn/release/bss/fe/0d04dcd/themes/zone/huawei2018/images/logo.png。浏览器将图像显示在文档中图像标签出现的地方。如果将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素:

<img src="test.jpg" alt="测试" width="304" height="228">

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

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 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

HTML 列表

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 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下：

Coffee

- black hot drink

Milk

- white cold drink

HTML 列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

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 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。下面的例子使用五个 div 元素来创建多列布局：

<!DOCTYPE html>
<html> 
<head>  
<meta charset="utf-8">  
<title>社区论坛(csdn.net)</title>  
</head> 
<body> 
<div id="container" style="width:500px"> 
<div id="header" style="background-color:#FFA500;"> 
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div> 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> 
<b>菜单</b>
<br> HTML<br> CSS<br> JavaScript
</div> 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 内容在这里</div> 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> csdn.net</div> 
</div> 
</body> 
</html>

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

<!DOCTYPE html> 
<html> 
<head>  
<meta charset="utf-8">  
<title>社区论坛(csdn.net)</title>  
</head> 
<body> 
<table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> 
<h1>主要的网页标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;"> 内容在这里</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> csdn.net</td> </tr> 
</table> 
</body> 
</html>

注意: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

HTML 表单和输入

HTML 表单用于收集不同类型的用户输入。

HTML 表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <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>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<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>

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮，当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<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" 的页面。该页面将显示出输入的结果。

HTML 表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段
<output>	定义一个计算结果

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:

该URL指向不同的网页。

Iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是可以指定其按比例显示 (如："80%")。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性，如下实例:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe> 
<p>
<a href="http://www.csdn.net" target="iframe_a">CSDN.NET</a>
</p>

HTML iframe 标签

标签	说明
<iframe>	定义一个内联的iframe

HTML 颜色

HTML 颜色由红色、绿色、蓝色混合而成。HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。这个表格给出了由三种颜色混合而成的具体效果：

基础颜色值

颜色(Color)	颜色十六进制(Color HEX)	颜色RGB(Color RGB)
黑	#000000	rgb(0,0,0)
红	#FF0000	rgb(255,0,0)
绿	#00FF00	rgb(0,255,0)
蓝	#0000FF	rgb(0,0,255)
黄	#FFFF00	rgb(255,255,0)
青	#00FFFF	rgb(0,255,255)
紫	#FF00FF	rgb(255,0,255)
灰	#C0C0C0	rgb(192,192,192)
白	#FFFFFF	rgb(255,255,255)

1600万种不同颜色

三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

HTML <script> 标签

JavaScript 最常用于图片操作、表单验证以及内容动态更新。下面的脚本会向浏览器输出"Hello World!"：

<script> document.write("Hello World!"); </script>

HTML<noscript> 标签

<script> document.write("Hello World!") </script> <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

JavaScript认识

JavaScript实例代码，JavaScript可以直接在HTML输出:

document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

<button type="button" onclick="myFunction()">点我！</button>

JavaScript处理 HTML 样式:

<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

HTML 脚本标签

标签	描述
<script>	定义了客户端脚本
<noscript>	定义了不支持脚本浏览器输出的文本

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：

&entity_name;

&#entity_number;

如需显示小于号，我们必须这样写：< 或 < 或 <

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )，浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。

HTML字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

虽然 html 不区分大小写，但实体字符对大小写敏感。

HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址，由字母组成，如"csdn.net"，或IP地址： 192.168.101.100。使用网站域名来访问比使用IP更实用。

URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。一个统一资源定位器(URL) 用于定位万维网上的文档。下面是一个网页地址实例的语法规则:

scheme://host.domain:port/path/filename

说明:

- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 csdn.net
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称

常见的 URL Scheme

以下是一些URL scheme：

Scheme	访问	用于...
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		本地计算机上的文件。

URL 字符编码

URL 来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格，通常使用 + 来替换空格。

HTML 速查列表

HTML 基本文档

<!DOCTYPE html> 
<html> 
<head> 
<title>文档标题</title> 
</head> 
<body> 可见文本... </body> 
</html>

基本标签（Basic Tags）

<h1>最大的标题</h1> 
<h2> . . . </h2> 
<h3> . . . </h3> 
<h4> . . . </h4> 
<h5> . . . </h5> 
<h6>最小的标题</h6> 
<p>这是一个段落。</p> 
<br> （换行） 
<hr> （水平线） 
<!-- 这是注释 -->

文本格式化（Formatting）

<b>粗体文本</b> 
<code>计算机代码</code> 
<em>强调文本</em> 
<i>斜体文本</i> 
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre> 
<small>更小的文本</small> 
<strong>重要的文本</strong> 
<abbr> （缩写） 
<address> （联系信息） 
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分） 
<cite> （工作的名称） 
<del> （删除的文本） 
<ins> （插入的文本） 
<sub> （下标文本） 
<sup> （上标文本）

链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a> 
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> 
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a> 
书签： <a id="tips">提示部分</a> 
      <a href="#tips">跳到提示部分</a>

图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

<style type="text/css">

h1 {color:red;} p {color:blue;}

</style> <div>文档中的块级元素</div> <span>文档中的内联元素</span>

无序列表

<ul> 
<li>项目1</li> 
<li>项目2</li> 
</ul>

有序列表

<ol> 
<li>第一项</li> 
<li>第二项</li> 
</ol>

定义列表

<dl> 
<dt>项目 1</dt> 
<dd>描述项目 1</dd> 
<dt>项目 2</dt> 
<dd>描述项目 2</dd> 
</dl>

表格（Tables）

<table border="1"> 
<tr> <th>表格标题</th> <th>表格标题</th> </tr> 
<tr> <td>表格数据</td> <td>表格数据</td> </tr> 
</table>

框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

表单（Forms）

<form action="demo_form.php" method="post/get"> 
<input type="text" name="email" size="40" maxlength="50"> 
<input type="password"> 
<input type="checkbox" checked="checked"> 
<input type="radio" checked="checked"> 
<input type="submit" value="Send"> 
<input type="reset"> 
<input type="hidden"> 
<select> 
<option>苹果</option> 
<option selected="selected">香蕉</option> 
<option>樱桃</option> 
</select> 
<textarea name="comment" rows="60" cols="20"></textarea> 
</form>

实体（Entities）

&lt; 等同于 < 
&gt; 等同于 > 
&#169; 等同于 ©

cug-jdc

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习教程之高阶学习

HTML图像HTML图像<img>在 HTML 中，图像由<img> 标签定义，<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是：<img src="url" alt="some_text">URL 指存储图像的位置。如果名为 "test.jpg" 的图像位于 www.csdn.net的 i...
复制链接

扫一扫