xhtml & css 简易学习笔记(一)

xhtml和css是用来制作网页的语言。

1、推荐编辑软件: Notepad++


2、一般格式
<html>
     <head>
     .......
     </head>
     <body>
     .......
     </body>
</html>


3、给网页加title:
<head>
<title> xxxxxx </title>
</head>


4、注释:
<!--     注释内容    -->


5、换行   :<br />
     水平线:<hr />,水平线效果如下:



6、标题:
<h1> xxxx <h1>
当然也可以
<h2> xxxx <h2>
1字体最大,h2、h3...依次减小。


7、段落: 
<p> xxxxxxxxxxxxxxxxxxxxxx </p>


8、字体颜色:
<font color="green">xxxxxxxxxxxxxx </font>
 green可以替换为red、blue.....


9、粗体:
<strong>xxxxxx</strong>


10、斜体:
<em>xxxxxxx</em>


11、超链接:
<a href="http://google.com">This is a link</a>
即跳转到谷歌
如果要在新窗口打开链接,则需要加上target="_blank"。


12、在页面内进行跳转:在需要的跳转到的地方加上代码 
<a name="xxxx"></a>
此处xxxx为自定义的名字,然后在页首(或别的任意显眼的地方),加上代码 
<a href="#xxxx">linkname</a>
这里的‘#’必不可少,xxxx是前面取得名字,linkname也是自定义名字,然后点击linkname就可以跳转到设置的地方。


13、email链接:
<a href="mailto:[email protected]">Email me </a>
其中“mailto:”是必不可少的,后面加上自己的邮箱。


14、Tool tips:当鼠标放到一个链接上时,会显示一些额外信息。
<a href="http://google.com" title="Search Engine!">Google</a>


15、怎么加图片:首先把图片和html文件放在同一个文件夹,然后加入以下代码
<img src="xxxxx.png"/>
怎么使图片成为链接?只需嵌套上链接代码即可:
<a href="http://blog.csdn.com/Zyearn"><img src="xxxxx.png"/></a>


16、怎样设置图片的高和宽:
<img src="xxxxx.png" height="xxx" width="xxx"/>
如果只加height或者只加width,那么图片同比例放大或缩小


17、怎样制作表格:
例:2*3的表格
<table border="#">     	<!-- #是一个数字,表示边界的厚度,1最薄,然后依次增加 -->
     <tr>               <!-- tr代表table row -->
          <td>1</td>    <!-- td代表table data -->
          <td>2</td>
          <td>3</td>
     </tr>
     <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
     </tr>
</table>



18、怎么制作表格标题:<th></th>   // stands for table header
例:
<table border="1">  
     <tr>                      
          <th>name</th>      
          <th>sex</th>
          <th>job</th>
     </tr>
     <tr>
          <td>bob</td>
          <td>m</td>
          <td>doctor</td>
     </tr>
     <tr>
          <td>Alice</td>
          <td>f</td>
          <td>nurse</td>
     </tr>
</table>



效果如下:

表格标题加粗,并且居中。


19、怎样使表格合并列:<th colspan="2">Odd people</th>     //2代表合并2列
例:
<table border="1">
     <tr>   
         <th colspan="2">Odd People</th>
     </tr>
     <tr>
          <th>Type</th>
          <th>Reason</th>
     </tr>
     <tr>
          <td>Cat People</td>
          <td>17 cats is just too many</td>
     </tr>
     <tr>
          <td>Loud People</td>
          <td>Speaks too loud</td>
     </tr>
</table>


效果如下:





20、怎样改变表格的长宽:
<table border="1" height="xxx" width="xxx"> 
xxx为数字。也可是设置成百分比,例如
<table border="1" height="50%" width="100%">
表格大小随着游览器的大小而变化

       怎样改变表格的单位格边距(字和边之间的距离):设置单位格边距为xxx
<table border="1" cellpadding="xxx"> 

       怎样改变表格的单位格间距(边和边之间的距离):设置单位格间距为xxx
<table border="1" cellspacing="xxx"> 


当然可以混合使用:
<table border="1" width="400" height="100" cellpadding="10" cellspacing="20">












發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章