前端零基础课程--第二节课

1.分区标签： 

     a)  行内分区：span 

     b)  块状分区：div 

 2.换行：<br/> 

 3.块级元素和行内元素 

 4.图片的使用<img/>

     a)  使用方式<img src="images/jd_logo.png" alt="logo" /> 

        i.    src指图片地址，可以使用相对和绝对路径

         ii.  alt表示下载图片过程中显示的替代文字 

     b)  img元素是行内元素

     c)  宽高属性：width/height   

链接<a></a> 

    1.基本用法：<a href=”http://...”>..</a> 

         a)  href链接地址 

         b)  target目标，可选值_blank/_self(默认) 

    2.链接图片:<a><img/></a> 

    3.锚点：用来在页面中定位（常用来做页面内的菜单跳转）:

        <a href=”#anchor”>跳转至</a> 

         a)  可以跳转至其他页面锚点  <a href=”page.html#anchor”>跳转至</a> 

    4.发送邮件：<a href=”mailto:xx@qq.com”></a> 

    5.调用JavaScript： 

        a)  <a href=”javascript:alert(‘hello’)”>..</a> 

表格（table）：用来组织结构的信息 

    子元素（必备元素）： 

        tr：行 table row 

        td：单元格 table rowdata可选子元素： 

        caption：表标题 

        thead:表头 

        th:表头单元格 

        tbody：表体 

        tfoot: 表脚    

    常见属性： 

        table： 

        border：边框 

        width:宽（px/%） 

        height:高（px/%） 

        align:水平对齐(left,center,right) 

        valign:垂直对齐（top,middle,bottom) 

        cellpadding: 单元格内边距 

        cellspacing：单元格外边距 

        bgcolor：背景色  

        tr: 

             width:宽（px/%） 

             height:高（px/%）  

        td:

             colspan:列合并 

             rowspan：行合并 

             width:宽 

             height:高 

             align:水平对齐       

 练习： 

     1.练习使用各种表格元素和属性 

     2.把下方的布局用表格实现 

列表（ul/ol）unorder list/order list 

    列表项：li - list item 

    <ol><li>...</li></ol> 

    type属性：设置序号类型，可选值1/a/A/i/I  

无序列表 

    type属性：可以修改项目符号类型，可选值：disc（实心圆，默认），circle（空心圆），square（实心矩形）  

列表嵌套：列表嵌套可以形成层级关系 

 <ol>            

     <li>                 

        <ul>                     

            <li></li>                     

            <li></li>                     

            <li></li>                     

            <li></li>                 

        </ul>             

    </li>        

</ol>  

定义列表<dl>definitionlist：用于给出一类事物的定义的情形，如名词解释、字典等。 

 两个主要子元素：dt/dd     

表单（form）：显示、收集用户信息，并提交给服务器。 

    用法：<formaction=””></form>        

        action:提交后台的url地址        

        method：提交方法get/post        

        enctype：表单编码方式   

                application/x-www-form-urlencoded默认，在发送前编码所有字符        

                multipart/form-data,不对字符编码，在使用包含文件上传控件的表单时必须使用该值。 

                text/plain:空格转换为+号，但不对特殊字符编码 

    表单控件： 

            类型：输入框<input/>、选择框<select></select>文本域<textarea></textarea>  

            input:文本框type：text/password/radio/checkbox/submit/reset/file/hidden 

            select:下拉选择框必备子元素<option></option>  

            表单元素常用属性： 

                multiple:多选，用于select 

                readonly：只读，常用语text，不能修改，只能看 

                disabled：禁用，不能使用 

                checked：选中，用于checkbox，radio 

                selected：选中，用于select