HTML5混编学习笔记：表单（form）、响应式web设计（RWD）

最新推荐文章于 2024-09-11 20:12:18 发布

烟花柳巷红尘客

最新推荐文章于 2024-09-11 20:12:18 发布

阅读量2.4k

点赞数 2

分类专栏： HTML5&OC 文章标签：响应式web设计表单

本文链接：https://blog.csdn.net/u010518821/article/details/51863719

版权

这篇博客探讨了HTML5中的表单组件和响应式Web设计。介绍了表单的组成部分，如文本框、密码框、复选框等，以及表单属性GET/POST和URL。同时，文章讲解了响应式Web设计的概念，强调了CSS3中的媒体查询在根据设备特性调整样式方面的重要性。提供了示例代码和相关学习资源。

摘要由CSDN通过智能技术生成

新内容

HTML/CSS支持五种字体系列(font family)

Serif
Sans-serif
Monospace
Cursive
Fantasy

一般将家族内成员的字体写在前面, 将字体家族的名字写在后面

例如：

/*修改标题的颜色、大小、字体*/
h1, h2 {
    color: navy;
    /* 1em=16px */
    font: 1.375em "Arial Black", sans-serif;
}

表单

HTML的表单form三个组成部分

表单元素: 文本框/密码框/text/checkBox/下拉菜单….

表单提交按钮

表单的属性: GET/POST; URL(远程)

表单涉及的常用标签
form; label; input(type); fieldset(把一些有关联的input组成一个group)

form属性解释:

a. method: HTTP请求的方法
b. action: 远程请求的路径
input属性解释:

a. type: 指定添加的表单类型(text/password/submit…)
b. placeholder: 提示用户的文本
c. required: 是否需要用户必须输入

样例: 使用HTML和CSS模拟注册页面

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现简单的表单</title>
    <link rel="stylesheet" type="text/css" href="day03_form.css">
</head>
<body>
    <div>
        <h1>Create a New Account</h1>
        <!-- 表单 -->
        <!-- 设置请求的URL，方法：GET/POST -->
        <form method="get" action="">
            <fieldset>
                <h2>ACCOUNT</h2>
                <ul>
                    <li>
                    <!-- label的for属性的值必须和input的name值一样 -->
                        <label for="yourName">yourName:</label>
                        <input type="text" name="yourName" placeholder="Enter Your Name">
                    </li>
                    <li>
                        <label for="email">Email:</label>