文章目录

• • • 1. 概念：b/s与c/s
    • 2. HTML简介
    • 3. 网页的组成部分
    • 4. HTML页面的书写规范
    • 5. HTML标签介绍
    • • 5.1 标签用法
    • 6. 常用标签介绍 文档：w3cshool.CHM
    • • 6.1 font字体标签
      • 6.2 特殊字符
      • 6.3 标题标签
      • 6.4 超链接(**重点*)
      • 6.5 无序(有序)列表
      • 6.6 img标签
      • 6.7 表格标签(**重点*)
      • 6.8 跨行跨列标签(**次重点*)
      • 6.9 iframe框架标签（内嵌窗口）
      • 6.10 表单标签
      • • • 6.10.1 表单常用标签
      • 6.11 表单提交的细节
      • 6.12 其它标签

1. 概念：b/s与c/s

a)现在的软件开发的整体架构主要分为B/S架构与C/S架构：

• b/s：浏览器/服务器

• c/s：客户端/服务器

客户端：需要安装在系统里，才可使用

浏览器：浏览网页，读取HTML并显示

服务器：处理浏览器的请求

b)b/s与c/s优劣

• b/s只要能上网就能使用，因为基本每台电脑都会有浏览器，维护方便。

• c/s必须安装在系统中，安装成功才可使用。在新的系统中没有安装不能使用，便携性差，维护成本高。

c)网页

​ 浏览器中显示的内容，浏览器是网页的展示器。编写好的网页，放在浏览器中即可运行。编写网页我们使用的就是HTML语言

2. HTML简介

​ HTML 指的是超文本标记语言 (Hyper Text Markup Language)，我们也将html称为标签语言。他不是编译性语言，不是编程语言。只是一种标记标签，html用许多的标记标签来描述网页，html网页的后缀名一般为.html。

3. 网页的组成部分

网页由三部分组成：分别是内容（结构）、表现和行为。

• 内容（结构）：HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

• 表现：CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

• 行为：JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。包括javascript和JQuery等。

4. HTML页面的书写规范

   
  
  
       
        

  
        hello world!

5. HTML标签介绍

1. 标签的格式：<标签名>封装的数据

2. 标签名大小不敏感。

3. 标签拥有自己的属性。

   • 分为基本属性：bgcolor=“red”

   • 事件属性：οnclick=“alert(‘你好！’);”

4. 标签又分为，单标签和双标签。

   • 单标签格式：<标签名 />，如水平线标签

     ---

     ，Img标签换行标签
     
   • 双标签格式：<标签名>…封装的数据…。如段落标签
     ，span标签等。

注：bgcolor是背景颜色属性，onclick表示单击（点击）事件，alert()是javaScript提供的一个警告框函数，它可以接受任意参数，参数就是警告框的函数信息。

5.1 标签用法

	正确：
早安，咕噜
    错误：
早安，咕噜
	
  

	
	
	正确：
早安，咕噜
	错误：
早安，咕噜
	

	
	
	正确：

	错误：

	

	
	
	正确：早安，咕噜
    错误：早安，咕噜
	错误：
	

		
	
	正确： 

	错误： -->
	

     

注：html代码不是很严谨，有时候标签不闭合，也不会报错！

6. 常用标签介绍 文档：w3cshool.CHM 6.1 font字体标签

咕噜很帅很可爱！

6.2 特殊字符

我是<标签">>

	咕噜         好好！

最常用的字符实体：

其它一些常用的字符实体：

6.3 标题标签

标题1
	
标题2
	
标题3
	
标题4
	
标题5
	
标题6
	标题7        

6.4 超链接(*重点)

在网页中所有点击之后可以跳转的内容都是超链接。

百度

百度_当前标签页打开

百度_空白页打开

6.5 无序(有序)列表

        
咕噜1
        
咕噜2
        
咕噜3
        
咕噜4

6.6 img标签

需求：使用img标签显示一张照片。并修改宽高，和边框属性

6.7 表格标签(*重点)

需求1：做一个 带表头的 ，三行，三列的表格，并显示边框

需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。

		
    
			
1.1
			
1.2
			
1.3
		
		

			
2.1
			
2.2
			
2.3
		
		

			
3.1
			
3.2
			
3.3
		
	

6.8 跨行跨列标签(*次重点)

需求：
新建一个五行，五列的表格，
第一行，第一列的单元格要跨两列，
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列。

		

			
1.1
			
1.2
			
1.3
			
1.4
		
		

			
2.1
			
2.2
			
2.3
			
2.4
			
2.5
		
		

			
3.2
			
3.3
			
3.4
			
3.5
		
		

			
4.1
			
4.2
			
4.3
			
4.4
		
		

			
5.1
			
5.2
			
5.3
		
	

6.9 iframe框架标签（内嵌窗口）

iframe标签它可以在一个html页面上，打开一个小窗口，去加载一个单独的页面。

  下面是跳转的窗口位置：

    

    

        
2.特殊字符
        
3.标题标签
        
4.超链接
    

6.10 表单标签

需求：创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。隐藏域，自我评价（多行文本域）。重置，提交。

原始表单：

    用户名称：

    用户密码：

    确认密码：

    性别：男女

    兴趣爱好：javaScriptJava

    国籍：
    
        请选择国籍
        中国
        美国
        日本
    

    自我评价：我才是默认值

    
    
    
    

表单格式化（使用表格来规范格式）：

    
用户注册
    

        

            
用户名称：
            

        
        

            
 用户密码：
            

        
        

            
确认密码：
            

        
        

            
性别：
            

                男
                女
            
        
        

            
 兴趣爱好：
            

                javaScript
                Java
            
        
        

            
国籍：
            

                
                    --请选择国籍--
                    中国
                    美国
                    日本
                
            
        
        

            
 自我评价：
            
我才是默认值
        
        

            
 
            

        
    

效果图如下所示：

6.10.1 表单常用标签

1. 表单标签：
   …
2. 文本输入框：
3. 密码输入框：
4. 单选框：
   
5. 多选框：
   
6. 下拉列表

     
        没有value属性时提交的值
     

7. 重置按钮：
8. 提交按钮：

6.11 表单提交的细节

    
用户注册
    

        

            
用户名称：
            

        
        

            
 用户密码：
            

        
        

            
确认密码：
            

        
        

            
性别：
            

                男
                女
            
        
        

            
 兴趣爱好：
            

                javaScript
                Java
            
        
        

            
国籍：
            

                
                    --请选择国籍--
                    中国
                    美国
                    日本
                
            
        
        

            
 自我评价：
            
我才是默认值
        
        

            
 
            

        
    

具体分析：

6.12 其它标签

	
div标签1
 	
div标签2
    span标签1
    span标签2
    
p段落标签1
    
p段落标签2