Web前端开发 -- HTML基础（2）

<!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! 你好 ");

结果：

注：不可既定义内部脚本又引入外部脚本,以下是错的：

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即可.

用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> 
			&#60; 论学习&#62;   <!-- &#60;&#62;在网页里会显示<  >，这种符号在<p>也可以使用-->
			好好学习，
			天天向上。
			持之以恒     坚持不懈
			GOOD！
		</pre>	
	</body>
</html>

结果：

4 HTML字符实体（character entities）

如：在HTML中不可使用小于号大于号会被当做标签，所以需要使用字符实体去代替这些符号。

“< ”的实体编号是&#60；

“>”的实体编号是&#62；

每个后面封号要带！！

字符实体：

字符	实体编号
"	"
'	'
&	&
<	<
>	>
«	«
»	»
°	°
@	@
空格

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>
			&#60;p&#62;你最喜欢吃的水果是：&#60; span id=&#34;fruit&#34;&#62;&#60;/span&#62;&#60;/p&#62;
			&#60;script type=&#34; text/javascript&#34;&#62;
				var user_input = prompt(&#34; 你最喜欢吃的水果是：&#34;);
				document.getElementByld(&#34; fruit &#34;).innerHTML = user_input;
			&#60;/script&#62;  
			</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>

云卷云舒_jing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发 -- HTML基础（2）

接上六、javascipt 脚本语言1 定义文档内嵌脚本内嵌脚本：在html文件里直接写script脚本语句：<script type="text/javascript">document.write(" ");</script>例1.文档内嵌脚本<!DOCTYPE html><html> <head> <meta charset="utf-8"> <...
复制链接

扫一扫