码迷,mamicode.com
首页 > Web开发 > 详细

HTML

时间:2018-03-08 23:03:07      阅读:535      评论:0      收藏:0      [点我收藏+]

标签:开发   表头   功能   web前端   控件   iis   访问   公告   门户网站   

web前端

什么是web

使用浏览器去访问的程序 web程序:习惯性叫他程序 细分:电商网站、门户网站、应用网站

什么是web前端

web程序的代码存储在服务器端
代码分两种:一种运行在客户端,一种运行在服务器端
运行在服务器端的代码:后台代码
运行在客户端(浏览器):前端代码 (web前端)
完整的(优秀的)web程序:前端+后台

学什么

1.静态页面编写:按照产品设计完成网页的编写(.html文件),可以在浏览器里运行 技术:html(5)+css3
2.添加页面功能:动态特效,页面交互技术:javascript,jQuery,DOM
3.和服务器的交互技术:sever,php,ajax
4.复杂开发:HTML5,框架技术(bootstrap,node,js,angular.js),移动端开发,微信开发

web基础知识

1.web与internet

1.internet
一个全球性的计算机互联网络,因特网,互联网,交互网

2.Internet所提供的服务

1.email邮件服务
2.Telnet 远程登录
3.www服务 (world wide web)万维网
4.bbs 电子公告板,俗称论坛
5.FTP 文件的上传下载 

3.基本实现技术

1.分组交换原理(先拆分后重组)
2.tcp/ip协议

4.web

1.指的是网络环境下的一种应用程序---网页程序,简称网页
作用:将各类信息和服务进行无缝连接,并且提供生动的图形用户界面。信息共享

5.工作原理

1.由服务器,浏览器,通信协议组成
    通信协议:http(hyper text transfer protocol)超文本传输协议

浏览器:IE,Firefox火狐,chrome谷歌,Safari苹果,opera欧朋
功能:
    1.提交请求
    2.作为HTML和js的解释器
    3.以图形化的方式显示文本

服务器:
功能:
    1.存储web上的信息
    2.响应浏览器请求并且执行服务器端程序 
    3.具备基本的安全性功能

服务器产品:
    tomcat
    iis
    Apache

服务器端技术:
    python
    Java
    PHP
    .net
    都有数据库访问能力

前端技术:
    HTML
    css
    js
    运行在客户端,由浏览器解析执行

