A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

前端day02
1.2  HTML标签, 表单标签
表单:用于采集用户的数据,用于和服务器交互
使用标签:form
*属性:
    action:指定提交数据的URL
    method:指定提交方式
            两种常用提交方式(总共有7种): get、 post
*get:
     1.请求参数会在地址栏中显示,封装在请求行中
     2.URL的长度(请求参数)是有限制的
     3.不安全
  *post:
     1.请求参数不会再地址栏中显示,会封装在请求体中
    2.请求参数的大小没有限制
    3.安全
*表单项中的数据提交必须指定其name属性
表单项标签:
*input:可以通过type的属性值,改变元素的展示样式
      *type属性:
          *text:文本输入框
          *password:密码输入框
          *radio:单选框
              1.name属性值必须一样,才能达到单选效果。
              2.需要指定value
          *checkbox:复选框
*label:指定输入项的文字描述信息
      label的for属性一般会和input 的id属性值一致
*file:文件选择框
*hidden:隐藏域,用于提交一些信息
*button:普通按钮
*image:图片,src指定图片位置
*date:时间
*email:邮箱
*number:数字
*select:下拉列表
   *子元素:option:指定列表项
*textarea:文本域
    *cols:指定列数
    *rows:默认多少行

CSS
页面美化和布局控制
1.概念: 层叠样式表Cascading Style Sheets
层叠:多个样式可以运用到同一个html的元素上,同时生效
2.优点:
1.功能强大
2.将元素展示(html)和样式的控制分离(css)
Css与HTML结合方式:
1.嵌套样式:
<div style="color: blue"> 传智播客</div>
2.内部样式:
<style>
    div{
        color: chartreuse;
    }
</style>
3.外部样式:
1.定义css资源文件
2.在head标签内,定义link标签,引入外部的资源文件
div{
    color: aqua;
    font-size: 50px;
}

css语法:
*格式:
选择器{
          属性名1:属性值1;
          属性名1:属性值1;
          属性名1:属性值1;
  ...
}
*选择器:筛选具有相似特征的元素
               每一对属性需要使用分号隔开,最后一行属性可以不加
1.基础选择器
     1.id选择器:选择具体的id属性值得元素,建议在一个html页面中,id值唯一
       *语法:#id属性值{ }
     2.元素选择器: 选择具有相同标签名称的元素
*语法:标签名称{ }
  *注意:id选择器的优先级高于元素选择器
      3.类选择器:选择具有相同class属性的元素
    *语法:class属性值{ }
    *注意:类选择器优先级高于元素选择器
2.扩展选择器
      1.选择所有元素:
         *语法: *{ }
      2.并集选择器:
          选择器1,选择器2{ }
      3.子选择器:筛选选择器1元素下的选择器2元素   
          *语法:选择器1 选择器2 { }
      4.父选择器:筛选选择器2父元素选择器1
          *语法:选择器1>选择器2{ }
      5.属性选择器:选择元素名称,属性名=属性的元素
          *语法: 元素名称[ 属性名=‘属性值’]{ }
       6.伪类选择器:选择一些元素具有的状态
          *语法: 元素:状态{ }
如<a>( 超链接):
         link:初始化状态
         visited:被访问过的状态
         active:正在访问的状态
         hover:鼠标悬浮的状态
属性:
1.字体、文本:
    1.font-size: 字体大小
    2.color:字体颜色
    3.text-align:对齐方式
    4.line-height:行高
2.背景:
3.边框:
   border:设置边框,符合属性
         border:1px,solid red;
       * border:设置边框,符合属性
4. 尺寸
       * width:宽度
       * height:高度
5. 盒子模型:控制布局
       * margin:外边距
       * padding:内边距
       * 默认情况下内边距会影响整个盒子的大小
       * box-sizing: border-box:设置盒子的属性,让width和height就是最终盒子的大小










0 个回复

您需要登录后才可以回帖 登录 | 加入黑马