PHP培训第二天之HTML介绍2

89 阅读8分钟
W3C 是什么?


W3C 指万维网联盟(World Wide Web Consortium)


W3C 创建于1994年10月


W3C 由 Tim Berners-Lee 创建


W3C 的工作是对 web 进行标准化


W3C 创建并维护 WWW 标准


W3C 标准被称为 W3C 推荐(W3C Recommendations)


HTML文档类型


HTML4.0.1有三种<!DOCTYPE>声明,在HTML5中只有一种。


HTML5声明:


<!DOCTYPE html>


HTML 4.0.1 三种声明:


HTML 4.0.1 Strict(严格型):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">


DTD文件包含所有HTML元素和属性,但不包括展示性和弃用元素(如font).不允许使用框架集(Frameset)


HTML 4.0.1 Transitional(过渡型)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >


DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。


HTML 4.0.1 Frameset(框架型)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" >


DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。


注意:


<!DOCTYPE>声明不是HTML标签;它是指示web浏览器使用哪个HTML版本进行编写的指令。<!DOCTYPE>声明必须要在HTML文 档的第一行,位于<html>标签之前。


在HTML4.0.1中,<!DOCTYPE>声明引用DTD,是因为HTML4.0.1基于SGML。DTD规定了标记语言的规则,浏览器才能正确的呈现 内容


HTML5不是基于SGML,所以不用引入DTD。


计算机编码:


计算机编码指电脑内部代表字母或数字的方式。常见的编码方式有:ASCII编码,ANSI编码,GB2312编码(简体中文),GBK,BIG5编码(繁体中文),unicode,utf-8编码等。


编码单位
:最小单元是
”位” bit


最小的存储单位是”字节”Byte


一个字节 = 8位 => 1Byte = 8bits


机器语言的单位是Byte


1KB = 1024Byte;1MB=1024KB;1GB=1024MB;1TB=1024GB


进制


二进制由
0和1.八进制由0-7,十进制由0-9,十六进制由0-9,A,B,C,D,E,F组成。


[size=10.5000pt]Binary(2)
[size=10.5000pt]Octal(8)
[size=10.5000pt]Decimal(10)
[size=10.5000pt]Hex(16)
[size=12.0000pt]0
[size=12.0000pt]0
[size=12.0000pt]0
[size=12.0000pt]00
[size=12.0000pt]1
[size=12.0000pt]1
[size=12.0000pt]1
[size=12.0000pt]1
[size=12.0000pt]10
[size=12.0000pt]2
[size=12.0000pt]2
[size=12.0000pt]2
[size=12.0000pt]11
[size=12.0000pt]3
[size=12.0000pt]3
[size=12.0000pt]3
[size=12.0000pt]100
[size=12.0000pt]4
[size=12.0000pt]4
[size=12.0000pt]4
[size=12.0000pt]101
[size=12.0000pt]5
[size=12.0000pt]5
[size=12.0000pt]5
[size=12.0000pt]110
[size=12.0000pt]6
[size=12.0000pt]6
[size=12.0000pt]6
[size=12.0000pt]111
[size=12.0000pt]7
[size=12.0000pt]7
[size=12.0000pt]7
[size=12.0000pt]1000
[size=12.0000pt]10
[size=12.0000pt]8
[size=12.0000pt]8
[size=12.0000pt]1001
[size=12.0000pt]11
[size=12.0000pt]9
[size=12.0000pt]9
[size=12.0000pt]1010
[size=12.0000pt]12
[size=12.0000pt]10
[size=12.0000pt]A
[size=12.0000pt]1011
[size=12.0000pt]13
[size=12.0000pt]11
[size=12.0000pt]B
[size=12.0000pt]1100
[size=12.0000pt]14
[size=12.0000pt]12
[size=12.0000pt]C
[size=12.0000pt]1101
[size=12.0000pt]15
[size=12.0000pt]13
[size=12.0000pt]D
[size=12.0000pt]1110
[size=12.0000pt]16
[size=12.0000pt]14
[size=12.0000pt]E
[size=12.0000pt]1111
[size=12.0000pt]17
[size=12.0000pt]15
[size=12.0000pt]F
上层字符


字符是各种文字和符号的总称,包括各国家文字、标点符号、图形符号、数字等。字符集是多个字符的集合,字符集种类较多,每个字符集包含的字符个数不同,常见字符集名称:
ASCII字符集、GB2312字符集、BIG5字符集、 GB 18030字符集、Unicode字符集等。计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。


解决乱码问题


只要保证编码一致就不会出现乱码


1.编辑器设置



2.meta字符设置


<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />


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


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


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


3.浏览器编码(以火狐浏览器为例)



4.PHP字符集设置


5.MySQL数据库字符集设置


绝对路径与相对路径


绝对路径


绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。


例如:


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


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


相对路径


相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。


三种情况:


一、目标文件与当前文件是同级别


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


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


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


三、目标文件在当前页面的上一级。
../表示指该文件的上一级目标


