开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

HTML小例子

简介:
+关注继续查看

1、标题、内容

<html>
<head>
  <title>这是标题</title>
</head>
<body>
  这是内容
</body>    
</html>

2、设置背景色

<html>
<head>
  <title>设置背景颜色为红色</title>
</head>
<body bgcolor="red">
  
</body>    
</html>

3、设置背景为图

<html>
<head>
  <title>设置背景为图片</title>
</head>
<!--
<body background="C:\Documents and Settings\All Users\Documents\My Pictures\示例图片\Sunset.jpg">
-->
<!-- 
<body background="images/Sunset.jpg">  
-->
<body background="../images/Sunset.jpg">  
</body>    
</html>

4、演示横线

<html>
<head>
  <title>演示横线</title>
</head>
<body>  
  <hr size="6" width="200" color="red">
  <hr size="6" width="60%" color="red">
</body>    
</html>

5、演示超连接

<html>
<head>
  <title>演示超连接</title>
</head>
<body>  
  <a href="http://www.sina.com.cn">连接到新浪</a>
</body>    
</html>

6、测试H1~6

<html>
<head>
  <title>测试H1~6</title>
</head>
<body>  
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
</body>    
</html>

7、测试font

<html>
<head>
  <title>测试font</title>
</head>
<body>  
  <font color="red" size="4">红色,4号 </font>
  <p>
  <font color="blue" size="5">蓝色,5号 </font>
</body>    
</html>

8、测试特殊标签

<html>
<head>
  <title>测试特殊标签</title>
</head>
<body>  
  <b></b>
  <i>斜体</i>
  <u>下划线</u>
  <s>中线</s>
  <sup>上标</sup>
  <sub>下标</sub>
</body>    
</html>

9、测试转义符

<html>
<head>
  <title>测试转义符</title>
</head>
<body>  
a     b
<p>
<
<p>
>
</body>    
</html>

10、测试文字布局

<html>
<head>
  <title>测试文字布局</title>
</head>
<body>  
  <div align="center">
    div1111居中<p>
    abcedf.....
  </div>
  <div align="center">
    div2222居中<br>
    abcedf.....
  </div>  
  <span>
    span111.....
  </span>
  <span>
    span222.....
  </span>  
  <p>
  <ul>
    <li>无序号列表</li>
    <li>无序号列表</li>
  </ul>
  <p>
  <ol>
    <li>有序号列表</li>
    <li>有序号列表</li>
  </ol>
  <p>
  <pre>
     0        nmdnmd
        0     0     jksdafkjsfdk
            0    afdsafsf
  </pre>
</body>    
</html>

11、测试img标签

<html>
<head>
  <title>测试img标签</title>
</head>
<body>  
  <img src="../images/Sunset.jpg" width="100" height="100" alt="这是图片">
</body>    
</html>

12、测试type=text

<html>
<head>
  <title>测试type=text</title>
</head>
<body>  
  <h1>文本输入域演示</h1>  
  <hr>
  <!--
    默认get提交,get提交会放到url的后面
  <form>
  -->
  <!--
  <form method="get">
  -->
  <form method="post">
    姓名:<input type="text" name="username" id="username123" value="张三" size="50" maxlength="5"><br>
    年龄:<input type="text" name="age" id="age"><br>
    <input type="submit" value="保存">
  </form>
</body>    
</html>

13、测试type=text

<html>
<head>
  <title>测试type=text</title>
</head>
<body>  
  <h1>复选框输入域演示</h1>  
  <hr>
  
  <form method="post">
    姓名:<input type="text" name="username"><br>
         爱好:<input type="checkbox" name="a">游泳  
         <input type="checkbox" name="a">打球
         <br>
            
    <input type="submit" value="保存">
  </form>
</body>    
</html>

14、测试type=radio

<html>
<head>
  <title>测试type=radio</title>
</head>
<body>  
  <h1>单选框输入域演示</h1>  
  <hr>
  <form method="post">
    姓名:<input type="text" name="username"><br>
         性别:<input type="radio" name="a">男  
         <input type="radio" name="a" checked="true">
         <br>
            
    <input type="submit" value="保存">
  </form>
</body>    
</html>

15、测试select

<html>
<head>
  <title>测试select</title>
</head>
<body>  
  <h1>下拉列表框输入域演示</h1>  
  <hr>
  <form method="post">
    姓名:<input type="text" name="username"><br>
         性别:
         <select name="sex">
            <option value="01"></option>
            <option value="02" selected ></option>
         </select>
             
         <p>
         
         性别:
         <select name="sex" multiple>
            <option value="01"></option>
            <option value="02"></option>
         </select>
         
  </form>
</body>    
</html>

16、测试textarea

<html>
<head>
  <title>测试textarea</title>
</head>
<body>  
  <h1>textarea输入域演示</h1>  
  <hr>
  <form method="post">
    姓名:<input type="text" name="username"><br>
    备注:<textarea name="remark" rows="5" cols=20></textarea>
  </form>
</body>    
</html>

17、测试button,submit,reset,image

<html>
<head>
  <title>测试button,submit,reset,image</title>
</head>
<body>  
  <h1>button,submit,reset,image演示</h1>  
  <hr>
  <form method="get">
    姓名:<input type="text" name="username"><br>
    备注:<textarea name="remark" rows="5" cols=20></textarea><br>
    <input type="submit" value="submit"><br>
    <input type="button" value="button"><br>
    <input type="reset" value="reset"><br>
    <input type="image" src="../images/Sunset.jpg" width="20" height="20">
  </form>
