HTML5教程

从零玩HTML的一天

本文主要是介绍从零玩HTML的一天，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>狗子的工作站</title>
  6     </head>
  7     <body>
  8         <div align="left">
  9             <img src="https://avatar.csdnimg.cn/E/2/1/1_qq_39391544_1624348562.jpg" alt="">
 10         </div>
 11         <h1 align="center" ><font color="#4682B4">狗子Dev奇风岁月</font> </h1>
 12         <button><a href="https://www.baidu.com/">
 13            <img src="https://www.baidu.com/img/flexible/logo/pc/result.png"  alt="百度加载失败" >
 14         </a>
 15         </button><br>
 16         <form action="/login.jsp" method="GET">
 17             <input type="text" placeholder="账号" size="20" name="name">
 18             <input type="password" placeholder="请输入密码" name="password">
 19             <input type="reset" value="reset">
 20             <input type="submit" value="submit(戳小猪也能提交)"><br>
 21             <input type="image" src="https://how2j.cn/example.gif" title="戳俺老猪也能提交">
 22         </form>
 23         
 24        <input type="text" value="有初始值的文本框">
 25        <input type="button" value="按我也没用">
 26        <iframe src="https://blog.csdn.net/qq_39391544"  width="600" height="300"></iframe>
 27         
 28        
 29        <p>使用预格式的情况:</p>
 30         <pre>
 31         public class HelloWorld {
 32         
 33             public static void main(String[] args) {
 34                 System.out.println("Hello World");
 35             }
 36         }
 37         </pre>
 38         <p>
 39             
 40             <ul type="square">
 41                 <p>1.日常(无序列表)</p>
 42                 <li>吃</li>
 43                 <li>喝</li>
 44                 <li>玩</li>
 45                 <li>睡</li>
 46             </ul>
 47             
 48             <ol type="I" start="I">
 49                 <p>2.今日安排(有序列表)</p>
 50                 <li><b>吃饭</b><i></i></li>
 51                 <li><i>睡觉</i></li>
 52                 <li><a href="https://www.cnblogs.com/Knight02/"><b><i>写日记</i></b> </a></li>
 53             </ol>
 54             <dl>
 55                 <p>3.定义列表</p>
 56                 <dt>基地</dt>
 57                 <dd><a href="https://www.cnblogs.com/Knight02/" title="┭┮﹏┭┮">博客园</a></dd>
 58                 <dd><a href="https://blog.csdn.net/qq_39391544" title="(*/ω＼*)">CSDN</a></dd>
 59             </dl>
 60         </p>
 61         <div style="width:100px;height: 100px;background-color: #66f9fe;">小蓝块(一个div)</div>
 62         <span>我是个文本标签,比赛安排见下图<br></span>
 63         <img src="./比赛安排.png" title="时间表" alt="您的计划已丢失,请重新做狗" width="500">
 64     </body>
 65     <br><br><br>
 66  
 67     <table border="4" width="200px">                      <!--border是设置边框，属性值为粗细-->        
 68         <caption>信息表</caption>       <!--表格标题-->
 69         <tr>
 70             <th>学号</th>                     <!--表头 （在tr行标签中用th） 默认字体加粗-->
 71             <th>姓名</th>
 72             <th>口头禅</th>
 73         </tr>
 74         
 75         <tr>
 76             <td colspan="2">2021</td>            <!--colspan是合并列-->
 77             <td rowspan="2" bgcolor="pink">阿巴阿巴</td>        <!--rowspan是合并行-->
 78         </tr>
 79         <tr>
 80             <td>2020</td>
 81             <td>dog</td>
 82         </tr>
 83     </table>
 84     
 85     <div>
 86     <p>今晚计划</p>
 87     学习java<input type="checkbox" name="activity" value="java"><br>
 88     睡觉<input type="checkbox" name="activity" value="sleep"><br>
 89     打DOTA<input type="checkbox" name="activity" value="dota"><br>
 90     英雄联盟<input type="checkbox" name="activity" value="lol">
 91     <select>
 92         <option >A</option>
 93         <option >B</option>
 94         <option >C</option>
 95     </select>
 96     </div>
 97  
 98     <br><br><textarea placeholder="留下宝贵的意见吧"></textarea>
 99     <div align="right">
100         <img src="https://avatar.csdnimg.cn/E/2/1/1_qq_39391544_1624348562.jpg" alt="">
101     </div>
102 </html>

效果

login.jsp源代码(日后J2EE会涉及)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
     
<%
    request.setCharacterEncoding("UTF-8");
    String name = request.getParameter("name");
    String password = request.getParameter("password");
     
%>
 
您提交的账号名是 :<%=name%> <br/>
您提交的密码是 :<%=password%>
<br>
<a href="javascript:history.back()">返回</a>

div是块元素，即自动换行
常见的块元素还有h1,table,p
span是内联元素，即不会换行
常见的内联元素还有img,a,b,strong

 

提交数据

设置type="submit"
IE下button的type的默认值为button不具备提交功能
其他浏览器type的默认值是submit

留个明早小任务,

这篇关于从零玩HTML的一天的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航