黑马程序员技术交流社区

标题: [石家庄校区]HTML CSS [打印本页]

作者: 13333114253 时间: 2018-12-17 15:39
标题: [石家庄校区]HTML CSS
表单标签
form    :一定给一个name
input
      type(text/password/hidden/checkbox/radio/submit/reset/button/file/image)
button
textarea
select

<form method = "get/post" action = "提交数据的位置">
一个个的表单标签
<input
</form>

表单标签:用于采集用户输入的数据的,用于和服务器的交互
form
action:提交数据的位置,不写的话提交到当前页面
method:指定提交方式俩种  (http:一共七种)
      get:
         1.请求参数会在地址栏中显示,会封装在请求行中(HTTP协议中讲解)
         2.请求参数大小是有限制的
         3.不太安全
      post:
         1.请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议中讲解)
         2.请求参数大小是没有限制的
         3.相对为安全
         4.文件上传请求方式
表单项中的数据要想被提交:必须指定其name属性
***表单项标签
***input:可以通过type属性值,改变元素的展示样式
      type属性:
         **text:文本输入框
            1.palceholder 指定输入框的提示信息,当输入框发生变化,内容会清空
         **password:密码输入框
            1.palceholder 指定输入框的提示信息,当输入框发生变化,内容会清空
         **hidden:用于提交一些信息,隐藏域(页面看不到) 必须有name,value
         **ridio:单选框
            1.要想实现单选框的效果,则多个单选框的name属性值必须一样。
            2.用value当做提交的值,指定其被选中后提交的值
            **3.checked默认选中
         **checkbox:复选框
            1.要想实现单选框的效果,则多个单选框的name属性值必须一样。
            2.用value当做提交的值,指定其被选中后提交的值
            **3.checked默认选中
         reset:重置
         **file:文件选择框  文件/图片上传
         **submit: 提交按钮
            1.提交数据提交到 action指定的位置
         **button:普通按钮
                  一个按钮,配合JS使用
         image: 图片按钮
         //color:取色器
         //date:时间
         //datetime - local:时间有分钟
         //email:邮箱校验
         //number:数字
//label:指定输入项的文字描述信息
      //1.label的for属性一般会和input 的id属性值对应,如果对应了，则点击label区域，会让input输入框获取焦点。

select:下拉列表加上name属性
      <option>列表项加上value值  *** selected默认选中

textarea:文本域   加上name
      cols:指定列数,每一行有多少字符
      rows:指定行数
button: 按钮

CSS类选择器
div盒子模型

css:页面美化和布局控制
1.概念:层叠样式表Cascding Style Sheets
      层叠:多个样式表可以作用在同一个html的元素上,同时生效
2.好处:
      1.功能强大
      2.内容展示和样式控制分离
         降低耦合度
         分工协作更容易
         提高开发效率
3.css的使用:css/html的使用
      1.内联样式:  行内式
            <p style = " color:red;"></p>
         在标签内使用style属性指定css代码
     2.内部样式
         <style>
            选择器{
                  color:red;
            }
         </style>

         在<head>标签内定义<style>标签的标签提内容就是css的代码
   3.外部样式
         <link rel="stylesheet" href="css/a.css">
         1.定义css资源文件
         2.在<head>标签内定义<link>标签,引入外部的资源文件

     行内式: 优先级最高  只能匹配一个标签
      内联式: 作用于本页面
      外链式: 应用到的所有页面
注意:
         1,2,3种方式,css作用范围越来越大
         1不常用,2,3常用

css语法格式:
选择器{
      属性名:值;
      属性名:值;
}

***选择器:筛选具有相似特征的元素
      基础选择器
         1.*id选择器:选择具体的ID属性值的元素建议在一个html页面中id唯一
            语法: #id名称{}
         2.*类选择器: 选择具有相同的class属性值的元素
            语法: .class名称{}
            注: 类选择器高于元素选择器
         3.*元素选择器 :选择具有相同标签的元素
            语法: 元素名称{}
            注: id选择器高于元素选择器
         4.*并列选择器
            选择器1,选择器2{}
      扩展的选择器
         1.全部选择器
            语法： *{}
         2.并集选择器
            语法：选择器1,选择器2{}
         3.*后代选择器 :筛选选择器1下的选择器2
            语法：选择器1 选择器2{}
         4.*子元素选择器筛选选择器2下的选择器1  尽量不用div
            语法：选择器1 > 选择器2{}
         5.*属性选择器:选择元素名称,属性名=属性值的元素
            语法：元素名称[属性名="属性值"]{}
                     元素名称[属性名]{}
         6.伪选择器:选择一些元素具有的状态
            语法：元素:状态{}
                  例:<a>
                     状态：
                     link：初始化的状态
                     visited：被访问过的状态
                     active：正在访问状态
                     hover：鼠标悬浮状态
css属性
      1.字体文本
         *font-size:字体大小
         *color:颜色
         text-align:对齐方式
         line-height:行高
      2.背景
         *background - color:背景  复合属性
         background:url("图片")
      3.边框
         *border:边框复合属性
                  相框宽度实线solid 颜色
      4.尺寸
         width:宽度
         height:高度
      5.***盒子模型
          border 边框
         padding 内边距
         margin  外边距 auto
            默认情况下内边距会影响整个盒子的大小 box-sizing: border-box
         ***float:浮动
                  left:左浮动
                  right:右浮动

css的重点.png (66.45 KB, 下载次数: 10)

作者: 一个人一座城0.0 时间: 2018-12-23 10:25
看一看。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2