HTML概述

   1.什么是HTML?
	   hyper text markup language
		 超级  文本  标记    语言
		 普通文本a:无特殊意义
		 超级文本<a>:超链接功能
		 超文本:文本具备特殊功能
		 标记:超文本的组成形式<a>
		 语言:拥有自己的语法结构
		 由HTML编写的web文件,以.HTML或.htm作为后缀。
   2.特点
	   1.以.HTML或.htm作为后缀
		 2.由浏览器解析执行
		 3.可以嵌套脚本语言(JavaScript,VBScript)
		 4.用带有尖括号的“标记”来标识
   3.HTML基础语法

	   1.标记
		   什么是标记?
			   在HTML中,用于描述功能的符号,称之为标记
     2.语法
		   标记在使用时,必须用尖括号(<>)括起来
			 标记的分类:
			   1.封闭类型标记
				   也称为双标记,必须成对出现
				   <标记>内容</标记>
					 例如:<a>网页</a>
					 注意:封闭类型标记必须成对出现,如果没有被封闭,会产生意想不到的效果。
					 例如:
					   <p>段落一</p>
		         <h1>标题元素
		         <p>段落二</p>
         2.非封闭类型
				   也称为单标记或空标记
				   语法:<标记>或<标记/>
					 单标记不能包含内容
					 例如:
					   <br>或<br/>表示换行
						 <hr>或<hr/>表示横线
						 <img>
	       3.元素
				    元素即标记(标签)
				 4.元素的嵌套
				    元素之间可以相互嵌套,形成更为复杂的页面结构
						元素嵌套:在一个元素中,又出现另一个元素
						<p>
						  <a>
								<img>
							</a>			
						</p>
						注意:成对出现,成对缩进
				 5.属性和值
					1.什么是属性
						属性用来修饰元素的
					2.语法
						属性的声明必须位于开始标记里
						<标记 属性=“值”  属性=“值”...></标记>
						<p align="center" id="p1">段落一</p>
				  3.标准属性(只有以下4个)
						1.id 用来定义元素在页面中的唯一标识
						2.title 鼠标移入到元素上时,所提示的文本内容
						3.class CSS中引入类选择器
						4.style CSS中定义元素的行内样式
         6.注释
					 在页面中编写完成后,不会被浏览器解析运行
					 可以将代码的解释说明写在注释中,便于其他程序员查看。
           语法: <!--注释内容-->
					 注意:
						1.本身不能嵌套
						<!--<!---->--> 错误的写法
						2.不能嵌套在<>中
		 3.HTML和XHTML和HTML5
		   w3c负责定制和推广HTML
			 w3c:万维网联盟

			 1999年12月24日html 4.01标准
			 2000年1月26日w3c推出XHTML1.0标准
			   XHTML与html4.01几乎相同
				 XHTML是一个更纯净的版本
				 如:<br>早XHTML中必须要求结束<br/>
			 2014年9月。HTML5目标:实现更简洁的html代码
			 能不写就不写,能少写就少写
				例如:<br>或<br/>
				      <p align="center"></p>正确
							<p align=center></p>正确
							<input readonly="readonly">正确
							<input readonly=readonly>正确
	 4.HTML文档结构
		 1.文本类型的声明
		   <!doctype html>
			 作用:指定HTML的版本和风格
		 2.HTML页面
		   语法:<html></html>
			 位于<doctype html>之下
      练习:创建一个网页,名称为01.html,并且搭建网页结构(docype html)
		 3.html页面内容
		   1.页面头部内容
			   作用:用来定义页面的全局信息
       2.语法
			   <head></head>
				 紧跟在html之后,是html中首个子元素
			 3.头部所包含的内容
			   1.定义网页的标题
				   <title>标题内容</title>在网页的标签页显示
         2.定义网页的编码格式,关键字,描述等
				   <meta charset="utf-8">
					 <meta name="keywords" content="关键字">搜索栏里搜索的关键字
	         <meta name="description" content="描述内容">搜索完显示的具体内容
         3.<script></script>定义或引用javascript
				 4.<style></style>定义内部样式
				 5.<link>引用外部样式
       4.页面主体内容
			   语法:<body></body>
				 属性:(写在<body>中)
				    text:表示文本颜色
						bgcolor:表示网页的背景颜色

练习:
在已有网页基础上,完善网页的头元素和主体内容布局,在body中添加一行文本,设置文字颜色为红色,背景颜色为黑色

文本标记

1.特殊字符
	   1. 空格
		 2.>>
		 3.<<
		 4.©圈C,版权免责声明字符
		 5.¥人民币字符
	 2.文本样式
	   1.<i></i>斜体
		   <u></u>下划线
			 <s></s>删除线
			 <b></b>加粗
			 <sup></sup>上标
			 <sub></sub>下标
	 3.标题元素
	   以标题形式来显示文本内容
		 语法:<hn></hn>   n代表1-6数字
		       <h1></h1>一级标题,加粗,字号最大
					 ...
					 <h6></h6>六级标题,加粗,字号最小
			特点:
			   1.字体加粗
				 2.改变字体大小
				 3.上下文之间有空白间距
				 4.独自成行
	 4.段落元素
	   语法:<p></p>
		 以段落的形式显示文本
		 形式:字体大小为默认大小,段落独自成行,并且上下文有垂直空白间距
	 5.换行元素
	   语法:<br>或<br/>
	 6.分割线元素
	   语法<hr>或<hr/>
		 属性:
		    size:取值px为单位的数值
				color:颜色
				width:宽度
				align:线条的水平对齐方式
   7.预格式化
	   保留源文件中的格式,即源文件中的换行和空格的效果
		 语法:<pre></pre>
   8.分区元素
	   1.块分区
		   语法:<div></div>
			 形式:
			   1.独自成行
				 2.无任何明显效果
			 作用:布局
		 2.行分区
		   语法:<span></span>
			 形式:
			   1.多个span在一行内显示
				 2.无任何特殊效果
       作用:用来处理一行文字的不同样式

