CSS/HTML/HTML5基本标签及属性——02

HTML基本标签:
 1.表单元素:接收用户在浏览器上输入数据,提交给后台处理页面
  语法:
   <form action="页面提交地址" method="提交方式">
    一堆表单元素
   </form>
   action:后台程序的处理页面
   method:get/post
  表单元素:
    属性: name 名称 value值
  
   文本框:
    属性:
    size maxlength 
    <input type="text">  文本框
    <input type="password"> 密码框
    ---------------H5----------------
    <input type="email">  邮箱
    <input type="url">   网址
    <input type="tel">   电话
    <input type="number" min="1" max="10" step="1">数字
    <input type="range"  min="1" max="10" step="1">范围
    <input type="search">  搜索框
    <input type="color">  颜色框
    <input type="date">  日期
    <input type="month">  月份
    <input type="week">  周
    <input type="time">  时间
   
   按钮:
    属性:
    checked
    单选按钮:
    <input type="radio" value="值" name="一致">
    复选框:
    <input type="checkbox" value="值" >
    提交按钮:
    <input type="submit" value="文字"> 点击之后会自动触发提交事件
    <input type="button" value="文字"> 普通按钮 配合js代码
    <button>按钮</button>
   
   下拉框:
    属性:
    selected
    <select>
     <option value="1">S1</option>
     <option value="2">S2</option>
     <option value="3">Y2</option>
    </select>
   
   文本域:
    <textarea cols="" rows=""></textarea>
    
   上传文件:
    <input type="file">
    
   隐藏域:
    <input type="hidden">
  
  H5属性:
   placeholder  提示文字
   autofocus    自动获得焦点
   
 2.布局标签:
  表格布局   DIV+CSS(弹性盒子/百分比)  语义化DIV
  ①表格标签
  <table>
   <tr></tr>  行
   <th></th> 加粗列   <td></td>普通列
  </table>
  跨行 跨列 
  colspan rowspan
 
  ②无意义标签 div  span
  <div></div>
  <span></span>
  
CSS样式设置:
 层叠样式表: 美化元素 动画特效(CSS3) 布局
 1.样式基本写法（属性）:
  样式名称:值;
  样式名称:值;
  样式名称:值;
  color:red;
  font-size:20px
 2.四种样式引入方式:
  ①行内样式 直接把样式写在标签上
   <p style="样式属性设置"></p>
    代码完全没有可以复用性
  
  选择器:选出页面元素
   ID选择器 类选择器 标签选择器
   a:id选择器
   #id名称{
    样式属性设置
   }
   b:类选择器
   .类名称{
    样式属性设置
   }
   c:标签选择器
   标签名称{
    样式属性设置
   }
  
  ②内部样式:
   在head中 写一个
   <style>
    选择器{
     样式属性设置
    }
   </style>
    页面代码太长  不具有多页面的通用性
  
  
  ③外部样式表:
   单独创建一个css结尾的文件.css 
   把选择直接放进去
   <link rel="stylesheet" href="css路径"/>
  
  ④导入样式表:
   单独创建一个css结尾的文件.css 
   把选择直接放进去
   <style>
    @import url("css路径"); //在页面加载完成之后才加载css
   </style>
    
  注意:
   ①写注释！！！！！！！！
   ②命名规范 stu-name stu_name stuName 
   ③样式会存在继承问题  样式 字体相关样式会子元素继承
   ④优先级
    id选择器>类选择器>标签选择器