HTML入门

来源：互联网发布：伟星ppr水管颜色知乎编辑：程序博客网时间：2024/06/06 20:21

HTML

示例摘自w3school.com

HTML属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。

属性实例
HTML链接由< a >标签定义。链接的地址在href属性中指定:

<a href="http://www.w3school.com.cn">This is a link</a>

属性值描述 class classname 规定元素的类名 id id 规定元素的唯一id style style_definition 规定元素的行内样式 title text 规定元素的额外信息(可在工具提示中显示)

HTML标题

<hr/> 标签在HTML页面中创建水平线,等同于Markdown:----

HTML样式

style属性用于改变HTML元素的样式

This text is in Verdana and red

This text is in Times and blue

This text is 30 pixels high

HTML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色：

<html><body style="background-color:yellow"><h2 style="background-color:red">This is a heading</h2><p style="background-color:green">This is a paragraph.</p></body></html>

HTML 样式实例 - 字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

<html><body><h1 style="font-family:verdana">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body></html>

HTML 样式实例 - 文本对齐

text-align 属性规定了元素中文本的水平对齐方式：

<html><body><h1 style="text-align:center">This is a heading</h1><p>The heading above is aligned to the center of this page.</p></body></html>

HTML 文本格式化

文本格式化标签

标签描述 < b > 定义粗体文本 < big > 定义大号字 < em > 定义着重文字 < i > 定义斜体字 < small > 定义小号字 < strong > 定义加重语气 < sub > 定义下标字 < sup > 定义上标字 < ins > 定义插入字 < del > 定义删除字

计算机输出标签

标签描述 < code > 定义计算机代码 < kbd > 定义键盘码 < samp > 定义计算机代码样本 < tt > 定义打字机代码 < var > 定义变量 < pre > 定义预格式文本

引用和术语定义

标签描述 < abbr > 定义缩写 < acronym > 定义首字母缩写 < address > 定义地址 < bdo > 定义文字方向 < blockquote > 定义长的引用 < q > 定义短的引用语 < cite > 定义引用、引证 < dfn > 定义一个定义项目

HTML CSS

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 < style > 标签定义内部样式表。

<head><style type="text/css">body {background-color: red}p {margin-left: 20px}</style></head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">This is a paragraph</p>

标签描述 < style > 定义样式定义 < link > 定义资源引用 < div > 定义文档中的节或区域（块级） < span > 定义文档中的行内的小块或区域

HTML 链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 < a > 标签在 HTML 中创建链接。

有两种使用 < a > 标签的方式：
1. 通过使用 href 属性 - 创建指向另一个文档的链接
2. 通过使用 name 属性 - 创建文档内的书签

HTML 链接语法

<a href="url">Link text</a>

HTML 链接 -target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：

<a href="http://www.baidu.com/" target="_blank">Visit baidu!</a>

HTML 链接 -name 属性

name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法

<a name="label">锚（显示在页面上的文本）</a>

可以使用id属性来替代name属性，同样有效

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

也可以在其他页面中创建指向该锚的链接：

<a href="http://www.xxxx.com.cn/html/.asp#tips">有用的提示</a>

HTML 表格

空占位符

<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>&nbsp;</td><td>row 2, cell 2</td></tr></table>

row 1, cell 1row 1, cell 2 row 2, cell 2

表格标签

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

HTML 列表

无序列表

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

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

Coffee
Milk

有序列表

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

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

Coffee
Milk

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 < 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

列表标签

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

HTML 框架

框架标签

Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：

<frameset cols="25%,75%">   <frame src="frame_a.htm">   <frame src="frame_b.htm"></frameset>

注意事项

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 < frame > 标签中加入：noresize=”noresize”。

为不支持框架的浏览器添加 < noframes > 标签。

不能将标签与标签同时使用！不过，假如你添加包含一段文本的标签，就必须将这段文字嵌套于标签内。

内联框架

添加iframe的语法

<iframe src="URL"></iframe>

Iframe -设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。

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

Iframe -删除边框

frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 “0” 就可以移除边框：

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

使用iframe作为链接的目标

iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

HTML 头部

HTML< head >元素

< head > 元素是所有头部元素的容器。< head > 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：< title >、< base >、< link >、< meta >、< script > 以及 < style >。

HTML < title > 元素

< title > 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题

HTML < base > 元素

< base > 标签为页面上的所有链接规定默认地址或默认目标（target）：

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

