html基础
来源：互联网 发布：中英文版服装软件 编辑：程序博客网 时间：2024/05/17 06:13
一个网页对应于一个HTML文件，HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。 超文本标记语言标准的HTML文件都具有一个基本的整体结构，即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。有3个双标记符用于页面整体结构的确认。
HTML语言内容丰富，从功能上大体可分为：文本结构设置、列表建立、文本属性制定、超链接、图片和多媒体插入、对象、表格以及窗体的操作。
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML文档的结构
包括HEAD、TITLE、BODY三部分，下面是基本结构：
<HTML>
<HEAD>
标题部分
</HEAD>
<BODY>
正文部分
</BODY>
</HTML>
HTML Basic Document
<html><head><title>Document name goes here</title></head><body>Visible text goes here</body></html>
Text Elements
<p>This is a paragraph</p><br> (line break)<hr> (horizontal rule)<pre>This text is preformatted</pre>
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
Logical Styles
<em>This text is emphasized</em><strong>This text is strong</strong><code>This is some computer code</code>
Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a><a href="http://www.example.com/"><img src="URL"alt="Alternate Text"></a><a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:<a name="tips">Useful Tips Section</a><a href="#tips">Jump to the Useful Tips Section</a>
Ordered list
<ol><li>First item</li><li>Next item</li></ol>
hr 元素可用于分隔内容。
Definition list
<dl><dt>First term</dt><dd>Definition</dd><dt>Next term</dt><dd>Definition</dd></dl>
Tables
<table border="1"><tr> <th>someheader</th> <th>someheader</th></tr><tr> <td>sometext</td> <td>sometext</td></tr></table>
Frames
<frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"></frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get"><input type="text" name="lastname"value="Nixon" size="30" maxlength="50"><input type="password"><input type="checkbox" checked="checked"><input type="radio" checked="checked"><input type="submit"><input type="reset"><input type="hidden"><select><option>Apples<option selected>Bananas<option>Cherries</select><textarea name="Comment" rows="60"cols="20"></textarea></form>
Entities
< is the same as <> is the same as >© is the same as ©
Other Elements
<!-- This is a comment --><blockquote>Text quoted from some source.</blockquote><address>Address 1<br>Address 2<br>City<br></address>
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
<hr /> 标签在 HTML 页面中创建水平线。
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。对应不同的字体大小。
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
注释：应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
实例
<p>This is a paragraph</p><p>This is another paragraph</p>
注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
实例
<p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>
提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。
HTML 链接
HTML 链接是通过 <a> 标签进行定义的。注释：在 href 属性中指定链接的地址。
<a href=>This is a link</a>
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。注释：图像的名称和尺寸是以属性的形式提供的。
<img src="W3C HTML.jpg" width="104" height="142" />
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释是这样写的：
实例
<!-- This is a comment -->
注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
提示：合理地使用注释可以对未来的代码编辑工作产生帮助。
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容某些 HTML
元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
HTML 文档实例
<html><body><p>This is my first paragraph.</p></body></html>
上面的例子包含三个 HTML 元素。
空的 HTML 元素
没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
<br /> 就是没有关闭标签的空元素（<br /> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://www.w3chtml.com.cn">This is a link</a>
更多 HTML 属性实例
属性例子 1:
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。居中排列标题
属性例子 2:
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。 背景颜色
属性例子 3:
<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）
<table border="1"> 拥有关于表格边框的附加信息。
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'
HTML 输出
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
HTML 文本格式化
文本格式化标签
“计算机输出”标签
引用、引用和术语定义
实例
<html><body><pre>这是预格式文本。它保留了 空格和换行。</pre>
输出
这是预格式文本.它保留了 空格和换行.pre 标签很适合显示计算机代码：for i = 1 to 10 print inext i
实例
<html><body><code>Computer code</code><br /><kbd>Keyboard input</kbd><br /><tt>Teletype text</tt><br /><samp>Sample text</samp><br /><var>Computer variable</var><br /><p><b>注释：</b>这些标签常用于显示计算机/编程代码。</p></body></html>
输出
Computer code
Keyboard input
Teletype text
Sample text
Computer variable
注释：这些标签常用于显示计算机/编程代码。
HTML 的 style 属性
style 属性的作用：
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
不赞成使用的标签和属性
在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
这里传达的信息很明确：请避免使用这些被废弃的标签和属性！
应该避免使用下面这些标签和属性：
对于以上这些标签和属性：请使用样式代替！
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>
style 属性淘汰了“旧的” bgcolor 属性。
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>
style 属性淘汰了旧的 <font> 标签。
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>
style 属性淘汰了旧的 "align" 属性。
HTML 超链接（链接）
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例
<a href="http://www.w3chtml.com/">Visit W3C HTML</a>
上面这行代码显示为：Visit W3C HTML
点击这个超链接会把用户带到 W3C HTML 的首页。
提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.w3chtml.com/" target="_blank">Visit W3C HTML!</a>
HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。
name 属性用于创建 HTML 内部的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
命名锚的语法：
<a name="label">Text to be displayed</a>
提示：锚的名称可以是任何你喜欢的名字。
实例
HTML 文档内部的已命名的锚：
<a name="tips">Useful Tips Section</a>
然后，我们创建指向相同文档中“有用的提示”部分的链接：
<a href="#tips">Visit the Useful Tips Section</a>
或者，创建从另一个页面指向该文档中“有用的提示”部分的链接：
<a href="http://www.w3chtml.com/try/link.html#tips"> Visit the Useful Tips Section </a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
基本的注意事项 - 有用的提示：
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3chtml.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3chtml.com/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>
在浏览器显示如下：
row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格
<table <tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>
表格的表头
表格的表头使用 <th> 标签进行定义。
<table border="1"><tr></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 border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td></tr></table>
在浏览器显示如下：
row 1, cell 1row 1, cell 2row 2, cell 1注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。） 为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td></tr></table>
在浏览器中显示如下：
row 1, cell 1row 1, cell 2row 2, cell 1
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
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
列表标签
- HTML 基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- html基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- HTML基础
- nyoj 236 心急的C小加
- 带有同步清0、同步置1的D触发器模块描述及其Testbench测试
- HDU Common Subsequence
- android 读写sd卡的权限设置
- Fibonacci数列
- html基础
- s3c2440学习笔记 存储管理器
- FatMouse's Speed
- BZOJ1063树形dp
- 【HTML5】拖放
- android中shape的属性
- 模拟骰子
- 圆的面积
- 通用型的工作总结
