特殊时期,大家一定要保重身体。增强自身免疫力,一切都会过去,一起加油!!!

PHP入门学习–HTML03项目符号(ol,ul),超级链接,表格及XHTML解析

PHP zchao 235℃ 0评论

由于时间的原因,php笔记更新的频率很慢,以后会把握好时间将这些基础的问题全部整理完,然后进行后面的学习

1.项目符号嵌套编号思路

标签的内容(文本,项目符号,表格,图片)必须放在最底层标记。
这里所谓的内容就是编号列表

<html>
<meta charset=”utf-8″>
<head>
<title>项目符号</title>
</head>
<body>
<ul>
<li>北京市
<ol>
<li>东城区</li>
<li>西城区</li>
<li>朝阳区</li>
</ol>
</li>
<li>天京市</li>
<li>河北省</li>
</ul>
</body>
</html>

2.相关图片标记

图片标记:行内元素,单边标记
语法格式:<img 属性=“值”>
常用属性:
width:图片宽度
height:图片高度
border:图片边框粗细
src:图片的路径(相对路径)
align:图片的水平对齐方式,left,right,center
hspace:图片与左右文字的距离(水平距离)
vspace:图片与上下文字之间的距离(垂直距离)

注意事项:
如果图片相等比例缩放,只需要指定width和height中的一个
align属性只能让文本居中,不能让图片单独居中
align可以实现图文混排效果,align=“left|right”
要想让图片居中,可以给图片增加一个div元素
<div style=”text-align:center;border:1px solid red”>
<img src=”images/123.jpg” width=”400″ border=”1″>
</div>

 

3.实现图文混排(在段落<p>标记中加入<img>图片,设置图片align居左居右)

<html>
<meta charset=”utf-8″>
<head>
<title>项目符号</title>
</head>
<body>
<h1 align=”center”>zchao博客之家</h1>

<img src=”images/123.jpg” width=”400″ border=”1″ align=”left”>

<p>
低碳经济是针对自工业革命以来的高碳经济而言。在农耕社会,人口比较少,生产力不发达,
可供人类直接消耗的资源和能源比较少,资源的供给接近于无限,没有什么工业特别是大工业,
无论是水的供应还是空气可以接受被污染的程度都是勿需考虑的问题,
犹如大海中倒进了一瓶墨汁,对于大海的污染都是可以忽略不计的。
</p>
<p>
记得小时候村子里偶尔来一辆汽车,根本没有感觉到什么汽车尾气;
农家烧柴做饭冒出来的二氧化碳到了
<img src=”images/123.jpg” width=”400″ border=”1″ align=”left” hspace=”20″ vspace=”20″>

上空就成了被人们歌唱的袅袅炊烟。
工业革命之后伴随着机器大工业的应用,人类社会消耗资源和能源成倍成倍地增加,
人口增长的速度也越来越快,依靠消耗大量资源和能源维持了经济的高速增长,
人们口袋里的纸币固然增加了,但环境被污染了。
无论是发达国家还是我国在工业化的过程中不约而同地走出了一条以牺牲环境为代价的经济增长之路。
蓝天白云,清清小溪已经成为儿时的美好记忆。水被污染了,有河必干,有水必脏,不仅地表水被污染,
地下水也被污染了;空气被污染了,以前根本不知道霾为何物,而现在雾霾天气越来越多,
以至于海南岛这个度假天堂也有了霾;土壤被污染了,生产出来的农产品不少已经不能为人类所食用。
工业革命在带给人类巨大福利的同时,也让人类社会付出了巨大成本。
</p>

</body>
</html>

4.超级链接<a>

超级链接:行内元素,<a>中不能再嵌套一个<a>标记

语法格式:<a 属性=“值”></a>
常用属性:
href:目标文件的地址URL,URL可以是相对地址,也可以是绝对地址
target:目标文件的显示窗口
_blank:在新窗口中打开目标文件
_self:在当前窗口中打开目标文件(默认打开),相当于替换操作
_parent:在父级窗口打开目标文件
_top:在最顶级窗口打开目标文件
其中_parent,_top常用框架网页中
name:定义瞄点链接的名称

 

5.绝对地址与相对地址

绝对地址URL
1.远程的绝对地址
访问远程的文件,总是以”http://”域名,主机名开头
2.本地的绝对地址(很少使用)
访问本地的地址,是以“file:///”开头的绝对地址
file:///E:/zchao/20170923/html

