HTML+CSS案例大全之HTML

已于 2024-05-07 21:21:20 修改
阅读量1k 收藏 11
点赞数 21
文章标签： html 前端 css
于 2024-05-07 21:16:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62575733/article/details/138545432
版权

HTML

1.

<html>
      <head>
                 <tittle>第一个页面</tittle>
       </head>
       <body>
              键盘敲烂，月薪过万
       </body>
</html>

2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题标签</h1>
    <h1>标题一共六级选，</h1>
    <h2>文字加粗一行显</h2>
    <h3>从大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见</h6>
                    ------**老师
</body>
</html>

3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>图像标签的使用:</h4>
    <img src="uu.jpg"/>
    <h4>alt 替换文本 图像显示不出来时用文字替换：</h4>
    <img src="uu1.jpg" alt="大帅哥一枚"/>
    <h4>title 提示文本 鼠标放到图像上，提示的文字：</h4>
    <img src="uu.jpg" alt="大帅哥一枚"title="还在犹豫啥"/>
    <h4>width 给图像设置宽度：</h4>
    <img src="uu.jpg" alt="大帅哥一枚"title="还在犹豫啥"width="300"/>
    <h4>width 给图像设置高度：</h4>
    <img src="uu.jpg" alt="大帅哥一枚"title="还在犹豫啥"width="300" height="100"/>
    <h4>width 给图像设置边框：</h4>
    <img src="uu.jpg" alt="大帅哥一枚"title="还在犹豫啥"width="300" height="100" border="15"/>
</body>
</html>

4.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，<br />《圣经》并无记载。</p>
</body>
</html>

5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>秋夜</h1>
    <h4>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。</h4>
    <p>这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。
        然而现在却非常之蓝，闪闪地䀹2着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。</p>
    <h4>我不知道那些花草真叫什么名字，人们叫他们什么名字。</h4>
    <p>我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩3地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，
        冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。</p>
    <p>枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。
        他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚4着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着
    奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。

        鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了5。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要
        制他的死命，不管他各式各样地䀹着许多蛊惑6的眼睛。
        哇的一声，夜游的恶鸟飞过了。
        
        我忽而听到夜半的笑声，吃吃7地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的
        带子也即刻被我旋高了。
        后窗的玻璃上丁丁8地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以
        为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子9。
        猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么
        大，遍身的颜色苍翠得可爱，可怜。
        我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。
        </p>
    <p>一九二四年九月十五日。</p>
</body>
</html>

6.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- controls 显示播放的控件   还可以在后面加上如后参数： autoplay 自动播放  loop 循环播放 muted 可以实现自动播放，必须是静音 -->
    <audio src="./aa.mp3 " controls></audio>
</body>
</html>

7.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频标签如下</title>
</head>
<body>
     <!-- controls 显示播放的控件   还可以在后面加上如后参数： autoplay 自动播放  loop 循环播放 -->
    <video src="./jcly.mp4" controls></video>
</body>
</html>

8.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是<strong>加粗</strong>的文字<br>
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>
    我是<i>倾斜</i>
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下滑线</ins>
    我是<u>下滑线</u>
</body>
</html>

9.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>这是头部,单独占一行</div>123
    <div>这是头部,单独占一行</div>
    <span>今日价格</span>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>
</html>

10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="images/img.jpg"/width="500" height="850">
    神奇的网络盗图
    <img src="https://msn-img-nos.yiyouliao.com/inforec-20220716-73fab2244b69f6087de0c60d68fdab42.jpg?time=1657960789&signature=EAFEF84C12E2A121E1AE99C27AB5C9A3"/> 
</body>
</html>

