html精简总结基础部分

简介:
一.基本构架
<html>
 <head>
   <title>
   标题
   </title>
 </head>
 <body>
 页面内容
 </body>
</html>
二.基本属性
1.颜色 <body bgcolor="#">,#为颜色可以为“red“,“blud”等英文单词,也可以是ffffff三原色代码
 
2.背景图片 <body backgroud="back-ground.gif">或<body backgroud="images\back-ground.gif">注意所在文件夹的位置,后者的图片在文件夹images中
 
3.背景音乐 <bgsound src="background_sound.mid" loop="-1"> loop表示循环次数,-1表示循环无数次。
 
4.空白大小 <body topmargin=0 leftmargin=0>,试试看有什么效果
三.字体
1.标题大小 <h#>今天天气真好!</h#> #可以为1-6
 
2.普通字体大小 <font size=#>今天天气真好!</font> #为数字
 
3.逻辑字体(Logical Style) 下划线:<u>文字</u>,代码:<code>文字</code>,删除 线:<strike>文字</strike>,闪烁:<blink>文字</blink>,增 强:<strong>文字</strong>,强调:<em>文字</em>,示 例:<samp>文字</samp>,还有老多,一般的这些了解一下就可以。
 
4.字体的标志,很常用的。粗体:<b>文字</b>,斜体:<i>文字</i>
 
5.字体颜色 <font color=#> 文字 </font> 预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 
对于16 进制编码的颜色,我们可以这样理解rrggbb六个字符:前两个表示红色,中间的两个表示绿色,后两个表示蓝色;那么,红色(red)ff0000,同样绿色(green)00ff00,蓝色0000ff;其它的颜色就是这几个字符(0-9,a-f)的组合。
 
6.字符实体(Entities) &#; #=字符实体名称 或者 ascii 值
 
四.图片
例子:<img src= [url]http://d.thec.cn/zhusd/2[/url].jpg>
图象在页面中的对齐/布局: <img align=#> #=left, center, right
图象和文字的对齐:
   语法:<img align=#> #=top, middle, bottom,这里的align和上边的实现的效果不一样,大家从它的值可以看出,它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果,很容易记住哦!
 
图像的边框:<img border=#> #=value数字,指的是这个图像的边的宽度!
   示例:<img src=" [url]http://d.thec.cn/zhusd/2[/url].jpg"  border=1>
 
五.表格
 看看表格的基本语法:<table>...</table> - 定义表格
                      <tr> ...</tr>- 定义表行
                      <th> ...</th>- 定义表头
                      <td> ...</td>- 定义表元

  下面看看它的示例:
   <table border="1">  <!--border是表格的边框属性,=“1”,即边框的宽为一象素-->
   <tr>                <!--定义表格的行-->
   <th>Food</th><th>Drink</th><th>Sweet</th><!--定义表格的表头,即标题-->
   </tr>               <!--行结束-->
   <tr>
   <td>A</td><td>B</td><td>C</td>  <!--定义表格的表元-->  
   </tr>
   </table>
   
 
  不带边框的表格:
   <table>
   <tr>
   <th>Food</th><th>Drink</th><th>Sweet</th>
   </tr>
   <tr>
   <td>A</td><td>B</td><td>C</td>  
   </tr>    
   </table>
   
Food  Drink  Sweet
A      B     C
  表格尺寸设置 <table border=#>边框尺寸设置:
   <table border=10>
   <tr><th>Food</th><th>Drink</th><th>Sweet</th>
   <tr><td>A</td><td>B</td><td>C</td>      
   </table>
   
 
   跨多列的表元 <th colspan=#>
   <table border>
   <tr><th colspan=3> Morning Menu</th>  <!--colspan=3,跨三列表元-->
   <tr><th>Food</th>       <th>Drink</th>  <th>Sweet</th>
   <tr><td>A</td><td>B</td><td>C</td>
   </table>
   
   跨多行的表元 <th rowspan=#>
   <table border>
   <tr><th rowspan=3> Morning Menu</th><!--rowspan=3,跨三行表元-->
       <th>Food</th> <td>A</td></tr>
   <tr><th>Drink</th> <td>B</td></tr>
   <tr><th>Sweet</th> <td>C</td></tr>
   </table>
   
还有属性如 <tableborderwidth=170 height=100>                        
<table border cellspacing=#>表元间隙设置:
<table border cellpadding=#>表元内部空白设置:

 
   表格内文字的对齐/布局
   <tr align=#>
   <th align=#> #=left, center, right
   <td align=#>
   <table border width=160>
   <tr>
  <th>Food</th><th>Drink</th><th>Sweet</th>
  <tr>
    <td align=left>A</td><td align=center>B</td>
    <td align=right>C</td>  
  </table>
   
   
   <tr valign=#>
   <th valign=#> #=top, middle, bottom, baseline
   <td valign=#>
 
 <table border height=100>
   <tr>
               <th>Food</th><th>Drink</th>
               <th>Sweet</th><th>Other</th>
   <tr>
               <td valign=top>A</td>
               <td valign=middle>B</td>
               <td valign=bottom>C</td>
               <td valign=baseline>D</td>
   </table>
   



本文转自 xhinkerx 51CTO博客,原文链接:http://blog.51cto.com/xhinker/134425,如需转载请自行联系原作者
目录
相关文章
|
移动开发 数据安全/隐私保护 HTML5
HTML总结(三)
HTML5的Video元素和Audio元素
155 0
HTML总结(三)
|
存储 移动开发 前端开发
HTML总结(一)
详细介绍一些HTML基础知识,帮助大家打好基础
413 2
HTML总结(一)
|
Web App开发 数据安全/隐私保护
|
前端开发 移动开发
|
Web App开发 前端开发 JavaScript
|
Web App开发 移动开发 JavaScript
HTML和HTML5总结
以下代码均没有括号sorry由《》代替 1.《html》 《body》 《p》 这是我的html《 /p》 《body》 《html》 这个 《p》 元素定义了 HTML 文档中的一个段落。
1115 0