HTML5 + CSS3 基础知识梳理

第一章、初识HTML5 

1、了解HTMLL5优势：跨平台、兼容性、各大浏览器厂商的支持

2、HTML5新增元素以及属性

2.1、H5新增的结构元素：header、nav、section、article、aside、footer

2.2、H5新增网页元素：video（视频）、audio（音频）、canvas（画布）、datalist、time、mark（高亮）、process（进度条）

2.3、H5新增全局属性：contentEditable（是否允许用户编辑内容）、designMode（整个页面是否可编辑）、hidde（是否对元素进行隐藏）、spellcheck（是否对元素进行拼写或语法检查）

3、CSS3高级选择器：

p:first-of-type   // 选择所有属于其父元素的第一个p类型的元素

p:last-of-type  // 选择所有属于其父元素的最后一个p类型的元素

p:first-child   // 选择所有属于其父元素的第一个子元素的p元素

p:last-child   // 选择所有属于其父元素的最后一个子元素的p元素

p:nth-child(n)  // 选择所有属于其父元素的第n个子元素的p元素

p:nth-child(odd)  // 选择所有属于其父元素的第奇数个子元素的p元素

p:nth-child(even)  // 选择所有属于其父元素的第偶数个子元素的p元素

p:before   // 在每个p元素的内容之前插入内容

p:after   // 在每个p元素的内容之后插入内容

第二章、HTML5表单

1、H5新增的input 类型

1.1、H5之前版本支持的input类型

<!-- 文本域 -->
  <input type="text">
  <!-- 单选按钮：要有相同的name值 -->
  <input type="radio">
  <!-- 复选框：要有相同的name值  -->
  <input type="checkbox">
  <!-- 下拉列表 -->
  <select name="address">
    <option value="广州">广州</option>
    <option value="上海">上海</option>
    <option value="北京">北京</option>
  </select>
  <!-- 密码框 -->
  <input type="password">
  <!-- 提交按钮 -->
  <input type="submit">
  <!-- 普通按钮 -->
  <input type="button">
  <!-- 图像按钮 -->
  <input type="image" src="../第二章、HTML5表单/img.jpg">
  <!-- 文件域：用于文件上传 -->
  <input type="file">
  <!-- 重置按钮 -->
  <input type="reset">
  <!-- 隐藏域 -->
  <input type="hidden">

1.2、H5新增的input类型

email：电子邮电地址文本框，提交时表单回自动验证Email值

<input type="email">

url：网页的URL，提交表单时会自动验证URL值

<input type="url">

number：只能录入数字

<!-- value: 规定的默认值  max：最大值  min：最小值   step：每次递增或递减的数值，可以是整数也可以是小数  -->
  <input type="number" value="5" max="10" min="1" step="1">

range：特定范围内的数字选择器，以滑块形式呈现

<!-- value: 规定的默认值  max：最大值  min：最小值   step：每次递增或递减的数值，可以是整数也可以是小数  -->
  <input type="range" value="5" max="10" min="1" step="1">

search：用于搜索引擎的搜索框

<input type="search">

Datepicker：拥有多个可供选取日期的新输入类型，又称日期选择器

 <fieldset>
    <legend>Date picker类型</legend>
    <p>
      Date:
      <input type="date">
    </p>
    <p>
      Moth:
      <input type="month">
    </p>
    <p>
      Week:
      <input type="week">
    </p>
    <p>
      Time:
      <input type="time">
    </p>
    <p>
      DateTime:
      <input type="datetime">
    </p>
    <p>
      DatetimeLoacl:
      <input type="datetime-local">
    </p>
  </fieldset>

2、H5新增的input 属性

autofocus：自动获取焦点

<input type="text" autofocus>

required：必填，即输入不能为空

<input type="text" required>

placeholder：提示，输入数据后消失

<input type="text" placeholder="你好帅啊">

pattern：正则表达式

<input type="tel" placeholder="请输入11位数字" pattern="[0-9]{11}">

第三章、CSS3应用

1、CSS3边框效果

border-radius：设置边框圆角，有1-4个值

<img src="../img/7.png" alt="">

// 一个值
img {
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }

// 2个值
img {
      width: 200px;
      height: 200px;
      border-radius: 10px 50px;
    }

border-image：设置图片边框

box-shadow：设置盒子阴影，一共6个参数:h-shadow水平阴影位置、v-shadow垂直阴影位置、blur模糊距离（可选）、spread阴影的尺寸（