龙空技术网

第5天 | 16天搞定前端,html布局,表格和大块头

老陈说编程 938

前言:

眼前兄弟们对“html5td宽度”大体比较着重,我们都想要分析一些“html5td宽度”的相关内容。那么小编同时在网上汇集了一些关于“html5td宽度””的相关资讯,希望看官们能喜欢,大家一起来学习一下吧!

网页布局对网站的外观特别重要,布得好,留得住用户,增收流量;布不好,用户逃之夭夭,还顺道骂两句。大多数Web系统会借用杂志或报纸那样排版,至于为什么这样,我不说,你也懂的,就是产品经理吵架吵不过程序员时,常说的:用户教育成本低。

在HTML中,如果是数据集(像excel那种)的布局,常用<table>标签,如果是内容块(网站板块)的布局,则常用<div>标签。

5.1 表格布局

表格由<table>标签来定义。每个表格均有若干行<tr>标签和列<td>标签组成。<td>数据单元格的内容可以包含文本、图片、水平线、表格等内容。表格头由<th>标签生成。<table>标签常用的属性是border,用来指定边框宽度。<th>和<td>的属性rowspan,可指定跨行数。

如果真的不理解表格的意义,那你打开excel,好好操作一翻,横向合并一下单元格就知道什么是跨行了。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>第5个HTML-表格</title></head><body><table border="1">    <tr>        <th>序号</th>        <th>产品名称</th>        <th>编号</th>        <th>规格</th>    </tr>    <tr>        <td>1</td>        <td>平板电脑</td>        <td>P1010</td>        <td>9.7英尺</td>    </tr>    <tr>        <td>2</td>        <td>笔记本电脑</td>        <td>C2111</td>        <td>15英尺</td>    </tr></table></body></html>

输出结果

5.2 块布局

网站分块布局,常用<div>标签进行定义。常见网站布局为上中下,上放导航栏,中间放内容,底部放版权和友情链接,而它们的分割便是由<div>标签负责的。当然,用<div>布局,需要CSS的支持才行。同表格<td>标签一样,<div>标签中,也是可以嵌入<p>、<hr>等标签的。

<div style="color:blue">    <h3>老陈说编程</h3>    <p>一个当了10年技术总监的老家伙,分享多年的编程经验。<br/>        想学编程的朋友,可关注今日头条:老陈说编程。<br/>        分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。</p></div>

输出结果

好了,有关HTML布局的内容,老陈先讲这么多,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注今日头条:老陈说编程。分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。

#前端##Web##程序员##CSS##HTML5#

标签: #html5td宽度