kunyashaw博客主页 关注kunyashaw新博客 关于kunyashaw 转到底部

1、HTML基础总结 part-1

1、基本标签属性

 1 <html>
 2 <!--属性和属性值对大小写不敏感。
 3 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
 4 而新版本的 (X)HTML 要求使用小写属性。
 5  -->
 6 
 7 <body>
 8 
 9 <!-- hello this is a comment-->
10 
11 <h1 align="left">This is heading 1</h1>
12 <h2 align="center">This is heading 2</h2>
13 <h3 align="right">This is heading 3</h3>
14 <h4>This is heading 4</h4>
15 <h5>This is heading 5</h5>
16 <h6>This is heading 6</h6>
17 
18 <hr><!--绘制水平线-->
19 
20 <a href="http://www.baidu.com"> link_baidu </a>
21 
22 <br>
23 <body bgcolor="#e6e6e6">
24 
25 
26 <p> this is paragraph 1 </p>
27 <p> this is paragraph 2 </p>
28 <p> this is paragraph 3 </p>
29 
30 <img src="/i/eg_w3school.gif"/>
31 <img src="/i/eg_w3school.gif" width="400" height="150" />
32 <br/>
33 <br/>
34 <br/>
35 
36 
37 normal
38 <br/>
39 <b> bold </b>
40 <br/>
41 <strong> strong </strong>
42 <br/>
43 <big> big font </big>
44 <br/>
45 <small> small font </small>
46 <br/>
47 <i> italic font </i>
48 <br/>
49 what's the  <sub> fuck </sub>
50 <br/>
51 what's the  <sup> fuck </sup>
52 <br/>
53 <i> what's the  <sup> fuck </sup> </i>
54 
55 <p>pre 标签很适合显示计算机代码：</p>
56 
57 <pre>
58 for i = 1 to 10
59      print i
60 next i
61 </pre>
62 
63 </body>
64 </html>

 

 

2、始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号

 

3、h标签只用于标题

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

 

4、HTML 折行

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

 

5、<br> 还是 <br />

您也许发现 <br> 与 <br /> 很相似。

在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。

即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

 

6、计算机输出标签

 1 <br />
 2 <code>Computer code </code>
 3 <br />
 4 <kbd>Keyboard input </kbd>
 5 <br />
 6 <tt>Teletype text </tt>
 7 <br />
 8 <samp>Sample text</samp>
 9 <br />
10 <var>Computer variable</var>
11 <br />

 

7、地址输入

1 <address>
2 Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
3 Visit us at:<br>
4 Example.com<br>
5 Box 564, Disneyland<br>
6 USA
7 </address>

 

8、文字方向

<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

 

9、块引用

 1 这是长的引用：
 2 <blockquote>
 3 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
 4 </blockquote>
 5 
 6 这是短的引用：
 7 <q>
 8 这是短的引用。
 9 </q>
10 
11 <p>
12 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
13 </p>

 

10、格式化总结

 

文本格式化标签

标签

描述

<b>

定义粗体文本。

<big>

定义大号字。

<em>

定义着重文字。

<i>

定义斜体字。

<small>

定义小号字。

<strong>

定义加重语气。

<sub>

定义下标字。

<sup>

定义上标字。

<ins>

定义插入字。

<del>

定义删除字。

<s>

不赞成使用。使用 <del> 代替。

<strike>

不赞成使用。使用 <del> 代替。

<u>

不赞成使用。使用样式（style）代替。

“计算机输出”标签

标签

描述

<code>

定义计算机代码。

<kbd>

定义键盘码。

<samp>

定义计算机代码样本。

<tt>

定义打字机代码。

<var>

定义变量。

<pre>

定义预格式文本。

<listing>

不赞成使用。使用 <pre> 代替。

<plaintext>

不赞成使用。使用 <pre> 代替。

<xmp>

不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

标签

描述

<abbr>

定义缩写。

<acronym>

定义首字母缩写。

<address>

定义地址。

<bdo>

定义文字方向。

<blockquote>

定义长的引用。

<q>

定义短的引用语。

<cite>

定义引用、引证。

<dfn>

定义一个定义项目。

11、如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

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

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

 

12、在新标签打开一个连接

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

<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

 

13、页面跳转

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

 

14、邮件链接

<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

 

<a href="mailto:kunyashaw@gmail.com
?cc=chaosong@163.com
&bcc=misong@126.com
&subject=testTheme
&body=welcomeToBeijing">发送</a>

 

15、图像排列

<p>图像 <img align="top" src ="/i/eg_cute.gif"> 上边 在文本中</p>
<p>图像 <img align="bottom" src ="/i/eg_cute.gif">下边（也是默认） 在文本中</p>
<p>图像 <img align="middle" src ="/i/eg_cute.gif">中间 在文本中</p>
<p>图像 <img align="left" src ="/i/eg_cute.gif"> 文字左边</p>
<p>图像 <img align="right" src ="/i/eg_cute.gif"> 文字右边</p>


<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

 

16、表格-1



<html>




<body>




<h4>这个表格有一个标题，以及粗边框：</h4>





<html>




<body>




<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>




<h4>一列：</h4>
<table border="1">
<caption>我的标题</caption>




<tr>
  <td>100</td>
</tr>
</table>




<h4>一行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>




<h4>两行三列：</h4>
<table border="1">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
</tr>




<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
<td>




<ul>




<li> test1 </li>
<li> test2 </li>
<li> test3 </li>




</ul>





</td>




</tr>





</table>




</body>
</html>


 




 


17、表格-2




<html>

<body>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="3">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
<tr>
  <td>555 77 856</td>
</tr>
</table>

</body>
</html>






 


18、表格-3




<html>

<body>


<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元背景：</h4>  
<table border="1">
<tr>
  <td bgcolor="red">First</td>
  <td>Row</td>
</tr>   
<tr>
  <td 
  background="/i/eg_bg_07.gif">
  Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" cellpadding="20" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>背景颜色：</h4>
<table border="1" 
bgcolor="red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>背景图像：</h4>
<table border="1" 
background="/i/eg_bg_07.gif">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>



<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


</body>
</html>




 


19、列表




<html>

<body>



<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  




<h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  



<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>


<h2>一个定义列表：</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>
</html>




 






            

            
posted @ 
2016-03-14 18:11 
kunyashaw 
阅读(374) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    



	

	

	
	

	

	

	





    

        

 回到顶部