web html基础知识

来源:互联网 发布:ubuntu recovery 联网 编辑:程序博客网 时间:2024/06/07 21:30
html:
<html></html>根标签
<head<
     <style>
     <script>
     <metra>
     <title>
</head>
<body>
一:
<body>
     <p></p>段落
     <hx>标题,共六级
     <strong>强调,粗体
     <em>强调,斜体
     <span>块元素,改变段落一部分
     <address>地址,斜体
     <q>应用,加""
     <blockquote>块引用,居中
     <code>代码     注:如果是多行代码,可以使用<pre>标签。
       <br>or</br>换行
     <hr>or</hr>横线
     &nbsp空格
     <ul><li>列表
     <ol></ol>有序列表
<body>

二:
     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、表格中列的个数,取决于一行中数据单元格的个数。

一开始的表格没有框框

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
<caption>表格标题
<tabel summary="">表格摘要

四(a):
      使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。
     <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
     <a href="目标网址" target="_blank">click here!</a>在新的浏览器打开
   <a>还可以发邮件 <a href="邮件地址"?"邮件地址" &subject=主题 &body="内容">content</a>
五(img):
       <img src = "myimage.gif" alt = "My Image" title = "My Image" />   
          1、src:标识图像的位置;
          2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
          3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
          4、图像可以是GIF,PNG,JPEG格式的图像文件。
六(form):
     背景: 网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
       语法:<form   method="传送方式"   action="服务器文件">
     要点:<form>标签是成对出现的,以<form>开始,以</form>结束。
               action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
               method : 数据传送的方式(get/post)。
    <input>
     1、type:
        当type="text"时,输入框为文本输入框;
        当type="password"时, 输入框为密码输入框。
     2、name:为文本框命名,以备后台程序ASP 、PHP使用。
     3、value:为文本输入框设置默认值。(一般起到提示作用)

七(textarea):
     <textarea  rows="行数" cols="列数">文本</textarea>
     注意这两个属性可用css样式的width和height来代替:col用width、row用height来代替。
八(radio & checkbox):
     <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" 时,该选项被默认选中
     同一组radio,name一致,否则起不到单选效果

九(下拉列表):
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>默认选中 multiple="multiple"多选
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>

十:
 <input type="submit" value="提交" name="" />
<input type="reset" value="重置" name="" />

十一(label):
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
<label for="控件id名称">
0 0
原创粉丝点击