html基础学习

最新推荐文章于 2024-10-17 18:11:28 发布
freetoshare
最新推荐文章于 2024-10-17 18:11:28 发布
阅读量198
点赞数
分类专栏：前端文章标签： html web
本文链接：https://blog.csdn.net/qq_28635317/article/details/106161885
版权
前端专栏收录该内容
13 篇文章 0 订阅
订阅专栏
知识点：
一、软件
二、html介绍
三、html编辑工具的安装使用

一软件
  软件：软件是运行在电脑 手机 pad平台上的，能够实现某种功能的工具，软件
   系统软件：
     Windows Linux Unix、手机iOS Android
   应用软件：
     迅雷、游戏、播放器...
     C/S 客户端/服务器端 安装运行维护都是由客户端完成，开发是由服务器端的程序员开发的
          QQ游戏,迅雷,杀毒软件,办公软件....
     B/S 浏览器/服务器端  开发维护运行都在服务器端完成，浏览器只负责浏览。
          网站,基于Web的应用软件（12306）,oa产品
    1》B/S软件
       网站
       基于Web的应用软件(基本都是动态)
       动态：动态网站，动态基于web的软件  与数据库结合 PHP、JSP、。net
            动态网站的后缀名 .php、.jsp、.aspx、.asp
       静态:不与数据库结合，html div css页面，通过超链接把页面关联起来
            静态网站的后缀名  .htm、.html、.shtml
    2》php开发动态网站
       包含内容：
        html div CSS
	js jquery ajax
	php mysql apache
	php smarty thinkphp....
