HTML入门2（列表、表格、表单）

郭里横
188 阅读4分钟

列表的分类

列表主要分为无序列表、有序列表、自定义列表；

ul无序列表(重点)

快捷方式： ul>li个数{内容} 例如：ul>li10
ul里只能放li ， li里可以放任何内容

<ul>
    <li></li>
    <li></li>
</ul>

·榴莲
·香蕉
·苹果
·哈密瓜
·火龙果

用css样式去除：
ul{ list-style: none; }

ol有序列表（order list顺序）

<ol>
      <li value="0" type="A">苹果</li>
      <li>李子</li>
      <li>香蕉</li>
      <li>橙子</li>
</ol>

1.李子
2.香蕉
3.橙子

  • value属性（了解）：改变起始值。如果从第三个li加value，value之前还是从1开始
  • type属性：改变序号样式类型（123、ABC、abc)

dl自定义列表

快捷方式：dl>dt+dd*个数
dl里面只能嵌套dt和dd，dt和dd里面可以嵌套任何的标签内容；如果第一排要加粗，strong只能加在dt里
dt默认缩进两个字

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

关于我们
公司简介
对外合作
程序员节

table表格

基本结构

<table>
       <caption>
               表格标题
      </caption>
      <tr>
             <th>表头</th>
             <th>表头</th>
     </tr>
     <tr>
             <td>单元格</td>
             <td>单元格</td>
     </tr>
</table>

image.png

常见属性（了解） 加在<table>里

  • border ：边框 ，后期用css实现； border="1"
  • width：设置表格的宽度，后期用css实现； width="300" height="400"
  • rules : 边框变细，一般rules="all" 一般取值为all，就可以实现细线表格样式，后期用css实现；
  • cellpadding：规定内容距离单元格边沿的空白距离，后期用css实现；cellpadding="20"
  • align：设置表格的对齐方式，取值为left、center、right；如果align设置给table只影响
    table整体,不会影响th和td（就是表格会到屏幕中间）； align="center"
image.png

如果不写结构，除了caption，其他全部默认tbody,结构就不清晰，方便浏览器阅读。
浏览器一行一行解析，所以建议把简单的 tfoot放在tbody前面
thead标签用于把对HTML表格里的表头集中起来；
tbody用于集中主体内容；
tfoot用于集中表尾

合并单元格（了解）

跨行合并rowspan

这里要合并2个，所以rowspan="2" 要加上本身

image.png

跨列合并colspan

image.png 单元格合并三步曲(左上原则)
第一步： 先确定是跨行还是跨列
第二步：找到目标单元格，写跨行或者跨列 --- ``
第三步：删除多余的单元格；

from表单

表单的组成

一个完整的表单是由提示文本、表单域（form）、表单控件三部分组成的

image.png

三个常见的属性(了解)

  • action：设置要提交的地址，将收集的数据提交到指定的地址；
  • method：提交数据的方式，有post和get两种，post属于加密提交，get属于明文提交（不需要加密直接提交）；
  • name：规定表单的名称，用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据

表单控件

1.input表单控件
2.button按钮标签（常用）
3.select下拉列表
4.textarea文本域

input表单控件 input 的 type：

image.png input --------image ----------------- 图片按钮，同时加src="地址"

image.png
  • text文本框：输入最大长度 maxlength="20"
  • placeholder提示文本：placeholder="请输入姓名"
  • radio单选框（圆框）：如果有几个选项，只想勾一个，写相同name=“”(name作用是告诉浏览器这是一组)； 默认选择 checked
  • <input type="radio" name="sex" />男
  • <input type="radio" name="sex" checked />女
  • checkbox多选框（方框）：也要写name="" 默认选中加checked
  • file选择文件： 想多选文件,加 multiple （复数，许多的，多样的），下拉列表也可以用
  • submit 提交按钮：默认字是“提交”，如果想改成登陆 value="登陆"
  • reset重置 和 button普通按钮 改字用value=""
  • submit提交 reset重置 实现的前提是有form标签包着

button按钮标签（常用）

image.png <button type="submit">提交</button>
如果直接写，默认效果是submit
reset 和submit 同样只有包在form里才生效

select下拉列表

一对select标签嵌套多个option标签； 默认选中，在某option加 selected=“selected” 或者 selected

<select name="" >
         <option value=""></option>
          <option value=""></option>
          <option value=""></option>
</select>

默认选中，加 selected=“selected” 或者 selected
里面的name和value暂时不用填

textarea文本域

该控件中可以容纳无限数量的文本。可以通过cols 每排输入数量（列）和rows 行数属性来规定textarea的尺寸。
设置提示文本：
1.在两个尖括号标签之间。会显示但是占位置，可以删除
2.用placeholder="请自我介绍"。不占位置的提示

常见的表单属性

  • name属性
  • 关联为一组；给数据设置名称，区分数据的类别(比如单选框radio上面的name属性)
  • checked属性
  • 默认选中；设置radio单选和checkbox复选按钮默认选中效果；select控件是用selected
  • value属性
  • 设置修改表单的文字默认值，例如：提交改成登陆。如果是text加就会变成框里的字
  • maxlength最大长度
  • 限制最多输入的内容长度，取值是阿拉伯数字
  • placeholder属性
  • 提示文本；css3新增的占位符，只有提示作用，不能获取值，不占位置，是灰白色的

label用户体验提升设置
点击字体也可以选中圆圈

image.png 第一步：直接用label标签把内容和表单标签包裹起来
第二步：把label标签的for属性删掉

image.png

avatar
文章
阅读
粉丝