时间戳

首页 > 技术文章 > 关于HTML基础知识

关于HTML基础知识

degui 2018-05-04 00:21 原文

标记语言家族
超文本标记语言-HTML（HyperText Markup Language）
标准通用置标语言-SGML (Standard Generalized Markup language)
可扩展标记语言-XML(Extensible Markup Language)
总结：我所认为的标记语言即是用一系列约定好的标签或标记符号来对电子文档进行标记，实现对电子文档语义，结构，格式的定义，用于说明并组织网页上的文字，动画，图形，表格，连接，图片等

 

常用颜色代码
黑 #000000
红 #ff0000
蓝 #0000ff
银 #c0c0c0
白 #ffffff
黄 #ffff00
海蓝 #00ffff
绿 #00ff00
紫色 #ff00ff 
  1 <html>
  2  <head> 
  3   <title>表格布局网页</title> 
  4  </head> 
  5  <body topmargin="0" bottommargin="0"> 
  6   <table width="500" height="400" border="1" align-"center"="" cellpadding="0" cellspacing="0" border-color="#999"> 
  7    <tbody>
  8     <tr> 
  9      <td height="100"> 
 10       <table width="100%" height="100%" cellspacing="2" border="0"> 
 11        <tbody>
 12         <tr> 
 13          <td width="112" align="center" bgcolor="#ccc">网站标志</td> 
 14          <td align="center">网站标题</td> 
 15          <td width="120"> 
 16           <table width="100%" height="100" border="0"> 
 17            <tbody>
 18             <tr>
 19              <td>email联系我们</td>
 20             </tr> 
 21             <tr>
 22              <td>友情链接</td>
 23             </tr> 
 24             <tr>
 25              <td>公司地址</td>
 26             </tr> 
 27            </tbody>
 28           </table> </td> 
 29         </tr> 
 30        </tbody>
 31       </table> </td> 
 32     </tr> 
 33     <tr> 
 34      <td height="20"> 
 35       <d>
 36        公司论坛 
 37       </d>
 38       <table width="80%" border="0" align"center"="" cellpadding="0" cellspacing="2"> 
 39        <tbody>
 40         <tr align="center"> 
 41          <td bgcolor="#CCC">公司首页</td>
 42          <td> </td>
 43          <td>公司介绍</td> 
 44          <td>公司产品</td> 
 45          <td>公司文化</td> 
 46         </tr>
 47        </tbody>
 48       </table> </td> 
 49     </tr> 
 50     <tr> 
 51      <td valign="top"> 
 52       <table width="100%" height="100%" border="0"> 
 53        <tbody>
 54         <tr> 
 55          <td width="20%" valign="top"> 
 56           <table width="100%" height="200" border="0" bgcolor"#cccccc"=""> 
 57            <tbody>
 58             <tr> 
 59              <td align="center">文章列表</td> 
 60             </tr> 
 61             <tr>
 62              <td>1.文章标题1</td>
 63             </tr> 
 64             <tr>
 65              <td>2.文章标题2</td>
 66             </tr> 
 67             <tr>
 68              <td>3文章标题3</td>
 69             </tr> 
 70             <tr>
 71              <td>4.文章标题4</td>
 72             </tr> 
 73            </tbody>
 74           </table> </td> 
 75          <td valign="top&quot;"> 
 76           <table width="100%" height="200" border"0"="" cellspacing="0"> 
 77            <tbody>
 78             <tr> 
 79              <td height="45" align="center"><strong>文章标题<strong></strong></strong></td> 
 80             </tr> 
 81             <tr> 
 82              <td valign="top" bgcolor="#ccc">文章内容</td> 
 83             </tr> 
 84            </tbody>
 85           </table> </td> 
 86         </tr> 
 87        </tbody>
 88       </table> </td> 
 89     </tr> 
 90     <tr> 
 91      <td height="75"> 
 92       <table width="200" border="0" align="center"> 
 93        <tbody>
 94         <tr>
 95          <td>网站备案:</td>
 96         </tr> 
 97         <tr>
 98          <td>公司信息:</td>
 99         </tr> 