二html介绍
 1》html概述
    html是用来编写网页的代码，包含html div CSS
    2007年以前-----》html table搭建页面
    2007年以后-----》web2.0 把div CSS独立出来
 2》html
    标记语言：<单词或字母组合>--浏览器认识 主要用来搭建页面框架的。后缀名一般是.htm .html .shtml 静态网页
 3》网站的构成
     html（div+CSS）
     服务器端脚本：php/jsp/.net(C#)
     MySQL SqlServer oracle
     客户端脚本程序:js jquery ajax

     LAMP/WALMP
     linux+apache+mysql+php
     windows+apache+mysql+php
三html编辑工具的安装使用
  html---》Dreamweaver 版本mx/2004/8/cs
  deramweaver-->解压--》双击 @绿化.exe-->Dreamweaver.exe文件---》代码编写者
  1》新建第一个页面：
  新建--》基本页--》html 新建第一个网页文件  一般网页首页是index.html
  2》html代码介绍
    html是由<单词或字母组合>构成
    <单词或字母组合> 网页标记 分为单标记、双标记
    单标记：<标记名称/> /表示标记结束
    双标记：<标记名称>内容</标记名称>
    标记是含有属性的
     <标记名称 属性名称="值" 属性名称="值" 属性名称="值" 属性名称="值".../>
	 属性是不唯一的，但每一个标记属性只能出现一次
	 属性名称="值"  把值付给了属性名称，把值赋给了属性
  3》初始标记:
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		DOCTYPE  document type 文档类型
		html		网页文档
		public 公共的，开放的
		-//W3C//DTD XHTML 1.0 Transitional//EN    w3c 协会     DTD 文档类型定义  XHTML 1.0 版本号  Transitional 过渡 en 英文
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 规则的网址
		<html></html>网页标记
		<head></head>网页的头部的标记
		        两个常用的标记
		     	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
				meat 页面信息描述的标记 两个属性
				http-equiv="Content-Type" 指定页面内容类型
				content="text/html; charset=utf-8"   内容=“文本/网页;字符集”;
								 utf-8 国际标准字符集:  常用语言和特殊符号
								 gbk 国内标准字符集:  国内常用语言 、特殊符号
								 gb2312 简体中文字符集:   常用语言文字、特殊符号
		<body></body>网页的主体标记
==============================================================================
知识点:
	一 html 文字标记
	二 html <br /><p><img><hr><hn>
	三 html 实体 
	四 html<a>
	
一 html 文字标记
	1>普通文字，页面上正常显示
	2>字体标记:
		<i></i>定义斜体文本。
		<strong></strong>文本加粗
		<sup></sup> 小写上标
		<sub></sub>小写下标
		<font></font>可以修饰文本大小 颜色 书法体
		size = "值" 文字大小 -1到6
		color="#FF0000" 文本颜色
		 face="隶书"  书法体
		 
二 html <br /><p><hr><hn><img>
	<br/>换行标记   浏览器解释大段空白，只认为是一个空格	，	 
	<p></p>段落标记  上下都加空行，而且换行。
	<hr  />  画线标记
		color 颜色
		width 长短
		size  高度
	<hn> </hn>标题标记  n是1到6  标题顺次减小。
	<img src="图片路径" />图片标记
	路径规则:
		绝对路径:F:\AppServ\www\html\02\demo2\imgs\1.jpg
		相对路径:	 从index.html出发-->找imgs中图片的相对路径  ******
						平级: 直接写文件名称
						在index.html下级  目录名称/文件名称
						上一级: ../文件名称
三 html 实体 		
	把字符 控制符进行转换的。
	"  &quot;				
	' &prime;	
	< &lt;
	> &gt;				
		 
		 
四 html<a>
	超链接： 点击后发生页面跳转的文字，图片  或其他页面元素。		
	<a href="网页路径">页面上显示的元素</a> 
		 外网:  路径必须是全路径
		 内网: 内网跳转遵循相对路径规则
		 图片作为超链接:<a href="http://www.sohu.com"><img src="图片路径"></a>
===================================================================================
知识点:
	 一 table
	 二 form表单
	 
一 table
	<table></table>表格标记 表格包括行，行包括列
	<tr></tr> 行
	<td></td>列
	1.table 属性:
		border="1" 表格的边框
		align="center"  表格水平位置 left 左  center 中 right 右
		width="600"  表格宽度
	    height="300" 表格高度
		cellpadding="40" 文字距离边框的距离
		 cellspacing="20" 边框的厚度
		bgcolor="#FF0000" 背景色
		background="imgs/1.jpg"背景图属性
			当背景图宽度 和 高度 < 表格的宽度 和 高度 背景图会在横向和纵向平铺（重复）
			当背景图宽度 和 高度 > 表格的宽度 和 高度  表格从左上角开始引用图片的一部分 （和表格的宽度和高度相同）
	2 tr 属性 只控制该行内容
		align="center" left center right 行中内容的左中右
		 height="100"   行高
		 valign="bottom" 行中内容的上中下   top middle bottom
	3 td 属性：只控制该列内容
		align="right"  left center right 列中内容的 左 中 右
		valign="top"   top middle bottom  列中内容的上 中 下
		width="100"   列宽（影响整列的宽度）
		height="40"    行高（影响整行的高度）
		标记具有就进原则
		
		colspan="列数" 和并列
		rowspan="行数" 合并行
		注意： 行列都有合并 先列 后行
		
 二 form表单：	主要是用来和用户交互的
 <form></form> 表单标记 里面有人为分为两个元素
 1. input元素
 		<input type="元素名称" />标记开头都是<input> 元素种类由type决定
			button:  普通按钮   value="按钮的文字"    和js /jquery代码做一些效果
			checkbox 复选框  value="值隐藏起来"（处理传递时候用）checked="checked" 默认选中项    
			file 上传控件
			hidden 隐藏域  value="值"  和php脚本程序交互。
			image 图片提交按钮  src="图片路径"  图片形态
			   要实现提交必须在<form>中加属性
			  action=“处理页面”  method="post/get"post快多get慢少 
			submit 提交按钮 和 image功能一样，按钮形态
			password 密码框
			radio 单选框  排他效果  name="相同的值" 没有name属性就没有排他性
			text 文本框
			reset  把所有表单元素 还原成默认状态  value="按钮上文字"
								
 2 非input 元素
 	<select>  下拉 列表
		<option>北京</option>  选项
		<option>上海</option>
		<option selected="selected">天津</option> selected="selected" 默认选项
		<option>河北</option>
	</select>
	<textarea></textarea>文本框
	<textarea cols="文本列数" rows="文本行数"></textarea> 没有滚动条 cols+2   
======================================================================
知识点：
	一 demo  注册页（table+ form）
	二 框架集 frameset
		<frameset>
		</frameset> 写网站后台
  			 rows="val1,val2,val3....."   val值有几个 意味着页面上有几行  val表示行高
			cols="val1,val2,val3....."    val宽度 val值有几个 意味着页面上有几列
			* 表示剩下的全部
		<frame src="链接页面的路径">
		<frame src="链接页面的路径">
		 frameborder="0"  框架边框
		 scrolling="no"      没有滚动条
		 noresize="noresize" 不能重新改变框架集的大小
		 name="rightFrame"  页面的名称
		 target="rightFrame"  打开超链接的位置 在rightFrame页面打开超链接