标签元素分类

	1.行内元素与块级元素
		1.行内元素
			多个元素在一行内显示
			ex:
			span,i,b,s,u,sub,sup,(img,a)
             	作用:大部分行内元素为了处理文本的显示效果
         	2.块级元素
			每个块级元素会独占一行,即前后都有换行
			ex:div,h1~h6,p,(结构标记)
			作用:用来做布局
       2.嵌套问题
		1.尽量不要让行内元素嵌套块级元素
		<span>
		<div>
		</div>
		</span>
		以上结构不推荐
		2.段落元素<p></p>是不允许嵌套其他块级元素(p也不能嵌套p)

       3.Editplus操作
		1.指定创建文件(.html)
			1.创建模板页
			Tools->preference->file->Templates->HTML->file name 重新选定模板

           2.快速查看网页的效果
			快捷键:Ctrl+B
			设置路径:
			tools->preference->tools->Browser1  指定浏览器
           3.代码折叠效果
			view->Code Folding->user codefolding
           4.代码缩进线条
			view->Indent Guide
           5.代码行号显示
			view->line number  ctrl+shift+L 
           6.取消bak文件
			Tools->Preferences->File->取消 Create backup file when saving
           7.修改文件编码格式
			Tools->Preferences->File->将Defaule Encoding 设置为UTF-8

图像和链接

url

1.目录结构
  目录:web站点中文件夹的名称
2.url
  统一资源定位器,俗称:路径
	作用:标识资源的位置
3.表现形式
  1.绝对路径
	  完整的路径
		1.网络资源
		  通过以下四部分来获取网络资源的路径
			1.协议名:ex:http
			2.主机名(域名/IP)ex:www.jd.com
			3.目录结构:ex:da/index/img
			4.资源文件名:ex:logo.jpg
     http://www.jd.com/da/index/img/logo.jpg
		2.本机资源
		   从最高盘符处开始找,一直找到资源所在的目录
			 ex:D:\yang\练习\img\flower.jpg
  2.相对路径
	  从当前文件位置处开始,一直到资源文件所在的位置,所经过的路径就是相对路径
	  1.同目录
		  直接通过资源文件名称进行引用
			ex:a.jpg
		2.子目录
		  先进入到子目录中,然后再对资源文件进行引用
			ex:子目录1/子目录2/资源文件名称
			ex:index/img/b.jpg
		3.父目录
		  先返回到父级目录再对资源文件进行引用
			ex:../表示返回到上一级
			ex:../c.jpg
  3.根相对路径
	  永远都从web站点的根目录开始找的
		由/作为开始,表示web站点的根目录
		/index/img/d.jpg

图像

1.图像格式
  jpg(jpeg):有损压缩
	png:背景是透明
	gif:动画
2.图像
  语法:<img>
	属性:
	    src:(源)要显示的图像的路径,url
			width:宽度
			height:高度
			注意:
			  取值:数值px单位
				width和height如果只指定其中一个属性,那么另外一个也会跟着等比缩放。
      title:鼠标移入停留时显示的文字
			alt:图片出错时,显示的文字
 练习:显示三张图片,要求图片路径位于同级,子级,父级目录

