HTML/CSS学习笔记01【概念介绍、基本标签】

痛定思痛。 2022-10-28 14:24 184阅读 0赞

>  *  w3cschool菜鸟教程.CHM（腾讯微云）：[https://share.weiyun.com/c1FaX6ZD][https_share.weiyun.com_c1FaX6ZD]
> 
> 1.  [HTML/CSS学习笔记01【概念介绍、基本标签、表单标签】][HTML_CSS_01]【day01】
> 2.  [HTML/CSS学习笔记02【表单标签】][HTML_CSS_02]【day02】
> 3.  [HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】][HTML_CSS_03_CSS_CSS_CSS_CSS_-]【day02】

**目录**

第1节 概念介绍

今日内容

概念介绍\_软件架构

web概念概述

概念介绍\_资源分类

web概念概述

HTML概念介绍

HTML快速入门

第2节 基本标签

HTML标签\_文件标签

w3cschool菜鸟教程.CHM

Idea创建web项目

HTML标签\_文本标签1

HTML标签\_文本标签2

HTML标签\_文本标签\_练习

颜色取色器

特殊字符表

案例：公司简介

HTML标签\_图片标签

相对路径

HTML标签\_列表标签

HTML标签\_链接标签

HTML标签\_块标签

HTML标签\_语义化标签

HTML标签\_表格标签1

HTML标签\_表格标签2

HTML标签\_综合案例\_分析

HTML标签\_综合案例\_实现

--------------------

# 第1节 概念介绍 #

## 今日内容 ##

> 1.  web概念概述
> 2.  HTML

## 概念介绍\_软件架构 ##

### web概念概述 ###

> \* JavaWeb：  
>     \* 使用Java语言开发基于互联网的项目
> 
> \* 软件架构：  
>     1. C/S: Client/Server 客户端/服务器端  
>         \* 在用户本地有一个客户端程序，在远程有一个服务器端程序  
>         \* 如：QQ、迅雷...  
>         \* 优点：  
>             1. 用户体验好  
>         \* 缺点：  
>             1. 开发、安装、部署、维护 麻烦  
>     2. B/S: Browser/Server 浏览器/服务器端  
>         \* 只需要一个浏览器，用户通过不同的网址(URL)，可以访问不同的服务器端程序  
>         \* 优点：  
>             1. 开发、安装、部署、维护 简单  
>         \* 缺点：  
>             1. 如果应用过大，用户的体验可能会受到影响  
>             2. 对硬件要求过高

## 概念介绍\_资源分类 ##

### web概念概述 ###

> \* B/S架构详解  
>     \* 资源分类：  
>         1. 静态资源：  
>             \* 使用静态网页开发技术发布的资源。  
>             \* 特点：  
>                 \* 所有用户访问，得到的结果是一样的。  
>                 \* 如：文本、图片、音频、视频, HTML、CSS、JavaScript  
>                 \* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。  
>         2. 动态资源：  
>             \* 使用动态网页技术发布的资源。  
>             \* 特点：  
>                 \* 所有用户访问，得到的结果可能不一样。  
>                 \* 如：jsp/servlet,php,asp...  
>                 \* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
> 
>     \* 我们要学习动态资源，必须先学习静态资源！
> 
>     \* 静态资源：  
>         \* HTML：用于搭建基础网页，展示页面的内容。  
>         \* CSS：用于美化页面，布局页面。  
>         \* JavaScript：控制页面的元素，让页面有一些动态的效果。

> ![20210206194252259.png][]

## HTML概念介绍 ##

> 1. 概念：是最基础的网页开发语言  
>     \* Hyper Text Markup Language 超文本标记语言  
>         \* 超文本:  
>             \* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.  
>         \* 标记语言:  
>             \* 由标签构成的语言。<标签名称> 如 html，xml  
>             \* 标记语言不是编程语言。

## HTML快速入门 ##

> 2. 快速入门：  
>     **\* 语法：**  
>         1. html文档后缀名 .html 或者 .htm  
>         2. 标签分为  
>             1. 围堵标签：有开始标签和结束标签。如 <html> </html>
> 
>             2. 自闭和标签：开始标签和结束标签在一起。如 <br/>
> 
>         3. 标签可以嵌套：  
>             需要正确嵌套，不能你中有我，我中有你  
>             错误：<a><b></a></b>  
>             正确：<a><b></b></a>
> 
>         4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来。  
>         5. html的标签不区分大小写，但是建议使用小写。
> 
>     **\* 代码：**  
>         <html>  
>           
>             <head>  
>                 <title>title</title>  
>             </head>  
>               
>             <body>  
>                 <FONT color='red'>Hello World</font><br/>  
>                   
>                 <font color='green'>Hello World</font>  
>               
>             </body>  
>       
>         </html>

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]
> 
> ![20210206195354530.png][]

