html入门介绍

2014-12-10

认识html

１    Html    hyper     text     markup    language
 超文本标记语言
2 Html标准结构
<! Doctype html>   声明文档类型
    <html>      根标签
    <head>    头部标签
    <title></title>
    </head>
    <body>     主体标签

    内容
    </body>
    </html>
    Htm和html有什么区别？   没有区别。

    注意：更改文件的后缀名，不能更改文件格式，只是更改了文件的打开方式。

单标签

- 注释标签 ctrl+/
- 水平线  <hr/>
- 换行  <br/>
- 图片 <img src=”1.jpg”  alt=””  title=”提示文本”  width=”500” height=”200”>

双标签

- 段落标签 <p></p>  上下生成空白行
- 标题标签  h1-h6, h1在一个页面里只能出现一次
- 文本标签  <font></font>
- 文本格式化标签  <strong></strong>   <b></b>   （加加粗标签）
                  <em></em>     <i></i>            （斜体标签）
                    <del></del>       <s></s>   （删除标签）
                    <ins></ins>       <u></u>    （插入标签）
- 超链接     <a href=””   title=”提示文本”></a>
              target=”_self”   默认值    当前页面打开
              target=”_blank”   当前页面不关闭，打开新页面

路径

相对路径
- 文件在同一个目录，直接写咋文件名即可。
- 文件在上一级目录，../+文件名
- 文件在下一级目录，目录名+/+文件名

列表

- 无序列表
    <ul type=" ?">  
        <li></li>   列表项
        <li></li> 
        <li></li> 
    </ul>
    注意：ul里面只能包含li标签，li标签里面可以包含任意标签。
     Type=”disc”      默认值  小圆点
      “square”   小方块
      “circle”    小圆圈
- 有序列表
    <ol type=" ?" start="?">    
        <li></li>   列表项
        <li></li>
        <li></li>
    </ol>
        Type=””  取值 1 a     A i I   start=”3” 从第几步开始
- 自定义列表
    <dl>
        <dt></dt>      定义标题
        <dd></dd>      解释标题
        <dd></dd>
    </dl>

表格

表格式 用来展示数据的
    <table>
        <tr>    <tr>里面只能放<td>
            <td></td>  <td>里面可以放任何东西
            <td></td>
        </tr>
        <tr>        
            <td></td>
            <td></td>
        </tr>
    </table>

表格的属性

    border    给表格加上了边框
    width    给表格设置宽
    height    给表格设置高
    cellspacing    规定单元格之间的空白。
    cellpadding    规定单元边沿与其内容之间的空白。
    align   内容的水平对齐方式 
    center,left,right    如果设置table上，决定表格显示的位置
    如果设置单元格上，决定单元格中文本的位置
- 标签
    <th></th>    起到表头的作用    其中的文字加粗，居中
    <caption></caption>    给表格设置标题    在表格的最上面显示标题
    <thead></thead>    用来存放当前列的表头    如果没有加css页面默认将表头中的高度设置变小
    <tbody></tbody>        一般用来存放页面中的主体数据    如果不写会自动加上
    <tfoot></tfoot>    一般情况不会出现

表单

    表单的作用就是收集信息
    表单有提示信息，表单空间，表单域组成

 - 表单
     action 处理信息（收集信息递交给那个文件处理）
     Method="get/post" 递交信息的方式 post相对比较安全
- 单文本输入框
      Name 输入框的名称
      Value 默认值
      Maxlength  输入字符的长度
      Readonly="Readonly" 输入框只读状态
      Disabled="disabled"  未激活
- 密码输入框
    密码<input type="password" name="pwd">
    注意：但文本输入框的属性对密码输入框同样生效
- 单选按钮
    性别 <input type="radio" name='gender'>
    男 <input type="radio" name="gender" checked="checked">
    注意：单选按钮，将name值设置相同的时候，可以实现单选效果。
    Checked=”checked”  设置默认选中项
- 多选按钮
    爱好 <input type="checkbox" name= "" 
    check="checked">
    checked="checked" 设置默认选中项
-  下拉列表
    Selected=”selected”  设置默认选中项
    Multiple=”multiple”  设置下拉列表为多选项
    Optgroup 设置下拉列表分组信息
    Label   设置分组信息的名称
- 文本域
    个人信息 <textarea " cols="30" rows="10"></textarea>
    Rows  输入行数
    Cols   输入字符的长度
- 递交按钮 完成递交
    <input type="submint" value="注册信息">
- 普通按钮  不能递交，通常配合js  
    <input type="submit" value="注册信息">
- 图片按钮
    <input type="image" src="">
- 重置按钮
  <input type="reset">
 - 文件上传控件 
     <input type="file">
 - 表单分组信息
     <fieldset>表单分组信息
    <legend></legend>  分组信息名称
    </fieldset>