相对地址URL
1.当前文件和目标文件是同级关系(在同一个目录下),链接地址直接写目标文件名
2.当前文件与目标文件所在的文件夹是同级关系,先找“文件夹名”,然后再找“文件名”
也就是,目标文件位于下一级
3.目标文件位于上一层目录中,往上找对应的目录,再找目录中的文件,
使用”../”符号,往上找,
“../”代表上一级目录
“../../”代表上两级目录

 

6.几种特殊的链接

特殊的链接
1.下载链接
可以直接执行的文件:.jpg,.png,.gif,.html,.htm,.txt等
不可以直接执行的:.doc,.xsl,.ppt,.rar,.psd….

2.邮箱链接mailto:876150015@qq.com

3.普通空连接(#)

4.JS链接javascript:window.close()

<html>
<meta charset=”utf-8″>
<head>
<title>项目符号</title>
</head>
<body>
<h2>绝对地址</h2>
<a href=”http://www.sina.com.cn” target=”_blank”>新浪网</a><br>
<a href=”www.zchaohome.com” target=”_top”>zchao博客之家</a><br>
<a href=”file:///E:/zchao/20170923/图片.html” target=”_parent”>zchao博客之家</a><br>
<hr>
<h2>相对地址</h2>
<a href=”123.png” target=”_blank”>图片1</a><br>
<a href=”images/456.png” target=”_blank”>图片2</a><br>
<a href=”../day1/1.html” target=”_blank”>写好路径往上找出文件</a>
<h2>特殊链接</h2>
<a href=”images/1.rar”>下载winRar解压缩文件</a>
<a href=”mailto:876150015@qq.com”>请给我发邮件</a>
<a href=”#”>普通空链接</a>
<a href=”javascript:window.close()”>关闭窗口</a>

</body>
</html>

锚点链接
在一个网页的不同区域进行跳转,定义记号
定义锚点(做个记号):<a name=”锚点名称”></a>
锚点名称命名规则:包含字母,数字,下划线,但只能以字母开头
注意:<a>和</a>之间没有内容,不需要看见,给链接使用
例:<a name=”top2″></a>
跳转到锚点(记号):
语法:<a href=”文件名#锚点名称”>点击链接</a>
文件名可有可无,同一个网页内跳转,不需要文件名;跳到另一个网页需要有文件名
注意:<a>和</a>之间有内容,否则无法跳转
例:<a href=”#top2″>返回顶部</a>//跳转到同一个网页的不同部分
例:<a href=”news.html#bottom”>返回底部</a>//跳转到news.html文件的底部

 

1.html
<html>
<meta charset=”utf-8″>
<head>
<title>项目符号</title>
</head>
<body>
<h2>公司新闻动态</h2>
<ul>
<li><a href=”news.html#bottom”>你好</li>
<li><a href=”#”>欢迎</li>
<li><a href=”#”>zchao博客之家</li>
</ul>

</body>
</html>

 

news.html
<html>
<meta charset=”utf-8″>
<head>
<title>项目符号</title>
</head>
<body>
<a name=”top”></a>
<h2><a href=”1.html”>公司新闻动态</a></h2>
<p>www.zchaohome.com
www.zchaohome.com<br>
www.zchaohome.com<br>
www.zchaohome.com<br>
www.zchaohome.comwww.zchaohome.com
www.zchaohome.com<br>
www.zchaohome.com<br>
www.zchaohome.comwww.zchaohome.com
www.zchaohome.com<br>
www.zchaohome.com<br>
www.zchaohome.com
</p>

<p>
zchao博客之家<br>
zchao博客之家<br>
zchao博客之家<br>
zchao博客之家<br>
zchao博客之家<br>
zchao博客之家<br>
zchao博客之家<br>
zchao博客之家<br>
zchao博客之家<br>
zchao博客之家<br>
zchao博客之家<br>

zchao博客之家
zchao博客之家
</p>

<a name=”bottom”></a>
<a href=”#top”>返回顶部</a>
</body>
</html>

 

7.html颜色表示

网页中的颜色三种表示方法
颜色单词:blue,green,red,yellow…
10进制表示Lrgb(255,0,0),rgb(0,255,0),rgb(0,0,255)
16进制表示:#FF0000(红),#00FF00(绿),#0000FF(蓝)

 

8.计算机编码

ASCII编码:用一个字节(8位二进制)来表示所有字符,共可以表示2^8=256
ANSI编码:用两个字节(16位二进制)表示,共2^16=65536个字符,用于显示本国的语言
ANSI在中文操作系统下,代表gb2312
ANSI在繁体操作系统下,代表big5
ANSI在日文操作系统下,代表JIS
GB2312:收录了6763个汉字
GBK编码:对GB2312的扩充,收录了冷门字,罕见字,古汉语等,共2.1万个汉子。
Unicode编码:计划将世界上所有的字符统一编码,用4个字节(32位二进制)来表示一个字符
UTF-8:统一转换格式编码(多国语言编码)
不同的字符,会选择合适编码来进行翻译

 

9.<meta>标记

<meta>作用:提供网页的元信息,指定网页的搜索关键字
<meta>属性:http-equiv和name
http-equlv属性:
功能:模拟http协议头文件信息,当信息从服务器传到客户端时,告诉浏览器如何正确显示网页内容
一般要与content属性配合,centent属性指定信息的详细参数
1.设置网页的字符集
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
2.网页自动刷新
<meta http-equip=”refresh” content=”2″>//每隔2秒钟,自动刷新网页一次
<meta http-equip=”refresh” content=”2;url=http://www.ifeng.com”>//2秒后跳转到凤凰网

name属性
主要用于设置网页的搜索关键字,版权信息,作者等
1.设置网页搜索关键字
<meta name=”keywords” content=”zchao,zchao博客,zchao博客之家”/>
2.设置网页描述信息
<meta name=”description” content=”zchao博客之家,代码改变世界,我们改变代码,敲代码没毛病”/>

 

10.XHTML简介

XHTML可扩展超文本标记语言
XHTML的标记与HTML一模一样
XHTML的语法比HTML严格的多

XHTML编写规范
所有标记和属性全小写
单边标记必须关闭,例:<br>-><br/>
所有的属性必须加引号
所有的属性必须有值,例;<hr noshade>-><hr noshade=”noshade”/>
标记之间要顺序嵌套
XHTML网页必须要有DTD文档类型定义代码

DTD文档类型定义
目的:验证机制,验证XHTML标记是否合法
DTD一共有三大类型
1.严格型的DTD

2.过渡型的DTD

3.框架的DTD

 

11.表格标签<table>

表格的结构
<table border=”1″ width=”500″ height=”300″ align=”center” bordercolor=”blue” bgcolor=”#99cc33″ background=”images/2.gif” cellspacing=”10″>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

 

<table>属性:
width:表格宽度,单位是百分比或固定值
height:表格高度
align:水平对齐方式,取值:left,center,right
border:边框粗细
bordercolor:边框颜色
bgcolor:背景色
background:背景图片URL
cellpadding:单元格边线到内容间的距离(填充距离)
cellspacing:单元格与单元格之间的距离(间距)
rules:合并单元格边框线,取值:all
<table border=”1″ width=”500″ height=”300″ align=”center” bordercolor=”blue” bgcolor=”#99cc33″ background=”images/2.gif” cellspacing=”10″>

<tr>属性,行标记
bgcolor:颜色
height:高度
align:文本内容,取值:left,center,right
valign:垂直居中,取值:top,midle,bottom

 

<td>或<th>属性
<td>是普通单元格
<th>是标题单元格,居中加粗显示
width:
height:
bgcolor:
background:
align:
valign:
rowspan:上下单元格合并,合并属性必须放在第一个单元格中
colspan:左右单元格合并,合并时有增就有减,保证每行单元格不变

 

<table border=”1″ width=”500″ align=”center” cellspacing=”0″ rules=”all”>
<tr bgcolor=”#cccccc” height=”50″>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>学历</th>
</tr>
<tr height=”50″ align=”center” valign=”top” bgcolor=”#FFFFFF”>
<td rowspan=”3″>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width=”130″ height=”130″ align=”center” background=”images/1.gif”>1996</td>

<td>man</td>
<td>god</td>
</tr>
<tr>

<td>&nbsp;</td>
<td colspan=”2″>&nbsp;</td>

</tr>
</table>

转载请注明:zchao博客之家 » PHP入门学习–HTML03项目符号(ol,ul),超级链接,表格及XHTML解析

喜欢 (0)or分享 (0)

说点什么

Please Login to comment
  Subscribe  
提醒