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>
   

你可能感兴趣的:(html,总结,基础,职场,休闲)