A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2017-1-19 22:52 编辑

                                  【济南中心】PHP课程同步笔记day02:HTML介绍
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组成。
Binary(2)
Octal(8)
Decimal(10)
Hex(16)
0
0
0
00
1
1
1
1
10
2
2
2
11
3
3
3
100
4
4
4
101
5
5
5
110
6
6
6
111
7
7
7
1000
10
8
8
1001
11
9
9
1010
12
10
A
1011
13
11
B
1100
14
12
C
1101
15
13
D
1110
16
14
E
1111
17
15
F
上层字符
字符是各种文字和符号的总称,包括各国家文字、标点符号、图形符号、数字等。字符集是多个字符的集合,字符集种类较多,每个字符集包含的字符个数不同,常见字符集名称:ASCII字符集、GB2312字符集、BIG5字符集、 GB 18030字符集、Unicode字符集等。计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。
解决乱码问题
      只要保证编码一致就不会出现乱码
1.编辑器设置
editplus.png
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.浏览器编码(以火狐浏览器为例)
fire.png
4.PHP字符集设置
5.MySQL数据库字符集设置
绝对路径与相对路径
      绝对路径
      绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
      例如:
相对路径
      相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。
三种情况:
一、目标文件与当前文件是同级别
目标文件的路径写法:直接写文件名和扩展名即可
二、目标文件所在的文件夹与当前页面是同级的
目标文件的路径写法:文件夹的名称/目标文件的名称+扩展名
三、目标文件在当前页面的上一级。../表示指该文件的上一级目标
当目标文件在当前页面的上两级,就用两个../../。
一般在做网站的时候,用的是相对路径。
HTML列表
标签定义列表项目<li>
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中
有序列表<ol>
    三个属性:
Type: 规定在列表中使用的标记类型。有1、A、a、i、I
Start: 规定有序列表的起始值。
Reversed:规定列表顺序为降序(H5新增属性),会跟start冲突
有reversed
[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> 有序列表ol </title>
</head>

<body>
<ol start="4" type="a" reversed>
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>广州</li>
</ol>
</body>
</html>
ol1.png
无reversed
[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> 有序列表ol </title>
</head>

<body>
<ol start="4" type="a">
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>广州</li>
</ol>
</body>
</html>
ol2.png
无序列表<ul>
属性:
Type:disc 默认的黑色点  circle 圆圈   square方块
[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</title>
</head>

<body>
<ul type="circle">
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
ul1.png
有序和无序的配合。
[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>
ul2.png
自定义列表<dl>
<dl>标签定义了定义列表
<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。
[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> 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>
ulol.png
滚动字幕标记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的时候一直重复循环(默认值)
[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> 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>
      属性:
属性
描述
text
规定图像的替代文本。
URL
规定显示图像的 URL。
height
定义图像的高度
width
设置图像的宽度

[HTML] 纯文本查看 复制代码
<html>
<body>

<img src="http://tupian.baike.com/doc/%E9%83%81%E9%87%91%E9%A6%99/a2_77_69_20200000013920144738692905618_jpg.html"  alt="上海鲜花港 - 郁金香" />

</body>
</html>

3 个回复

倒序浏览
看不懂。感觉比安卓难得多
来自宇宙超级黑马专属苹果客户端来自宇宙超级黑马专属苹果客户端
回复 使用道具 举报
不错哦
回复 使用道具 举报

王老师好。好久未见!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马