HTML学习

HTML

一、HTML概述

开发中使用的架构

C/S架构 client server 客户端和服务器

在客户端上安装软件

优点：大文件读写更快，减少服务器压力

缺点：服务器端版本升级，客户端也要对应升级

B/S架构 browser server 浏览器和服务器

在客户端只需要一个浏览器

输入域名，就可以访问服务器内容

优点：不用在客户端电脑上安装任何软件

缺点：所有数据和资源都要从服务器下载，增加服务器压力。

我们做的项目都是b/s架构。

和用户交互的界面要从一阶段的命令行换成网页

HTML是网页的基本结构。

超文本标记（标签）语言

二、网页的结构

1、基本结构描述

html 表明当前页面为网页结构

head 描述页面的信息

title 描述当前页面的标题，用户看到就大概知道该页面的内容

body

hello world

以上的代码分成了若干个部分

用尖括号包起来的代码称为标签

font标签 标签中的内容color为该标签的属性 描述标签的效果

hello 没有尖括号包起来的代码，不用浏览器处理，展示给用户浏览

三、网页编写的工具

1、工具介绍

记事本、hbuilder、dreamweaver、webstorm、vs code

hbuilder

2、创建web项目

3、项目结构

所有该项目的文件都存到该目录中Demo2022-9-15,避免项目迁移时，丢失文件

四、文本标签

1、字体标签

        你好
​

2、换行标签

        
        
 
​

3、字效标签

        
        html hello 今天

4、段落标签

               阿斯顿发顺丰大撒旦发射点发射点发生阿斯顿发顺丰大撒旦发射点发射点发生阿斯顿
        阿斯顿发顺丰大撒旦发射点发射点发生
        阿斯顿发顺丰大撒旦发射点发射点发生
        阿斯顿发顺丰大撒旦发射点发射点发生
        阿斯顿发顺丰大撒旦发射点发射点发生
        
        
阿斯顿发顺丰大撒旦发射点发射点发生
        阿斯顿发顺丰大撒旦发射点发射点发生
        阿斯顿发顺丰大撒旦发射点发射点发生
        阿斯顿发顺丰大撒旦发射点发射点发生
        阿斯顿发顺丰大撒旦发射点发射点发生

如果需要在网页加空格，需要使用符号 

5、标题标签

倚天屠龙记
 n的取值为1-6 

6、水平分割线

width 线的宽度 像素为单位

align 线的对齐方式，默认是居中，left、right、center

size 线的粗细

color 线的颜色

7、特殊符号

  空格
< 左尖括号
> 右尖括号
© 版权符号

8、预格式

pre

		
两个黄鹂鸣翠柳，
  一行白鹭上青天。
		

9、滚动

marquee

behavior 滚动方式

scrollamount 滚动速度

onmouseover 当鼠标移入到标签上 this.stop()将滚动效果停止

onmouseout 当鼠标移出到标签时 this.start()将滚动效果开始

一行白鹭上青天

五、图片和超链接

1、图片

2、超链接

	
		
		
	
	
		
		图片
		文件
		

		
		图片页面
		字体页面
		

		
		百度页面
		

		
		倚天屠龙记
		

		第一回

		第2回

		第3回

		第4回

		

		第一回 回到目录
		















		





		










		















		





		










		















		





		










		第二回回到目录
		















		





		










		















		





		










		















		





		










		第三回 回到目录
		















		





		










		















		





		










		















		





		










		第四回回到目录
		















		





		










		















		





		










		















		





		










	

六、列表

1、有序列表

        

        	
孙悟空
        	
猪八戒
        	
沙和尚
        

2、无序列表

        
        

        	
张辽
	
        	
赵云
        	
甘宁
        

3、定义列表

        

        	
html
        	
超文本标记语言
        

七、表格

1、作用：

展示数据

		
		

			
部门列表
			

				
部门编号
				
部门名称
				
部门位置
			
			

				
10
				
销售部
				
上海
			
			

				
20
				
销售部2
				
深圳
			
			

				
30
				
售后部
				
西安
			
		
	

八、表单

1、input

		
		

			姓名：

			密码：

			性别：男
			女
				

			爱好：篮球
			读书
			音乐
			

			照片：
			

			
			
			
		

2、下拉列表

			生日
			
				1995
				1996
				1997
			年
			
				1
				2
				3
			月
			
				1
				2
				3
			日

3、文本域

个人介绍：