首页 > 代码库 > html入门
html入门
HTML
html（hyper text markup language）是一种标记语言，用来描述网页。它包含了一套标记标签，使用标签来定义网页的内容。html文档的后缀名可以是.html和.htm。可以使用浏览器打开html文档，浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
html元素指的是从开始标签到结束标签之间的所有内容，开始标签与结束标签之间存放网页显示内容。有些元素没有内容，称为空元素。空元素是在开始标签中关闭的，如换行标签<br/>。
html标签可以使用属性，对元素内容的显示形式进行描述。
html标签对大小写不敏感，推荐使用小写。因为在未来将强制使用小写。
html有以下标签：
1.html标题通过<h1>-<h6>六个标签定义的，<h1> 定义最大的标题，<h6> 定义最小的标题，一般只用到<h3>，<h4>-<h6>用的较少。比如
1 <h1>一级标题</h1> 2 <h2>二级标题</h2> 3 <h3>三级标题</h3>
注意：浏览器会自动地在标题的前后添加空行。
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
2.html 段落是通过 <p> 标签进行定义的，比如
1 <p>第一段</p> 2 <p>第二段</p>
注意：浏览器会自动地在段落的前后添加空行，但是不要使用段落标签代替换行，请使用<br/>标签。
3.html水平线用于在网页中创建水平线，分隔网页内容。比如
1 <p>第一部分</p> 2 <hr/> 3 <p>第二部分</p>
4.html注释可以提高代码的可读性，浏览器不会显示注释内容。比如
1 <!--注释内容-->
5.html超链接，使用超链接可以将网页中的文字或图片链接到另一个页面。比如
1 <a href="http://www.w3school.com.cn/">Visit W3School</a>
上面的代码表示，点击Visit W3School将会在本页面里打开万维网，如果想要在新窗口打开可以使用target属性，即
1 <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
6.图像标签<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
1 <img src = "url" />
url指的是图像的存储路径。
alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，浏览器将显示这个替代性的文本。
<img src = "url" alt = "替代文本" />
7.表格，由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（列）（由 <td> 标签定义），td标签之间存放单元格的内容，内容可以是文字、图片、列表、段落、表单、水平线、表格等。表格的表头用<th>标签定义,大多数浏览器会把表头显示为粗体居中的文本。比如
1 <table border = ‘1‘> 2 <tr> 3 <th>head1</th> 4 <th>head2</th> 5 </tr> 6 <tr> 7 <td>(1,1)</td> 8 <td>(1,2)</td> 9 </tr> 10 <tr> 11 <td>(2,1)</td> 12 <td>(2,2)</td> 13 </tr> 14 </table>
8.列表
无序列表始于 <ul> 标签。每个列表项始于 <li>，列表项目使用黑圆点进行标记，比如
<ul> <li>coffee</li> <li>tea</li> </ul>
序列表始于 <ol> 标签。每个列表项始于 <li> 标签，列表项目使用数字进行标记，比如
<ol> <li>coffee</li> <li>tea</li> </ol>
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。比如
1 <dl> 2 <dt>Coffee</dt> 3 <dd>Black hot drink</dd> 4 <dt>Milk</dt> 5 <dd>White cold drink</dd> 6 </dl>
9.html块与类，<div>和<span>
大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）；内联元素在显示时通常不会以新行开始。
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。
<span>元素是内联元素，可作为文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 span.red{ 6 color:red; 7 } 8 </style> 9 </head> 10 11 <body> 12 <h1> 13 My----<span class="red">Important</span>----Heading 14 </h1> 15 </body> 16 </html>
<div>元素是块级元素，它是可用于组合其它元素的容器。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性；设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类，比如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .cities { 6 background-color:black; 7 color:white; 8 margin:20px; 9 padding:20px; 10 } 11 </style> 12 </head> 13 14 <body> 15 <div class="cities"> 16 <h2>London</h2> 17 <p>London is the capital city of England. </p> 18 </div> 19 20 <div class="cities"> 21 <h2>Paris</h2> 22 <p>Paris is the capital city of France.</p> 23 </div> 24 </body> 25 </html>
<div>元素还可以用于文档布局，因为能够轻松地通过 CSS 对其进行定位。比如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 #header { 6 background-color:black; 7 color:white; 8 text-align:center; 9 padding:5px; 10 } 11 #nav { 12 line-height:30px; 13 background-color:#eeeeee; 14 height:300px; 15 width:100px; 16 float:left; 17 padding:5px; 18 } 19 #section { 20 width:350px; 21 float:left; 22 padding:10px; 23 } 24 #footer { 25 background-color:black; 26 color:white; 27 clear:both; 28 text-align:center; 29 padding:5px; 30 } 31 </style> 32 </head> 33 34 <body> 35 <div id="header"> 36 <h1>City Gallery</h1> 37 </div> 38 39 <div id="nav"> 40 London 41 </div> 42 43 <div id="section"> 44 <h2>London</h2> 45 <p>London is the capital city of England.</p> 46 </div> 47 48 <div id="footer"> 49 Copyright ? W3Schools.com 50 </div> 51 </body> 52 </html>
10.html文本格式化
11.框架
使用框架可以在同一个浏览器窗口中显示多个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
1 <frameset cols="25%,75%"> 2 <frame src=http://www.mamicode.com/"frame_a.htm"> 3 <frame src=http://www.mamicode.com/"frame_b.htm"> 4 </frameset>
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
1 <html> 2 3 <frameset cols="50%,*,25%"> 4 <frame src=http://www.mamicode.com/"/example/html/frame_a.html" noresize="noresize" /> 5 <frame src=http://www.mamicode.com/"/example/html/frame_b.html" /> 6 <frame src=http://www.mamicode.com/"/example/html/frame_c.html" /> 7 </frameset> 8 9 </html>
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
12.内联框架<iframe>
<iframe>用于在网页中显示网页。
用法：<iframe src="http://www.mamicode.com/URL" width="200" height="200"frameborder="0"></iframe>，URL 指向隔离页面的位置；height 和 width 属性用于规定 iframe 的高度和宽度；frameborder 属性规定是否显示 iframe 周围的边框。
iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe> 6 7 <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p> 8 9 <p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p> 10 11 </body> 12 </html>
13.背景
<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中
删除这些属性。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
14.<head>元素
<head>元素是所有头部元素的容器。<title>、<base>、<link>、<meta>、<script> 以及 <style>标签可以添加到其中。
?<title>元素用于定义浏览器工具栏中的标题；显示在搜索引擎结果中的页面标题；显示在搜索引擎结果中的页面标题。
?<base> 标签为页面上的所有链接规定默认地址或默认目标。通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可
以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
注意：在 HTML 中，<base> 标签没有结束标签；在 XHTML 中，<base> 标签必须被正确地关闭。
<base> 标签必须位于 head 元素内部。
1 <html> 2 <head> 3 <base href="http://www.w3school.com.cn/i/" target="_blank" /> 4 </head> 5 <body> 6 <img src="eg_smile.gif" /> 7 <a href="http://www.w3school.com.cn">W3School</a> 8 </body> 9 </html>
?<link> 标签定义文档与外部资源之间的关系，最常用于连接样式表。在 HTML 中，<link> 标签没有结束标签；在 XHTML 中，<link> 标签必须被正确地关闭。link 元素
是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。
?<meta> 标签可提供有关页面的元信息，位于文档的头部，不包含任何内容。
?<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。假如此元素内部的代码没有位于某个函
数中，那么这些代码会在页面被加载时被立即执行。<frameset> 标签之后的脚本会被忽略。
?<style> 标签用于为 HTML 文档定义样式信息。
15.html实体
在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在html
源代码中使用字符实体（character entities）。
注意：实体名称对大小写敏感！
16.URL（Uniform Resource Locator）统一资源定位符
URL用于定位万维网上的文档（或其他数据）。
17.URL编码
URL编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL不能包含空格。URL 编码通常使用 + 来替换空格。
18.html web服务器
如果希望向世界发布你的网站，必须将它存放在web服务器上。
大多数小公司会把网站存放到由 ISP（因特网服务提供商） 提供的服务器上。ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间，最新的软件补丁，以及最好
的病毒防护。
19.html颜色
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
20.<!doctype>
<!doctype>声明帮助浏览器正确显示网页。
html入门