码迷,mamicode.com
首页 > Web开发 > 详细

html入门

时间:2017-06-04 15:43:29      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:强制   lang   amp   color   名称   病毒   分享   eee   这一   

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="frame_a.htm">
3     <frame src="frame_b.htm">
4 </frameset>

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

1 <html>
2 
3 <frameset cols="50%,*,25%">
4   <frame src="/example/html/frame_a.html" noresize="noresize" />
5   <frame src="/example/html/frame_b.html" />
6   <frame src="/example/html/frame_c.html" />
7 </frameset>
8 
9 </html>

  不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。

  12.内联框架<iframe>

  <iframe>用于在网页中显示网页。

  用法:<iframe src="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入门

标签:强制   lang   amp   color   名称   病毒   分享   eee   这一   

原文地址:http://www.cnblogs.com/It-wpyno1/p/6934615.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!