11.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- href 跳转地址 -->
    <h4>1.外部链接</h4>
    <a href="http://www.baidu.com" target="_self">百度</a>
    <h4>2.</h4>
    <a href="http://www.QQ.com" target="_blank">腾讯</a>
    target 打开窗口的方式 默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面
    <h4>3.网站内部页面之间的相互链接</h4>
    <a href="qiuye.html">鲁迅简介</a>
    <h4>4.空链接：#</h4>
    <a href="#">鲁迅地址</a>
    <h4>4.下载链接：地址链接的是 文件 .exe或者是zip等压缩包形式</h4>
    <a href="img.rar">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"/></a>
</body>
</html>

12.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>src 图片路径 必须属性</h4>
    <h4>alt 文本 替换文本。图像不能显示的文字</h4>
    <h4>title 文本 提示文本。鼠标放到图像上，显示的文字</h4>
    <h4>width 给图像设定宽度：</h4>
    <img src="img.jpg"alt="hello"tittle="world"width="500"/>
    <h4>height 给图像设定高度：</h4>
    <img src="img.jpg"alt="hello"tittle="world"width="500" height="1000"/>
    <h4>border 给图像设定边框</h4>
    <img src="img.jpg"alt="hello"tittle="world"width="500" height="1000" border="15"/>
</body>
</html>

13.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <! --我向想喝咖啡 -->
    <!-- ctrl+ /  -->
    <! --注释标签-->
    空格
    讲&nbsp;&nbsp;&nbsp;究
    &lt;p &gt;
</body>
</html>

14.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>圣诞节的那些事</h1>
    1.<a href="#sd">圣诞节是怎样由来的。</a><br \>
    2.圣诞老人的由来。<br \>
    3.<a href="#sds">圣诞树的由来</a><br \>
    <img src="D:\\NEWN\\zuob.gif">
    <h2 id="sd">圣诞是怎么来的</h2>
    <p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，
        1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。
        可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日
        到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，
        人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日
        圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p>
    <img src="D:\\NEWN\\hehe.gif">
    <h2 id="sds">圣诞树的由来</h2>
    <p> 圣诞树，是指用灯烛和装饰品把枞树或洋松装点起来的常青树。
        作为是圣诞节重要的组成元素之一，近代圣诞树起源于德国，
        后来逐步在世界范围内流行起来，成为圣诞节庆祝中最有名的传统之一。</p>
        <img src="D:\\NEWN\\sds.jpg">
    <h2>圣诞老人的由来。</h2>
    <p>圣诞节少不了<a href="md1.html">圣诞老人</a>啦</p>
    <p>更多内容可以<a href="http://www.baidu.com" target="_blank">百度一下</a></p>
</body>
</html>

15.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>今日搜索热词</h1>
    <hr>
    <h2>1、阿卡贝拉</h2>
    <p>音频实例：<a href="./07-1音频标签.html">音乐</a></p>
    <h2>2、翻唱</h2>
    <p>视频实例：<a href="./07-2视频标签.html">jcly</a></p>
</body>
</html>

16.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr><td>姓名</td><td>性别</td><td>年龄</td> </tr>
        <tr><td>刘德华</td><td>男</td><td>56</td></tr>   
        <tr><td>张学友</td><td>男</td><td>58</td></tr>
        <tr><td>郭富城</td><td>男</td><td>51</td></tr>
        <tr> <td>黎明</td><td>男</td><td>57</td></tr>
    </table>
</body>
</html>

17.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--表格属性-->
    <!--这些属性要写到表格标签table 里面去-->
    <!-- align left,center,right 规定表格相对周围元素的对齐方式-->
    <!--border 1或"" 规定表格单元是否拥有边框，默认为"",表示没有边框-->
    <!--cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素-->
    <!--cellspacing 像素值 规定单元格之间的空白，默认2像素-->
    <!--width 像素值或百分比 规定表格的宽度-->
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250"-->
        <tr><th>姓名</th><th>性别</th><th>年龄</th> </tr>
        <tr><td>刘德华</td><td>男</td><td>56</td></tr>   
        <tr><td>张学友</td><td>男</td><td>58</td></tr>
        <tr><td>郭富城</td><td>男</td><td>51</td></tr>
        <tr> <td>黎明</td><td>男</td><td>57</td></tr>
