Web前端学习（1）_html

Web前端学习（1）_html

HTML入门

1.引入

1.1 软件结构分类：

（1）C-S结构（Client - Server 客户端-服务器端）

1）必须安装特定的客户端程序

2）服务器软件升级，客户端的软件同步升级

（2）B-S结构（Broswer-Server 浏览器-服务器端）

1）不需要特定的客户（只需要浏览器软件）

2）服务器软件升级，浏览器客户端不需要升级

1.2 网站

服务器端的软件都是基于bs结构的，这个软件俗称叫“网站”。网站是由网页组成。一个网页就是由html页面组成。html是一门网页制作的语言。

1.3 html语言

html是第一门网页制作语言，最简单的一门语言。

hyperText Markup Language 超文本标记语言。

html语言由标记组成。学习html语言，掌握一些常用的标记即可！

2.标签

2.1 基本标签的讲解

 --html开始标签

 -- 文件头（用户在浏览器的主体是看不到的）

</head>

   --文件体（用户在浏览器的主体看得到）

--html结束标签

示例：

2.2 head文件头

作用：告诉浏览器如何解释该html页面

2.3 文本标签(body里面的标签)

（1）标题标签

分析：从1到6，总共6个，字体越来越小

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

（2）水平线：画一条水平线

（3）换行：浏览器是不会识别代码中的换行，要用到换行标签才行

（4）标签规定粗体文本：给字体加粗

hello

（5）将文本以斜体显示

hello

（6）将文本以下划线显示

hello

（7）段落(p)

	abc



	def

（8）段落缩进(blockquote)(主要用于解释或者强调)

	123456

（9）上下标(sup和sub)

y=x2

（10）原样输出(pre)：不变，原样显示

（11）滚动

marquee:

behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动 

bgcolor:字幕背景颜色 

direction:设置字幕的滚动方向down  right  left  up

	Ag_nevergiveup

（12）音乐播放

bgsound:

src:需要播放的音乐路径  

loop=-1(无限循环)  

autostart="true"自动播放

（13）列表标签：

有序列表ol li（type属性更改序号类型）

无序列表ul  li（用于条目的罗列，type属性更改序号类型）

	
hello
    
world



	
hello
    
world

（14）项目列表标签(dl dt dd)（一般用于有层次结构的列表）

	
学生
    
小学生
    
中学生
    
大学生
   

（15）下拉选项：（后面案例中会有使用）

（16）行内标签(span) (html中用的非常少，css中用的非常多)   

（17）块标签

(html中用的非常少，css中用的非常多)

2.4 超链接标签（后面案例中会有使用）

常用的属性：

href  表示链接到的地址（文件）
target  打开资源方式     _self: 当前窗口打开， _blank: 新窗口打开

2.5 图像标签（后面案例中会有使用）
img 图像标签
常用属性：
src :  表示图片源位置
width: 图片宽度
height: 图片高度
alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效
title: 提示文本。当鼠标放到图片上面出现。
地图（热点区域）：map
热点： area，设置图片上可以被点击的区域（用工具做之后进行简单分析）

2.6 转义字符
在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话，那么就需要进行转义。
常见的转义字符：
特殊字符     转义字符(以&开头，以;结尾)
<          <   letter than
>          >   greater than
&          & 
空格        

123

<h1>123</h1>

2.7 表格标签（后面案例中会有使用）
标签：
table 表格
tr   行
td   单元格
th   表头
caption  标题

常用的属性：
border  表格的边框
width  宽度
heigth 高度
align   对齐方式：left: 左对齐   center:居中  right：右对齐
rowspan  行合并。把多行的单元格合并
colspan  列合并。把多列的单元格合并

2.8 表单提交（后面案例中会有使用）
作用：用于采集用户输入的数据，提交给后台程序处理
表单标签：

  就是一个表单

 单行输入域
 密码输入域
单选按钮
多选按钮
 下拉选项
  隐藏域。特点：不会显示到html页面上，但可以携带数据。 
 文件选择器
 多行输入域
 提交按钮
普通按钮
重置按钮 

2.9 框架标签（后面案例中会有使用）
frameset 框架集
属性：
cols: 按照列的方向来划分框架
rows: 按照行的方向来划分框架
以上两个属性的值填每个框架的比例或者长度
*号表示其他框架分配完之后剩下的比例
                
frame 表示一个框架，框架中包含一个html页面
有2个或2个以上的frame就会包含在frameset当中。
注意：框架标签不能放在body标签中，否则无法显示！！！

3.标签整合案例

案例：利用框架标签做一个登录注册案例（点击左边的登录，或者注册直接跳转到指定的页面），使用框架，超链接，表格，表单等等：

框架_表单_test.html:

top.html:

登录注册页面

left.html:

登录注册
1.注册
2.登录

背景.html

首页

注册.html

欢迎来到注册页面


	

    	
用户名：
    	

    
    
	

    	
密码：
    	

    
    
	

    	
性别：
        

        男
        女
        
    
    
	

    	
兴趣：
    	

        羽毛球
        篮球
        兵乓球
        足球
        
    
    
	

    	
学历：
         

         
         本科
         硕士
         博士
         博士后
         
        
        
    
	
    

    
个人简介：
    

        
    
    
    
    

    	

        
        
    	
    
    
	

登录.html:

欢迎来到登录页面


	

    
用户名：
    

    
    
	
    
    

    
密码：
    

    
    
    
    
    

    

    
    
    还没有账号？注册...
    
    

效果图展示：

由于主要于实现，对于颜色搭配略差...主要是实现，实现，实现！！！

首页：

点击注册：

点击登录：