3.链接
  1.作用:链接,又称超链接,设置页面中允许   被点击的内容。在网页中,链接允许完成页   面间的跳转动作。
  2.语法
	  标记:<a>内容</a>
		属性:
		   href:链接的URL(要跳转到的页面的地址)
			 target:目标,指定打开新网页的方式
			       取值:
						    _self:(默认值)在自身的标签页中打开
								_blank:在新的标签页中打开
			 title:鼠标放到链接上的提示
	3.链接的表现形式
	  1.目标为下载资源
		  <a href="*.zip/*.rar"></a>
			如果链接地址是压缩文件,就是下载操作
		2.电子邮件链接
		  <a href="mailto:g-yangyan@tedu.cn">打开邮件</a>
		3.返回页面顶部的空链接
		  <a href="#">返回页面顶部</a>
		4.链接到JS
		  <a href="javascript:JS代码">执行JS功能</a>
	4.锚点
	  1.作用
		  在页面中的某行位置处,做一个记号
			方便页面能够随时跳转到记号位置处
	  2.使用方式
		  1.定义锚点
			  1.通过a标记的name属性定义锚点
				  <a name="自定义锚点名称">内容</a>
				2.通过任意标记的ID属性定义锚点
				  <ANY id="自定义锚点名称"></ANY>
      2.链接到锚点
			  跳转到本页的锚点处
				<a href="#锚点名称">内容</a>

				跳转到其他页面锚点处
				<a href="页面的url#锚点名称">内容</a>

表格

1.表格的作用
  按照一定的格式(结构)来显示数据
	表格是由单元格,按照从左往右,从上往下的顺序排列的
	表格中的数据最终保存在单元格中
2.使用表格
  1.创建表格
	  1.定义表格:<table></table>
		2.创建表行:<tr></tr>
		3.创建列:<td></td>
		注意:传统的表格,默认每行的列数都是统一化的。
	练习:
	  创建一个3行4列的表格
		步骤:
		   1.创建一对:table
			 2.在table中创建3对tr
			 3.在tr中创建4对td
  2.表格属性
    table属性
		1.width
		  设置表格的宽度
		2.height
		  设置表格的高度
    3.align
		  设置表格的水平对齐方式
			取值:left/center/right
	  4.border
		  边框,指定边框的宽度
		5.bgcolor
		  设置表格的背景颜色
		6.cellspacing
		  设置单元格的外边距(单元格与单元格之间的距离)
		7.cellpadding
		  设置单元格内边距(单元格边框与内容之间的距离)
	3.tr属性
	  1.align
		  设置该行内容水平对齐方式
			取值:left/center/right
		2.valign
		  设置该行内容的垂直对齐方式
			取值:top/center/bottom
		3.bgcolor
		  设置该行的背景颜色
	4.td属性
	  1.align 水平对齐
		2.valign 垂直对齐
		3.width 列宽度
		4.hegiht 列高度
		5.colspan 设置单元格跨列
		6.rowspan 设置单元格跨行
    注意:
		  1.每行中的指定列的宽度,都是一致的,默认以最宽的为主          
3.表格的标题
 标记:<caption></caption>
注意:
   1.caption紧跟在table之后
	 2.一个表格只能有一个标题
4.th 行标题或列标题,字体有加粗的效果,放在tr中

表格复杂使用

1.行分组
  可以将表格分成3个部分
	1.表头:<thead></thead>
	2.表主体:<tbody></tbody>
	3.表尾:<tfoot></tfoot>
2.不规则表格
  通过td的colspan(跨列)和rowspan(跨行)属性设置
	1.跨列
	  从指定的单元格位置处,横向向右合并几个单元(包含自己)
		注意:被合并掉的单元格需要删除
		属性:colspan
		取值:数字(合并单元格的个数)
	2.跨行
	  从指定的单元格位置处,纵向向下合并几个单元格(包含自己)
		注意:被合并掉的单元格要删除
		属性:rowspan
		取值:数字(合并单元格的个数)
  3.表格嵌套
	   在单元格中去嵌套另一个表格
		 <table>
		   <tr>
			   <td>
				   <table>
					   <tr>
						   <td></td>
						 </tr>
					 </table>
				 </td>
			 </tr>
		 </table>

