面向仅需初步了解HTML的学习者 -- 菜鸟教程HTML汇总(2)

编程语言 2018-06-10 05:17:21 阅读次数: 2

内容摘自菜鸟教程 http://www.runoob.com/html/，由本人整理，转载请注明。

只是做一个精简的整理，读者也可打开菜鸟教程网页学习。同为初学者，该文仅进行一个HTML、HTML5的初涉，错误之处欢迎指正。

第二篇内容主要涉及HTML链接、脚本、头部、CSS、URL、图像、表格与列表、区块、布局、表单和框架，最后概要总结。 侧边目录可以快速导航

所有实例建议粘贴到sublime或其他编辑器后再运行！

HTML链接

HTML使用标签<a> 来设置超文本链接。超链接可以是文本，可以是一幅图像或其他HTML元素，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分

在标签<a> 中使用了href属性来描述链接的地址。
★：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML 链接语法

链接的 HTML 代码类似这样：

<a href="url">链接文本</a>

href 属性描述了链接的目标，写在<a>内，<a>外为链接文本。实例如下。

<a href="http://www.runoob.com/">访问菜鸟教程</a>

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：(target=”_blank”)

<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

★书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
实例
在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到”有用的提示部分(id=”tips”）”：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到”有用的提示部分(id=”tips”）”：

<a href="http://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

★： 请始终将正斜杠添加到子文件夹。否则会向服务器产生两次 HTTP 请求：1服务器会添加正斜杠到这个地址，2然后创建一个新的请求，就像这样href=”http://www.xx.com/html/”。

HTML 头部 <head>

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML头部可添加元素

<title> 元素

<title> 标签定义了浏览器工具栏的标题；是网页添加到收藏夹时，显示在收藏夹中的标题；是显示在搜索引擎结果页面的标题

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

<base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style> 元素

<style> 标签定义了HTML文档的样式文件引用地址. 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

<meta> 元素

<meta> 一般放置于 <head> 区域。 <meta> 标签提供了元数据，不显示在页面上，但会被浏览器解析。通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

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

<script>元素

<script>标签用于加载脚本文件，如： JavaScript，后文的章节中会详细描述。

HTML 样式- CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

一些样例
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。HTML使用样式
本例演示如何 标签链接到一个外部样式表。(该例只能在其网页上运行。缺少对应的外部样式表)

如何使用CSS

途径 适用情形 方法 例子
内联样式 当特殊的样式需要应用到个别元素时，就可以使用内联样式 相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性 <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
内部样式表 当单个文件需要特别样式时，就可以使用内部样式表 在<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样式实例

背景色属性（background-color）定义一个元素的背景颜色：

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

字体, 字体颜色 ，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
实例

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

综合实例
试着注释掉一些元素以观察差别，例<span>,或者注释掉<div>中的一些属性，以查看差别

HTML 图像

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

定义图像的语法是：

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

URL 指存储图像的位置。如果名为 “xx.jpg” 的图像位于 www.xx.com 的 images 目录中，那么其 URL 为 http://www.xx.com/images/xx.jpg。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

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

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

在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。此时，浏览器将显示文本而不是图像，这样有助于更好的显示信息，并对于使用纯文本浏览器非常有用。

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

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

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

★图像指定了高度宽度，页面加载时就会保留指定的尺寸。加载页面不会破坏HTML页面的整体布局。
★假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
★加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML图像实例

本例演示如何将图像作为一个链接使用。

本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
其中

元素 释义
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域

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 表格表头

表格的表头使用 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

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

更多实例

列表

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签每个列表项始于 <li> 标签。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 自定义列表

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

<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 <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

  • <div> 元素没有特定的含义，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
  • <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

  • <span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
标签 描述
<div> 定义了文档的区域，块级 (block-level)
<span> 用来组合文档中的行内元素， 内联元素(inline)

HTML布局

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
★table标签是不建议作为布局工具使用的 - 表格不是布局工具。
范例–使用DIV元素创建多列布局

HTML表单和输入

HTML 表单

表单是一个包含表单元素的区域。

  • 表单使用表单标签 <form> 来设置:
  • 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
<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）

标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框（Checkboxes）

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

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

frame语法:

<iframe src="URL"></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.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

HTML脚本

HTML <script> 标签

  • <script> 标签用于定义客户端脚本，比如 JavaScript。
  • <script> 元素既可包含脚本语句，也可通过src 属性指向外部脚本文件。

实例

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

HTML 标签

  • <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
  • <noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
  • 只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容： 
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

JavaScript可以直接在HTML输出:

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

JavaScript事件响应:

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

JavaScript处理 HTML 样式:

document.getElementById("demo").style.color="#ff0000";
标签 描述
-<script> 定义了客户端脚本
<noscript> 定义了不支持脚本浏览器输出的文本

最后 附上HTML速查列表

猜你喜欢

转载自blog.csdn.net/jucilan3330/article/details/80632507
今日推荐
周排行
四大线程池详解
如何高效使用Vim
Mogodb的常用操作总结
Spyder默认页面布局调整
SAR日志分析
OAuth是一个关于授权（authorization）的开放网络标准，在全世界得到广泛应用，目前的版本是2.0版。 本文对OAuth 2.0的设计思路和运行流程，做一个简明通俗的解释，主要参考材料为R
WebService中注解开发，CXF，Spring整合，Rest风格
2019考研英语一 Text1分析
windows下安装docker详细步骤
CentOS 7/6系统升级内核版本到5.2.2
每日归档
更多
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)
2024-07-27(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022