</body>
</html>

18.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="www.baidu.com" target="_blank"></a>
    <table align="left" width="500" height="249" border="1" cellspacing="0">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="D:\\NEWN\\xxjt.png"></td> 
            <td>456</td>
            <td>123</td>
            <td><a href="http://www.baidu.com">贴吧</a> <a href="md1.html">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="D:\\NEWN\\xxjt.png"></td> 
            <td>124</td>
            <td>1675432</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
         
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="D:\\NEWN\\xsjt.png"></td> 
            <td>212</td>
            <td>7654</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>东游记</td>
            <td><img src="D:\\NEWN\\xsjt.png"></td> 
            <td>23</td>
            <td>75645</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td><img src="D:\\NEWN\\xxjt.png"></td> 
            <td>121</td>
            <td>7676</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td><img src="D:\\NEWN\\xsjt.png"></td> 
            <td>576576</td>
            <td>1231421</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td><img src="D:\\NEWN\\xsjt.png"></td> 
            <td>234</td>
            <td>7686</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
    </table>
</body>
</html>

19.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 跨行合并:rowspan="合并单元格的个数"-->
    <!-- 跨列合并:colspan="合并单元格的个数"-->
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td collspan="2" ></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

20.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <!--表格是用来显示数据的，那么列表就是用来布局的-->
    <!--列表最大的特点就是整齐，整洁，有序，它作为布局会更加自由和方便-->
    <!--根据使用情景不同，列表可分为三大类：无序列表，有序列表和自定义列表-->
    <h4>您喜欢的食物？</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲇鱼馒头</li>
    </ul>
</body>
</html>

21.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义-->
    <!--在html标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项-->
    <h4>粉丝排行榜</h4>
    <ol>
        <li>刘德华10000</li>
        <li>刘若英1000</li>
        <li>pink老师100</li>
    </ol>
</body>
</html>

22.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--在html标签中，<dl>标签用于描述列表（或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用-->
        <dl>
            <dt>关注我们</dt>
            <dd>新浪微博</dd>
            <dd>官方微信</dd>
            <dd>联系我们</dd>
        </dl>
</body>
</html>

23.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--在input标签中，包含一个type属性，根据不同的type属性值，输入字段拥有多种形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，
        按钮等）-->
    <!--<input />标签为单标签-->
    <!--type属性设置不同的属性值用来指定不同的控件类型-->
    <!--type属性的属性值及其描述如下-->
    <!--button 定义可点击按钮（多数情况下，用于通过javascript启动脚本）-->
    <!--checkbox 定义复选框-->
    <!--file 定义输入字段和"浏览"按钮，供文件上传-->
    <!--hidden 定义隐藏的输入字段-->
    <!--image 定义图像形式的提交按钮-->
    <!--password 定义密码字段，该字符中的字符被掩码-->
    <!--radio 定义单选按钮-->
    <!--reset 定义 重置按钮 重置按钮会清除表单中的所有数据-->
    <!--submit 定义提交按钮。提交按钮会把表单数据发送到服务器-->
    <!--text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字节-->
    <form>
        用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"><br \>
        用户名:<input type="text" placeholder="请输入用户名" maxlength="6"><br \>
        密码: <input type="password" name="pwd"><br>
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现单选1<br> -->
        name 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中
        <!-- 单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->
        性别:男<input type="radio" name="sex" value="男">女 <input type="radio" name="sex" value="女" checked="checked"><br>
        爱好:吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆<input type="checkbox"><br>
        submit 提交按钮。点击之后提交数据给后端服务器
        <input type="submit" value="免费注册"><br>
        reset 重置按钮。点击按钮后恢复表单默认值
        <input type="reset"><br>
        <!--普通按钮-->
        <input type="button" value="获取短信验证码"><br>
        <!--文件域，上传文件-->
        上传头像：<input type="file"><br>
        <!-- ctrl+/ 快速注释 -->
        上传多个文件：<input type="file" multiple><br>
    </form>