结构标记

 1.什么是结构标记
   在HTML5中,专门提出一组标记用来表示网页的结构,即制作布局
	 目的:取代div布局,提升布局代码的语义性和可读性
	 ex:<div></div>-----><header></header>
 2.常用的结构标记
   1.header元素
	   作用:用来定义网页或者其他部分内容的页眉(靠顶部的内容)
		 语法:<header>内容</header>
   2.nav元素
	   作用:用来表示网页的导航链接部分
		 语法:<nav></nav>
	 3.section元素
	   语义:小节
		 作用:定义页面中的节,表示页面的主体内容
		 语法:<section></section>
	 4.footer元素
	   作用:定义页面的底部信息,用户不太注意的内容:网站备案号,解释说明...
		 语法:<footer></footer>
	 5.aside元素
	   作用:用来定义页面中的边栏信息
		 语法:<asdie></aside>
	 6.article元素
	   语义:文章,艺术
	   作用:定义一些简短的内容,章,节。比如像论坛的帖子,用户的评论,微博条目
		 语法:<article></article>
		 注意:如果以后出现无法被结构标记取代的模块,那么继续用div布局

表单???

1.表单的作用
  用于显示,收集数据,并提交信息给服务器
	完整的表单处理包含两部分:
	  1.实现数据交互的可见界面元素(前端)
		ex:文本框,密码框,按钮
    2.提交后的表单的数据处理(服务器端)
  1.表单元素
	  标记:<form></form>
		属性:
		  1.action
			  定义表单提交时发生的动作
				具体取值要与后端服务器人员协同完成(后端人员给一个url路径)
				如果省略不写,默认提交给本页
			2.method
			  定义表单提交数据的方式
				取值:
				   1.get(默认值)
					   1.明文提交,提交的数据会显示在浏览器的地址栏上
						 2.安全性不高
						 3.提交的数据大小有限制  小于2kb
						 4.场合:用于向服务器要数据的时候使用,搜索关键字提交
					 2.post
					   1.隐式提交,不会将提交的信息显示在浏览器的任何位置
						 2.安全性高
						 3.无大小限制
						 4.场合:要传递数据给服务器进行处理的时候,登录,注册,上传文件...
           3.delete,put...等
		  3.enctype
			  作用:指定数据进行编码的方式
				取值:
				  1.application/x-www-form-urlencoded
					默认值,可以将表单中的普通文本,特殊字符,标点符号都可以进行二进制编码,然后提交给服务器
					(无法对文件进行提交)
					2.multipart/form-data
					  将表单中的文件进行二进制编码再提交(字符、标点符号无法编码提交)
          3.text/plain
					  将表单中的普通字符进行二进制编码提交,其余无法提交
      4.name
			  定义表单名称,js用到的比较多
			5.id 独一无二的标识
  2.表单控件
	  1.作用
		  用于接收用户数据并依托于表单提交给服务
    2.表单控件的分类
		  1.input元素:文本输入框(用户名,密码),按钮,单选按钮,复选框
			  标记:<input>
      2.textarea
			  多行文本域
				标记:<textarea></textarea>
			3.select 和 option
			  选项框
				  标记:<select>
									<option></option>
					      </select>
      4.其他元素
	3.input元素
	  1.作用:
		  用于收集用户信息
    2.语法:
		  标记<input>
			主要属性:(同有的属性,指所有input都具有的属性)
			  1.type
				  根据type的值,来创建各种类型的输入控件,比如:文本框、密码框、按钮
				2.name
				  定义控件名称,提供给服务器使用
					注意:如果不给控件设置名称,则数据无法提交
					匈牙利命名法:控件的缩写+功能名称
					ex:txtName txtPassword
        3.value
				  设置控件的值,也是最终提交给服务器的值
				4.disabled
				  禁用控件
					 表示控件不可用(不能获取他的值,也不能被提交)
					 注意:该属性没有值
					 <input type="" name="" value="" disabled>
		3.input元素详解
		  1.文本框与密码框
			  文本框:<input type="text">
				密码框:<input type="password">
			  专有属性: 
				  1.maxlength
					 限制输入字符数的数量
					 取值:数字
					2.readonly
					  只读
						注意:readonly只读,允许被提交
						      disabled禁用,不能被提交
					3.name
					  文本框和密码框缩写:txt
						ex:txtName txtPassword
						<input type="text" name="txtName" >
						<input type="password" name="txtPwd">
						注意:txt后面单词首字母大写,多个单词每个首字母都要大写
					4.placeholder
					  占位符
      2.单选按钮和复选框
			  单选按钮:<input type="radio">
				复选框:<input type="checkbox">
				  属性:
					  1.name
						  名称,同时具备分组的作用
							单选按钮:一组中只能有一个按钮被提交
							复选框:一组数据后台获取时名称是相同的
						2.value
						  值,被选中后提交的值
						3.checked
						  设置默认被选中
							该属性无值
			3.按钮
			  1.提交按钮
				  <input type="submit">
					作用:提交表单数据给服务器
				2.重置按钮
				  <input type="reset">
					将表单恢复到初始化的状态
				3.普通按钮
				  <input type="button">
					作用:由用户自定义功能(js)
				属性:
				  1.name
					  定义按钮名称,缩写:btn
					2.value
					  按钮上面的文字内容
				4.其他按钮
				  1.图片按钮(提交)
					  <input type="image">
						 属性:src
					2.按钮(提交按钮)
					  <button>内容</button>
      4.隐藏域和文件选择框
			  1.隐藏域
				  <input type="hidden">
					作用:要提交给服务器,但是又不想给用户看到的数据,放到隐藏域中
				2.文件选择框
				  <input type="file">
					作用:允许打开文件的选择框,选择文件进行上传
					属性:
					  1.name
						  缩写:txt
						2.value
						  值
					注意:
					  使用文件选择框上传文件时候,有以下两点要求:
						  1.<form>的method属性必须是post
							2.<form>的enctype属性必须是multipart/form-data
  4.textarea元素
	  1.完成多行文本的录入功能
		2.语法
		  标记:<textarea>内容(默认值)</textarea>
      属性:
			  1.name
				  名称,缩写为txt
        2.cols
				  去指定文本区域的列数
					变相的去设计控件的宽度
				3.rows
				  指定文本区域的行数
          变相的去设置控件的高度
        4.readonly  只读
  5.选项框
	  分两种形式:
		  下拉选项框
			滚动列表
		语法:
		 1.<select></select>
			作用:创建选项框
			属性:
			  name:名称,sel
				size:指定选项框默认能显示几项内容
				      默认值是1,如果大于1,则为滚动列表
				multiple:设置允许多选
				          该属性没有值
     2.<option></option>
		    作用:定义选项框中子选项
				属性:
				  value:选项的值
					selected:预选中,设置默认被选中的选项
					          该属性无值。
  6.其他元素
	  1.lable元素
		  作用:关联文字与表单控件,点击文字时候如同点击表单一样
			语法:
			  <lable>内容</lable>
			属性:for
			  表示该元素相关联的表单控件的ID属性值
		2.为控件分组
		  <fieldset></fieldset>
			子元素:<legend></legend> 来指定分组的标题
			  ex: <fieldset>
								<legend>标题内容</legend>
						 </fieldset>

  

HTML

标签:开发   表头   功能   web前端   控件   iis   访问   公告   门户网站   

原文地址:https://www.cnblogs.com/guobaoyuan/p/8531168.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!