HTML < link > 元素

< link > 标签定义文档与外部资源之间的关系。
< link > 标签最常用于连接样式表：

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

HTML < meta > 元素

元数据（metadata）是关于数据的信息。
< meta > 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
< meta > 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容

HTML 表单

< input > 元素

< input > 元素是最重要的表单元素。
< input > 元素有很多形态，根据不同的 type 属性。

类型描述 text 定义常规文本输入。 radio 定义单选按钮输入（选择多个选择之一） submit 定义提交按钮（提交表单）

文本输入

< input type=”text” > 定义用于文本输入的单行输入字段：

<form> First name:<br><input type="text" name="firstname"><br> Last name:<br><input type="text" name="lastname"></form>

表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

单选按钮输入

< input type=”radio” > 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：

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

提交按钮

< input type=”submit” > 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定：

<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form>

Action属性

action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。

<form action="action_page.php">

Method属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">  //OR POST

Name属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段：

<form action="action_page.php">First name:<br><input type="text" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form>

用< fieldset >组合表单数据

< fieldset > 元素组合表单中的相关数据
< legend > 元素为 < fieldset > 元素定义标题。

<form action="action_page.php"><fieldset><legend>Personal information:</legend>First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></fieldset></form>

HTML Form属性

HTML 元素，已设置所有可能的属性，是这样的：

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate></form>

HTML 表单元素

< select > 元素(下拉列表)

<select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select>

< option >元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
能够通过添加 selected 属性来定义预定义选项。

<option value="fiat" selected>Fiat</option>

< textarea >元素

< textarea > 元素定义多行输入字段（文本域）：

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

< button >元素

元素定义可点击的按钮：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML 表单输入类型

输入类型: submit

< input type=”submit” > 定义提交表单数据至表单处理程序的按钮。
表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序（form-handler）：

<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form>

Input Type: radio

< input type=”radio” > 定义单选按钮。

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

Input Type: checkbox

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

Input Type: button

定义按钮。

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

输入类型：number

用于应该包含数字值的输入字段。
您能够对数字做出限制。
根据浏览器支持，限制可应用到输入字段。

<form>  Quantity (between 1 and 5):  <input type="number" name="quantity" min="1" max="5"></form>

输入限制

属性描述 disabled 规定输入字段应该被禁用。 max 规定输入字段的最大值。 maxlength 规定输入字段的最大字符数。 min 规定输入字段的最小值。 pattern 规定通过其检查输入值的正则表达式。 readonly 规定输入字段为只读（无法修改）。 required 规定输入字段是必需的（必需填写）。 size 规定输入字段的宽度（以字符计）。 step 规定输入字段的合法数字间隔。 value 规定输入字段的默认值。

输入类型：date

< input type=”date” > 用于应该包含日期的输入字段。
根据浏览器支持，日期选择器会出现输入字段中。

<form> Enter a date before 1980-01-01:  <input type="date" name="bday" max="1979-12-31"><br>  Enter a date after 2000-01-01:  <input type="date" name="bday" min="2000-01-02"><br></form>

HTML5输入类型：color

< input type=”color” > 用于应该包含颜色的输入字段。
根据浏览器支持，颜色选择器会出现输入字段中。

<form>  Select your favorite color:  <input type="color" name="favcolor"></form>

HTML5输入类型：range

< input type=”range” > 用于应该包含一定范围内的值的输入字段。
根据浏览器支持，输入字段能够显示为滑块控件。

<form>  <input type="range" name="points" min="0" max="10"></form>

HTML5输入类型：email

< input type=”email” > 用于应该包含电子邮件地址的输入字段。
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入。

<form>  E-mail:  <input type="email" name="email"></form>

HTML5输入类型：search

< input type=”search” > 用于搜索字段（搜索字段的表现类似常规文本字段）。

HTML5输入类型：url

< input type=”url” > 用于应该包含 URL 地址的输入字段。
根据浏览器支持，在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型，并向键盘添加 “.com” 以匹配 url 输入。

HTML Input属性

readonly属性

readonly 属性规定输入字段为只读（不能修改）

disabled 属性

disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。

size 属性

size 属性规定输入字段的尺寸（以字符计）

<form action=""> First name:<br><input type="text" name="firstname" value="John" size="40"><br> Last name:<br><input type="text" name="lastname"></form>

maxlength 属性

maxlength 属性规定输入字段允许的最大长度

阅读全文

0 0