用 JS 语言编写代码实现如图所示的网页效果。要求： （1）输入框有提示内容，获取焦点时清空，进入输入状态。 （2）密码要求有数字大小写字母和一个特殊字符，可对两次输入密码进行 相同性校验。 （3）电话号码与邮箱可进行格式校验，当输入错误时，弹窗提示输入错误。 （4）出生日期输入框可使用日期控件输入。 （5）家庭地址可进行联动选择。 （6）附件上传按钮可用，选择了附件后输入框显示附件名称及文件格式。 （7）点击登录时跳转到登录页面（自定义一个包含用户名、密码输入框与 登录按钮的登陆页面）。

很抱歉，我作为一个语言模型并不具备展示网页的能力。但是，我可以提供一些思路和代码片段供参考。

1. 输入框提示内容：

<input type="text" placeholder="请输入用户名">

2. 密码要求和校验：

<input type="password" placeholder="请输入密码" id="password1">
<input type="password" placeholder="请再次输入密码" id="password2">

<script>
  const password1 = document.querySelector('#password1');
  const password2 = document.querySelector('#password2');
  password1.addEventListener('blur', function() {
    const regex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=]).{8,}$/;
    if (!regex.test(password1.value)) {
      alert('密码必须包含数字、大小写字母和一个特殊字符，并且长度不能少于8位');
      password1.value = '';
    }
  });
  password2.addEventListener('blur', function() {
    if (password1.value !== password2.value) {
      alert('两次输入的密码不一致');
      password2.value = '';
    }
  });
</script>

3. 电话号码和邮箱格式校验：

<input type="tel" placeholder="请输入电话号码" id="phone">
<input type="email" placeholder="请输入邮箱" id="email">

<script>
  const phone = document.querySelector('#phone');
  const email = document.querySelector('#email');
  phone.addEventListener('blur', function() {
    const regex = /^1[3-9]\d{9}$/;
    if (!regex.test(phone.value)) {
      alert('电话号码格式不正确');
      phone.value = '';
    }
  });
  email.addEventListener('blur', function() {
    const regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if (!regex.test(email.value)) {
      alert('邮箱格式不正确');
      email.value = '';
    }
  });
</script>

4. 出生日期控件：

<input type="date" placeholder="请选择出生日期">

5. 联动选择家庭地址：

<select id="province">
  <option value="">请选择省份</option>
  <option value="北京市">北京市</option>
  <option value="上海市">上海市</option>
  <option value="广东省">广东省</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>

<script>
  const province = document.querySelector('#province');
  const city = document.querySelector('#city');
  const cities = {
    '北京市': ['北京市'],
    '上海市': ['上海市'],
    '广东省': ['广州市', '深圳市', '珠海市']
  };
  province.addEventListener('change', function() {
    const selectedProvince = province.value;
    city.innerHTML = '<option value="">请选择城市</option>';
    if (selectedProvince) {
      cities[selectedProvince].forEach(function(cityName) {
        const option = document.createElement('option');
        option.value = cityName;
        option.textContent = cityName;
        city.appendChild(option);
      });
    }
  });
</script>

6. 附件上传按钮：

<input type="file" id="attachment">
<input type="text" placeholder="请上传附件" readonly id="attachmentName">

<script>
  const attachment = document.querySelector('#attachment');
  const attachmentName = document.querySelector('#attachmentName');
  attachment.addEventListener('change', function() {
    const file = attachment.files[0];
    attachmentName.value = file.name + '（' + file.type + '）';
  });
</script>

7. 登录页面跳转：

<a href="login.html">登录</a>

以上代码片段可以作为参考，具体实现还需要根据需求进行调整。