HTML基础

来源:互联网 发布:单片机按键电路的作用 编辑:程序博客网 时间:2024/06/16 01:35
<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:xxx@xx.com?subject=主题&body=内容>
例子:<a href="mailto:1007240487@qq.com?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,所以要根据自己的情况运用.
0 0