</body>    
</html>

18、测试hidden

<html>
<head>
  <title>测试hidden</title>
</head>
<body>  
  <h1>hidden演示</h1>  
  <hr>
  <form method="get">
         <!--
    流水号:<input type="text" name="flowNo" value="9998789"><br>
    -->
    <input type="hidden" name="flowNo" value="9998789"><br>
    姓名:<input type="text" name="username" value="张三"><br>
    备注:<textarea name="remark" rows="5" cols=20>asdfsadfsf</textarea><br>
    <input type="submit" value="修改"><br>
  </form>
</body>    
</html>

19、测试table

<html>
<head>
  <title>测试table</title>
</head>
<body>  
  <h1>table演示</h1>  
  <hr>
  <table width="60%" border="1">
    <tr align="center">
      <td>学生姓名</td>
      <td>科目</td>
      <td>成绩</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>数学</td>
      <td>100</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>语文</td>
      <td>90</td>
    </tr>
    <tr>
      <td colspan="2" align="center">合计</td>
      <td>190</td>
    </tr>
  </table>
</body>    
</html>

20、测试frame

<html>
<head>
  <title>测试frame</title>
</head>
<!--
<body>  
-->
  <frameset cols="20%,*">
    <frame name="left" src="21_1.html" noresize>
    <frame name="right" src="21_2.html">
  </frameset>
<!--  
</body>    
-->
</html>

21、测试frame的left

<html>
<head>
  <title>测试frame</title>
</head>
<body>  
  left
</body>    
</html>

22、测试frame的right

<html>
<head>
  <title>测试frame</title>
</head>
<body>  
  right
</body>    
</html>

23、测试frame

<html>
<head>
  <title>测试frame</title>
</head>
  <frameset rows="10%,*">
    <frame name="top" src="22_1.html" noresize>
    <frameset cols="15%,*">
      <frame name="left" src="22_2.html">
      <frame name="right" src="22_3.html">
    </frameset>
  </frameset>
</html>

24、测试frame的top

<html>
<head>
  <title>测试frame</title>
</head>
<body>
  top
</body>
</html>

25、测试frame的增删改查

<html>
  <head>
    <title>测试frame</title>
  </head>
  <body>
    <a href="student_add.html" target="_self">添加学生</a><br>
    <a href="student_del.html" target="_blank">删除学生</a><br>
    <a href="student_modify.html" target="_top">修改学生</a><br>
    <a href="student_query.html" target="right">查询学生</a><br>
  </body>
</html>
<html>
<head>
  <title>测试frame</title>
</head>
<body>
  right
<body>
</html>

测试iframe

<html>
<head>
  <title>测试iframe</title>
</head>
<body>  
  <h1>iframe演示</h1>  
  <iframe src="23_1.html"></iframe>
</body>    
</html>
 
<html>
<head>
    <title>学生信息列表</title>
</head>
<body>    
    <h1>学生信息列表</h1>    
    <hr>
    <table border="1" width="1500">
        <tr>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
        </tr>
        <tr>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
        </tr>
        <tr>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
        </tr>
        <tr>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
        </tr>
        <tr>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
        </tr>
        <tr>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
        </tr>
        <tr>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
            <td width="20%">11111</td>
        </tr>
        
    </table>
</body>        
</html>

26、html br p标签区别?就是前者换行距离大这一点区别?

<P>就是分段"逻辑含义相同的放在一起"用一句话来说"把意思相同的话捆绑在一起"
<BR>相当C语言中的回车"\n";

 

 27、调整字体 FONT-FAMILY

<FONT style="FONT-SIZE: 14pt; COLOR: green; FONT-FAMILY: 微软雅黑">文本内容</FONT>
 
28、在当前页面打开链接,而不是新页面打开
<a href="/about/" target="_blank">关于悠悠乐</a> | 这样是弹出一个新的网页;当然可以在target="_blank" 前边加一个标签就是 title=“测试是否为新的页面” 这样就自己可以尝试解决这个疑问;
 
 本文转自 tianya23 51CTO博客,原文链接:http://blog.51cto.com/tianya23/312930,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
@Html.ValidationSummary()作用
在@using (Html.BeginForm()) 后边都有 @Html.ValidationSummary(), 这个一般有什么用?   后边的input不是都注明要验证,那这个还有什么用? 我看源码: ...
444 0
【HTML基础】HTML基本语法
学习了解HTML基本语法。
0 0
HTML基础——html 的基本结构
第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。 <html>...</html>标签是开发人员在告诉浏览器,整个网页是从<html>这里开始的,到<html>结束,也就是html文档的开始和结束标签。 <head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。 <body>...</body>标签是编写网页上显示的内容。
0 0
【HTML基础】HTML的基本结构
学习了解HTML的基本结。
0 0
用HTML给对象送玫瑰花
用HTML给对象送玫瑰花
0 0
HTML4和HTML5之间的10个主要不同
HTML5是最新的HTML标准,或迟或早,所有的web程序员都会发现需要使用到这个最新的标准,而且,很多人都会感觉到,重新开发一个HTML5的网站,要比把一个网站从HTML4迁移到HTML5上容易的多,这是因为这两个版本之间有很大不同之处。
351 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础HTML入门教程》
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载