揭秘：HTML 实现文字动画、列表、表格、表单与图形设计全攻略

以下是根据你需求生成的完整 HTML 代码： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页综合示例</title> <style> /* 一、文字和动画样式 */ .scrolling-text { color: green; font-size: 24px; font-family: 楷体; font-weight: bold; } .blinking-text { color: purple; font-size: 20px; font-family: 黑体; animation: blink 1s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* 三、表格样式 */ table { font-family: 宋体; } /* 四、表单样式 */ form { margin-top: 20px; } /* 五、图形设计样式 */ .circle { width: 100px; height: 100px; background-color: blue; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; } .rectangle { width: 200px; height: 100px; background-color: yellow; display: flex; justify-content: center; align-items: center; } </style> </head> <body>  <marquee class="scrolling-text">山东旅游职业学院</marquee> <p class="blinking-text">欢迎参加网页制作考试</p>  <ol> <li>四季顺序：</li> <li>A. 春</li> <li>B. 夏</li> <li>C. 秋</li> <li>D. 冬</li> </ol> <ul> <li>编程语言</li> <li>Python</li> <li>Java</li> <li>C++</li> <li>Ruby</li> <li>Swift</li> </ul>  <table border="1"> <tr> <th style="width: 100px;">姓名</th> <th style="width: 80px;">年龄</th> <th style="width: 60px;">性别</th> <th style="width: 120px;">职业</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> <td>工程师</td> </tr> </table> <table border="1"> <tr style="background-color: lightgray;"> <th style="font-family: 黑体; background-color: lightblue;">书名</th> <th style="font-family: 隶书; background-color: lightgreen;">作者</th> <th style="font-family: 仿宋; background-color: lightyellow;">出版年份</th> <th style="font-family: 楷书; background-color: lightpink;">价格</th> </tr> <tr> <td>《HTML 入门》</td> <td>李四</td> <td>2023</td> <td>50</td> </tr> </table>  <form> <label for="email">电子邮箱：</label> <input type="email" id="email" name="email"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br> <label>性别：</label> <input type="radio" id="male" name="gender" value="男"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="女" checked> <label for="female">女</label><br> <label for="grade">年级：</label> <select id="grade" name="grade" size="3"> <option value="大一">大一</option> <option value="大二">大二</option> <option value="大三">大三</option> </select><br> <label for="feedback">意见反馈：</label><br> <textarea id="feedback" name="feedback" rows="4" cols="40"></textarea> </form>  <div class="circle">欢迎</div> <div class="rectangle">考试进行中...</div> </body> </html> ``` 额外需要注意的逻辑点 1. 在设计表单时，要注意每个输入框和表单元素的`name`属性，它是表单数据提交时的关键标识，不同元素的`name`不能重复。 2. 对于表格的样式设置，不同浏览器可能对表格边框、颜色等样式的渲染有细微差异，需要进行兼容性测试。 3. 在使用 CSS 动画（如文字闪烁动画）时，要考虑到不同浏览器对动画属性的支持情况，必要时添加浏览器前缀以保证兼容性。 ######[AI写代码神器 | 1423点数解答 | 2025-06-13 09:22:37]

服务商

更多选项

快捷项

自定义