Web行内和块级元素 及表格应用

一、转义字符

由<> 包裹的文本 会当做标签去解析   空格 &emsp; ? < 、gt < >

 "我认为这些电影对我来说非常特别.这是令人难以置信的珍藏,而这些也永远不会再发生.
&emsp;"我认为这些电影对我来说非常特别.这是令人难以置信的珍藏,而这些也永远不会再发生.
&lt"我认为这些电影对我来说非常特别.这是令人难以置信的珍藏,而这些也永远不会再发生.&gt

二、行内元素和块级元素

1.块级标签 默认情况下,每一个块级元素都是独占一行的即元素的前后都会换行 都有 align 属性 p h1~6 hr div
哈哈哈哈哈
哈哈哈哈哈
哈哈哈哈哈
哈哈哈哈哈
哈哈哈哈哈
哈哈哈哈哈

2.行内标签
不会换行可以和其他的标签或文本在一行内显示
b i s sup sub span

注意事项(编程规则)
p标记不能嵌套块级元素 w3c的规范一个段落里面不能放另外一个文章

三、web浏览器

谷歌 GOOgle Chrome 火狐 fireFox ie Opera 欧朋 Safari 苹果

四、超链接标签

URL 统一资源定位符 三种表现 绝对路径 解释:从文件所在的最高级目录下开始的完整路径 1.1访问互联网上的资源 2.2访问本机的资源 相对路径 解释:文件所在的位置开始查找 资源文件所在的位置经过的路径 1.1当前文件和资源文在同目录下 直接可以用名称引用 2.2资源文件在当前目录的子目录中 先进入,再引用 3.3 资源文件在当前文件的父目录中 先返回 再引用 ../ 返回上一级 ../../ ../../../ 根相对路径 在服务器上面使用的,只有服务器端才能用得到 表现 /作为开始 /img/ben.jpg 在项目中先找到一个img的文件夹 再找btn的图片 锚点: 作用: 在网页中的任意位置添加记号 可由任意位置跳转到该记号 使用: 1.定义锚点 a标签的 一个属性 name 其他标签里面用 id 属性 2.在另外一个地方跳转

五、跑马灯标签

作用:将文本在页面上流动显示(滚动播放) 用法: 属性: scrollamount 速度 behavior 样式

六、图片标签

作用:在页面上 添加一张图片 用法: 图片的格式: jpg有损压缩 png无损压缩的图片支持透明度 gif动图

实战例子1

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<div style="margin: 0 auto; width: 700px;">
		<img src="img/baidulogo.png" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="#">百度首页</a>
		&nbsp;&nbsp;
		<a href="#">登录</a>

		<hr align="left" size="1" color="gray" width="650px" />
		<h2>如果没有出演美国队长,这将是克里斯·埃文斯最大的错误</h2>

		<p style="margin-left: 550px;">
			<img src="img/03.jpeg" width="30px" height="30px" align="top" />
			<a href="#">漫威</a>
		</p>

		<font>美国队长克里斯·埃文斯最初曾两万次委婉拒出演美国队长,但最后还是参演了。"在扮演一<br />个对我来说意义重大的角色之后继续向前迈进" ,我认为任何一个演员,即使我一开始就扮演
			<br />这个角色,好吧,我可能会被这个角色定义了?“CE在参加ACE漫展时说道。"但在某种程度<br /> 上来说 ,在过去十年间,你不禁会接受这样一个事实:当你走在街上时,每个人都喜欢,队长!"
		</font><br /><br />

		<marquee scrollamount="10">
			<font color="red">欢迎进入百度新闻网</font><br />
		</marquee>

		<img src="img/02.jpeg" /><br /><br />

		<font>
			&nbsp;&nbsp;<i>尽管漫威这样的长期合约曾让CE有些焦虑,</i>因为这样可能会将一个演员局限在这个角色中。<br /> "但实际情况是,漫威制作了一系列电影。如果我不是这些电影的一部分,如果我对这些电影最终
			<br /> 说不了,那将是我生命中最大的错误",他说道。
		</font>
		<br /><br /><br />

		<font>
			&nbsp;&nbsp;&nbsp;&nbsp;"我认为这些电影对我来说非常特别.这是令人难以置信的珍藏,而这些也永远不会再发生.<br /> 我觉得很幸运与特别的演员,以及导演编剧一起工作。这对我来说太特别了."
		</font>
		<br /><br /><br />

		<img src="img/01.jpeg" />

		<br /><br /><br />
		<font>
			&nbsp;&nbsp;&nbsp;&nbsp;"在我生命中的某个时刻,我真的很担心【出演美国队长】。但同时想起来,我可以完全肯定说,"<br /> 这是我做过最好的决定。"CE还表示,即使这些电影糟透了,他的职业生涯也因此而陷入困境,但
			<br /> 和这些白痴【一同出席漫展的还有"鹰眼"杰瑞米·雷纳和“战争机器”】成为了朋友,
			<s>也有</s><br />
			<s>值了!</s>

		</font>
		<br /><br /><br />

		<font style="margin-left: 550px;">2019-7-11</font>

		<hr align="left" size="1" color="gray" width="650px" />

		<br />
		<font color="gray">相关搜索</font>
		<br />
		<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="#">复仇者联盟演员表</a>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="#">钢铁侠</a>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="#">蜘蛛侠之英雄归来</a>
		<br />
		<font color="red" face="楷体" style="margin-left: 600px;">
			<a href="" style="color: red;">回到顶部</a>
		</font>
	</div>
</body>

七、表格

1、表格的作用 按照一定的格式摆放数据 表格是由一些被称为单元格的矩形框组成 按照从左到右,从上到下的顺序排列到一起组成的。 2、创建表格 1.定义表格 table 2.创建行 tr 3.创建单元格td 3、表格属性 table属性 border:边框 cellpadding:单元格的内边距(单元格边框与内容之间的距离) cellspacing:单元格的外边距(单元格之间的距离) width:宽度 height:高度 align:对齐方式(整个表格) bgcolor 背景颜色(纯色填充) bordercolor 边框颜色 background: 背景图片 tr属性(行) tr是没有宽高属性的 align:水平对齐方式(内容) valign:垂直对齐方式
		td属性(单元格)
			width :每个单元格的宽度
			height:每个单元格的高度
			align:水平(单个单元格的内容)
			valign:垂直

不规则表格的创建
		1.跨行  rowspan属性  纵向向下  包含自己
		2.跨列  colspan属性  横向向右  包含自己

表格标题
语法:<caption></caption>
注意:表格标题必须跟在 table后面   而且最多只能有一个。

表格实战例子2

		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>				
		</tr>
		
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>				
		</tr>
		
	</table>
</body>
123
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值