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

• w3cschool菜鸟教程.CHM（腾讯微云）：https://share.weiyun.com/c1FaX6ZD

1. HTML/CSS学习笔记01【概念介绍、基本标签、表单标签】【day01】
2. HTML/CSS学习笔记02【表单标签】【day02】
3. HTML/CSS学习笔记02【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：控制页面的元素，让页面有一些动态的效果。

HTML概念介绍

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

HTML快速入门

2. 快速入门：
    * 语法：
        1. html文档后缀名 .html 或者 .htm
        2. 标签分为
            1. 围堵标签：有开始标签和结束标签。如

            2. 自闭和标签：开始标签和结束标签在一起。如

        3. 标签可以嵌套：
            需要正确嵌套，不能你中有我，我中有你
            错误：
            正确：

        4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来。
        5. html的标签不区分大小写，但是建议使用小写。

    * 代码：
        
        
            
                
            
            
            
                Hello World

                
                Hello World
            
            
    
        

第2节 基本标签

HTML标签_文件标签

w3cschool菜鸟教程.CHM

w3cschool菜鸟教程.CHM（腾讯微云）：https://share.weiyun.com/c1FaX6ZD

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

Idea创建web项目

  

  

  

HTML标签_文本标签1

2. 文本标签：和文本有关的标签
        * 注释：
        *

to

：标题标签
            * h1~h6:字体大小逐渐递减
        *

：段落标签
        *
：换行标签
        *

---

：展示一条水平线
            * 属性：
                * color：颜色
                * width：宽度
                * size：高度
                * align：对齐方式
                    * center：居中
                    * left：左对齐
                    * right：右对齐
        * ：字体加粗
        * ：字体斜体
        * ：字体标签
        * ：文本居中

HTML标签_文本标签2

2. 文本标签：和文本有关的标签
        * 注释：
        *

to

：标题标签
            * h1~h6:字体大小逐渐递减
        *

：段落标签
        *
：换行标签
        *

---

：展示一条水平线
            * 属性：
                * color：颜色
                * width：宽度
                * size：高度
                * align：对齐方式
                    * center：居中
                    * left：左对齐
                    * right：右对齐
        * ：字体加粗
        * ：字体斜体
        * ：字体标签
        * ：文本居中
            * 属性：
                * 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. 数值%：占比相对于父元素的比例

        * 案例：公司简介

  

    
    


    
    
    白日依山尽， 

    黄河入海流。


   

    黑马旅游网 

    
黑马旅游网
    
黑马旅游网
L
    
黑马旅游网
    
黑马旅游网
    
黑马旅游网
    
黑马旅游网

    
    

    1 黑马旅游网黑马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
    
    

    2 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
    

    

    3 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
    

   
    

    

   
    白日依山尽

    白日依山尽
    

    
    白日依山尽

    白日依山尽
    
    

    白日依山尽 


    黑马程序员 


    


    
        白日依山尽 

    
    
 
 
 
 

HTML标签_文本标签_练习

颜色取色器

特殊字符表

案例：公司简介

* 案例：公司简介

	
		
		
	
	
		

			

				

					公司简介
				

			

		
		


		

			"中关村黑马程序员训练营"是由传智播客联合中关村软件园、CSDN，
			并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
		

		

			目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
		

		


			黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，
			必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确
			保学员质量，并降低企业的用人风险。
			中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
		

		


			一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
		

		

		


			

				
					
						江苏传智播客教育科技股份有限公司

						版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
					
				
			
		

	

HTML标签_图片标签

相对路径

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

  

HTML标签_列表标签

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

  

	
		
		
	
	
		
		早上起床干的事情
		

			
睁眼
			
 看手机
			
 穿衣服
			
 洗漱
		
		

		早上起床干的事情
		

			
睁眼
			
 看手机
			
 穿衣服
			
 洗漱
		


		早上起床干的事情
		

			
睁眼
			
 看手机
			
 穿衣服
			
 洗漱
		

		早上起床干的事情
		

			
睁眼
			
 看手机
			
 穿衣服
			
 洗漱
		

	

HTML标签_链接标签

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

  

	
		
		
	
	
		

		点我
		


		点我
		

		点我

		


		列表标签

		联系我们

		

		
	

HTML标签_块标签

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

	
		
		
	
	
		黑马程序员
		传智播客
		

		
黑马程序员
		
传智播客
	

HTML标签_语义化标签

    7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
        1.

：页眉
        2.

：页脚

HTML标签_表格标签1

    8. 表格标签：
        * table：定义表格
            * width：宽度
            * border：边框
            * cellpadding：定义内容和单元格的距离。
            * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。
            * bgcolor：背景色
            * align：对齐方式
        * tr：定义行
        * td：定义单元格
        * th：定义表头单元格

HTML标签_表格标签2

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

  

	
		
		
	
	
		

			

				
				
编号
				
姓名
				
成绩
			
			

				
1
				
小龙女
				
100
			
			

				
2
				
杨过
				
50
			
		
		

		

			

				
学生信息表
				

					
					
编号
					
姓名
					
成绩
				
			
			

				

					
1
					
小龙女
					
100
				
				

					
2
					
杨过
					
50
				
			
			

				

					
3
					
老顽童
					
10
				
			
		
		

		

			

				
编号
				
姓名
				
成绩
			

			

				
小龙女
				
100
			
			

				
2
				
杨过
			
		
		

	

HTML标签_综合案例_分析

1. 确定使用table来完成布局（12行）
2. 如果某一行只有一个单元格，则使用
3. 如果某一行有多个单元格，则使用
    
        
            

        
    

4. 代码实现 ...

HTML标签_综合案例_实现

	
		
		
	
	
		
		
		

			
			

				

					
				
			

			
			

				

					
				
			

			
			

				

					

						

							

								首页
							
							

								门票
							
							

								门票
							
							

								门票
							
							

								门票
							
							

								门票
							
							

								门票
							
							

								门票
							
							

								门票
							
							

								门票
							
						
					
				
			

			
			

				

					
				
			

			
			

				

					
					黑马精选
					

				
			

			
			

				

					

						

							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 899
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 899
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 899
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 899
							
						
					
				
			

			
			

				

					
					国内游
					

				
			

			
			

				

					

						

							

								
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
						
						

							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
						
					
				
			

			
			

				

					
					境外游
					

				
			

			
			

				

					

						

							

								
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
						
						

							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
							

								
								
上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)
								¥ 699
							
						
					
				
			

			
			

				

					
				
			

			
			

				

					
						江苏传智播客教育科技股份有限公司
						版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
					
				
			
		
	

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