6hz7vif 发表于 2024-7-27 21:11:57

西安电子科技大学出版社：网站设计研发教程


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">网站设计<span style="color: black;">研发</span>教程。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">西安电子科技大学出版社。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">来看表格元素，表格元素本身并不<span style="color: black;">繁杂</span>，<span style="color: black;">大众</span><span style="color: black;">能够</span>看到<span style="color: black;">实质</span>上<span style="color: black;">便是</span>一个table里边带着若干个行t&gt;和每一行里边的若干个单元格t&gt;<span style="color: black;">这般</span>的东西来<span style="color: black;">构成</span>的。一个table里边<span style="color: black;">能够</span>带多个t&gt;，每一个t&gt;就<span style="color: black;">表率</span>一个行，<span style="color: black;">这儿</span><span style="color: black;">能够</span>看到是两行。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">每一行里边<span style="color: black;">倘若</span>是像<span style="color: black;">此刻</span><span style="color: black;">表示</span>的有三个t&gt;，<span style="color: black;">那样</span>它<span style="color: black;">便是</span>一个两行三列的表格。<span style="color: black;">例如</span>规定<span style="color: black;">全部</span>的表格的宽度是200个px，<span style="color: black;">亦</span><span style="color: black;">便是</span>200个像素，<span style="color: black;">便是</span>固定宽度<span style="color: black;">这般</span>一个方式。当然<span style="color: black;">亦</span><span style="color: black;">能够</span>规定<span style="color: black;">例如</span>百分比，它的宽度<span style="color: black;">例如</span>50%，那它<span style="color: black;">便是</span>这个表格<span style="color: black;">能够</span>随着浏览器宽度的放大缩小而放大缩小。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/32beef860a714d42bcc5c6878fe0a074~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722660021&amp;x-signature=fwp4OoMhSE2N0HglH4aVXMzsWyc%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">另一</span>还有一个border，<span style="color: black;">大众</span>可能<span style="color: black;">重视</span>到border这个<span style="color: black;">地区</span>被IDEA划了一条线<span style="color: black;">暗示</span>，这是一个过时的属性，这<span style="color: black;">实质</span>上<span style="color: black;">表示</span><span style="color: black;">便是</span>过时属性，确实它是一个过时的属性。<span style="color: black;">由于</span>在HTML5里边<span style="color: black;">能够</span>用CSS，<span style="color: black;">亦</span>经常<span style="color: black;">说到</span><span style="color: black;">能够</span>用更<span style="color: black;">繁杂</span>的CSS，<span style="color: black;">包含</span>HTML5的其它的<span style="color: black;">有些</span>方式来设置表格的这种<span style="color: black;">表示</span>方式。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这儿</span>稍微简单点，就用HTML4里边的border，它等于1<span style="color: black;">寓意</span>着这个表格是有边框的，里里外外有边框的，<span style="color: black;">这般</span><span style="color: black;">能够</span>看到这个表格。<span style="color: black;">实质</span>演示一下这个表格的<span style="color: black;">表示</span>，<span style="color: black;">便是</span><span style="color: black;">这般</span>的一个<span style="color: black;">表示</span>。<span style="color: black;">大众</span><span style="color: black;">能够</span>看到在这个表格里<span style="color: black;">便是</span>两行三列，<span style="color: black;">这儿</span>边内容就填充在里边了，它的宽度<span style="color: black;">亦</span>是绝对宽度200个px，200个像素这么宽。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-dtbei8xehn/f712906eed4046a6a60d3c27785a22eb~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722660021&amp;x-signature=GFVPGnEAG1Autdqf0esyt8te4wk%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">另一</span>经常<span style="color: black;">亦</span>需要表格的这种合并，<span style="color: black;">便是</span>它的这种单元格之间的合并，<span style="color: black;">例如</span>A1、B1这两个单元格合并，横着合并<span style="color: black;">或</span>是竖着合并，<span style="color: black;">例如</span>A1和A2<span style="color: black;">这般</span>的单元格合并可不<span style="color: black;">能够</span>做到？<span style="color: black;">实质</span>上<span style="color: black;">便是</span>需要<span style="color: black;">经过</span><span style="color: black;">有些</span>更<span style="color: black;">详细</span>的方式，<span style="color: black;">便是</span><span style="color: black;">能够</span>声明我的某一个单元格，它是横跨了两个列<span style="color: black;">或</span>是横跨了两个行，<span style="color: black;">例如</span>这个<span style="color: black;">便是</span>横跨了两个行，而这个是横跨了两个列来做到的。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-dtbei8xehn/8bc6a62babfb4c21958c6a85c52d7ee4~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722660021&amp;x-signature=MiPrgikGFJ3ynQQknmJcaCxMalc%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当然<span style="color: black;">这儿</span><span style="color: black;">大众</span><span style="color: black;">重视</span>到除了刚才<span style="color: black;">说到</span>的tr以外，还<span style="color: black;">增多</span>了<span style="color: black;">有些</span>其它的表格的元素，<span style="color: black;">例如</span>caption，它<span style="color: black;">实质</span>上<span style="color: black;">便是</span>表格的<span style="color: black;">有些</span>标题，还<span style="color: black;">增多</span>了th，它其实<span style="color: black;">便是</span>表头，<span style="color: black;">能够</span>理解为head表头，它在<span style="color: black;">表示</span>的时候表头天生会<span style="color: black;">表示</span>的，<span style="color: black;">例如</span>加粗、加黑<span style="color: black;">能够</span>有<span style="color: black;">这般</span>的<span style="color: black;">有些</span>效果。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-dtbei8xehn/08fdfba0af8543d7ad90637459233593~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722660021&amp;x-signature=VN7PKHtekv3rDVrNvcMXz5755Ao%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重点</span>是关注它是<span style="color: black;">怎样</span>，<span style="color: black;">例如</span><span style="color: black;">一样</span>的下边儿的这一行是三个格儿，而上面儿这行就会变成两个格儿，<span style="color: black;">由于</span>它把其中的两列合并了，<span style="color: black;">便是</span>一个<span style="color: black;">tel</span><span style="color: black;">这般</span>一个元素就占了两个列。同样的道理，<span style="color: black;">能够</span>看到<span style="color: black;">tel</span>在这儿其实又占了两个行，看一下<span style="color: black;">实质</span>的<span style="color: black;">表示</span>效果，更清楚的看到它最后<span style="color: black;">表示</span>出来的<span style="color: black;">状况</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在<span style="color: black;">这儿</span>边就刚才<span style="color: black;">说到</span>的占了两个列的<span style="color: black;">tel</span>，它最后<span style="color: black;">便是</span>把两个列进行合并，而占了两个行的<span style="color: black;">tel</span><span style="color: black;">实质</span>上<span style="color: black;">便是</span>上下的两行被它合并掉了，<span style="color: black;">亦</span>就说下边这一行干脆就<span style="color: black;">仅有</span>一个单元格了，就达<span style="color: black;">成为了</span><span style="color: black;">这般</span>的一个效果，这个在表格里边是<span style="color: black;">能够</span>设置的。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-dtbei8xehn/e471bdf9095941658420be4eea24aff5~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722660021&amp;x-signature=8LPTsyQHdHFpfhPsRq7fzoi%2F1Xg%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">另一</span><span style="color: black;">大众</span><span style="color: black;">能够</span>看到还给了<span style="color: black;">这般</span>一个带有语义的表格的表现方式，带有语义的表格的表方式<span style="color: black;">实质</span>上可能<span style="color: black;">重视</span>到在拖拽的时候应该看到一个特殊的效果，<span style="color: black;">便是</span>拖拽了head的部分、thead部分和tfoot的部分，结果中间的body的部分<span style="color: black;">无</span>被拖拽，按理说应该是先是head，<span style="color: black;">而后</span>是foot。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">为何</span>会<span style="color: black;">这般</span>？这是因为在设计的时候故意把它们的<span style="color: black;">次序</span>做了一个改变，在这个table&gt;里人为的规定它有head的部分，<span style="color: black;">而后</span><span style="color: black;">这儿</span>边的所有的行都是head<span style="color: black;">这般</span>一个语义标签里边的内容，<span style="color: black;">而后</span>这一行，把它放到了foot元素里边，<span style="color: black;">亦</span>就说这个内容不管是多少行都是foot，<span style="color: black;">这般</span>的<span style="color: black;">便是</span>表尾的部分，而表的身体的部分<span style="color: black;">亦</span><span style="color: black;">便是</span>最中间的部分，把它放到了最后。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-dtbei8xehn/cda892e762764b598428a3cef97462ab~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722660021&amp;x-signature=yiPvS44ERfULwhKbixiA1hVD8a8%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">然则</span>在<span style="color: black;">实质</span><span style="color: black;">表示</span>的时候其实<span style="color: black;">能够</span>看到先是head的文本，<span style="color: black;">而后</span>是body，<span style="color: black;">而后</span>是body，<span style="color: black;">而后</span>才是foot，这<span style="color: black;">寓意</span>着什么？<span style="color: black;">寓意</span>着这些标签其实是带有<span style="color: black;">必定</span>的语义的，<span style="color: black;">亦</span>就说它们<span style="color: black;">不但</span>是名字叫body，名字叫foot，名字叫head，<span style="color: black;">实质</span>上是带有<span style="color: black;">必定</span>的语义的。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-dtbei8xehn/6945f6b949f440368acf49cc8bd0447d~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722660021&amp;x-signature=ty5mjIflTRfWmd1bfBv6eUxmbO0%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">浏览器在解析它们的时候是<span style="color: black;">根据</span><span style="color: black;">这般</span>的语义来解析的，<span style="color: black;">亦</span><span style="color: black;">便是</span>它会自觉地把head放到最上边，把foot到最下边，而body放到中间，这个对<span style="color: black;">将来</span>做数据库的设计的时候，<span style="color: black;">倘若</span><span style="color: black;">期盼</span>表达数据库的数据的时候就<span style="color: black;">能够</span>用这些语义化的标签来更方便地表达数据的表格。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这些<span style="color: black;">便是</span>表格元素。西安电子科技大学教材建设基金资项目，高等学校新工科计算机类专业系列教材，<span style="color: black;">保母</span>级教材，网站设计<span style="color: black;">研发</span>教程。</p>




星☆雨 发表于 2024-9-25 06:40:22

你的话语如春风拂面，温暖了我的心房，真的很感谢。

nykek5i 发表于 2024-11-7 21:08:58

同意、说得对、没错、我也是这么想的等。

4zhvml8 发表于 前天 04:32

感谢你的精彩评论，带给我新的思考角度。
页: [1]
查看完整版本: 西安电子科技大学出版社：网站设计研发教程