Web前端开发 -- HTML基础（2）
接 HTML基础（1）
目录
六、javascipt 脚本语言
1 定义文档内嵌脚本
2 载入外部脚本库
3 延迟执行脚本
4 defer延迟执行脚本
5 异步执行脚本async
6 不支持JavaScript的浏览器——noscript
七 、块级元素和行内元素
1 含义
2 块级元素和行内元素对比
3 pre
4 HTML字符实体（character entities）
5 写代码时要考虑阅读代码者的舒适度
6.引用
（1）q元素-小段文本引用
（2）blockquote元素--一大段文本引用
（3）cite元素
（4）abbr元素——代表简称、缩写
（5）dfn元素——定义术语
（6）address元素——定义作者联系信息
（7）ruby、rt、rp元素——标注拼音
（8）bdo元素
八、文本格式化
1 strong元素和b元素
2 em 元素和i元素
3 用CSS代替b和i元素
4 del元素和ins元素
5 s元素——定义那些表示错误的内容，和delete不同
6 u元素——拼写错误的单词或者汉语中的专有名词
7 mark元素——标记文本的作用
8 sup和sub元素
9 small元素——使文本变小
九、列表
1 无序列表：ul-li
2 有序列表：ol-li
3 有序列表中排序格式（ol里面个各种属性）
4 两个常用的CSS属性
（1） List-style-type
（2）list-style-image
5 列表嵌套
6 定义列表——dl(dt+dd)
十、表格
1 一个普通的表格——tr,th,td
2 带边框的表格
（1）双线边框
（2）双线彩色边框
（3）合并双线边框
3 表格标题——cation
4 单元格背景颜色
5.细化表格
（1）thead、tbody、tfoot、colspan元素的使用
（2）rowspan、colgroup和col
六、javascipt 脚本语言
1 定义文档内嵌脚本
内嵌脚本：在html文件里直接写script脚本
语句：
<script type="text/javascript">
document.write(" ");
</script>
例1.文档内嵌脚本
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定义文档内嵌脚本</title><script type="text/javascript">document.write("好好学习，天天向上!!!");</script></head><body><p> 上面的内容哪来的？因为有script脚本</p><p> 同理，在下面放script脚本，也会有以下：</p></body><script type="text/javascript">document.write("干饭人，干返魂，干饭人是人上人。");</script>
</html>结果：
2 载入外部脚本库
外部脚本：写一个单独js脚本，用<script type="text/javascript" src="xxx.js">连接到html的文件里。
例2.外部脚本 (html+js)
html文件:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>载入外部脚本库</title><script type="text/javascript" src="hi.js"></script> </head><body><p> 上面的内容哪来的？</p></body>
</html>hi.js文件：
document.write("hello! 你好 ");结果：
注：不可既定义内部脚本又引入外部脚本,以下是错的：
<script type="text/javascript" src="hi.js"> 好好学习，天天向上!! </script>
3 延迟执行脚本
HTML解析（HTML parsing）——获取脚本(script fetch)——执行脚本(script execution)
一般浏览器解析过程，HTML解析是单线操作的，当其遇到script脚本时会先暂停HTML文本的解析，转而跑去获取脚本并执行脚本，完成之后才会继续解析HTML文本。
怎样先完成HTML解析再去执行中间的脚本？用defer。
例3.1脚本覆盖
将脚本语言放在段落后面，就可以将段落中的语言用脚本中语言替代。
html文件：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p> 我是谁？</p><p> 我从哪里来？</p><p> 我要到哪里去？</p> <!--先执行这几句话 --><script type="text/javascript" src="patch.js"> </script> <!--再用js里面的话代替上面的话--></body>
</html>patch.js文件
var x = document.getElementsByTagName("p");
for(var i=0;i<x.length;i++)
{x[i].innerText="好好学习，天天向上！！！";
}
结果：
例3.2 覆盖不了
若是以下：将script语句放在前面，执行时单线操作，先执行script时还没轮到执行段落里的语句，就无法用脚本（js里的）语句替代段落语句。
html文件：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="patch.js"> </script></head><body><p> 我是谁？</p><p> 我从哪里来？</p><p> 我要到哪里去？</p> </body>
</html>patch.js文件：
var x = document.getElementsByTagName("p");
for(var i=0;i<x.length;i++)
{x[i].innerText="好好学习，天天向上！！！";
}
结果：
4 defer延迟执行脚本
为了解决例3中顺序问题，多加一个defer即可.
<script type="text/javascript" src="patch.js" defer> </script>
用defer 语句延迟脚本执行：（加了defer意为最后再运行脚本语句，但defer 只能用于外部脚本文件，对内嵌脚本不作用）
例4.延迟执行脚本
html文件：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>延迟执行脚本</title><script type="text/javascript" src="patch.js" defer> </script></head><body><p> 我是谁？</p><p> 我从哪里来？</p><p> 我要到哪里去？</p> <!--先执行这几句话 --></body>
</html>patch.js文件：
var x = document.getElementsByTagName("p");
for(var i=0;i<x.length;i++)
{x[i].innerText="好好学习，天天向上！！！";
}5 异步执行脚本async
HTML的解析为了等待脚本而停下来的用户体验是非常差的，所以可以使用异步执行脚本，使HTML的解析和脚本获取是同步进行的，async属性用于告诉浏览器该脚本可以被异步执行，HTML解析器在遇到async标签时就不会停下来。
async属性只能用于外部脚本文件，对内嵌脚本不作用。
6 不支持JavaScript的浏览器——noscript
noscript用来向一些不支持JavaScript的浏览器显示一些替代的内容（内容可以是文本也可是是元素）。
例5. noscript（如果浏览器不支持JavaScript，则显示浏览器不支持使用javascript）
<!DOCTYPE html>
<html> <head><title>nojavascript</title><script type="text/javascript">document.write("好好学习，天天向上!!!");</script><noscript><p>浏览器不支持使用javascript</p></noscript></head><body><p> 上面的内容哪来的？</p></body>
</html>七 、块级元素和行内元素
1 含义
块级元素：总是在新的行上开始的，并且占据本行全部可用宽度。
块级元素：address、article、aside、blockquote、canvas、dd、div、dl、dt、fieldset、figcaption、figure、footer、form、h1-h6、header、hr、li、main、nav、noscript、ol、output、P、pre、section、table、tfoot、ul、video.
行内元素：只占用所需宽度。
行内元素：a、abbr、acronym、b、bdo、big、br、button、cite、code、dfn、em、i、img、input、kbd、label、map、object、q、samp、script、select、small、span、strong、sub、sup、textarea、time、tt、var.
span 对局部文本设置样式
br 换行符,单个
例6.span
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span {color:red}</style></head><body><p> 黑夜给了我黑色的<span>眼睛</span>,</p><p> 我却用它寻找<span>光明</span>。</p></body>
</html>结果：
2 块级元素和行内元素对比
行内元素只能包含数据和其他行内元素
块级元素可以包含行内元素和其他块级元素
(块级比行内大)
3 pre
由于无论在HTML文件的文章中写多少换行或者空格，在浏览器只显示一个空格。所以需要用程序语言去设置格式。
pre预格式化不用代码就可实现网页文本格式与HTML文件中文本格式一样。
例7.pre预格式化
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><pre> < 论学习> <!-- <>在网页里会显示< >，这种符号在<p>也可以使用-->好好学习，天天向上。持之以恒 坚持不懈GOOD！</pre> </body>
</html>结果：
4 HTML字符实体（character entities）
如：在HTML中不可使用小于号大于号会被当做标签，所以需要使用字符实体去代替这些符号。
“< ”的实体编号是<；
“>”的实体编号是>；
每个后面封号要带！！
字符实体：
| 字符 | 实体编号 |
| " | " |
| ' | ' |
| & | & |
| < | < |
| > | > |
| « | « |
| » | » |
| ° | ° |
| @ | @ |
| 空格 |
5 写代码时要考虑阅读代码者的舒适度
（1）等宽字体（monospaced fond）：可优化代码字体。使不同字母宽度相等，让人看起来更舒服。
（2）语义化：使用恰当的HTML元素，让页面具有良好的结构和含义，从而让人和机器能够快速理解网页内容。
如code元素——用于专门显示源代码。把要显示的代码部分用code包围起来。
如果是一大段代码，建议先用pre元素再嵌套一个code元素。这样语义化效果更好。Pre显示文本格式。
var——定义程序的变量；
kbd ——定义用户的键盘输入；
samp ——定义程序的输出；
例8.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><pre> <code><p>你最喜欢吃的水果是：< span id="fruit"></span></p><script type=" text/javascript">var user_input = prompt(" 你最喜欢吃的水果是：");document.getElementByld(" fruit ").innerHTML = user_input;</script> </code> <!--code包含的部分是使代码可视化--></pre> <p>上面代码定义了一个变量<var>user_input</var>,用于接收用户的输入。</p><p>如果用户输入的是<kbd>香蕉</kbd>,那么程序将打印<samp>你最喜欢吃的水果是：香蕉</samp></p></body>
</html>结果：
6.引用
（1）q元素-小段文本引用
例9.q元素
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p> 孔子有云：<q> 学而不思则罔思而不学则殆。 </q></p> </body>
</html>结果：
（2）blockquote元素--一大段文本引用
blockquote标签在浏览器中的效果是引用的整段内容都缩进两格，有时候会斜体，以表示这段文字是引用的。
例10.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body> <p> <cite>《中国合伙人》中有很多文字还是很不错的：</cite> </p> <blockquote><p>梦想是什么，梦想就是一种让你感到坚持就是幸福的东西。</p><p>当才华撑不起野心的时候，只能安静读书。</p><p>最大的骗子其实是我们自己，因为我们总是想改变别人，而拒绝改变自己。</p></blockquote></body>
</html>结果：
（3）cite元素
<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等）的标题，标题会呈现斜体样式。如例10.
（4）abbr元素——代表简称、缩写
abbr元素——代表简称、缩写
例11.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body> <p> <abbr title="企业资源计划"> ERP </abbr></p> <p> <abbr title="有一说一"> u1s1 </abbr>你是对的</p></body>
</html>结果：虚线部分是显性的，鼠标光标放在上面会显示阴性文字。
（5）dfn元素——定义术语
dfn括起来部分是斜体，这部分表示术语 。
例12.术语
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p> <dfn> HTML</dfn>是一门用于创建网页的标准标记语言。</p></body>
</html>结果：
（6）address元素——定义作者联系信息
<address> 标签定义文档或文章的作者/拥有者的联系信息。标签括起来部分的是斜体。
如果 <address> 位于 <body> 标签内，则它表示文档的联系信息。
如果 <address> 位于<article> 标签内，则它表示文章的联系信息。
例13.联系信息
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><address><strong>联系我们</strong> <!--strong加粗-->邮箱：<a href="mailto:fishc_service@126.com">fishc_service@126.com</a><br>微信：fishc_studio（公众号）<br></address></body>
</html>结果：
（7）ruby、rt、rp元素——标注拼音
<ruby> 标签定义注音符号。
ruby 元素需要与 rt 元素和 rp 元素搭配使用。
其中，rt 元素用来标记注音符号，rp 元素则用来标记当浏览器不支持 ruby 元素时所显示的内容。
例14.拼音
<body><ruby> 魑 <rt> chī </rt> </ruby><ruby> 魅 <rt> meì </rt> </ruby><ruby> 魍 <rt> wǎng </rt> </ruby><ruby> 魉 <rt> lǐang </rt> </ruby>
</body>结果：
设置rp：如果有的浏览器不支持拼音，则需要加rp，如下：
<body><ruby> 魑 <rp> ( </rp> <rt> chī </rt> <rp> ) </rp> </ruby><ruby> 魅 <rp> ( </rp> <rt> meì </rt> <rp> ) </rp> </ruby><ruby> 魍 <rp> ( </rp> <rt> wǎng </rt> <rp> ) </rp> </ruby><ruby> 魉 <rp> ( </rp> <rt> lǐang </rt> <rp> ) </rp> </ruby>
</body>
（8）bdo元素
可以改变文本方向，如从左往右、从优往左
ltr=left to right 从左往右
rtl=right to left 从右往左
例15.从右往左
<body> <bdo dir="rtl">你好世界！</bdo>
</body>结果：
八、文本格式化
1 strong元素和b元素
strong使文本变粗体，表示语义很重要！！
b元素也能表示文本变粗，但他没有附带任何表示重要的语义。
2 em 元素和i元素
em 斜体，表强调
i斜体，不表强调
例16.强调与不强调
<body><p>strong元素能使文本<strong>变粗</strong>，它表示这段语义很重要。</p><p>b元素也能表示文本<b>变粗</b>，但它没有附带任何表示重要的语义。</p><p>em元素能使文本<em>斜体</em>，它表强调。</p><p>i元素也能使文本<i>斜体</i>，但它没有任何表示强调的语义。</p></body>
结果：
3 用CSS代替b和i元素
例17.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.bold {font-weight:bolder;}.italic {font-style:italic;}</style> </head><body><p class="bold"> 这里的内容会加粗 </p><p class="italic"> 这里的内容会倾斜 </p></body>
</html>结果：
4 del元素和ins元素
del——delete 旧的内容
ins——insert 新的内容
例18.新的代替旧的
<body><p>从现在起，网址由<del> www.123.com </del>变成www.888.com </ins>，还有原来的<del> 六个模块</del>变成<ins>九个模块</ins> </p>
</body>结果：
5 s元素——定义那些表示错误的内容，和delete不同
s元素——定义那些表示错误的内容，和delete不同
例19.划掉错误
<body><p><s>"好吃懒做"</s> 这种观点是不正确的！ </p>
</body>
结果：
6 u元素——拼写错误的单词或者汉语中的专有名词
例20.专有名词
<body><p><u>ERP</u> 企业资源计划 </p>
</body>结果：
7 mark元素——标记文本的作用
例21.标记文本
<body><p><mark>可乐</mark>、<mark>雪碧</mark>、<mark>柠檬茶</mark>、请问客官喝点啥？</p>
</body>结果：
8 sup和sub元素
sup表示上标文本和sub表示下标文本，如在数学公式和化学方程式中使用。
例22.公式
<body><p> E=MC<sup>2</sup> </p><p>Mg + ZnSO<sub>4</sub> = MgSO<sub>4</sub> + Zn</p>
</body>结果：
9 small元素——使文本变小
例23.文本缩小
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 使用small元素表示小字号文本--><h1>优惠大促销</h1><p>细节不重要，反正就是促销啦！</p><p>……</p><p>……</p><p><small>本活动最终解释权归xxx所有</small></p></body>
</html>结果：
九、列表
1 无序列表：ul-li
<body><!-- 使用ul元素创建一个无序列表--><ul><li> Coffee </li><li> Tea </li><li> Me </li></ul>
</body>
结果：
2 有序列表：ol-li
<body><!-- 使用ol元素创建一个有序列表--><ol><li> html5&css3 </li><li> javascript</li><li> jquery </li><li> vue </li><li> PHP </li></ol>
</body>
结果：
3 有序列表中排序格式（ol里面个各种属性）
reversed——列表降序
start——有序列表的起始值
type——列表中使用的标记类型：1、A、a、I (大写的i,是罗马字符表示序号)、i.
<body><!-- 标记修改为罗马字符，倒序显示--><ol type="I" reversed><li>html5&css3 </li><li>javascript</li><li>jquery </li><li>vue </li><li>PHP </li></ol>
</body>
结果：
4 两个常用的CSS属性
（1） List-style-type
可将列表的标志设置为方的、圆的、圈的还有你看不到的。
<!DOCTYPE html>
<html><head><title>list-style-type演示</title><meta charset="utf-8"><style>ul.a{list-style-type:square;} /*方的*/ul.b{list-style-type:disc;} /*圆的*/ul.c{list-style-type:circle;} /*圈的*/ul.d{list-style-type:none;} /*空的*/</style></head><body><ul class="a"><li>Coffee </li><li>Tea </li><li>Me </li></ul><ul class="b"><li>Coffee </li><li>Tea </li><li>Me </li></ul><ul class="c"><li>Coffee </li><li>Tea </li><li>Me </li></ul><ul class="d"><li>Coffee </li><li>Tea </li><li>Me </li></ul></body>
</html>结果：
（2）list-style-image
设置列表一个自定义的标志
<!DOCTYPE html>
<html><head><title>list-style-image演示</title><meta charset="utf-8"><style>ul{list-style-image:url("jing.jpg");} </style></head><body><ul><li>一愿世清平 </li><li>二愿身强健 </li><li>三愿临老头，数与君相见 </li></ul></body>
</html>结果：
5 列表嵌套
各种类型列表样式嵌套在一起
<!DOCTYPE html>
<html><head><title>多级列表演示</title><meta charset="utf-8"></head><body>迄今为止，老师的课程有这些：<ol><li><del>《零基础入门学习c语言》</del></li><li>《零基础入门学习汇编语言》 </li><li>《c++快速入门》 </li><li>《数据结构与算法》</li><li>《win32汇编语言与程序设计》 </li><li>《解密系列》<ul><li>基础篇</li><li>调试篇 </li><li>系统篇 </li><li>脱壳篇 </li><li>工具篇 </li><li>密码学 </li></ul></li><li>《windows程序设计》</li><li>《零基础入门学习Python》</li><li>《极客Python》<ul><li>git使用教程</li><li>效率革命</li></ul></li> <li>《带你学c带你飞》<ul><li>VIM快速入门</li><li>C语言语法基础</li></ul></li><li>《零基础入门学习web开发》 （HTML5&CSS3）</li><li>《零基础入门学习scratch》</li></ol></body>
</html>结果：
6 定义列表——dl(dt+dd)
术语+描述
dt：定义列表中项目部分的内容（术语）
dd: 定义描述部分的内容（描述）
<!DOCTYPE html>
<html><head><title>dl元素演示</title><meta charset="utf-8"></head><body><!--单条术语与描述--><dl><dt>ERP</dt> <!--术语--><dd>Enterprise Resource Planning 企业资源计划</dd> <!--描述--></dl><!--多条术语，单条描述--><dl><dt>ERP</dt> <!--术语--><dt>Enterprise Resource Planning</dt> <!--术语--><dd>企业资源计划</dd> <!--描述--></dl><!--单条术语，多条描述--><dl><dt>ERP</dt> <!--术语--><dd>Enterprise Resource Planning</dd> <!--描述--><dd>企业资源计划</dd> <!--描述--></dl><!--多条术语，多条描述--><dl><dt>ERP</dt> <!--术语--><dd>Enterprise Resource Planning</dd> <!--描述--><dd>企业资源计划</dd> <!--描述--><dt>Java</dt> <!--术语--><dd>Java是一门面向对象的编程语言</dd> <!--描述--></dl></body>
</html>结果：
十、表格
1 一个普通的表格——tr,th,td
tr = table row 表格行
th = table header cell 表头单元格
td = table data cell 数据单元格
<!DOCTYPE html>
<html><head><title></title><meta charset="utf-8"></head><body><table><tr> <!-- tr = table row --><th>姓名</th> <!-- th = table header cell 表头单元格 --><th>年龄</th></tr><tr><td>张三</td> <!-- td = table data cell 数据单元格 --><td>18</td></tr><tr><td>李四</td><td>28</td></tr><tr><td>王五</td><td>22</td></tr></table></body>
</html>结果：
2 带边框的表格
需要用CSS设置表格边框，在head里设置border（边框）
（1）双线边框
<!DOCTYPE html>
<html><head><title></title><meta charset="utf-8"><style type="text/css">table, th, td { border: 1px solid black; } /*border边框，1px：1像素那么粗，solid：将边框绘制成实线，black黑色线*/</style></head><body><table><tr> <!-- tr = table row --><th>姓名</th> <!-- th = table header cell 表头单元格 --><th>年龄</th></tr><tr><td>张三</td> <!-- td = table data cell 数据单元格 --><td>18</td></tr><tr><td>李四</td><td>28</td></tr><tr><td>王五</td><td>22</td></tr></table></body>
</html>
（2）双线彩色边框
问：边框为何是双线的？
——因为这两条线各自属于不同元素的边框。
例
<!DOCTYPE html>
<html><head><title></title><meta charset="utf-8"><style type="text/css">table {border: 1px solid black;}th {border: 1px solid red;}td {border: 1px solid blue;}/*border边框，1px：1像素那么粗，solid：将边框绘制成实线，表格框黑色，表头单元格红色，数据单元格蓝色 */</style></head><body><table><tr> <!-- tr = table row --><th>姓名</th> <!-- th = table header cell 表头单元格 --><th>年龄</th></tr><tr><td>张三</td> <!-- td = table data cell 数据单元格 --><td>18</td></tr><tr><td>李四</td><td>28</td></tr><tr><td>王五</td><td>22</td></tr></table></body>
</html>
（3）合并双线边框
合并双线框办法：多加一句border-collapse
<!DOCTYPE html>
<html><head><title></title><meta charset="utf-8"><style type="text/css">table {border: 1px solid black;border-collapse: collapse; /*双线边框合并为一条*/}th {border: 1px solid red;}td {border: 1px solid blue;}/*border边框，1px：1像素那么粗，solid：将边框绘制成实线，表格框黑色，表头单元格红色，数据单元格蓝色 */</style></head><body><table><tr> <!-- tr = table row --><th>姓名</th> <!-- th = table header cell 表头单元格 --><th>年龄</th></tr><tr><td>张三</td> <!-- td = table data cell 数据单元格 --><td>18</td></tr><tr><td>李四</td><td>28</td></tr><tr><td>王五</td><td>22</td></tr></table></body>
</html>
3 表格标题——cation
设置单元格内边距：css的padding属性
注：caption必须紧挨着table标签下面；单元格边距使得表格内部不那么拥挤。
<!DOCTYPE html>
<html>
<head><title>caption使用</title><meta charset="utf-8"><style>table { border: 1px solid black; border-collapse: collapse;}th,td { border: 1px solid black; padding:20px; /*设置单元格边距*/}caption{padding:10px; /*caption表格标题*/}</style></head><body><table><caption> 职员名单 </caption> <!--表格标题,紧挨着table标签写--><tr> <th>姓名</th> <th>外号</th><th>性格</th><th>照片</th></tr><tr><td>张三</td> <td>小张</td><td>锲而不舍</td><td> <img src="tu5.jpg" alt="显示不出图片" width="200"> </td></tr><tr><td>李四</td><td>小李</td><td>低调</td><td> <img src="tu6.jpg" alt="显示不出图片" width="200"> </td></tr></table></body>
</html>
4 单元格背景颜色
/* 将th元素背景设置为深灰色，文字为黄色 */
th {
background:darkgray;
color:yellow;
}
<!DOCTYPE html>
<html>
<head><title>单元格背景</title><meta charset="utf-8"><style>table { border: 1px solid black; border-collapse: collapse;}/* 将th元素背景设置为深灰色，文字为黄色 */th {background:darkgray;color:yellow;}/*td元素背景设置为粉色*/td {background:pink;}th,td { border: 1px solid black; padding:20px; /*设置单元格边距*/}caption{padding:10px; /*caption表格标题*/}</style></head><body><table><caption> 职员名单 </caption> <!--表格标题,紧挨着table标签写--><tr> <th>姓名</th> <th>外号</th><th>性格</th><th>照片</th></tr><tr><th>张三</th> <!--td改成了th，为方便设置单元格背景颜色--><td>小张</td><td>锲而不舍</td><td> <img src="tu5.jpg" alt="显示不出图片" width="200"> </td></tr><tr><th>李四</th> <!--td改成了th，为方便设置单元格背景颜色--><td>小李</td><td>低调</td><td> <img src="tu7.jpg" alt="显示不出图片" width="200"> </td></tr></table></body></html>
5.细化表格
更加细致地规划表格，添加以下元素：
thead表头
tbody主体
tfoot表尾
colspan属性用于设置单元格横跨的列数。
rowspan属性用于设置跨行。
colgroup和col元素：批量地设置表格中一列或者多列的样式。
（1）thead、tbody、tfoot、colspan元素的使用
<!DOCTYPE html>
<html>
<head><title>thead,tbody,tfoot</title><meta charset="utf-8"><style>table { border: 1px solid black; border-collapse: collapse;}/* 将thead的th元素背景设置为浅绿色，文字为红色 */thead th {background:lightgreen;color:red;}/* 将tbody的th元素背景设置为黄色，文字为红色 */tbody th{background:gold;color:red;}th,td { border: 1px solid black; padding:20px;}caption{padding:10px;}</style></head><body><table><caption> 职员名单 </caption> <!--表格标题--><!-- 添加thead和tbody元素，更加细致地规划表格 --><!--添加thead标签--><thead><tr> <th>姓名</th> <th>外号</th><th>性格</th><th>照片</th></tr></thead><!--添加tbody标签--><tbody> <tr><th>张三</th> <!--td改成了th，为方便设置单元格背景颜色--><td>小张</td><td>锲而不舍</td><td> <img src="tu5.jpg" alt="显示不出图片" width="200"> </td></tr><tr><th>李四</th> <!--td改成了th，为方便设置单元格背景颜色--><td>小李</td><td>低调</td><td> <img src="tu7.jpg" alt="显示不出图片" width="200"> </td></tr></tbody><!--tfoot--><tfoot><tr><td colspan="4">努力搬砖，打工人，加油！</td><!--colspan=4表示横跨四列--><tr></tfoot> </table></body>
</html>
（2）rowspan、colgroup和col
rowspan属性用于设置跨行，rowspan合并几行为一行。
colgroup和col元素的使用
<!DOCTYPE html>
<html><head><title>Colgroup和col元素演示</title><meta charset="utf-8"><style>table { border: 1px solid black; border-collapse: collapse;}td { border: 1px solid black; padding:20px;}</style></head><body><table> <colgroup><col style="background:red"> <!--默认一列，第一列背景红。--><col span="2" style="background:green"> <!--span=2意为跨两列，2,3列背景绿--></colgroup><tr> <td>1</td> <td rowspan="3">2</td> <!--rowspan合并三行为一行--><td>3</td> </tr> <tr> <td>4</td><td>5</td> </tr><tr><td>6</td><td>7</td></tr> </table></body>
</html>
Web前端开发 -- HTML基础（2）相关推荐
- web前端开发-html5基础（含代码）
文章目录 前言 一.小白应该如何入门Web前端开发? 二.HTML5-第一天 a-认识HTML(阿巴阿巴...) 1.什么是HTML? 2.HTML和CSS的关系? 3.网页的结构.表现.行为? b- ...
- web前端开发零基础入门教程
端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端 ...
- 【WEB前端开发】基础知识大总结（HTML5+CSS3）
本文共一万七千字,十六个内容点,七十个知识点 目录 一.转义字符 二.表单标签 1.form标签 2.input元素 3.label 标签 4.select 标签 5.button 元素 三.语义化标 ...
- Web前端开发JavaScript基础(3)
JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...
- 设计与实现Web前端开发的基础
1 概要 对于前端的学习内容,应该从如下几个方面进行从而对整体的业务以及技术的定义.作用.相互之间的关系,以及在各个阶段使用什么样的技术有一个简单的了解以及认知. 2 知识列表 2.1 什么是程序? ...
- web前端开发入门基础教程系列
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...
- Web前端开发CSS基础(2)
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
- Web前端开发css基础样式总结
颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单 ...
- web前端开发必备基础单词整理
class 命名参考 #导航类 导航:nav 标题:title 摘要:summary 菜单:menu 子菜单:submenu 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航 ...
- 零基础怎么学习web前端开发
零基础怎么学习web前端开发?web前端在移动互联网行业的运用是非常广泛的,而且web前端开发技术所涵盖的知识有很多,具体要怎么学习,来看看小编下面的详细介绍吧. 零基础怎么学习web前端开发?对零基 ...
最新文章
- 对异步脉冲信号的处理——不归0翻转电路
- 抽奖 | 送树莓派PICO开发板、机械键盘、声控鼠标
- 在实践中使用延迟队列
- mysql id div 1000000,mysql – 如何使用随机数据生成1000000行？
- python创建txt文件_Mac怎么创建txt文件？教你设置新建txt的快捷键
- 华中科技大计算机第八次基础作业,华中科技大计算机基础第三次作业.doc
- HDU 6287 口算训练（分解质因子 + 二分下标）
- JavaScript 3D球形标签云代码
- MongoDB特点和使用场景
- opencv录制视频 python_OpenCV Python 录制视频
- 《考研-数据结构-哈弗曼树-已知某段通信报文内容，对该报文进行哈弗曼编码，并计算平均码长》
- python画车辆轨迹图_如何利用 Python 绘制酷炫的 车辆轨迹 — 速度时空图？三维数据用二维图像呈现...
- 解读CUDA Compiler Driver NVCC - Ch.2 - Compilation Phases
- 计算机设计大赛数媒民族元素类,北京工业大学艺术设计学院
- 平价的无线蓝牙耳机，性价比高的无线蓝牙耳机
- 辣鸡公司联动优势，你在毕业季给应届毕业生解约的操作真TM丑陋
- STM 32简单编程实例
- windows远程android传输文件,电脑（Linux/Windows）使用SSH远程登录安卓（Android）手机实现无线传输和管理文件（图文详解）-Go语言中文社区...
- 【财务管理 I】价值观念
- 职场切记：没有苦劳，只有功劳！