zoukankan      html  css  js  c++  java

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

    


    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  mysql 递归查询sql语句的实现
                    
    Windows安装MySQL-5.6.13免安装版配置方法
                    
    URL中的特殊字符处理
                    
    Java序列化与反序列化
                    
    url特殊字符转义及解决方法
                    
    CentOs  Mysql主从复制与读写分离
                    
    java 转义特殊字符
                    
    List列表中根据某一个字段，进行去重
                    
    Spring定时任务的几种实现Quartz Timer task
                    
    文件操作
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/kunyashaw/p/5276646.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看