0基础超详细笔记 HMTL第二天

        列表

        作用：给一堆数据添加列表语义，就是告诉引擎告诉浏览器，这些东西是一个整体。

        分类（根据常用由常用到不常用）：1.无序列表（ol） 2. 自定义列表 3. 有序列表（ol）

        无序列表 ： 

<ul type="value"></ul>

type 默认值 为disc （小黑圆点） 可以修改他的值为：square（正方形） circle（空心圆），但在企业开发中，非常不建议这么干。

        

 注意点:

​ 1.一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的

​ 2.ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就 是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用​ 3.由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li 标签

        无序列表经典应用——导航栏

有序列表

作用：给一堆数据添加语义，且有先后之分

<ol type="A"></ol>

和无序列表相似，且都可以使用type值来修改内容前方的数字类型。

自定义列表

自定义列表用dl包裹。但里面不是li。

作用：给一堆数据添加语义，在dt作为标题的情况下，dd为dt做描述。

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

定义列表的应用场景——做网站尾部的相关信息​ 做图文混排

注意：

​ 和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现​ 和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签​ 一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.​ 推荐使用一个dt对应一个dd​ 和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签

也就是说 ，最好是<dl>

                                        <dt></dt>

                                </dl>

                        表格      

         

作用：给一堆数据添加表格语义。当数据量很大时，表格是最清晰的表现形式。

表格的完整结构：

<table>
        
    <caption>表格的标题</caption>
    
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>

     <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>


</table>

即，表格分为四部分。1. 标题（caption） 2.表头 （thead—— 注意，该部分tr中的td用th代替。th内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。）3. 主体（tbody） 4.附加部分（tfoot）

注意： 1. 表格中的table 和tr/td是一个整体，是一个组合。都是同时出现的，不能分开用。

            2.合并单元格时，要把多余的单元格删掉。

表格的属性：

        border：默认值为0 ，即，默认没有边框。

        width： 表格中的任意一个tr/td/table 都可以设置该属性。      

        height：表格中的任意一个tr/td/table 都可以设置该属性。

        align:（center left right）  可以给table/tr/td中的任意一个使用。其中table设置表格在页面中的居中对齐。

        valign:（mid top bottom ） 只可以给tr/td使用。给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式.给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式. 注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐.

        cellspacing:（外边距，即单元格之间的距离。）

        cellpadding: （内边距，即内容与单元格边框的距离。）

        bgcolor： 三者都可使用。

        

        rowspan和colspan：（用于单元格合并）。

细线表格（边框合并的小方法）：

        1.给table标签设置bgcolor="black"，cellspacing = "1px" 2.给tr标签设置bgcolor="white" 注意点: table标签和tr标签以及td标签都支持bgcolor属性

                        表单

<form action="提交的服务器接口地址">
    <表单元素>
</form>

作用: 用来收集用户信息。

注意：所有的表单元素都要写在form表单中。

常见的表单元素： 

             一、   input标签：        

                                属性：name

                                属性：value（该元件的值。将来你要想取到该元件的值，就要用到value）

                                属性： type :

                                1. text         明文输入框 

                                2.password 暗文输入框

                                3.radio  单选按钮（要想实现互斥效果，将所有同一类型的单选按钮设置同一个name值。此外，默认选中单选按钮用checked）

                                4.checkbox 复选框（默认选中单选按钮用checked）

                                5.submit 提交按钮（将整个表单的信息提交到服务器。有两个前提，1.form有一个action值。2.表单元素有name值。）

                                6. file 文件上传 

                                7. button 普通按钮

                                8. image 图片按钮

                                9. reset 重置按钮

                                10. hidden 隐藏域 （将一些数据悄悄传给服务器）

                二、  select 下拉列表 （可以通过加一个optgroup label来分组，option默认设置，用selected）

        

 <select>
      <optgroup label="分组名称">
          <option>列表数据</option>
      </optgroup>
  </select>

                      三、          textarea 文本域 

四、  fieldset组件。（对于表单中多个控件和标签进行分组）

使用方法

<form action="">
      <fieldset>
        <legend>请登录</legend>
        账号:<input type="text"><br>
        密码:<input type="password">
        <input type="submit">
      </fieldset>
  </form>

                                

其中 legend 可以为他的父级元素fieldset设置标题。

                                            

                                

补充： label标签 

<label for="account">
          账号:
        </label>
        <input type="text" id="account">

使用简述，1.label for id

                    2. 用<label></label>直接将内容包裹。

H5新增表单元素        

一.datalist标签。

                 1.作用: 给输入框绑定待选项 

<input type="text" list="xxx"> <datalist id="xxx"> <option>xxx</option> </datalist>

        

                2.datalist格式: <datalist> <option>待选项内容</option> </datalist>

                3.如何给输入框绑定待选列表

                         1.搞一个输入框 2.搞一个datalist列表 3.给datalist列表标签添加一个id 4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

二、progress进度条

<progress value="70" max="100">70%</progress>

注意：progress表示任务的完成情况，常用于进度条 max 定义进度元素所要求的任务的工作量，默认值为1 value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。

三、滑块 （range）

<input type = "range" min = "0" max = "100" step = "10" value = "30">

其中 min，max表示该滑块一共有多少个单位。step表示拖动鼠标一次走多少像素，value表示页面加载时滑块的值。

四、校验文本框（emal tel url number）

<input type="email">
<input type="tel">
<input type="url">

<input type = "number">

校验邮箱（xxxx@xxx）——校验@字符后面有无字符。

校验手机号————使用时要配合正则表达式。

校验网址 (http://xxx)检验//后是否有字符。

校验是否是数字。

五、取色器

<input type = "color">

六、日期和日期时间

<input type = "data">
<input type = "datatime-local"

H5新增属性

                min————最小值。

                max————最大值。       

                step   ————步幅。    

                pattern————正则匹配（设置正则表达式）。

                autofocus————自动聚焦。

                required————必填项。

                novalidate————无需校验。

                placeholder————提示内容。

                formaction————一个表单中可以通过设置不同的formaction属性，来设置不同的提交按钮到不同的服务器。 formaction = “text.php”

                formmethod————提交方式。同上。

                formnovalidate————无需校验。

                formenctype————表单提交的数据格式。查询字符串 纯文本 附件（只需了解。）