**网页的骨架和美化_ HTML&CSS [web基础day08] *

导航

  • HTML标签
  • CSS:页面美化和布局控制概述
  • CSS的使用:–>实际上就是说的“CSS与HTML结合的方式”
  • 选择器: --> 筛选具有相似特征的元素

一. HTML标签:

1.1 表单标签

  • 概念:用于采集用户输入的数据的。用于和服务器进行交互。
  • 使用的标签:from
  • 用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围。并没有任何样子,只是定义一个范围,在提交之后,该范围标签内的数据会被提交。

1.2 表单标签内的属性:

  • action:指定提交数据的地址
  • method:指定提交数据的方式。

1.3 提交方式: ->> 方式一共有七种,有两种是最重要的提交方式。分别是get和post

  1. get:
    1. 请求的参数会在地址栏中显示
    2. 请求参数大小是有限制的。
    3. 不太安全。(因为会显示在地址栏中)
  2. post:
    1. 请求的参数不会再地址栏中显示。会被封装在请求体中。
    2. 请求的参数大小没有限制(理论上)
    3. 较为安全。

1.4 注意:

  1. 表单项中的数据要想被提交:必须指定其name属性。
    • 用户名:
    • --> 提交按钮。
  2. form表单就是用于向服务器提交数据。
    • 如果要提交的数据:指定提交的url,指定提交的方式
    • 要被提交的内容必须在from包裹中,input标签要指定自己的name属性。

1.5 表单项标签:

  1. input:可以通过type属性值,改变元素展示的样式。
  2. type属性:
    • text:文本输入框,默认值
    • password:密码输入框(密码框与文本框的区别在于输入的字符会被隐藏密文“*”显示)。
    • radio: 单选框
  3. 注意:
    1.要想让多个单选框实现单选的效果,name的属性值必须是一样的。
    2.一般会给每一个单选框提供value值。
    3.checked属性,可以指定默认值。
    4.如果想默认被选中,加一个checked。

1.6 复选框:

  1. checkbox:
    逛街
    java
    c
  2. label:指定输入项的文字描述信息
  3. 注意:
    1. lable的for属性一般会和 input的id属性值对应。如果对应了,则点击label区域,会让input输入框获取焦点。
    2. checked :默认值。
    3. 按钮: submit: 提交表单
    4. button: 常和javascript使用。
    5. image:图片提交按钮
    6. src 属性指定图片的路径
    7. select:下拉列表
    8. textarea:文本域:
    9. cols:每行字符数
    10. rows:行数
    11. placeholder: 提示信息

二. CSS:页面美化和布局控制概述

2.1 概念:

1. Cascading Style Sheets 层叠样式表
2. 层叠:多个样式可以作用在同一个html的元素上,同时生效。

2.2 好处:

1.功能强大
2.将内容展示和样式控制分离。
3.降低耦合度,解耦。
4. 让分工协作更容易。
5. 提高开发效率

三. CSS的使用:–>实际上就是说的“CSS与HTML结合的方式”

3.1 内联样式: 在标签内使用style属性指定css代码。

  • 如:
    hello css

3.2 外联样式:在head标签内,定义style标签,style标签的代码内容就是css代码。

  • 	<head>
    	<style><div>
    	color : red
    	<style></div>
    	</head>
    

3.3 外部样式:

  1. 定义css资源文件。
  2. 在head标签内,定义link标签,引入外部的资源文件。
    • a.css 文件:
    <head>
    div{
    color:green;
    }
    <link rel="stylesheet" herf ="css/a.css">
    </head>
    <body>
    <div>hello css</div></body>
    

3.4 注意:

  • 内联方式->内部样式->外部样式 css的作用范围越来越大。
  • 1方式不常用,后期常用2,3.
  • 3种格式可以写为:
    <style>
    @import "css/a.css";
    </style>
    
  • 快捷创建: 标签名+tab table+"+"+“tab”

3.5 css 语法:

  • 格式:
    选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    }
  • 选择器:
    筛选具有相似特征的元素。
  • 注意:
    每一对属性需要使用;隔开,最后一对属性可以不加。

四. 选择器: --> 筛选具有相似特征的元素

4.1 基础选择器

  • id选择器:选择具体的id的属性值元素
    • 语法: #id属性值{}
      (建议再一个html中id值唯一。)
  • 元素选择器:选择具有相同标签名称的元素 如div标签,p标签
    • 语法: 标签名称{}
    • 注意: id选择器优先级高于元素选择器。
  • 类选择器:选择具有相同的class属性值的元素。 标签内class="#"
    • 语法:.class属性值{} 定义在标签内给标签class命名
      (多个标签可以同时作用于同一个元素)
      优先级: id选择器> 类选择器> 元素选择器
    • 注意:在书写中id原则器的#是要加上的,class前有一个“.”;

4.2 扩展选择器

  1. 通用选择器:选择所有选择器:
    • 语法 :*{}
  2. 并集选择器:
    • 选择器1,选择器2{}
  3. 后代选择器:筛选选择器1元素下的选择器2元素(所有的后代都生效)
    • 语法:父选择器1, 子选择器2{}
  4. 子选择器:筛选选择器1的2选择器(只选择它的儿子,孙子不生效,就是说只能影响2同行同级别的同选择器)
    • 语法:选择器1>选择器2 {}
  5. 属性选择器:
    • 语法: 元素名称[属性名=‘属性值’]{}
      如:input[type=‘text’]{}
  6. 伪类选择器:选择一些元素具有的状态
    • 语法 元素:状态{}
    • 如:
      link:初始
      hover:悬浮
      active:点击
      visited:访问过

4.3 属性:

  1. 字体、文本
    • font-size:字体大小
    • color:文本颜色
    • text-align:对齐方式
    • line-height:行高
  2. 背景:
    • backbround: 设置背景,复合属性
    • 如:background:url(“img/logo.jpg”)no-repeat center;
      (no-repeat(不重复))
  3. 边框:
    • border:设置边框,复合属性。
    • border-left-color:边框下面的颜色
    • border:1px(边框长度)solid(实线)red;
  4. 尺寸:
    • width:宽度
    • height:高度
  5. 盒子模型: 控制布局
    • margin:外边距 使用内部的盒子控制边距
    • auto:水平居中
    • padding:内边距 使用外部的盒子控制与内部的盒子的边距
    • 默认情况下内边距会影响整个盒子的大小。
    • box-sizing:border-box ; 可以设置盒子的属性,让width和height就是默认大小
    • float:浮动
    • left 左浮动
    • right 右浮动

4.4 注意:

  1. placehorder :默认提示

  2. border-radius:设置边框圆角 如:border-radius:5px;

  3. padding-left:10px; 设置内边距10px

  4. 让超链接没有下划线:立即登录

你可能感兴趣的:(#,WEB核心)