# 第2节 基本标签 #

## HTML标签\_文件标签 ##

### w3cschool菜鸟教程.CHM ###

> w3cschool菜鸟教程.CHM（腾讯微云）：[https://share.weiyun.com/c1FaX6ZD][https_share.weiyun.com_c1FaX6ZD]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

>     1. 文件标签：构成html最基本的标签  
>         \* html：html文档的根标签。  
>         \* head：头标签，用于指定html文档的一些属性；引入外部的资源。  
>         \* title：标题标签。  
>         \* body：体标签。  
>         \* <!DOCTYPE html>：html5中定义该文档是html文档。

### Idea创建web项目 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13][]

## HTML标签\_文本标签1 ##

## HTML标签\_文本标签2 ##

> 2. 文本标签：和文本有关的标签  
>         \* 注释：  
>         \* <h1> to <h6>：标题标签  
>             \* h1~h6:字体大小逐渐递减  
>         \* <p>：段落标签  
>         \* <br>：换行标签  
>         \* <hr>：展示一条水平线  
>             \* 属性：  
>                 \* color：颜色  
>                 \* width：宽度  
>                 \* size：高度  
>                 \* align：对齐方式  
>                     \* center：居中  
>                     \* left：左对齐  
>                     \* right：右对齐  
>         \* <b>：字体加粗  
>         \* <i>：字体斜体  
>         \* <font>：字体标签  
>         \* <center>：文本居中  
>             \* 属性：  
>                 \* color：颜色  
>                 \* size：大小  
>                 \* face：字体
> 
>         \* 属性定义：  
>             \* color：  
>                 1. 英文单词：red、green、blue  
>                 2. rgb(值1，值2，值3)：值的范围：0~255，如：rgb(0,0,255)  
>                 3. \#值1值2值3：值的范围：00~FF之间，如： \#FF00FF  
>             \* width：  
>                 1. 数值：width='20' ,数值的单位，默认是 px(像素)  
>                 2. 数值%：占比相对于父元素的比例
> 
>         \* 案例：公司简介

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16][]

<!DOCTYPE html>
    <html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>文本标签</title>
    </head>
    <body>
        
        
        白日依山尽， <br>
        黄河入海流。<br>
    
       
    
        黑马旅游网 <br>
        <h1>黑马旅游网</h1>
        <h2>黑马旅游网</h2>L
        <h3>黑马旅游网</h3>
        <h4>黑马旅游网</h4>
        <h5>黑马旅游网</h5>
        <h6>黑马旅游网</h6>
    
        
        <p>
        1 黑马旅游网黑马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
        </p>
        <p>
        2 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
        </p>
    
        <p>
        3 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
        </p>
    
       
        <hr color="red" width="200" size="10" align="left"/>
        <hr>
       
        白日依山尽<br>
        <b>白日依山尽</b>
        <hr>
        
        白日依山尽<br>
        <i>白日依山尽</i>
        
        <hr>
        <font color="red" size="5" face="楷体">白日依山尽</font> <br>
    
        <font color="#3626F1" size="5" face="楷体">黑马程序员</font> <br>
    
        <hr color="red" width="50%" size="10" align="left"/>
    
        <center>
            <font color="red" size="5" face="楷体">白日依山尽</font> <br>
        </center>
        <br> <br> <br> <br> <br>
    
    </body>
    </html>

## HTML标签\_文本标签\_练习 ##

### 颜色取色器 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17][]

### 特殊字符表 ###

> ![20210207102040764.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18][]

### 案例：公司简介 ###

> \* 案例：公司简介
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19][]

