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

标题: 陈玉-20221011-HTML2 [打印本页]

作者: polaris123 时间: 2022-10-11 23:30
标题: 陈玉-20221011-HTML2
一、今日学习内容1.表格标签
  （1）基本语法
<table>                   table：定义表格
      <tr>                   tr:行
         <td></td>    td：单元格；th：定义表头内容,会加粗居中对齐
         <td></td>
   </tr>
</table>
（2）标签属性
align：left/right/center ;对齐方式
border：1或者“ ” 单元格边框，默认无边框
cellpadding=“ ”  单元格边沿和内容之间的空白距离，默认为1像素
cellspacing=“ ”  单元格之间空白距离，默认为2像素
width=“ ”  height=“ ”  宽和高
  （3）thead和tbody标签：更清楚的区分表头和表内容的两个标签，thead代表表头部分，tbody代表内容部分
  （4）合并单元格
   步骤一：先确定需要跨行还是跨列合并的第一个单元格
         步骤二：在合并的第一个单元格td标签内添加上跨行/跨列合并属性
   跨行：rowspan=“n”；跨列：colspan=“n”
2.表单标签
  （1）表单域：包含表单元素的区域，用<form></form>来进行声明
   a.作用：收集用户信息；将收集到信息提交给服务器进行处理
   b.语法:<form action="url地址" method=“提交的方式get/post” name=“表单域名称”></form>
   c.表单控件：input输入表单元素
      c.1  type类型属性值
                  text为文本属性，定义单行的输入字段，默认宽度是20个字符；
                  button定义可点击按钮；
                  radio定义单选框；
                  checkbox定义多选框；
                  file定义输入字段和浏览按钮，来进行文件上传；
                  password定义密码输入框；
                  reset定义重置按钮；
                  submit定义提交按钮，会将表单中的数据发送到服务器
      c.2  其他属性
                  name定义input的名字
                  value对顶input的值
                  checked规定了input元素首次加载时被选中
                  maxlength规定输入字段总字符最大长度
                  注意：1.name和value是每个表单元素的属性
                           2.name表单元素，一般还使用在单选按钮和复选框部分，来保证单选按钮和复选框的一致性。
  （2）<label>标签
   作用：增加单选框和复选框的点击范围，增加用户体验
   基本语法：<label for="名字">
                           <input type="radio" id="名字">男</input>
                        </label>
  （3）<select>标签
   作用：设置多选项进行选择
   基本语法：<select>
                           <option></option>
                        </select>
注意：1.<select>标签中至少得包含一对<option>
               2.在<option>标签中来定义selected="selected"，可以把当前项设置为默认选项
  （4）<textera>文本域
   作用：文字内容较多时，用文本域
   基本语法：<textarea clos=" "  rows="  "></textarea>
   注意：1.cols=“每行中的字符数”，注意这里是针对于英文字母来说的，汉字的宽度比英文字母大，一个汉字长度等于2个英文字母的长度
                  2.rows=“显示的行数”
                  3.这里设置的容纳字符数必须使文本域里面的内容要超出文本域默认的区域才能看到效果。
3.列表标签
  （1）有序列表
   基本语法：
   <ol>          ol：定义列表
         <li></li>  li：定义列表项
      </ol>
   注意：1.<ol></ol>标签中只能嵌套<li></li>，直接在<ol></ol>标签中写其他的标签是不允许的
   2.<li></li>标签内相当于一个容器
   3.有顺序级别
  （2）无序列表
   基本语法：
<ul>
         <li></li>
   </ul>
注意：1.<ul></ul>标签中只能嵌套<li></li>，直接在<ul></ul>标签中写其他的标签是不允许的
   2.无顺序级别，可进行样式调整
  （3）自定义列表
基本语法:
   <dl>                <dl></dl>标签声明；
      <dt></dt>    <dt></dt>列表项名词；
      <dd></dd>    <dd></dd>列表项的名词解释
      <dd></dd>
   </dl>
注意：1.<dl></dl>标签中只能包含<dt></dt>和<dd></dd>标签
               2.经常是一个<dt></dt>来对应多个<dd></dd>
4.查阅文档网站：百度、W3C、菜鸟教程、MDN（重要）

二、今日问题
今日课程已掌握没有问题
三、解决方案

今日课程已掌握没有问题

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