黑马程序员技术交流社区

标题: PHP培训第二天之HTML介绍2 [打印本页]

作者: 刘辰老师 时间: 2017-6-14 14:35
标题: PHP培训第二天之HTML介绍2
本帖最后由刘辰老师于 2017-6-14 15:04 编辑

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]

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2