</body>
</html>

24.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>我是按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮，无其他功能</button>
</body>
</html>

25.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="text">用户名:</label><input type="text" id="text">
    <input type="radio" id="nan"> <label for="nan">男</label>
</body>
</html>

26.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        籍贯：
        <select>
            <option>山东</option>
            <option>广东</option>
            <option>广西</option>
            <option>上海</option>
            <option selected="selected">江西</option>
        </select>
    </form>
    
</body>
</html>

27.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        今日反馈：<textarea cols="50" rows="5"> 
        </textarea>
    </form>
    
</body>
</html>

28.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱。</h4>
    <table aline="center" width="500" border="1">
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td><input type="radio" name="sex" id="nan"> <label for="nan"><img src="D:\\NEWN\\xsjt.png">男</label>
                <input type="radio" name="sex" id="nv"><label for="nv"><img src="D:\\NEWN\\xxjt.png">女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日：</td>
            <td>
                <select name="" id="">
                    <option>--请选择年份--</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option>
                    <option>2005</option><option>2006</option><option>2007</option><option>2008</option><option>2009</option>
                </select>
                <select name="" id="">
                    <option>--请选择月份--</option><option>1月</option><option>2月</option><option>3月</option><option>4月</option>
                    <option>5月</option><option>6月</option><option>7月</option><option>8月</option><option>9月</option>
                    <option>10月</option><option>11月</option><option>12月</option>
                </select>
                <select name="" id="">
                    <option>--请选择日--</option><option>1日</option><option>2日</option><option>3日</option><option>4日</option>
                    <option>5日</option><option>6日</option><option>7日</option><option>8日</option><option>9日</option>
                    <option>10日</option><option>11日</option><option>12日</option><option>13日</option><option>14日</option>
                    <option>15日</option><option>16日</option><option>17日</option><option>18日</option><option>19日</option>
                    <option>20日</option><option>21日</option><option>22日</option><option>23日</option><option>24日</option>
                    <option>25日</option><option>26日</option><option>27日</option><option>28日</option><option>29日</option>
                    <option>30日</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="江西"></td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="jiehun" checked="checked">未婚  
                <input type="radio" name="jiehun">已婚  
                <input type="radio" name="jiehun">离婚 
            </td>
        </tr>
        <tr>
            <td>学历:</td>
            <td><input type="text" value="初中"></td>
        </tr>
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love">妩媚的 
                <input type="checkbox" name="love">可爱的
                <input type="checkbox" name="love">小鲜肉
                <input type="checkbox" name="love">老辣肉
            </td>
        </tr>
        <tr>
            <td>自我介绍：</td>
        <td><textarea>

            </textarea>
        </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="提交注册">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox"checked="checked">我同意注册条款和会员加入标准
            </td>
        </tr>
        <!-- 换行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18岁</li>
                    <li>单身</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>
