前端HTML基础

#博学谷IT学习技术支持#

一、列表标签

（一）应用场景：网页中以行的方式整齐的展示数据：如数据列表、排行榜

（二）无序列表

1、标签：a、整体-ul；b、每一项-li

2、显示的效果：每一项前面默认有个小圆点

3、注意点：a、每一项是没有顺序的；b、ul标签中只能放li标签；c、li标签里面可以放任意的标签

（三）有序列表

1、标签：a、整体-ol；b、每一项-li

2、显示的效果：每一项前面默认的序号

3、注意点：a、每一项都是有顺序的；b、ol标签中只能放li标签；c、li标签可以放任意的标签

（四）自定义列表

     1、标签：a、整体-dl；b、每一项-dd

     2、注意点：a、dl标签中只能放dt或者dd；b、dt或者dd中可以放任意标签

二、表格

（一）应用场景：以行+列的单元格的方式整齐的展示数据，如：股票价格

（二）表格的基本标签

      1、整体-table

      2、每一行-tr

      3、每一个单元格-td（可以嵌套任何标签）

（三）属性

      1、border-边框

      2、cellspacing-单元格间距

      3、width-宽度

      4、height-高度

（四）表格的其他标签

      1、caption：表格整体的大标题（写在：table标签开始标签的下面）

      2、th：表头标签--表格一列的小标题（写在：用来替换td）

      3、表格的结构标签（写在：用来包裹tr）

         a、表格的头部--thead

         b、表格的身体--tbody

         c、表格的底部--tfoot

（五）合并单元格

      1、应用场景：多个单元格展示内容相同时让信息简洁不重复显示

      2、合并属性：rowspan；colspan

      3、实现步骤

        a、确定合并哪几个单元格

        b、通过左上原则确定保留谁删除谁（如果是上下合并，保留最上面的，删除其他。如果是左右合并，保留最左边的，删除其他）

        c、确定是跨行还是跨列（如果是跨行合并，rowspan=“合并的个数”。如果是跨列合并，colspan=“合并的个数”）

三、表单标签

   （一）应用场景：收集用户数据类网页，如：登录页、注册页等

   （二）input标签：可以通过type属性值的不同，表现不同的形态

         1、文本框

            a、text

            b、属性（value--用户输入的数据，如果提前在代码中设置好了，相当于是内容的默认值，最后value属性值会发送给后台。name--告诉后台发送出去的数据是什么含义。placeholder，占位符）

         2、密码框

            a、password--密文输入

            b、属性（value--用户输入的数据，如果提前在代码中设置好了，相当于是内容的默认值，最后value属性值会发送给后台。name--告诉后台发送出去的数据是什么含义。）

         3、单选框

           a、radio

           b、属性（name--告诉后台发送出去的数据是什么含义。value--表示用户选择的数据。checked--默认选中，针对于单选框，一组中只能设置一个）

4、多选框

           a、checkbox

           b、属性（name--告诉后台发送出去的数据是什么含义。value--表示用户选择的数据。checked--默认选中）

5、文本选择框

           a、file          

 b、属性（html5新增的属性。multiple，多文件选择）

6、表单按钮

 a、提交按钮--submit

 b、重置按钮--reset，让表单恢复成默认值

 c、普通按钮--button

 d、注意点：如果需要使用功能：需要配合form标签一起使用（使用form标签把表单标签一起包裹起来即可）

（三）button标签

      1、默认的功能：提交按钮

      2、type--提交submit，重置reset，普通button

（四）下拉菜单

      1、标签：整体select，每一项option

      2、属性：默认选中selected

（五）文本域标签textarea--作用：用于输入大段文字

（六）label标签

     1、作用：绑定文本和表单标签的关系

     2、使用：

方法一：使用label标签把文本包裹起来；在表单标签上添加id属性；在label标签的for属性中设置id属性值。

方法二：直接使用label标签把文本和表单标签一起包裹起来。注意点：需要把label标签的for属性删除。

四、语义化标签：没有语义的布局标签

（一）div

特点：独占一行；宽度默认是占满一行，高度默认由内容撑开。

（二）span

特点：一行中可以显示多个；宽度和高度默认都是由内容撑开。

五、字符实体：HTML的空格合并现象

    常见字符实体：空格--    大于号-->  小于号--<

六、总结

    今天的学习总结就到这里了，接下来我会继续往下学，下次给大家分享哦！