08 html加强(各种字体、文字布局、表格进阶、多媒体页面)

Html加强

(1)HTML 文件结构(Document Structures)

<html>...</html>
<head>...</head>
<body>...</body>

<HTML><HEAD>     <title>, <base>, <link>, <isindex>, <meta></HEAD><BODY>    HTML 文件的正文写在这里... ... </BODY></HTML>

<!--不同浏览器的,上,左页面空白不一样,程序员一般清零-->

(2)<a href = “#” target=”值”></a>

特殊的 5类操作(很有用喔)

<a href=url target=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口

<a  href=urfl   targrt=指向frame的名字>

(3)标尺线<hr>

<html>
<head>
<title>Hello</title>
<!--content用来指示文本的格式,charset指定字符集, 不指定的话默认-->
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>

<!--不同浏览器的,上,左页面空白不一样,程序员一般清零-->
<body leftmargin=0 topmargin=0px  link=blue text=black alink=green vlink=gray>
你好,北京!<br/>
<a href="http:www.baidu.com" target="_blank">www.baidu.com</a><br/>
<a href="http:www.sohu.com" target="_blank">www.sohu.com</a><br/>
<a href="http:www.163.com" target="_blank">www.163.com</a><br/>

<!--标尺线-->
<hr color=red />

<!--h1标签会自动换行-->
<h1>标题</h1>

<!--b加粗,i斜体,u下划线 -->
<b><u><i>粗体+斜体+下划线</i></u></b> 
<br/><br/>

</body >
</html>

浏览器显示效果:

文字布局

行的控制<p></p>

<!--alt=#>#z在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息-->

<!--注释:当用户把鼠标移动到 img 元素上时,Internet Explorer 会显示出 alt 属性的值。这种行为并不正确。所有其他的浏览器正在向规范靠拢,只要当图像无法显示时,才会显示出替代文本-->

<!--提示:如果需要为图像创建工具提示,请使用 title 属性。-->

图像alt

<img alt=#>#在鼠标移到图像时,会有关键字的提示

<html>
<body>

<!--行的控制, 分段会自动多换一行, br换行-->
<p>你好!</p>

<!--文字的分区div,可以把我们想放的东西放入到div中,div的分块,布局定位和显示数据-->
<div style="border:1px solid red; ">
<img src='apple.jpg' width=200>Apple
</div>
<p/>

<!--alt=#>#z在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息-->
<img src="apple.jpg" alt="This is Apple" title="This is Apple"  width=100px />
<br/><br/>

<!--图片可以包起来做超链接, 图片也可以添加超链接【将图片<a></a>包起来】-->
<a href="http://www.baidu.com"><img src="apple.jpg" alt="这是图片" title="apple" width="150px" border=1px /></a>

</body>
</html>

运行效果图:

表单进阶:

<html>
<body>

******复选框checkbox checked默认选中一个******<br/>
<input type="checkbox" name="v" checked />苹果 <br/>
<input type="checkbox" name="v"  />西瓜 <p>

******单选框radio **************<br/>
<input type=radio name="水果">Banana<p>
<input type=radio name="水果" checked> Apple<p>
<input type=radio name="水果" value=橘子> Orange<p>
<input type=submit><input type=reset><p>

******单选框radio **************<br/>
<!--size配合 multiple 可以多选 -->
<select size=2 multiple>
<option value="aaa">Banana</option>
<option value="bbb">Apple</option>
<option value="ccc">Orange</option>
</select><p>

******文本域textarea **************<br/>
<!--在默认情况下是on 自动换行-->
<textarea cols="30" rows="20" wrap=off>
请输入文字……
</textarea>

</body>
</html>

浏览器显示效果:

表格进阶

<html>
<body>
<!--th中的内容相对td的内容会自动加粗, th内容默认左右,上下居中-->
<!--如果风格统一的话可以将属性 放到tr中去-->
<!--如果整个表的风格都是这样,用css控制-->

<table border=1px  width=200px height=150px>
<tr><th valign="top">名字</th><th valign="bottom" align="left">性别</th></tr>
<tr><td>张龙</td><td></td></tr>
<tr><td>赵虎</td><td></td></tr>
</table>

</body>
</html>

浏览器显示效果:

文字的移动效果:

会移动的文字

<marquee>我会跑</marquee>

ieTester(可以测试各种不同的浏览器)【这个工具是微软提供的】

专门给网页开发人员测试用的

Scrollamount控制速度

Direction移动的方向

behavior=alternate 图像走到右边有弹回来

<html>
<body>
<!--图片也可以移动, scrollamount设置速度, direction设置方向-->
<marquee><img src="apple.jpg" width=300px /></marquee>
<marquee bgcolor=aaaaee >默认跑(向左边跑)</marquee>

<!--空白设置hspace,vspace 面积height,width , 背景色bgcolor -->
<marquee hspace=300 vspace=20  height=40 width=50%  align=middle >移动的小苹果</marquee>
<marquee bgcolor="pink" direction=right scrollamount=20>向右边跑</marquee>
<marquee direction="right"  width=80% scrollamount=20 ><img src="apple.jpg" width=300px /></marquee>

</body>
</html>

浏览器显示:

多媒体文本

嵌入多媒体文本(EMBED)

基本语法 <embed src=#> #=URL

本标记可以用来在主页中嵌入多媒体文本,如:
体会 <embed> 标记,您需要把 plugin 安装完备。
请注意:embed attributes are different between each plugins. 

放在Tomcat上是不可以的,可以流媒体服务器下,效率高些

搭建流媒体服务器<有时间的话自己搞一下>

<html>
<body bgcolor=black>

<div style="border:0px solid red; 800px; position:absolute; left: 300px; top 450px">
<embed src="网易.mp4" width=640px height=480px />
</div>
<!--bgsound一打开网页就有背景音乐 IE支持 -->
<bgsound src="张靓颖 - 如果这就是爱情" />

</body>
</html>
原文地址:https://www.cnblogs.com/super90/p/4507392.html