煎饼果子小鸢
关注
  • 21
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML+Javascript+CSS测试题
06-08
HTML+Javascript+CSS测试题
HTML+CSS项目案例
qq_52108058的博客
11-30 3322
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
HTML+CSS+JS网页设计
m0_73738929的博客
04-15 3万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 34万+
制作一个简单的HTML个人网页
HTML+CSS基础综合案例
qq_53847322的博客
07-04 2953
1.尚合 效果图​​​​​​HTML代码如下： css代码如下： 成果图： 2.腾讯云 效果图html代码如下： css代码如下： 成果图如下：
30个HTML+CSS前端开发案例（完结篇）
终成大师的博客
02-14 1万+
30个HTML+CSS前端开发案例（完结篇）
HTML+CSS+JS 简单应用小案例
Emperor10的博客
02-22 2921
猜数字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
html5+Css总结(附带案例)
ThegreatHaige的博客
09-10 3229
HtmL5 和CSS一些常见总结 前端(通常指的是用户能够看到)网页通常是由三部分组成： 1.html:也是前端网页基本框架结构，类似于骨架一样的作用 2.CSS: 也叫层叠样式表，就是为美化界面而存在 3.Javascript: 使页面具有动态的效果(包括与用户的一个交互) 一&二.Html HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。 所谓超文本Hypertext，是指连接单个或
30个HTML+CSS前端开发案例（四）
终成大师的博客
02-10 3757
30个HTML+CSS前端开发案例（四）
html css js 完整案例,html+css+js实例
weixin_31602525的博客
06-04 2590
【实例简介】用html+css+js做的一个简单小网页，可以作为初学者的参考资料。【实例截图】【核心代码】travel└── travel├── css.css├── images│ ├── 0.PNG│ ├── 100.jpg│ ├── 101.jpg│ ├── 102.jpg│ ├── 103.jpg│ ├── 104.png│ ├── 105.jpg│ ├──...
个人网页html+css案例.rar
04-07
简单的个人主页网页，里面有完整的Html+css代码，有完整的素材图片，非常适合教学演示使用，也适合做学生考试的素材，适合初学者。
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
HTML5+CSS3网页设计模板(30例)zip
03-15
HTML5+CSS3网页设计模板(30例),可供学习设计参考。
HTML + CSS 基本案例
08-22
HTML + CSS 基本案例
原生html table固定表头,后台返回一个数组对象有多个值,根据表头需要的字段显
weixin_39277183的博客
05-16 164
这段代码首先定义了一个表格，并在JavaScript中获取了它的元素。然后，它遍历了一个示例数据数组，为每个对象创建一个表格行，并且只根据表头需要的字段（id、name、age）插入数据。这样，即使数组中的对象有多个值，表格也只会显示所需的字段。原生html要实现固定表头并根据需要显示的字段渲染后端返回的数组对象，就需要使用JavaScript来渲染DOM。
/audio~ 前端音浪来袭：HTML音频&视频标签的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 671
想要音频自动播放、循环播放，甚至静默加载？小菜一碟：< audio controls autoplay loop preload = " auto " > < source src = " ambient.mp3 " type = " audio/mpeg " > 准备好享受氛围音乐了吗？
【SpringMVC】_SpringMVC项目返回HTML与JSON
最新发布
m0_63299495的博客
05-22 478
本专栏已介绍：返回静态页面：【Spring MVC】_SpringMVC项目返回静态页面_mvc 返回当前页面-CSDN博客返回数据：【Spring MVC】_SpringMVC项目返回数据-CSDN博客本篇介绍返回HTML与返回JSON；
前端基础入门三大核心之HTML篇：无序列表的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 730
在HTML中，无序列表是一种用于展示一系列条目，且这些条目的顺序无关紧要的列表结构。它通过（unordered list）标签来定义，而每个具体的条目则由（list item）标签包裹。为了美化列表，可以使用CSS来定制样式。例如，改变列表项的符号：/* 可以是disc, circle, square等 */ } < ul > < li > 项目一 < li > 项目二 < li > 项目三 ul。
html+css页面设计案例
11-12
以下是两个HTML+CSS页面设计案例： 1. 学生考试期末作业的水平 这个案例是给学生定制的，符合学生考试期末作业的水平。它采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力，顶部导航及底部区域背景色为100%宽度。有的页面还包含了一些JS效果，例如轮播图等。 2. HTML+CSS课程设计 这个案例是一套完整的HTML+CSS课程设计，包括一个主页以及六个子页面。它的制作精美良好，应付期末的网页课设或者期末大作业肯定是不成问题的。这个案例可以作为学习HTML+CSS的参考，可以从中学习到如何进行页面布局、如何使用CSS样式等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

煎饼果子小鸢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值