我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

赵强-20221011-前端html2

[复制链接]
BlueFlame 发表于 2022-10-11 23:32:24 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、今日所学内容
(1)表格标签
      表格的基本语法:
             必须要在table标签中,tr代表表格的行,td代表每行的具体数据(单元格)
       基本标签的含义:
             <table></table>定义表格
             <tr></tr>定义表格的行(table row)
             <td></td>定义表格的单元格嵌套在<tr>标签中
             <th></th>定义表格的表头内容
        表格的基本属性:
           属性名                                属性值                          描述
            align                            left、right、center         规定表格相对于周边的对齐方式
           border                            1或者""                         规定表格单元格是否有边框,默认是“”,没有边框
           cellpadding                     像素值                          规定单元格边框和具体内容之间的空白距离,默认是1像素
           cellspacing                      像素值                          规定单元格之间的空白距离,默认是2像素
            width                              像素值                         规定表格的宽度
         thead和tbody标签
               thead和tbody标签是为了更清楚的区分表头和表内容的两个内容
           注意:thead和tbody标签中间依旧要用<tr><td>
        合并单元格
        合并单元格的步骤:
              1.先确定需要跨行还是跨列合并的第一个单元格
                跨行合并:rowspan来实现
                跨列合并:colspan来实现
              2.在合并的第一个单元格td标签内添加上跨行合并还是跨列合并的属性
                例如:rowspan="n",n代表合并的单元格数目,最小值是2
              3.删除被合并的单元格
(2)列表标签
      有序列表
            有序列表是有顺序的列表,各个列表之间会按照一定的顺序进行排列
            有序列表使用<ol></ol>标签来定义的,内部使用<li></li>标签来定义列表项
            注意:
        <ol></ol>标签中只能嵌套<li></li>,直接在<ol></ol>标签是不允许的
        <li></li>相当于一个容器,可以容纳所有元素
      无序列表
            用<ul></ul>标签来进行声明,一般会用项目符号来呈现列表项,每个列表项默认前方有圆点,ul标签中也只能嵌套li标签
            注意:
        无序列表各个列表项直接按没有顺序等级之分,是并列
        <ul></ul>标签中只能嵌套<li></li>,直接在直接在<ul></ul>标签是不允许的
        无序列表是有自己的样式的(前面的小圆点),后期可以通过CSS来进行样式调整
      自定义列表
            自定义列表主要的使用场景是在页面的底部
            自定义列表是用<dl></dl>标签来声明的,其中<dt></dt>标签代表列表项的名词,<dd></dd>标签代表列表项的名词
            注意:
        <dl></dl>标签只能包含<dt>,<dd>标签
        经常是一个<dt></dt>来对应多个<dd></dd>
(3)表单标签
      为什么要用表单?
            使用表单的目的就是为了收集用户的信息
       表单域
            表单域是一个包含表单元素的区域
            在html中表单域用<form></form>来进行声明
            表单的作用
        1.收集用户信息
        2.收集信息提交给服务器进行处理
       表单域属性  
    属性                          属性值                   作用
action                         url地址                用于指定接受并且处理表单数据的服务url地址
method                     get/post               用户设置表单数据的提交方式         
name                         文本                     用于指定表单域的名称,因为一个页面会有多个表单
        表单控件:
        input 输入表单元素
        type属性值
      属性值                    说明
      text                  定义单行的输入字段,默认宽度20字符
      button             定义按钮
      radio                定义单选框
      checkbox          定义复选框
      file                    文件上传
      password          密码框
      reset                 重置按钮
      submit              提交属性
        name属性:定义input元素的名字
        value属性:规定input元素的值
        checked属性:规定默认选中
        maxlength属性:规定输入字段中的支付最大长度
        注意:1.name和value是每个表单元素都有的属性,主要是给后台人员去使用
                  2.name表单元素,一般还使用在单元框和复选框部分,来保证单选按钮和复选框的一致性
                          3.checked属性主要是针对单选框和复选框的,页面首次加载时,会默认选中指定元素
                  4.maxlength,用户可以在表达那元素中输入最大字符数,一般使用较少
        lable标签
               增加单选按钮或者复选按的可点击范围来增加用户体验
       
        select标签
               在页面中,如果像设置多个选项供用户进行选择,可以使用<select><select>来实现

        注意:
               <select>标签中至少得包含一对<option>
               在<option>标签中中来定义selected="selected",可以把当前选项设置为默认选项
        <textarea>文本域
               用户输入比较多的内容的时候,既不能使用文本框来进行输入,要采用<textarea>标签来进行输入
               常见的使用场景一般在留言板,评论区等等。

        注意:
               cols="每一行中的字符数",注意这里是针对于英文字母来说的,汉字的宽度比英文字母大,一个汉字长度等于2格英文字母的长度
               rows="显示的行数"
               这里设置的容纳字符必须使文本域里面的内容要超出文本域才能看到效果
(4)查阅文档的网站
       1.百度、W3C、菜鸟教程、MDN(重要)








回复

使用道具 举报

关注0

粉丝0

帖子47

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026