当目标文件在当前页面的上两级,就用两个
../../。


一般在做网站的时候,用的是相对路径。


HTML列表

标签定义列表项目
<li>


<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中


有序列表
<ol>


三个属性:


Type: 规定在列表中使用的标记类型。有1、A、a、i、I


Start: 规定有序列表的起始值。


Reversed:规定列表顺序为降序(H5新增属性),会跟start冲突


reversed


代码实现:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>


<
head
>


<
title
> 有序列表ol </
title
>


</
head
>



<
body
>


<
ol
start
=
"4"
type
=
"a"
reversed>


<
li
>北京</
li
>


<
li
>天津</
li
>


<
li
>上海</
li
>


<
li
>广州</
li
>


</
ol
>


</
body
>


</
html
>



reversed


代码实现:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>


<
head
>


<
title
> 有序列表ol </
title
>


</
head
>



<
body
>


<
ol
start
=
"4"
type
=
"a"
>


<
li
>北京</
li
>


<
li
>天津</
li
>


<
li
>上海</
li
>


<
li
>广州</
li
>


</
ol
>


</
body
>


</
html
>



无序列表
<ul>


属性:


Type:disc 默认的黑色点 circle 圆圈 square方块


代码实现:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>


<
head
>


<
title
>ul</
title
>


</
head
>



<
body
>


<
ul
type
=
"circle"
>


<
li
>北京</
li
>


<
li
>天津</
li
>


<
li
>上海</
li
>


<
li
>广州</
li
>


</
ul
>


</
body
>


</
html
>



有序和无序的配合。


代码实现:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>


<
head
>


<
title
> ul&ol </
title
>


</
head
>



<
body
>


<
ul
>


<
li
>周边旅游


<
ol
>


<
li
>北京</
li
>


<
li
>天津</
li
>


<
li
>石家庄</
li
>


</
ol
>


</
li
>


<
li
>国内旅游</
li
>


<
li
>国际旅游</
li
>


</
ul
>


</
body
>


</
html
>



自定义列表
<dl>


<dl>标签定义了定义列表


<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。


代码实现:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>


<
head
>


<
title
> dd </
title
>


</
head
>



<
body
>


<
dl
>


<
dt
>周边旅游</
dt
>


<
dd
>青岛</
dd
>


<
dd
>泰安</
dd
>


<
dd
>潍坊</
dd
>


<
dt
>国内旅游</
dt
>


<
dd
>三亚</
dd
>


<
dd
>海口</
dd
>


<
dd
>张家界</
dd
>


<
dt
>出境旅游</
dt
>


<
dd
>芭提雅</
dd
>


<
dd
>普吉岛</
dd
>


<
dd
>马尔代夫</
dd
>


</
dl
>


</
body
>


</
html
>



滚动字幕标记
marquee


属性:


align: 对齐方式 LEFT,CENTER,RIGHT,TOP,BOTTOM (不用多说了)


behavior: 用于设定滚动的方式,主要由三种方式:


behavior="scroll": 表示由一端滚动到另一端;


behavior="slide": 表示由一端快速滑动到另一端,且不再重复;


behavior="alternate" : 默认值——表示在两端之间来回滚动。


direction: left(默认值) 左; right 右;up 上;down 下;


bgcolor: 背景颜色


height: 高度


weight: 宽度


Hspace/vspace: 分别用于设定滚动字幕的左右边框和上下边框的宽度。作用大概和css中的margin差不多


scrollamount: 用于设定每个连续滚动文本后面的间隔,该间隔用像素表示,以上是官方说法,其实就是滚动的速度,值不能太大,要不从视觉角度来说,是没反应的.值越大速度越快,反之越慢。


scrolldelay: 延迟时间


loop: 这个属性大家也很熟悉,循环次数;loop=-1的时候一直重复循环(默认值)


代码实现:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>


<
head
>


<
title
> marquee </
title
>



</
head
>



<
body
>


<
marquee
id
=
"affiche"
align
=
"left"
behavior
=
"scroll"
bgcolor
=
"#FF0000"
direction
=
"up"
height
=
"300"
width
=
"200"
hspace
=
"50"
vspace
=
"20"
loop
=
"-1"
scrollamount
=
"10"
scrolldelay
=
"100"
>


这是一个完整的例子


</
marquee
>


</
body
>


</
html
>


图片标记
<img>


属性:


[size=12.0000pt]属性
[size=12.0000pt]值
[size=12.0000pt]描述
[size=10.5000pt]alt
[size=12.0000pt]text
[size=12.0000pt]规定图像的替代文本。
[size=10.5000pt]src
[size=12.0000pt]URL
[size=12.0000pt]规定显示图像的 URL。
[size=12.0000pt]height
[size=10.5000pt]
[size=12.0000pt]定义图像的高度
[size=12.0000pt]width
[size=10.5000pt]
[size=12.0000pt]设置图像的宽度

[size=10.5000pt]代码实现:


<
html
>


<
body
>




</
body
>


</
html
>


[size=10.5000pt]