HTML基础——网站信息显示页面

1、语法和规范

HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。
HTML文件分为头部分(<head></head>)和体部分(<body></body>)
HTML标签都是由开始标签和结束标签组成。(<hr />)
HTML标签不区分大小写,建议使用小写。

2、HTML相关标签学习

  2.1标题标签

  标题标签使用<hn />,n从1到6字体大小逐渐变小
  特点:加粗加黑,单独占用一行,与其他行有一定行间距
  注释:<!--注释内容-->

  2.2水平线标签

  水平线标签 <hr />

  2.3段落标签

  段落标签<p></p>

  2.4字体标签

  字体标签<font></font>
    属性:size:指定内容的大小
    color:指定内容的颜色
    face:指定内容的字体
  加粗:<b></b>
  斜体:<i></i>
  下划线:<u></u>

  注意:HBuilder同样支持Alt+/自动输出提示。

3、在HBuilder中新建HTML文件,命名为网站信息显示页面,代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>网站信息显示页面</title>
 6     </head>
 7     <body>
 8         <!--1.创建一个标题标签-->
 9         <h2>皮囊师</h2>
10
11         <!--2.创建一条水平线标签-->
12         <hr />
13
14         <!--3.分别创建段落标签-->
15         <p>
16         <font color="red">演皮影戏的师傅</font>正弓着背在一张矮桌子上修补坏了的皮影。他的手边有好多皮影,有红有绿,有男有女,有兔有马,仿佛一个完整的世界。而他,就是那个世界的造物主。     
17         </p>
18
19         <p>
20         世人皆知<b>皮囊师</b>,而很少听说<i>操控师</i>,是因为绝大部分人只注重容颜,而不注重行为举止。皮囊师兴盛于皇城,尤其后宫,操控师也兴盛于皇城,但在后宫不如皮囊师受欢迎。只有少数皇帝的嫔妃知道,容颜只能引起皇帝的注意,但那只是一时之兴,而行为举止才能让皇帝处久不厌。于是,宫中出现了一种女官,名为司仪,授九品衔。司仪专门教宫中女人举止仪态,后来又教一些关系亲密的嫔妃如何勾引皇帝,让皇帝恋恋不舍,尽可能多地逗留。
21         </p>
22
23     </body>
24 </html>

保存文件,点击在浏览器内运行,效果如下:

时间: 2024-11-03 05:38:02

HTML基础——网站信息显示页面的相关文章

HTML基础——网站友情链接显示页面

1.列表标签 有序列表:type默认是1,2,3--,reserved指降序排列 <ol type="I" start="" reversed="reversed"> <li></li> </ol> 无序列表:type默认是disc <ul type=""> <li></li> </ul> 2.超链接标签 <a href=&q

扒皮下腾讯网站地图页面页卡的滚动特效

今天要扒的是腾讯网站地图页面(http://www.qq.com/map/)页卡滚动效果,见下图 有兴趣的童鞋可以去那页面试一试,其动画效果见下图: 那么先理下思路:上方的按钮对应下方的某个栏目,点击某按钮时,其对应的栏目(暂且称为A吧)滚到最上方,原本在A前方的栏目则在滚动结束后自动跳到最后面(这里要注意顺序,比如在A前面有2个栏目B和C,那么B滚完便跳到最后,然后C开始滚,C滚完跳到最后面). 咱这里说的“跳”可以用append实现,即把前面的元素有序地移到最后.至于滚动,可以在全部栏目外围

HTML&amp;CSS——网站注册页面

1.表单标签 所有需要提交到服务器端的表单项必须使用<form></form>括起来! form 标签属性:  action,整个表单提交的位置(可以是一个页面,也可以是一个后台 java 代码) method,表单提交的方式(get/post/delete--等 7 种) Get 与 post 提交方式的区别?[默认提交方式为 get] Get 提交方式,所有的内容显示在地址栏,不够安全,长度有限制. Post 提交方式,所有的内容不会显示在地址栏,比较安全,长度没有限制 1)文

Struts2结合sitemesh3制作网站母版页面

上一篇文章介绍了sitemesh3的使用,这篇文章来介绍如何结合struts2来配置和使用sitemesh,具体的如何使用sitemesh3我就不讲解了,这个你们可以看看我的上一篇博客. 首先你要添加struts和sitemesh相关的jar包: 添加完毕后,你要配置web.xml文件: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org

Nginx提供代理服务(网站代理),nginx实现负载均衡集群和高可用集群、nginx实现网站动静页面分离

静态页面:用静态编程语言编写的页面为静态页面,支持静态页面的语言为,css html  xml,不手动改变源代码,页面就不会改变. 动态页面:用动态编程语言编写的页面为动态页面,支持动态页面的语言有,java php .net,根据用户访问的时间和用户的不同显示不同的页面. nginx网站服务代理 实验(一)实验目的:nginx实现反向代理代替公网用户访问私网的web页面. 实验环境: 内网web服务器: IP地址 :192.168.1.1  主机名:fanlj nginx代理服务器:IP地址:

给你的网站404页面加上“宝贝寻亲”公益页面

网站404页面时每个网站都会遇到的问题,有些网站会将404页面做的极具个性,但毫无意义,益云所推出的404页面广告公益联盟是一个非常不错的东西,你仅仅需要为你的网站404页面插入一段代码,就能在一定程度帮助许多父母找回自己的孩子,不少大型互联网公司(如网易,腾讯)都加入这一公益联盟.各位站长们也赶紧加入吧 效果展示:http://temp.163.com/special/404_page02/ 详情地址:http://yibo.iyiyun.com/Home/Index/web404 效果展示

Bootstrap &lt;基础二十三&gt;页面标题(Page Header)

页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page Header),请把你的标题放置在带有 class .page-header的 <div> 中: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 页面标题</title> <

用Teleport Ultra下载网站全部页面

测试case,就是把Commons-FileUpload 的API下载来 上网查的时候我才发现这是一个由很多页面组成的网站,下载起来很麻烦. 怎么办呢?呵呵,一定是有办法的.Teleport Ultra这个工具就能帮我们搞定! 这是一个汉化绿版的迅雷下载链接:thunder://QUFodHRwOi8vMS5jcWR4MS5jcnNreS5jb20vMjAwOTAzL1RlbGVwb3J0VWx0cmEtdjEuNTlILnppcFpa 大小只有759K. 下载完成后解压缩,直接运行ultra.

移动端网站提升页面加载性能的优化技巧

移动端网站提升页面加载性能的优化技巧 收藏到:1时间:2015-06-17   文章来源:马海祥博客   访问次数:2501 网页性能的优化一直是网站成功的关键,越来越多的研究证明,不管是小型电商,还是大型连锁企业,即使是页面加载时间方面的细微改善,都可以带来更多的业务,更多的广告收入,更多的用户粘性和更多的客户满意度. 在过去几年,Web开发者都是基于改善硬件或者提高带宽速度来优化用户体验,但是最近几年,爆炸式的移动Web浏览器的使用打破了这个途径,低带宽,高延迟,小内存,低处理器性能的移动设