2021-04-25 HTML5学习第二天

HTML5学习第二天（20210425）

目录

表格标签（用于显示数据）

列表标签（用于布局）

表单标签（用于收集用户信息）

---

• 表格标签（用于显示数据）

  • 基本结构
    • 最外层是<table></table>整体表格标签
    • 进入表格后首先是行，<tr></tr>，表示表格中横着的一行
    • 一行中有多个单元格，<td> xxxx </td>，一对单元格标签中间填充表格数据
    • 第一行作为表头，可以用<th></th>代替<tr></tr>，表头文字会自动加粗居中
  • 注意点
    • table>th≈tr>td
    • 前面的都只能嵌套紧挨着的下一层，只有td里面能放各种元素（文字、图片、链接等）
  • 表格属性
    • align
      • 表格相对周围元素（整个页面）的对齐方式
      • left,center,tight
      • <table align="center"></table> 通用<标签 属性="属性值">
    • border
      • 表格边框宽度，默认值为0
      • <table border="0"> 或 <table border="n"></table>
    • cellpadding
      • 表格中间填的数据与表格线之间的距离，默认为1像素
      • <table cellpadding="3"></table>
    • cellspacing
      • 各个单元格之间的距离（因为整体是当作很多个单元格堆砌起来的，各自相独立），默认为2像素，设成0就会变成没有缝隙的表格效果
      • <table cellspacing="0"></table>
    • width
      • 设置表格宽度
  • 表格标签区域划分
    • <thead></thead>表头
    • <tbody></tbody>表主体
    • table >thead≈tbody >th≈tr >td(有点不对不过不知道咋正确表示，我能看懂就行)
    • 一定要区分<th><thead>,<th>表示一个小块是表头里面的，<thead>表示整个表头
  • 合并单元格
    • 确定跨行还是跨列合并，找到目标单元格后 合并方式=“合并小格子数量”，再删掉多余的
    • 跨行合并rowspan(向下合并)
    • 跨列合并colspan(向右合并)

• 列表标签（用于布局）

  • 无序列表unordered list
    • <ul> <li> xxxx1 </li> <li> xxxx2 </li> <li> xxxx3 </li> <li> xxxx4 </li></ul>(花里胡哨哈哈哈哈)
    • 各个列表项xxxxn之间是并列关系，没有轻重之分
    • ul紧挨着下一层只能嵌套li，li里面随便放什么都可以
  • 有序列表ordered list
    • <ol> <li> yyyy1 </li> <li> yyyy2 </li> <li> yyyy3 </li> <li> yyyy4 </li></ol>
    • 各个列表项yyyyn之间有先后顺序，显示时会自动加上序号1234……
  • 自定义列表definition list(是这么写吗有点不太确定)
    • <dl> <dt>名词1</dt> <dd>名词1解释1</dd><dd>名词1解释2</dd><dd>名词1解释3</dd> </dl>
    • dl里面只能嵌套dt和dd
    • dt,dd个数没有限制，通常是一个dt对应多个dd(这两个是平级关系)

• 表单标签（用于收集用户信息）

  • 表单 = 表单域 + 表单控件/表单元素 + 提示信息
  • 表单域——一个包含表单元素的区域（就相当于打印问卷的那张纸）
    • <form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>
      • action用于指定接收表单数据的服务器地址
      • method设置数据的提交方式，get/post
      • name用于指定表单的名称，因为一个页面中可能会有多个表单域
  • 表单控件/表单元素（这几个都是单标签）
    • input - 输入表单元素
      • <input type="属性值">value
        • text 单行输入文本
          • 默认宽度为20字符
          • 可以通过value指定默认值，maxlength指定最大输入长度(再长了就输不进去了)
        • password 密码
          • 也是输入文本，只是不显示具体输入信息
        • radio 单选框，圆形
          • 通过将多个<input>指定相同的name属性即可相互关联，使得只能选中一个
        • checkbox 多选框，方形
          • 也是多个<input>通过相同的<name>来关联，可多选
        • button 按钮
          • 通常通过javascript启动脚本
          • 可以通过value设置按钮上的文字
        • file 上传文件
          • 按钮上写的“选择文件”，好像不能用value改变？
        • reset 重置
          • 按一下清空，恢复默认数据
          • 可以用value改编按钮上的文字
        • submit 提交
          • 将已经填写的数据传到服务器，如果地址有误会报错
          • 可以value改字
        • hidden
          • 隐藏的输入字段？和password有啥区别吗？课上没讲
      • <input name="输入元素的名称">
      • <input value="输入元素的值">
        • name和value是每个表单元素都有的属性值，主要给后台人员用
      • <input checked="checked"> 表示输入元素首次加载时默认选中，用于单选radio和多选checkbox
        • 亲测只写checked也可以
      • <input maxlength="nnnn">最大输入字符数
    • label 为input元素定义标签
      • 用于绑定标签元素，点击label标签内的文本时可自动选中对应表单元素
      • label标签的for属性要与对应表单元素的id属性相同
        • <label for="sex">男</label> <input type="radio" id="sex">
        • 此时点击文字"男"就会选中关联单选框
    • select -下拉表单元素
      • <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select>
      • 一对select里面至少要有一对option
      • 某个option里面包含属性selected="selected"时表示默认选中
    • textarea - 文本域元素（实际用得少，都用css改变大小）
      • 用于输入文字较多时使用（评论、留言）
      • <textarea rows="m" cols="n"> xxxxxxxx </textarea> //m行n列

 

怎么幕布复制过来加粗颜色就都没有了，感觉效果没那么好了orz

还是放张图

怎么说，感觉难也不难，就是要记的有点多，而且属性名和属性值有点容易搞混，可能两天不碰就忘了，还是得多用

---

---

两天时间把html学了个皮毛，明天周一啦，开始学css，还有点小期待呢，希望过不久我也能做出漂亮的网页