您的位置: 首页  >  文章  >  HTML 知识

HTML 知识

分类: 文章 • 2022-10-22 00:30:46

1.HTML 链接

HTML 链接是通过标签 <a> 来定义的

<a href="http://www.runoob.com">这是一个链接</a>

2.

HTML 图像是通过标签 <img> 来定义的

<img src="/images/logo.png" width="258" height="39" />
3.HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

4.

  1. 属性和属性值，尽量小写，本来这样做也方便些。
  2. class 属性可以多用 class=" " （引号里面可以填入多个class属性）
  3. id 属性只能单独设置 id=" "（只能填写一个，多个无效）
5.<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

<!-- 这是一个注释 -->
6.

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签.

<p>这个<br>段落<br>演示了分行的效果</p>
7.HTML 代码中的所有连续的空行（换行）也被显示为一个空格

8.

HTML 格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

HTML 知识 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
9.

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

下面的这行会在新窗口打开文档：

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

HTML <base> 元素

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

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

HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

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

HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

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

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

11.

HTML样式实例 - 背景颜色

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

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

早期背景色属性（background-color）是使用 bgcolor 属性定义。

HTML 样式实例 - 字体, 字体颜色 ，字体大小

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

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

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<h1 style="text-align:center;">居中对齐的标题</h1><p>这是一个段落。</p>

文本对齐属性 text-align取代了旧标签 <center> 。

12.

CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。

对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。

实例：

<a href="#" style="color：red;" rel="nofollow">只能使用"内联"方式</a>

13.

HTML 图像- 图像标签（ <img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

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

URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。


14.

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

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

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

15.

HTML中的table可以大致分为三个部分：

  • thead ---------表格的页眉
  • tbody ---------表格的主体
  • tfoot ---------定义表格的页脚

thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。

<tr> </tr> 这个标签就是放在三间房子里面的东西，每一个 <tr> </tr> 就是表格一行。

表格的每一行被分为一个个单元格。

每一个单元格就是用来存放数据的，这个数据分为两种：一，数据的名称；二，数据本身。

用 <th></th> 表示数据的名称(标题) ,

<td></td>

表示真正的数据内容。

HTML 知识

15.

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

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

浏览器显示如下：

  • Coffee
  • Milk

HTML 有序列表

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

列表项项使用数字来标记。

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

浏览器中显示如下：

  1. Coffee
  2. Milk
16.

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 div 元素来创建多列布局：

17.

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>

浏览器显示如下：

First name:
Last name:

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password:<input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

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

浏览器显示效果如下:

Male
Female

复选框（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>

浏览器显示效果如下:

I have a bike
I have a car

提交按钮(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>

浏览器显示效果如下:

Username:
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

18.

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>
19. 
<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
20.

HTML <script> 标签

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!"：

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

URL 是一个网页地址。

URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址：192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。


相关推荐