100         <tr>
101          <td>公司年份:</td>
102         </tr> 
103        </tbody>
104       </table> </td> 
105     </tr> 
106    </tbody>
107   </table>  
108  </body>
109 </html>
表格布局
 1 设置背景色:<body bgcolor="#0c0c0c">
 2 设置背景图片:<body background="">
 3 设置主题背景声音：<bgsound src="" loop=""/>
 4 设置多媒体:<embed src="" weidth="" height="" autostart=""/>
 5 设置字体：<font size="" color="" ></font>
 6 换行：<br/>
 7 段落:<p></p>
 8 字体样式：<i>斜体</i> <em>斜体</em>
 9             <b>粗体</b> <u>下划线</u>
10 预格式化:<pre> </pre>
11 水平线:<hr></hr>
12 插入图片:<img src=""/>
13 超链接:<a herf=""></a>
14 特殊符号:
15 Α     &Alpha;     Β     &Beta;         Γ     &Gamma; 
16 Δ     &Delta;     Ε     &Epsilon;             Ζ     &Zeta;     
17 Η    &Eta;     Θ     &Theta;             Ι     &Iota;     
18 Κ     &Kappa;     Λ     &Lambda;         Μ     &Mu;     
19 Ν     &Nu;         Ξ     &Xi;                 Ο     &Omicron; 
20 Π     &Pi;         Ρ     &Rho;         Σ     &Sigma; 
21 Τ     &Tau;     Υ     &Upsilon;             Φ     &Phi;     
22 Χ     &Chi;     Ψ     &Psi;         Ω     &Omega; 
23 α     &alpha;     β     &beta;         γ     &gamma; 
24 δ     &delta;     ε     &epsilon;             ζ     &zeta;     
25 η     &eta;     θ     &theta;             ι     &iota;     
26 κ     &kappa;     λ     &lambda;             μ     &mu;     
27 ν     &nu;         ξ     &xi;                 ο     &omicron; 
28 π     &pi;         ρ     &rho;         ?     &sigmaf; 
29 σ     &sigma;     τ     &tau;         υ     &upsilon; 
30 φ     &phi;     χ     &chi;                 ψ     &psi;     
31 ω     &omega;     ?     &thetasym;     ?     &upsih; 
32 ?     &piv;         ?     &bull;         …     &hellip; 
33 ′     &prime;     ″     &Prime;             ￣     &oline; 
34 ?     &frasl;     ?     &weierp;             ?     &image; 
35 ?     &real;     ?     &trade;             ?     &alefsym; 
36 ←     &larr;     ↑     &uarr;         →     &rarr;     
37 ↓     &darr;     ?     &harr;         ?     &crarr; 
38 ?     &lArr;     ?     &uArr;         ?     &rArr;     
39 ?     &dArr;     ?     &hArr;         ?     &forall; 
40 ?     &part;     ?     &exist;             ?     &empty; 
41 ?     &nabla;     ∈     &isin;         ?     &notin; 
42 ?     &ni;         ∏     &prod;         ∑     &sum;     
43 ?     &minus;     ?     &lowast;             √     &radic; 
44 ∝     &prop;     ∞     &infin;             ∠     &ang;     
45 ∧     &and;     ∨     &or;                 ∩     &cap;     
46 ∪     &cup;     ∫     &int;                 ∴     &there4; 
47 ～     &sim;     ?     &cong;         ≈     &asymp; 
48 ≠     &ne;         ≡     &equiv;             ≤     &le;     
49 ≥     &ge;         ?     &sub;         ?     &sup;     
50 ?     &nsub;     ?     &sube;         ?     &supe;     
51 ⊕     &oplus;     ?       &otimes;             ⊥     &perp;     
52 ?     &sdot;     ?     &lceil;             ?     &rceil; 
53 ?     &lfloor;     ?     &rfloor;             ?     &loz;     
54 ?     &spades;     ?     &clubs;             ?     &hearts; 
55 ?     &diams;           &nbsp;         ?     &iexcl; 
56 ￠     &cent;         ￡     &pound;     ¤     &curren; 
57 ￥     &yen;         |     &brvbar;     §     &sect;     
58 ¨     &uml;         ?     &copy;         a     &ordf;     
59 ?     &laquo;     ?     &not;         -     &shy;     
60 ?     &reg;         ˉ     &macr;         °     &deg;     
61 ±     &plusmn;     2     &sup2;         3     &sup3;     
62 ′     &acute;     μ     &micro;     "             &quot;     
63 <     &lt;         >     &gt;         '     
64 发邮件:<a herf="mailto":></a>
65 图片加链接:<a herf="目标"><img src= ""></a>
66 无序列表:<ul>
67               <li>无序</li>
68               <li>无序</li>
69            </ul> 
70 有序列表:<ol>
71                <li>有序</li>
72                <li>有序</li>
73            </ol>     
74 文字滚动:<marquee direction=""></marquee>      
75 图片滚动:<marquee direction=""><img src=""/></marquee>
常用标签
 1 <html>
 2  <head> 
 3   <title>表单</title> 
 4  </head> 
 5  <body>
 6   <form name="form" method="post" action=""> 
 7    <table width="450" border="1" align="center" cellpadding="0" cellspacing="0"> 
 8     <tbody>
 9      <tr>
