html简介
HyperText Markup Language 超文本标记语言
超文本: 能够表达更丰富的内容(相对于普通文本)
标记:标识符号,就是html中的标签
语言: 不是编程语言,就是html标签的描述
浏览器来翻译html代码
新建网页扩展名: .html .htm
常见文件扩展名
音频:mp3 ,wav
视频:mp4,rmvb,avi,rm,
文档:doc docx
图片:jpg gif png
editplus 初步设置
快捷键
保存:ctrl+s
复制:ctrl+c
粘贴:ctrl+v
剪切:ctrl+x
撤消:ctrl+z
重做:ctrl+y
全选: ctrl+A
复制并粘贴:ctrl+j
调整行的位置:alt+shift+上下箭头
标签分类
双标签 <font>HTML</font>,有开始标签和结束标签(标记)
单标签 <br />
标签书写规范
所有的标签都在< >中
所有的标签都有开始和结束,即使是单标记也要结束
<br /> 强制换行
<img /> 图片标记
<hr /> 分隔线
所有的标签和属性及值小写
标签和属性,属性与属性之间有空格
属性值必须有加引号(单引号或双引号都可以)
属性必须有值
属性可写可不写
标签与标签之间正确嵌套
标签格式
<开始标签 属性1=”值1” 属性2=”值2” 属性n=”值n”>控制的内容</开始标签>
<开始标签 属性1=”值1” 属性2=”值2” 属性n=”值n” 空格/>
<开始标签 空格/>
文档结构
在网页源代码中查看时,ctrl+end回到最后,ctrl+home回到最顶部,ctrl+F查找标签
<html>
<head><title></title></head>
<body>
</body>
</html>
解释:
html: 指明当前的文档的类型,是一个网页
head是网页头部 包括网页的相关信息,基本设置,其中title网站的标题就在里面。
body:在浏览器的看到的内容。
html注释: <!--注释内容-->
html标签按功能分类
文本的修饰
文字排版
图片
链接
表格
列表
表单
框架
文本的修饰
font的三个属性:
color:red,blue,green,yellow,gray,pink,tomato,white
size:值(1-7),默认值:3
face:字体
建议使用英文表示中文字体
<font> http://tool.oschina.net/
<body>的属性有:
text :文字的颜色
bgcolor: 背景色
background: 背景图
当前网页文件和背景图片在同一个文件夹(建议)
bgproperties:背景图固定,火狐不好用。
通过样式来处理背景图固定的问题
style 英 [staɪl] 美 [staɪl] 格式
fixed 英 [fɪkst] 美 [fɪkst] 固定的
properties 英 [p'rɒpətɪz] 美 [p'rɒpətɪz] 属性,特性
URL(Uniform Resource Locator:统一资源定位器)是WWW页的地址,它从左到右由下述部分组成:
Internet资源类型(scheme 英 [ski:m] 美 [skim] 模式/协议):指出WWW客户程序用来操作的工具。如“http://”表示WWW服务器,“ftp://”表示FTP服务器,“gopher://”表示Gopher服务器,
而“news:”表示Newgroup新闻组。
服务器地址(host):指出WWW页所在的服务器域名。
路径(path):指明服务器上某资源的位置(其格式与DOS系统中的格式一样,通常有目录/子目录/文件名这样结构组成)。与端口一样,路径并非总是需要的。
URL地址格式排列为:scheme://host:port/path,例如http://www.sohu.com/domain/HXWZ就是一个典型的URL地址。
http——超文本传输协议资源
ftp——文件传输协议
mailto——电子邮件地址
ldap——轻型目录访问协议搜索
file——当地电脑或网上分享的文件
news——Usenet新闻组
gopher——Gopher协议
telnet——Telnet协议
HTML文本修饰标记
<big>相对默认文字大一些
<small>对默认文字小一些
<b>加粗 bold 英 [bəʊld] 美 [boʊld] 粗体字; 黑体字
<strong> 加强语气
<i>斜体 italic 英 [ɪˈtælɪk] 美 [ɪˈtælɪk, aɪˈtæl-] 斜体字
<em>斜体 emphas 加强语气
<u>下划线 underline
<s> 删除线
<ins><del> 下划线和删除线 insert delete
<sup> <sub> 上标下标下标 superscript 上标 subscript 下标
古诗案例
HTML排版标记
<p> 段落 自动在段前段后添加一个空白行
属性:align:值:left(左对齐,默认) center(居中对齐) right(右对齐)
<br /> 强行换行
<hr /> 分隔线
属性:width 宽度:值:默认是像素,也可是百分比
align:对齐方式:left center right ,默认 center
color :颜色
noshade 阴影设置
第二天
内容与标签相适应
是标题的就用h1-h6
是内容的一般用p
pre(predefined)英 [pri:dɪ'faɪnd] 美 [pri:dɪ'faɪnd] [计][修]预定义 预格式化文本
center:<center>居中内容</center>
修改古诗案例
div和span区别块元素和行内元素
div:块元素,双标签。DIV是层叠样式表中的定位技术,全称division(英 [dɪˈvɪʒn] 美 [dɪˈvɪʒən] 分开,分隔),即为划分。有时可以称其为图层
span: 行内元素:双标签。
块:p, h1-h6, pre div,
行内:font b em i b strong del
HTML字符实体:空格,<,>,&,¥版权,注册商标,申请中的商标
空格 代表一个字符的空白
第二种方法:在输入法全角状态下,直接敲空格,代表一个汉字
<,> < > left right
" "
& &
¥ ¥
版权 © ©
注册商标 ® ®
申请中的商标 TM ™ trademark
HTML列表
有序列表 ol li type=”默认是数字序号,a,A,i,I” start :从哪个地方开始
无序列表 ul type : disc 默认的黑色点, circle 圆圈, square 方块
自定义列表
dl defined list定义一个描述列表
dt defined title 定义项目/名字
dd description defined 描述每一个项目/名字
滚动字幕标记 marquee 英 [mɑ:ˈki:] 美 [mɑ:rˈki:] 选取框
direction 方向 left (默认), right 向右,up 向上,down 向下
behavior :行为:scroll 默认,alternate 左右, slide 只一次
width 宽度
height 高度
bgcolor 背景色
hspace 水平方向空白 horizontal 英 [ˌhɒrɪˈzɒntl] 美 [ˌhɔ:rəˈzɑ:ntl] 水平
vspace 垂直方向 vertical 英 [ˈvɜ:tɪkl] 美 [ˈvɜ:rtɪkl] 垂直
scrollamount 速度,像素/秒 amount 英 [əˈmaʊnt] 美 [əˈmaʊnt] 量,数量;总额
scrolldelay 间隔 单位:毫秒,(1秒=1000毫秒) delay 英 [dɪˈleɪ] 美 [dɪˈle] 延迟
bgsound 目前适用于IE 功能:在文档中插入背景音乐。火狐安装插件bgsound.exe
<bgsound src=”” loop = “-1” /> bgsound是单标记
src:路径,建议(将声音和图片和当前网放在一起,路径直接写文件名及扩展名即可。)
loop =”-1” 无限循环
加载js的时候,用到的是<script type='text/javascript' src='js/demo.js'></script>
加载css的时候,用到的是<link rel="stylesheet" href="css/demo.css" />
一个用到的是src,另一个用到的是href,这两个有什么区别呢?
href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。src 表示来源地址,在 img、script、iframe 等元素上。
src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。
src和href之间存在区别,能混淆使用。src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图 片和frame等元素。
<script src ="js.js"></script>
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么 将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加
<link href="common.css" rel="stylesheet"/>
那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。
html颜色表示 计算机进制:十,八,十六,二
计算器命令:在运行中输入:calc->查看->程序员->
#rrggbb 十六进制:每两个一组,一共三组 以#开头
前两个代表红表,中间代表绿色,最后两个代表是蓝色
每一位的取值范围:(0-9,a,b,c,d,e,f)
常用的到颜色: #333,#444,#ccc, #575757
计算机编码(coding):ASCII,ANSI,GB2312,GBK,BIG5,JIS,unicode,utf-8
ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现代英语和其他西欧语言。它是现今最通用的单字节编码系统,并等同于国际标准ISO/IEC 646。在计算机中,所有的数据在存储和运算时都要使用二进制数表示(因为计算机用高电平和低电平分别表示1和0),例如,像a、b、c、d这样的52个字母(包括大写)、以及0、1等数字还有一些常用的符号(例如*、#、@等)在计算机中存储时也要使用二进制数来表示,而具体用哪些二进制数字表示哪个符号,当然每个人都可以约定自己的一套(这就叫编码),而大家如果要想互相通信而不造成混乱,那么大家就必须使用相同的编码规则,于是美国有关的标准化组织就出台了ASCII编码,统一规定了上述常用符号用哪些二进制数来表示。
字节(Byte /bait/ n. [C]),是计算机中最小的存储单位
位(Bit),是计算机中最小的处理单位
字符与字节
1B=8b
1024bit=1KB;1024KB=1MB, 1024MB=1GB,1024GB=1TB 其中1024=210。
1024Mb/8=128KB
ANSI
GB2312 GBK,GB18030
JIS
ISO Unicode 4个字节
A 01000001
A 00000000 00000000 00000000 01000001
KEN
UTF-8
ASCII->ASNI(GB2312,JIS)->Unicode->utf-8
BIG5
解决乱码问题
只要保证编码一致就不会出现乱码
编辑器设置
meta 字符设置
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
http-equiv:服务器通知浏览器用什么字符来显示本页面
content=”text/html” 大类text文本文件下的html文件
charset=”” 我们要在这里设置字符编码,gbk, gb2312简体中文,utf-8(万国码)
浏览器编码
PHP字符集设置
Mysql数据库字符集设置
火狐:
meta标记
http-equiv(content-type,refresh)
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="refresh" content="3;http://www.baidu.com" />
refresh 刷新;页面跳转,主要应用:域名更换等。
name(keywords,description,author,copyright)
<meta name=”author” content=”” />
<meta name=”copyright” content=”” />
<meta name=” keywords” content=”” /> 60-80字
<meta name=” description” content=”” /> 120-200字
有关描述搜索引擎会生成一个摘要
W3C简介
world wide web consortium(w3c)
1994成立
制定web标准( 结构(html),表现(CSS),行为(ECMAscript))
并推广web标准,敦促web开发者使用web标准
百度,腾讯,360,1688
2013 北京 航空航天大学
Microsoft, apple, google, adobe
DTD文档类型定义: strict transitional frameset
strict 严格型
transitional 过度
frameset 框架
图片标记
img的属性: src width height border hspace vspace align alt
常见图片格式
对于图片的宽和高,只设置一个,另一个会按比例自适应
可以缩小,但不可以放大,放大就会失真
alt:替换文本
border 图片的边框,默认是黑色的边,不可以设置。只能通过样式修改,如下面的操作,可以先小试一下
绝对路径与相对路径
绝对路径
描述:形如:c:imgcat.jpg ,”一个真实的路径”
目录,就是文件夹
file:///C:/Users/Administrator/Desktop/day2/cat.jpg
https://www.baidu.com/img/bd_logo1.png
<li><a href="/product/">合作项目</a></li>
“/”代表网站的根目录
c:imgcat.jpg
相对路径 (三种情况)
1)目标文件(img)和当前文件(网页)是同级别
目标文件的路径写法:直接写文件名和扩展名即可。
2)目标文件所在的文件夹与当前页面是同级
目标文件的路径的写法:文件夹的名称/目标文件的名称+扩展名
3) 目标文件在当前页面的上一级。用:../ “../”就是指的向上一级。
如果目标文件在当前页面的上两级再 加一个../
关于路径,我们在做网站的时候一般用相对路径。
第三天
回顾相对路径
超链接
anchor 英 [ˈæŋkə(r)] 美 [ˈæŋkɚ] 锚 <a></a>
<a href=”url”>内容</a>
Href:Hypertext reference 超文本引用
URL(Uniform Resource Locator)统一资源定位器,就是一个地址,网址,指定的资源内容具有唯一性。
http://www.baidu.com/img/bd_logo.peg
协议:http://, ftp://, thunder:// , ed2k://
域名: www.baidu.com
目录:img
文件:bd_logo.png
a 不可嵌套
Target:打开的目标4
- _blank:在一个新的窗口打开网页
- _self:在当前窗口打开网页(默认)
- _top
- _parent
超级链接
外部链接 :url是本网站外的链接
<a href="http://www.sina.com.cn" target="_blank" >新浪网</a>
友情链接:
采集,盗链
内部链接:News/oct/2015-10-01.html
文本链接:普通文本加上<a href=”url”>普通文本</a>
图片链接
下载链接(广告图片),
将提供下载的内容打包成*.rar, *.zip, *.iso, *.mp4,*.rmvb, *.flv
当用户点击时,会自动关联下载工具。
空链接
<a href=””>空链接</a>
<a href="#">我是空链接</a><br /> 单击后回到当前页面的顶部
<a href="javascript:void(0)">我是JavaScript空链接也叫死链接</a> 单击后没有反应,可以配合JS程序
<a href="javascript:void(0)" onclick="alert('点我呀')">我是JavaScript空链接也叫死链接</a>
电子邮件链接
<a href=”完整的email地址”>联系我们</a>
<a href=”mailto:ccjsjmail@aliyun.com”>联系我们</a>
自动关联电子邮箱工具:默认会打开outlook。href="mailto:ccjsjmail@aliyun.com?subject='hello'">ccjsjmail@aliyun.com</a>
?Subject:邮件主题信息
锚点链接
先定义锚点:
<a name=”top”></a>
使用的方法:
<a href=”#top”>回到TOP的位置</a>
图文混排
表格结构
<table>属性:
width 表格宽度 单位像素
height 表格的高度:一般不设置,让表格中内容撑开
align :对齐方式:值:left ,right center
border :表格的边框
bordercolor :边框的颜色
background :表格背景图
单元格的td的宽度和高度一定和背景图片的宽和高相适应。
bgcolor :表格背景色
cellpadding: 单元格的填充:单元格中内容到边框的距离
cellspacing :单元格的间距:单元格与单元格之间距离
rules :规定内侧边框的哪个部分是可见的。从实用角度出发,最好不要规定 rules,而是使用 CSS 来添加边框样式。
rules的值有: none 不显示行列线,只有外边框线 rows 行之间的线条 cols 列之间的线条 all 行和列之间的线条
rules 属性在 Firefox 和 Opera 中可以正确地显示。Internet Explorer、Chrome 以及 Safari 3 对该属性的显示并不正确。
<tr><td>属性: align="left" center right 行或列中内容的左中右
valign="top" middle bottom 行或列中内容的上中下
单元格的合并方式
colspan:向右合并,有合并就有删除
rowspan:向下合并, 有合并就有删除
<th>属性:列标题文字,自加粗并在单元各居中
<caption> :表格标题,双标记
隐藏的tbody,浏览器自动生成,是表格的主体部分
Thead Tfoot 都是针对于表格的行来说的
表单:表单的概念,表单的工作原理
表格布局时:表格嵌套表格一般情况下,外层表格用像素,里面的表格用百分比。
第四天
昨日回顾
链接,表格
表单的结构
表单的标签:<form> </form>
常用属性
Name , method(get,post), action(服务器的接收的页面如:reg.php), onsubmit=” return javascript函数”,enctype=”multipart/form-data”
get: (表单的默认传值方式)
通过get方式传值:名称(name)和值(name的值)以“?”的跟在action处理页面的后面
如果有多个名称和值,用“&”号连接
这个方式传值:名称和值都在地址栏中显示(不安全)
地址栏的空间(容量有限)<2KB
一般用在要求(安全方面)不高,并且一些简单的数据。
通常用在查询
post:
不在地址栏中显示
相对安全
一般用在数据库方面,修改,删除
在上传一些复杂的数据的时候用post
如:上传图片,文件等。
注意:在上传文件时候,编码方式一定选择:enctype=”multipart/form-data”
大小没有限制
enctype=”” 表单的编码方式两种: encoding 英 [ɪn'kəʊdɪŋ] 美 [ɪn'koʊdɪŋ] 编码
enctype=”application/x-www-form-urlencoded"(默认) multipart 英 ['mʌlti:pɑ:t] 美 ['mʌlti:pɑ:t] 多部件的
enctype=”multipart/form-data”
表单的元素
分类:input type=”text,password,radio,checkbox,button,submit, reset, image,hidden, file”
<input type=”text” name=”username” size=”20” maxlength=”30” />
<input type=”password” name=”pwdddd” size=”20” maxlength=”30” />
单选:
<td>性别:</td>
<td>
<input type="radio" name="sex" value="boy" checked="checked" id="man"><label for="man">男</label>
<input type="radio" name="sex" value="girl" id="woman"><label for="woman">女</label>
<input type="radio" name="sex" value="secret" id="secret"><label for="secret">保密</label>
</td>
为了增加体验:<label for=”表单元素的ID”></label>
注意:ID在当前网页中只名称是唯一性。不能重复 默认选项:checked=”checked”
复选:
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby" value="dancing" id="dan" checked="checked"><label for="dan">跳舞</label>
<input type="checkbox" name="hobby" value="reading" id="rea"><label for="rea">阅读</label>
<input type="checkbox" name="hobby" value="singing" id="sin"><label for="sin">唱歌</label>
</td>
按钮:
重置按钮: <input type="reset" value="重置" />
提交按钮: <input type="submit" value="注册" name="submit" />
图片按钮:<input type="image" src="img.jpg" name="img" />
普通按钮:<input type="button" value="普通按钮" onclick="alert('hello world')" />
表单的提交:
<input type=”submit” value=”提交” name=”submit” />
<input type=”reset” value=”重写” />
隐藏域: hidden
<input type=”hidden” name=”” />
通常传值,没有必要让用户知道的信息
上传文件域: file
<input type=”file” name=”” />
表单form中编码类型一定选择:enctype=”multipart/form-data”
下拉列表: Select
<select name=”fruit” >
<option value=”A” selected="selected">水果A</optin>
<option value=”B”>水果B</optin>
<option value=”C”>水果C</optin>
</select>
selected="selected" (默认选中)
多选下拉列表:
分组下拉列表:optgroup
相关的元素分组:filedset legend
文本域 :textarea cols rows name
<textarea name="sef" cols="50" rows="5">
hello,world!!
</textarea>
Form 标记属性 GET方法,POST方法,
enctype= application/x-www-form-urlencoded, multipart/form-data
表单元素
密码域 password
单选 radio checked="checked"
复选 checkbox checked="checked"
提交按钮 submit
重置 reset
图片按钮 img src=""
普通按钮 button
隐藏域 hidden
上传文件域 file
下拉列表 select selected="selected" name multiple size
文本区域 textarea cols rows name size maxlength readonly disabled
相关的元素分组 filedset legend
网页插入flash
综合案例
图像热区
功能与作用:可以实现一张图上可以做多个链接。
图像热区
img usemap="#Map" map area shape( rect circle poly ) coords area 英 [ˈeəriə] 美 [ˈeriə] 区域
<img src=”” usemap=”#Map” /> shape 英 [ʃeɪp] 美 [ʃep] 形状
usemap="#Map" ,名字可以随意。但必须加“#” rectangle 英 [ˈrektæŋgl] 美 [ˈrɛkˌtæŋɡəl] 长方形,矩形
map :图像地图标签,双标记,用法如下: circle 英 [ˈsɜ:kl] 美 [ˈsɜ:rkl] 圆
<map name=”Map” id=”Map”> polygon 英 [ˈpɒlɪgən] 美 [ˈpɑ:ligɑ:n] 多边形
<area shape=”形状” coords=”坐标” />
</map>
area :区域
shape( rect矩形, circle圆形, poly多边形 )
Coords 坐标
矩形坐标:如:(coords=”0,0,80,80”)
解释:前两个0,0,是矩形的左上角,后面两个数,80,80,是矩形的右下角的坐标
圆形坐标:如:(coords=”118,43,35”)
解释:前两个118,43,是圆心的坐标,第三个数35,是这个圆的半径。
多边形:坐标,每两个一组,代表一个角(顶点)。
普通框架,概念,框架集,框架页
<frameset>属性
cols 框架左右分如:<frameset cols=”100,*” >
rows 框架上下分如:<frameset rows=”100,*” >
frameborder 框架的边框是否显示,值:1,yes显示;0,no 为不显示
border 框架的边框大小
bordercolor 框架的边框颜色
<frame>属性:
src 网页的路径
name 框架的名称,是以后链接的目标
noresize 不可调整宽度
scrolling 是否滚动,no不滚动,yes 滚动,auto 自动。
<noframes> 没有框架时显示的内容
实例后台框架
浮动框架:iframe src name scrolling align width height frameborder
iframe 浮动框架;是双标签;
<iframe src=”网页” name=””>如果浏览器不支持则显示该内容</iframe>
位置:在body中
src 在浮动框架中要显示的页面
name 浮动框架名称
scrolling滚动: 是否,yes ,no ,auto
align:对齐方式,(参考图片的对齐方式) left right
width 框架的宽
height 高
frameborder 不要边no
纯html综合案例个人主页
了解一个网站的基本结构
首页,列表页,详细页
模板的概念
凡是在每一个页面中都存在的内容,通常都做在模板中。
模板是开发网站的基础。
模板的好处:方便修改,便于维护。可以快速开发网站。
一个网站的最基本的必须有三个模板:
首页模板,列表页模板,内容页模板
<table width="960" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><iframe src="toptest.html" width="960" height="96" scrolling="no" border="0" frameborder="0" align="center"></iframe></td>
</tr>
</table>
网站前台与后台