php-html-2

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>

<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页所在的服务器域名。

端口（port）：有时（并非总是这样），对某些资源的访问来说，需给出相应的服务器提供端口号。

 路径（path）：指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目录/文件名这样结构组成）。与端口一样，路径并非总是需要的。
 URL地址格式排列为：scheme：//host：port/path，例如http：//www.sohu.com/domain/HXWZ就是一个典型的URL地址。

http——超文本传输协议资源

https——用安全套接字层传送的超文本传输协议

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编码，统一规定了上述常用符号用哪些二进制数来表示。

GB编码标准中，比较常用的是GB2312和GBK两种，GB2312是GBK的一个子集，GB2312编码范围是 0xA1A1 - 0xFEFE ，如果纯粹的 GB2312编码，处理起来是十分简单的，但处理GBK字符集时有些小的提示，先说说GBK编码的标准吧：GBK 采用双字节表示，总体编码范围为 8140-FEFE，首字节在 81-FE 之间，尾字节在 40-FE 之间，剔除 xx7F 一条线。总计 23940 个码位，共收入 21886 个汉字和图形符号，其中汉字（包括部首和构件）21003 个，图形符号 883 个。

字节（Byte /bait/ n. [C]），是计算机中最小的存储单位

位（Bit），是计算机中最小的处理单位

字符与字节

ASCII:一个英文字母（不分大小写）占一个字节的空间，一个中文汉字占两个字节的空间。一个二进制数字序列，在计算机中作为一个数字单元，一般为8位二进制数，换算为十进制。最小值0，最大值255。如一个ASCII码就是一个字节。

UTF-8编码：一个英文字符等于一个字节，一个中文（含繁体）等于三个字节。

Unicode编码：一个英文等于两个字节，一个中文（含繁体）等于两个字节。

符号：英文标点占一个字节，中文标点占两个字节。举例：英文句号“.”占1个字节的大小，中文句号“。”占2个字节的大小。

数据存储是以10进制表示，数据传输是以2进制表示的，所以1KB不等于1000B。

1B＝8b

1024bit=1KB;1024KB=1MB, 1024MB=1GB,1024GB=1TB 其中1024=2¹⁰。

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 字符设置

http-equiv:服务器通知浏览器用什么字符来显示本页面

content=”text/html” 大类text文本文件下的html文件

charset=”” 我们要在这里设置字符编码，gbk, gb2312简体中文,utf-8(万国码)

浏览器编码

PHP字符集设置

Mysql数据库字符集设置

火狐：

meta标记

http-equiv(content-type,refresh)

refresh 刷新；页面跳转，主要应用：域名更换等。

name(keywords,description,author,copyright)

有关描述搜索引擎会生成一个摘要

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:\img\cat.jpg ,”一个真实的路径”

目录，就是文件夹

file:///C:/Users/Administrator/Desktop/day2/cat.jpg

https://www.baidu.com/img/bd_logo1.png

“/”代表网站的根目录

c:\img\cat.jpg

相对路径（三种情况）

1）目标文件（img）和当前文件(网页)是同级别

目标文件的路径写法：直接写文件名和扩展名即可。

2）目标文件所在的文件夹与当前页面是同级

目标文件的路径的写法：文件夹的名称/目标文件的名称+扩展名

3）目标文件在当前页面的上一级。用：../ “../”就是指的向上一级。

如果目标文件在当前页面的上两级再加一个../

关于路径，我们在做网站的时候一般用相对路径。

第三天

回顾相对路径

超链接

anchor 英 [ˈæŋkə(r)] 美 [ˈæŋkɚ] 锚 <a></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是本网站外的链接

友情链接：

采集，盗链

内部链接:News/oct/2015-10-01.html

文本链接:普通文本加上<a href=”url”>普通文本</a>

图片链接

下载链接(广告图片)，

将提供下载的内容打包成*.rar, *.zip, *.iso, *.mp4,*.rmvb, *.flv

当用户点击时，会自动关联下载工具。

空链接

<a href="#">我是空链接</a><br /> 单击后回到当前页面的顶部

<a href="javascript:void(0)">我是JavaScript空链接也叫死链接</a> 单击后没有反应，可以配合JS程序

<a href="javascript:void(0)" onclick="alert('点我呀')">我是JavaScript空链接也叫死链接</a>

电子邮件链接

自动关联电子邮箱工具：默认会打开outlook。href="mailto:ccjsjmail@aliyun.com?subject='hello'">ccjsjmail@aliyun.com</a>

？Subject:邮件主题信息

锚点链接

先定义锚点：

使用的方法：

<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”

单选：

为了增加体验：<label for=”表单元素的ID”></label>

注意：ID在当前网页中只名称是唯一性。不能重复 默认选项：checked=”checked”

复选：

按钮：

重置按钮： <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')" />

表单的提交：

隐藏域： hidden

通常传值，没有必要让用户知道的信息

上传文件域： file

表单form中编码类型一定选择：enctype=”multipart/form-data”

下拉列表： Select

</select>

selected="selected" (默认选中)

多选下拉列表：

分组下拉列表：optgroup

相关的元素分组：filedset legend

文本域 ：textarea cols rows name

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

happyNo.1

php-html-2

公告