10       <th scope="col">注册表单</th> 
11      </tr>
12      <tr> 
13       <td> 
14        <table width="85%" border="1" align="center" cellpadding="0" cellspacing="2"> 
15         <tbody>
16          <tr> 
17           <td width="25%" align="right">用户名</td> 
18           <td><input type="text" size="16" name="text" /></td> 
19          </tr> 
20          <tr> 
21           <td width="25%" align="right">密&nbsp;&nbsp;码</td> 
22           <td><input type="password" size="16" /></td> 
23          </tr> 
24          <tr> 
25           <td width="25%" align="right">确认密码</td> 
26           <td><input type="password" size="16" title="请确保和以上密码一致" /></td> 
27          </tr> 
28         </tbody>
29        </table> </td> 
30      </tr> 
31      <tr> 
32       <td> 
33        <table width="85%" border="1" align="center" cellpadding="0" cellspacing="2"> 
34         <tbody>
35          <tr> 
36           <td width="25%" align="right">所在城市</td> 
37           <td><input type="password" size="16" /></td> 
38          </tr> 
39          <tr> 
40           <td width="25%" align="right">工作单位</td> 
41           <td><input type="password" size="30" /></td> 
42          </tr> 
43          <tr> 
44           <td width="25%" align="right">家庭住址</td> 
45           <td><input type="password" size="30" /></td> 
46          </tr> 
47         </tbody>
48        </table> </td> 
49      </tr> 
50      <tr> 
51       <td> 
52        <table width="85%" border="1" align="center" cellpadding="0" cellspacing="2"> 
53         <tbody>
54          <tr> 
55           <td width="25%" align="right">性别</td> 
56           <td> <select> <option selected="selected">男孩</option> <option>女孩</option> </select> </td> 
57          </tr> 
58          <tr> 
59           <td width="25%" align="right">爱好</td> 
60           <td> <label><input type="checkbox" name="ah" />魔术</label> <label><input type="checkbox" name="ah" />音乐</label> <label><input type="checkbox" name="ah" checked="checked" />吹牛</label> </td> 
61          </tr> 
62          <tr> 
63           <td width="25%" align="right">喜欢的单位</td> 
64           <td> <label><input type="radio" name="ah" />谷歌</label> <label><input type="radio" name="ah" />百度</label> <label><input type="radio" name="ah" />微软</label> </td> 
65          </tr> 
66          <tr> 
67           <td width="25%" align="right" valign="top">简介</td> 
68           <td> <textarea cols="30" rows="4" wrap="physical" title="请简单的介绍你自己"></textarea> </td> 
69          </tr> 
70         </tbody>
71        </table> </td> 
72      </tr> 
73      <tr> 
74       <td> 
75        <table width="60%" border="0" align="center" cellpadding="2" cellspacing="0"> 
76         <tbody>
77          <tr> 
78           <td align="center"><input type="submit" value="提交" /></td> 
79           <td><input type="reset" value="重置" /></td> 
80          </tr> 
81         </tbody>
82        </table> </td> 
83      </tr> 
84      <tr> 
85       <td align="right"><input type="button" value="无效" disabled="disabled" /></td> 
86       <td></td> 
87      </tr> 
88     </tbody>
89    </table> 
90   </form> 
91  </body>
92 </html>
注册表单

成品表单

--页面框架

框架可以生成独立变化和滚动的窗体，从而能将一个窗口分割为若干个子窗口，所以框架技术一直普遍应用于页面导航

 

推荐阅读