<!DOCTYPE html>
    <html lang="ch">
    	<head>
    		<meta charset="UTF-8">
    		<title>黑马程序员简介</title>
    	</head>
    	<body>
    		<header>
    			<div id="header">
    				<h1>
    					公司简介
    				</h1>
    
    			</div>
    
    		</header>
    		<hr color="#ffd700">
    
    		<p>
    			<font color="#FF0000">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN，
    			并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
    		</p>
    
    		<p>
    			目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
    		</p>
    
    		<p>
    
    			黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，
    			必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确
    			保学员质量，并降低企业的用人风险。
    			中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
    		</p>
    
    		<p>
    
    			一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
    		</p>
    
    		<hr color="#ffd700">
    		<footer>
    
    			<div id="footer">
    				<font color="gray" size="2">
    					<center>
    						江苏传智播客教育科技股份有限公司<br>
    						版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
    					</center>
    				</font>
    			</div>
    		</footer>
    
    	</body>
    </html>

## HTML标签\_图片标签 ##

### 相对路径 ###

> 相对路径  
>     \* 以.开头的路径  
>         \* ./：代表当前目录  ./image/1.jpg  
>         \* ../:代表上一级目录

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 21][]  ![20210207103157642.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>
    <body>
        
        <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
        <img src="./image/jiangwai_1.jpg">
    </body>
    </html>

## HTML标签\_列表标签 ##

> 有序列表：  
>     ol  
>     li  
> 无序列表：  
>     ul  
>     li

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 22][]  ![20210207103742897.png][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>列表标签</title>
    	</head>
    	<body>
    		
    		早上起床干的事情
    		<ol type="A" start="5">
    			<li>睁眼</li>
    			<li> 看手机</li>
    			<li> 穿衣服</li>
    			<li> 洗漱</li>
    		</ol>
    		
    
    		早上起床干的事情
    		<ul type="disc">
    			<li>睁眼</li>
    			<li> 看手机</li>
    			<li> 穿衣服</li>
    			<li> 洗漱</li>
    		</ul>
    
    
    		早上起床干的事情
    		<ul type="square">
    			<li>睁眼</li>
    			<li> 看手机</li>
    			<li> 穿衣服</li>
    			<li> 洗漱</li>
    		</ul>
    
    		早上起床干的事情
    		<ul type="circle">
    			<li>睁眼</li>
    			<li> 看手机</li>
    			<li> 穿衣服</li>
    			<li> 洗漱</li>
    		</ul>
    
    	</body>
    </html>

## HTML标签\_链接标签 ##

>     5. 链接标签：  
>         \* a：定义一个超链接  
>             \* 属性：  
>                 \* href：指定访问资源的URL(统一资源定位符)  
>                 \* target：指定打开资源的方式  
>                     \* \_self：默认值，在当前页面打开  
>                     \* \_blank：在空白页面打开

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 23][]  ![20210207104345824.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 24][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>连接标签</title>
    	</head>
    	<body>
    		
    
    		<a href="http://www.itcast.cn">点我</a>
    		<br>
    
    		<a href="http://www.itcast.cn" target="_self">点我</a>
    		<br>
    		<a href="http://www.itcast.cn" target="_blank">点我</a>
    
    		<br>
    
    		<a href="./5_列表标签.html">列表标签</a><br>
    		<a href="mailto:itcast@itcast.cn">联系我们</a>
    
    		<br>
    		<a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
    	</body>
    </html>

## HTML标签\_块标签 ##

>     6. div和span：  
>         \* div：每一个div占满一整行（块级标签）。  
>         \* span：文本信息在一行展示（行内标签、内联标签）。

> ![20210207104945249.png][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>块标签</title>
    	</head>
    	<body>
    		<span>黑马程序员</span>
    		<span>传智播客</span>
    		<hr>
    		<div>黑马程序员</div>
    		<div>传智播客</div>
    	</body>
    </html>

## HTML标签\_语义化标签 ##

>     7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。  
>         1. <header>：页眉  
>         2. <footer>：页脚

## HTML标签\_表格标签1 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 25][]

## HTML标签\_表格标签2 ##

>     8. 表格标签：  
>         \* table：定义表格  
>             \* width：宽度  
>             \* border：边框  
>             \* cellpadding：定义内容和单元格的距离。  
>             \* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。  
>             \* bgcolor：背景色  
>             \* align：对齐方式  
>         \* tr：定义行  
>             \* bgcolor：背景色  
>             \* align：对齐方式  
>         \* td：定义单元格  
>             \* colspan：合并列  
>             \* rowspan：合并行  
>         \* th：定义表头单元格  
>         \* <caption>：表格标题  
>         \* <thead>：表示表格的头部分  
>         \* <tbody>：表示表格的体部分  
>         \* <tfoot>：表示表格的脚部分

> ![20210207110106786.png][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 26][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>表格标签</title>
    	</head>
    	<body>
    		<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    			<tr>
    				
    				<th>编号</th>
    				<th>姓名</th>
    				<th>成绩</th>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>小龙女</td>
    				<td>100</td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>杨过</td>
    				<td>50</td>
    			</tr>
    		</table>
    		<hr>
    		<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    			<thead>
    				<caption>学生信息表</caption>
    				<tr>
    					
    					<th>编号</th>
    					<th>姓名</th>
    					<th>成绩</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr bgcolor="#7fffd4" align="center">
    					<td>1</td>
    					<td>小龙女</td>
    					<td>100</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>杨过</td>
    					<td>50</td>
    				</tr>
    			</tbody>
    			<tfoot>
    				<tr>
    					<td>3</td>
    					<td>老顽童</td>
    					<td>10</td>
    				</tr>
    			</tfoot>
    		</table>
    		<hr>
    		<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    			<tr>
    				<th rowspan="2">编号</th>
    				<th>姓名</th>
    				<th>成绩</th>
    			</tr>
    
    			<tr>
    				<td>小龙女</td>
    				<td>100</td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td colspan="2">杨过</td>
    			</tr>
    		</table>
    		<hr>
    	</body>
    </html>

## HTML标签\_综合案例\_分析 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 27][]

> 1. 确定使用table来完成布局（12行）  
> 2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>  
> 3. 如果某一行有多个单元格，则使用  
>     <tr>  
>         <td>  
>             <table></table>  
>         </td>  
>     </tr>
> 
> 4. 代码实现 ...

## HTML标签\_综合案例\_实现 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 28][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 29][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>黑马旅游网</title>
    	</head>
    	<body>
    		
    		
    		<table width="100%" align="center">
    			
    			<tr>
    				<td>
    					<img src="image/top_banner.jpg" width="100%" alt="">
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td>
    					<table width="100%" align="center">
    						<tr>
    							<td>
    								<img src="image/logo.jpg" alt="">
    							</td>
    							<td>
    								<img src="image/search.png" alt="">
    							</td>
    							<td>
    								<img src="image/hotel_tel.png" alt="">
    							</td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td>
    					<table width="100%" align="center">
    						<tr bgcolor="#ffd700" align="center" height="45">
    							<td>
    								<a href="">首页</a>
    							</td>
    							<td>
    								门票
    							</td>
    							<td>
    								门票
    							</td>
    							<td>
    								门票
    							</td>
    							<td>
    								门票
    							</td>
    							<td>
    								门票
    							</td>
    							<td>
    								门票
    							</td>
    							<td>
    								门票
    							</td>
    							<td>
    								门票
    							</td>
    							<td>
    								门票
    							</td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td>
    					<img src="image/banner_3.jpg" alt="" width="100%">
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td>
    					<img src="image/icon_5.jpg" alt="">
    					黑马精选
    					<hr color="#ffd700">
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td>
    					<table align="center" width="95%">
    						<tr>
    							<td>
    								<img src="image/jiangxuan_1.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 899</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_1.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 899</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_1.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 899</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_1.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 899</font>
    							</td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td>
    					<img src="image/icon_6.jpg" alt="">
    					国内游
    					<hr color="#ffd700">
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td>
    					<table align="center" width="95%">
    						<tr>
    							<td rowspan="2">
    								<img src="image/guonei_1.jpg" alt="">
    							</td>
    							<td>
    								<img src="image/jiangxuan_2.jpg" alt="" height="100%">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_2.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_2.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    						</tr>
    						<tr>
    							<td>
    								<img src="image/jiangxuan_2.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_2.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_2.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td>
    					<img src="image/icon_7.jpg" alt="">
    					境外游
    					<hr color="#ffd700">
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td>
    					<table align="center" width="95%">
    						<tr>
    							<td rowspan="2">
    								<img src="image/jiangwai_1.jpg" alt="">
    							</td>
    							<td>
    								<img src="image/jiangxuan_3.jpg" alt="" height="100%">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_3.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_3.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    						</tr>
    						<tr>
    							<td>
    								<img src="image/jiangxuan_3.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_3.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    							<td>
    								<img src="image/jiangxuan_3.jpg" alt="">
    								<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
    								<font color="red">¥ 699</font>
    							</td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td>
    					<img src="image/footer_service.png" alt="" width="100%">
    				</td>
    			</tr>
    
    			
    			<tr>
    				<td align="center" bgcolor="#ffd700" height="40">
    					<font color="gray" size="2">
    						江苏传智播客教育科技股份有限公司
    						版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
    					</font>
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>

> 加油~~~   宁死不破~~~

[https_share.weiyun.com_c1FaX6ZD]: https://share.weiyun.com/c1FaX6ZD
[HTML_CSS_01]: https://blog.csdn.net/weixin_44949135/article/details/113729568
[HTML_CSS_02]: https://blog.csdn.net/weixin_44949135/article/details/113738386
[HTML_CSS_03_CSS_CSS_CSS_CSS_-]: https://blog.csdn.net/weixin_44949135/article/details/113740292
[20210206194252259.png]: /images/20221024/3af5baedf2d84bec949e855d1e7167b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/0d36fc5ce6c4496793cf4009e13629a9.png
[20210206195354530.png]: /images/20221024/26302abc73f5401b8e9739174127beb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/fb524be07d6c4ff7aed585bf05eb43d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/9b0db9328b3f49d4a5ae9be99217271e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/de2ea6e7e1bd49d3b0373d9d4fa84e79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/3cb078f1009348d8976bb3132f381478.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/c0c40424204c4f40a3d43609108e1651.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2021020620273520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/b223bfc5cdc64f3cb958ddad60c64f59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210206202844153.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/575c85101b194f1581be555797b3a8ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210206203039901.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: /images/20221024/d7fd3c94ace64507b97f67bf6a81168d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12]: /images/20221024/9d84d34814ed48ccb46f47a47cfcb59d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13]: /images/20221024/4a5037c196754ba8ba5163cea9aa110d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20210206205102495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15]: /images/20221024/e0ac9426b188482a9ac289b9a54262d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16]: /images/20221024/b77e3c1b213e47e1a8419006accd01d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17]: /images/20221024/573e8f37e5324bfe8fb47d3cff739258.png
[20210207102040764.png]: /images/20221024/c46c307c7bf244029a134092988427c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18]: /images/20221024/7558ebbdb0924d8281e2f498720b047e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19]: /images/20221024/0963ce69fc0d43ad8dca6e0fd4f16261.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20]: /images/20221024/b3d19160801b476cad7cb828384986cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20210207102901739.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210207103157642.png]: /images/20221024/222882fd321c4d07a04b42e126b9c9a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20210207103540482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210207103742897.png]: /images/20221024/0f5e76b8b8784125ae6b392c8b8c6a4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20210207103932300.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210207104345824.png]: /images/20221024/c6940b6117cf4f98a47e5d2c5293ee0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 24]: /images/20221024/824869eb48624b948fed06ef5201ce15.png
[20210207104945249.png]: /images/20221024/22b38d98e17d45b2a9fe60da704e4b74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 25]: /images/20221024/71a58e7837f943cbada87cabd205d77c.png
[20210207110106786.png]: https://img-blog.csdnimg.cn/20210207110106786.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 26]: /images/20221024/a6355cab4a6b468fa1be4d8ed83e4501.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 27]: /images/20221024/ac5a3a6a214846b1a9c0396034e6b580.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 28]: /images/20221024/f97f013e1f5746e6b9d9f2fffb343c02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 29]: /images/20221024/f5ddab8a9e094b6c8f1cb5e396969378.png