• 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>
  • 相关阅读:
    Java堆外内存管理
    Java内存模型和JVM内存管理
    C++经典面试题(最全,面中率最高)
    115道Java经典面试题(面中率最高、最全)
    Sublime Text 3中文乱码问题的解决(最有效)
    面试笔记3
    IntelliJ IDEA使用教程(很全)
    Intellij IDEA 创建Web项目并在Tomcat中部署运行
    IDEA调试总结(设置断点进行调试)
    Tomcat_启动多个tomcat时,会报StandardServer.await: Invalid command '' received错误
  • 原文地址:https://www.cnblogs.com/super90/p/4507392.html
Copyright © 2020-2023  润新知