html中meta标签link标签无序有序列表表格表单

分手后的思念是犯贱 2021-09-15 01:30 328阅读 0赞

☞Meta标签用法  
            ◇  <meta charset="utf-8">  防止页面乱码  
             charset：   字符集

utf-8：     编码格式

Gbk  
                   gb2312  
                   big5  
  
  
    注意：

该标签中的关键字不是给用户看的，给搜索引擎提供的。

link标签

设置网页图标

![Image 1][]

注意：  
                          1. 最好将图标放到网页根目录下

☞ 设置引用外部样式表

![Image 1][]

无序列表  
                   <ul>  
                         <li>列表项</li>

</ul>

![Image 1][]

注意：  
                          1. 无序列表中的列表项（li）可以保护任何标签  
                          2. 在网页中用来展示信息的用无序列表  
  
有序列表  
                   <ol>  
                           <li>列表项</li>                
                   </ol>  
自定义列表  
               <dl>  
                              <dt>标题</dt>  
                          <dd>列表项</dd>  
                              <dd></dd>  
                   </dl>  
                   注意：  
                          1.  dt标签中只能包含行内元素(span，a)  
                          2.  dd标签中可以包含所有的标签  
                          3. 一般网页结尾处的列表使用自定义列表  
  
表格  
  
 1：  组成  
                    行    tr  
                    列    td  
                    表格  table             
   2：  作用：

☞ 显示数据  
                 ☞ 网页布局  
    3: 属性  
             border   设置边框  
                 width    设置宽度  
              height    设置高度  
             cellspacing 设置td与td之间的距离  
                               默认值是2  
            cellpadding 设置内容与td左侧的距离

align：  left | center | right   设置对齐方式  
                   注意：  
                         1. 如果给table标签设置align属性，只能让整个标签居中，内容不会居中  
                    2.给tr或者td设置align属性，可以让其内容居中

bgcolor：  设置背景颜色

表格中的标签介绍  
                    ◇ 设置表头  <th></th>  用法与td  
                   ◇  设置表格标题

![Image 1][]

表格结构介绍  
               <thead></thead>  
                  <tbody></tbody>  
                  <tfoot></tfoot>  
  
           ◇ 合并单元格  
                   ☞ 横向合并  colspan  
                   ☞ 纵向合并  rowspan

表单

作用：  
             收集用户信息。  
  
     组成：  
             ☞提示信息  
             ☞表单控件 （重点）  
             ☞表单域

### １.1 表单域 ###

<form></form>  
         
         ☞ action : 设置后台处理数据的后台程序  
         ☞ method：提交数据给后台程序的方式  
                 get提交数据： 会将数据显示在地址栏中  
              post提交数据：会通过后台提交数据（安全性）

### １.1 表单控件 ###

☞ 文本输入框  
              <input type=”text”>  
              属性：  
                         maxlength  设置最大长度  
                    readonly    设置控件为只读  
                    disabled    禁止用户输入  
                    value      设置默认值  
                    name      设置控件名称  
                    id         控件编号  
       密码输入框  
       <input type=”password”>  
                    该控件属性与文本输入框的属性一样。  
             ☞ 单选控件  
              <input  type="radio">  
                   注意：　该控件实现单选效果需要给控件设置相同的name名称。

属性： checked  设置控件默认选中项

下拉列表  
          <select>

</select>  
  
               属性：  
                     selected   设置默认选中项

multiple     实现多选效果

☞ 多选控件  
               <input type=”checkbox”>  
                   属性：  
                      checked  设置默认选中项  
  
  ☞ 资源上传控件  
                         <input type="file">  
                  ☞ 文本域  
                <textarea></textarea>  
              ☞ 隐藏控件  
                <input type="hidden"  value="123">  
      ☞ 按钮  
                    ◇ 提交按钮    <input type="submit"> （提交表单数据)  
                        ◇ 普通按钮   <input type=”button”> (不能提交表单数据)  
                ◇ 重置按钮   <input type="reset"> (将数据恢复到默认值)  
                        ◇ 图片提交按钮  
               <input type="image" src="按钮.jpg">（提交表单数据）

[Image 1]: