HTML基础

<em>：强调，斜体
<span>:用来组合行内元素，没有固定格式，当对其添加样式时才会发生视觉的变化。
<q>:用引用短文本，会自动添加双引号。
<blockquote>：用来引用长文本，不会自动添加双引号。
<br />:换行（多采用这种xhtml1.0的标准）
空标签：没有html内容的标签，空标签只需要写一个开始标签，类似的有<hr /><img />
<hr />:水平横线，标签的在浏览器中的默认样式线条比较粗，颜色为灰色
<address>  : 在浏览器上显示的样式为斜体
<code>代码语言</code>：添加小段代码。
<pre>代码语言</pre>：添加大段代码。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
信息列表标签：
1.ul-li：没有前后顺序的信息列表
<ul>陕西省
    <li>西安</li>
    <li>咸阳</li>
</ul>
2.ol-li:前后有序的列表信息
<ol>新书热卖
  <li>java</li>
  <li>C++</li>
</ol>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
div容器：划分出独立的逻辑部分
命名：用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
<div  id="版块名称">…</div>


---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
表格：
创建表格的五个元素：table,tbody,tr,th,td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。


2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。


3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。


4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。


5、<th>…</th>：表格的头部的一个单元格，表格表头。


6、表格中列的个数，取决于一行中数据单元格的个数。
<table>
  <tr>                         //第一行
    <th>..</th>                  //表头第一列
    <th>..</th>                  //表头第二列


 </tr>


   <tr>
       <td>..</td>
       <td>..</td>   
   </tr>


</table>




表格风格改变代码头尾：<style type="text/css">...</style>


表格四元素：table tr td,th


边框大小与颜色：{border:1px solid #000;}


例子：
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>




---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<caption>为表格添加标题


<table>
  <caption>2012年到2013年库存记录</caption>
    <th>产品名称 </th>
    <th>品牌 </th>
    <th>库存量（个） </th>
    <th>入库时间 </th>
  </tr>
  <tr>
    <td>耳机 </td>
    <td>联想 </td>
    <td>500</td>
    <td>2013-1-2</td>
  </tr>
  <tr>
    <td>U盘 </td>
    <td>金士顿 </td>
    <td>120</td>
    <td>2013-8-10</td>
  </tr>
  <tr>
    <td>U盘 </td>
    <td>爱国者 </td>
    <td>133</td>
    <td>2013-3-25</td>
  </tr>
</table>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<table summary="表格简介">为表格添加摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
<a>添加超链接：默认情况是在当前页面打开
有时候需要在新的浏览器窗口打开：
<a href="目标网址" target="_blank">...</a>
注意：target前面有空格。
根据需要选择合适的选项：
_blank -- 在新窗口中打开链接 


_parent -- 在父窗体中打开链接 


_self -- 在当前窗体打开链接,此为默认值 


_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) 


一个对应的框架页的名称 -- 在对应框架页中打开


---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
链接邮件:<a href="mailto:[e-mail]?subject=主题&body=内容>
例子：<a href="mailto:[e-mail]?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法">对此影评有何感想，发送邮件给我</a>
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。


---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
添加图片：<img>
举例：


<img src = "小学生.gif" alt = "图片加载失败" title = "小学生" />


讲解：


1、src：标识图像的位置；


2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；


3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；


4、图像可以是GIF，PNG，JPEG格式的图像文件。
-----
表单<form>
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。


2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。


3.method ： 数据传送的方式（get/post）。




例子：


<form    method="post" action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
文本域：<textarea>
例子：<textarea rows='行数'  cols="列数">这里是文本域</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。


2、cols ：多行输入域的列数。


3、rows ：多行输入域的行数。


4、在<textarea></textarea>标签之间可以输入默认值。
--------------------------------------------------------------------------
 单选，复选框
<input   type="radio/checkbox" value="值" name="名称" checked="checked"/>
1.type:
   当 type="radio" 时，控件为单选框

   当 type="checkbox" 时，控件为复选框


2、value：提交数据到服务器的值（后台程序PHP使用）


3、name：为控件命名，以备后台程序 ASP、PHP 使用


4、checked：当设置 checked="checked" 时，该选项被默认选中




注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
下拉列表（单选）:
    <form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游"selected>旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
下拉列表（多选）：
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<label>:label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
说明：不加label的话鼠标一定要点击小圆点才能激活条目,加了label可以直接点击对应的文字来激活条目
label的作用就是获得焦点，在列子中，把鼠标移动到文字上（男、女、输入你的邮箱地址），同样可以激活控件进行选择，输入。但是如果不加label的话，鼠标就必须移动到控件上面。

例子：
 你对什么运动感兴趣：<br />
  <label for="jog">慢跑</label>
  <input type="checkbox" name="jog" id="jog" /><br />
  <label for="climb">登山</label>
  <input type="checkbox" name="climb" id="climb" /><br />
  <label for="basketball">篮球</label>
  <input type="checkbox" name="basketball" id="basketball" />
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
css样式：


1.外部式：   <style type="text/css">
              body{
              font-size:12px;
              color:red;
                        }
           </style>
2.嵌入式：<link href="style.css" rel="stylesheet" type="text/css">
3内连式 ：  如<span style="color:pink">
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
类选择器
id选择器

什么时候用id，什么时候用class? 

W3C标准这样规定的，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。这样，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。另外，当页面中用到js或者要动态调用对象的时候，要用到id，所以要根据自己的情况运用.