2021-07-17 从零开始的一日HTML

最新推荐文章于 2021-09-13 17:26:24 发布

泥烟

最新推荐文章于 2021-09-13 17:26:24 发布

阅读量129

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/qq_39391544/article/details/118856912

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>狗子的工作站</title>
    </head>
    <body>
        <div align="left">
            <img src="https://avatar.csdnimg.cn/E/2/1/1_qq_39391544_1624348562.jpg" alt="">
        </div>
        <h1 align="center" ><font color="#4682B4">狗子Dev奇风岁月</font> </h1>
        <button><a href="https://www.baidu.com/">
           <img src="https://www.baidu.com/img/flexible/logo/pc/result.png"  alt="百度加载失败" >
        </a>
        </button><br>
        <form action="/login.jsp" method="GET">
            <input type="text" placeholder="账号" size="20" name="name">
            <input type="password" placeholder="请输入密码" name="password">
            <input type="reset" value="reset">
            <input type="submit" value="submit(戳小猪也能提交)"><br>
            <input type="image" src="https://how2j.cn/example.gif" title="戳俺老猪也能提交">
        </form>
        
       <input type="text" value="有初始值的文本框">
       <input type="button" value="按我也没用">
       <iframe src="https://blog.csdn.net/qq_39391544"  width="600" height="300"></iframe>
        
       
       <p>使用预格式的情况:</p>
        <pre>
        public class HelloWorld {
        
            public static void main(String[] args) {
                System.out.println("Hello World");
            }
        }
        </pre>
        <p>
            
            <ul type="square">
                <p>1.日常(无序列表)</p>
                <li>吃</li>
                <li>喝</li>
                <li>玩</li>
                <li>睡</li>
            </ul>
            
            <ol type="I" start="I">
                <p>2.今日安排(有序列表)</p>
                <li><b>吃饭</b><i></i></li>
                <li><i>睡觉</i></li>
                <li><a href="https://www.cnblogs.com/Knight02/"><b><i>写日记</i></b> </a></li>
            </ol>
            <dl>
                <p>3.定义列表</p>
                <dt>基地</dt>
                <dd><a href="https://www.cnblogs.com/Knight02/" title="┭┮﹏┭┮">博客园</a></dd>
                <dd><a href="https://blog.csdn.net/qq_39391544" title="(*/ω＼*)">CSDN</a></dd>
            </dl>
        </p>
        <div style="width:100px;height: 100px;background-color: #66f9fe;">小蓝块(一个div)</div>
        <span>我是个文本标签,比赛安排见下图<br></span>
        <img src="./比赛安排.png" title="时间表" alt="您的计划已丢失,请重新做狗" width="500">
    </body>
    <br><br><br>

    <table border="4" width="200px">					  <!--border是设置边框，属性值为粗细-->		
        <caption>信息表</caption>       <!--表格标题-->
        <tr>
            <th>学号</th>           		  <!--表头 （在tr行标签中用th） 默认字体加粗-->
            <th>姓名</th>
            <th>口头禅</th>
        </tr>
        
        <tr>
            <td colspan="2">2021</td> 	  	 <!--colspan是合并列-->
            <td rowspan="2" bgcolor="pink">阿巴阿巴</td>   	 <!--rowspan是合并行-->
        </tr>
        <tr>
            <td>2020</td>
            <td>dog</td>
        </tr>
    </table>
    
    <div>
    <p>今晚计划</p>
    学习java<input type="checkbox" name="activity" value="java"><br>
    睡觉<input type="checkbox" name="activity" value="sleep"><br>
    打DOTA<input type="checkbox" name="activity" value="dota"><br>
    英雄联盟<input type="checkbox" name="activity" value="lol">
    <select>
        <option >A</option>
        <option >B</option>
        <option >C</option>
    </select>
    </div>

    <br><br><textarea placeholder="留下宝贵的意见吧"></textarea>
    <div align="right">
        <img src="https://avatar.csdnimg.cn/E/2/1/1_qq_39391544_1624348562.jpg" alt="">
    </div>
</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是块元素，默认是占用100%的宽度,自动换行
常见的块元素还有h1,table,p
span是内联元素，宽度由其内容的宽度决定,不会自动换行
常见的内联元素还有img,a,b,strong,input

提交数据

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

留个明早小任务,

泥烟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-07-17 从零开始的一日HTML

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>狗子的工作站</title> </head> <body> <p> <h1>狗子Dev奇风岁月</h1> <ul type="s...
复制链接

扫一扫