网页——HTML篇

一、第一个HTML网页
（一）HTML概述
HTML是超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。通俗来说HTML就是网页的基础结构。
如何区分HTML、CSS、JavaScript

• 前端开发的过程比喻成”建房子“，做一个网页就像盖一栋房子，先把房子的地基结构（HTML）打好、建好之后给房子装修（CSS），粉刷墙面、贴瓷砖、安装电路等。最后，装修好了之后，晚上，我们要开灯

（JavaScript）。
（二）特征

• 不是一种编程语言，而是一种标记语言
• 标记语言是一套标记标签
• HTML 使用标记标签来描述网页
• HTML 文档包含了HTML 标签及文本内容
• HTML文档也叫做 web 页面
  （1） HTML 标签
• HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
• HTML 标签是由尖括号包围的关键词，比如
• HTML 标签通常是成对出现的，比如 和
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签

开始第一个网页
Windows，使用记事本。 Mac，使用 SimpleText。

              //这个 HTML 文件的开始点
	
		                  //标签中的文本是文件的标题。标题会显示在浏览器的标题栏。
	        //head 标签之间的文本是头信息,不会显示在浏览器窗口中。
	
		Hello HTML
	                      //标签中的文本是将被浏览器显示出来的文本。
            //文件中最后一个标签,这是 HTML 文件的结束点

步骤：
（1）打开记事本录入以上内容。
（2）将这个文件存为 “第一个HTML网页.htm”，保存至桌面。
（3）使用浏览器方式打开。
二、第二个网页

 
  
 
 
	一去二三里，

	烟村四五家。

	亭台六七树，

	八九十枝花。

	

	

	
	
	//字体属性
	
 

三、HTML标签列表

标签	描述
基础
	定义文档类型
h1——h6	定义 HTML 标题
p	定义段落
br	换行
hr	定义水平线
<！–…-->	定义注释
格式
address	模拟信封上的字体
b	文本粗体
center	文本居中
code	定义计算机代码文本
em	强调
font	定义文字的字体、尺寸和颜色。
q	定义短的引用
small	定义小号文本
strong	加强
sup	定义上标文本
sub	定义下标文本
表单
input	定义输入控件
button	定义一个按钮
select	定义选择列表（下拉列表）
图像
img	定义图片
链接
a	超文本链接
link>	定义文档与外部资源的关系
列表
ul	定义无序列表
li	定义列表的项目
表格
table	定义表格
caption	定义表格标题
th	定义表格中的表头单元格
tr	定义表格中的行
td	定义表格中的单元
	转意字符表示空格
©	版权符
&trade	TM
"	双引号
样式
style	定义文档的样式信息
div	定义文档中的节
span	定义文档中的节
head	定义关于文档的信息
程序
script	定义客户端脚本
其他
pre	预编译
bgcolor	背景标签
id	规定元素的唯一 id
translate	指定是否一个元素的值在页面载入时是否需要翻译

属性代码展示：

	
		
		
	
	//背景标签
	
background="img/5ef58360cf6b43f786e2cebd203af195.jpg">
		//背景图片

		

			

				
				
再别康桥
				
				轻轻的我走了，正如我轻轻的来；
我轻轻的招手，作别西天的云彩。
				
						
			
		
	

//标题
		
最大的标题
		
二级标签
		
三级标题
		
四级标题
		
五级别标题
		
六级标题

//超链接

		进入百度
		进入网易
		进入新浪
		
		进入首页

//图片标签

		
		
		
		//网络图片
		

//锚点链接

		

			
第一章
			
第二章
			
第三章
		
		一起来为绿色发展、

		一起来为绿色发展、

		
		
第二章开始
		一起来为绿色发展、

		一起来为绿色发展、

		调到顶部

//列表标签

		

			
列表项目
			
列表项目
			
列表嵌套
				

					
列表项目
					
列表项目
				
			
		
		
		

			
列表项目
			
列表项目
		
		
		

			
列表标签
			
列表的描述
			
列表标签
			
列表的描述
		

//合并单元格

			
			

				
Data
				
Data
			
			

				
Data
			
			

				
Data
				
Data
			
			

				
				
Data
			
		

//合并单元格2

			

				
Data
				
Data
			
			

				
Data
				
Data
				
Data
				
Data
			
			

				
Data
				
Data
				
Data
			
			

				
Data
				
Data
			
		
		

		

			

				
Data
				
Data
			
			

				
Data
			
			

				
Data
			
			

				
Data
			
			

				
Data
			
			

				
添加购物车
			
		
	

四、全局属性介绍
alt——提示键
（一）窗口事件（由窗口触发该事件）
（二）表单
（三）键盘
（四）鼠标
（五）多媒体

//表单标签


	
		
		
	
	
		
	
			

			
			
			用户名: 

			密码:

			
		
			性别: 男 
			女 	

		
			生日：

			你有几个女朋友：	

			
			
			
			爱好：跑步
			唱歌
			看书 
			

		      
			//学历：
				--请选择你的学历--
				幼儿园
				小学
				中学
				大学
				
			
			

			
			
			

			
			
		
	

表格标签，最早就是用来布局页面的，让页面元素放在合适的位置，使页面看起来整洁美观

	 border="1" 表格的边框
	 cellspacing="0" 设置为0 可以让边框变成实线边框
	 cellpadding="10px" 调整单元格跟内容之间的间距
	 height="300px"  表格的高
	 width="300px" 表格的宽
	 align="center" 表格的对齐方式 left center right
	 bgcolor="aquamarine" 表格的背景颜色
	 background="img/c.jpg" 表格的背景图片

	
		
		
		
	
	
		

			
学生信息表

			

				
姓名
				
年龄
				
性别
				
学号
			
			

				
张三
				
23
				
男
				
s001
			
			

				
单元格
				
单元格
				
单元格
				
单元格
			
			

				
单元格
				
单元格
				
单元格
				
单元格
			
		
	

表格嵌套：

	
		
		
	
	

		


			

				
Data
				
Data
				
Data
			
			

				
Data
				
Data
				
Data
			
			

				
Data
				
Data
				
Data
			
			

				
Data
				
Data
				

					
					

						
Data
Data
Data
						
Data
Data
Data
						
Data
Data
Data