菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 张锐杰-20221011-HTML02 [打印本页]

作者: 张锐杰 时间: 2022-10-12 08:47
标题: 张锐杰-20221011-HTML02
表格标签
表格的基本语法
      必须要在table标签中，tr代表表格的行，td代表每行的具体数据（单元格）

      基本标签的含义：
         <table></table>来定义表格
         <tr></tr>标签用于定义表格的行（table row），必须要放在table标签中
         <td></td>标签用于定义表格中的单元格，必须嵌套在tr标签中
         <th></th>用于定义表格中的表头内容，表头内容会加粗显示并且居中对齐

表格标签的属性
      thead和tbody标签
         thead和tbody标签是为了更清楚的区分表头和表内容的两个标签，thead代表表头部分，tbody代表内容部分
         注意：
            thead和tbody中仍然要写tr标签

合并单元格
      合并单元格的步骤：
         1、先确定需要跨行还是跨列合并的第一个单元格
         2、在合并的第一个单元格td标签内添加上跨行合并还是跨列合并的属性比例：rowspan=“n”,  n代表合并的单元格数目，最小应该是2
         3、删除被合并的单元

      跨行合并
         利用rowspan来实现

      跨列合并
         利用colspan来实现

列表标签
有序列表
      有序列表是有顺序的列表，各个列表之间会按照一定的顺序进行排列
      有序列表使用<ol></ol>标签来定义的，内部使用<li></li>标签来定义列表项
      基本语法
      注意：
         1、<ol></ol>标签中只能嵌套<li></li>，直接在<ol></ol>标签中写其他的标签是不允许的
         2、<li></li>标签内相当于一个容器，可以容纳所有的元素

无序列表
      用<ul></ul>标签来进行声明，一般会用项目符号来呈现列表项，每个列表项默认前方有圆点，ul标签中也只能嵌套li标签

      注意：
         1、无序列表各个列表项之间没有顺序级别之分，是并列
         2、<ul></ul>标签中只能嵌套<li></li>，直接在<ol></ol>标签中写其他的标签是不允许的
         3、无序列表是有自己的样式的（前面的小圆点），后期可以通过CSS来进行样式调整

自定义列表
      自定义列表主要的使用场景是在页面的底部
      自定义列表是用<dl></dl>标签来声明的，其中嵌套的<dt></dt>标签代表列表项的名词，<dd></dd>标签代表列表项的名词解释

      注意：
         1、<dl></dl>标签中只能包含<dt></dt>和<dd></dd>标签
         2、经常是一个<dt></dt>来对应多个<dd></dd>

表单标签
为什么需要表单
      使用表单的目的就是为了手机用户的信息

表单域
      表单域是一个包含表单元素的区域
      在html中表单域用<form></form>来进行声明
      表单的作用
         1、收集用户信息
         2、将收集到信息提交给服务器进行处理

      语法
      表单域属性

表单控件
      input  输入表单元素
         type属性及其属性值
         其他属性
            注意点：
                  1、name和value是每个表单元素都有的属性，主要给后台人员去使用的
                  2、name表单元素，一般还使用在单选按钮和复选框部分，来保证单选按钮和复选框的一致性。
                  3、checked属性主要是针对与单选按钮和复选框的，页面首次加载时，会默认选中指定元素
                  4、maxlength，用户可以在表单元素中输入的最大字符数，一般使用较少

      lable标签
         增加单选按钮或者复选框的可点击范围来增加用户的使用体验

      select标签
         在页面中，如果想设置多个选项供用户来进行选择，可以使用<select></select>来实现

            注意：
                  1、<select>标签中至少得包含一对<option>
                  2、在<option>标签中来定义selected="selected"，可以把当前项设置为默认选项

      <textarea>文本域
         当用户输入比较多的内容的时候，就不能使用文本框来进行输入，要采用<textarea>标签来进行输入。
         常见的使用场景一般在留言板，评论区等等。
         例
         注意：
            cols=“每行中的字符数”，注意这里是针对于英文字母来说的，汉字的宽度比英文字母大，一个汉字长度等于2个英文字母的长度
            rows=“显示的行数”
            这里设置的容纳字符数必须使文本域里面的内容要超出文本域默认的区域才能看到效果。

查阅文档的网站
百度、W3C、菜鸟教程、MDN（重要）

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)