导航
- HTML标签
- CSS：页面美化和布局控制概述
- CSS的使用：–>实际上就是说的“CSS与HTML结合的方式”
- 选择器： --> 筛选具有相似特征的元素
一. HTML标签：
1.1 表单标签
- 概念：用于采集用户输入的数据的。用于和服务器进行交互。
- 使用的标签：from
- 用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。并没有任何样子，只是定义一个范围，在提交之后，该范围标签内的数据会被提交。
1.2 表单标签内的属性：
- action:指定提交数据的地址
- method：指定提交数据的方式。
1.3 提交方式： ->> 方式一共有七种，有两种是最重要的提交方式。分别是get和post
- get：
- 请求的参数会在地址栏中显示
- 请求参数大小是有限制的。
- 不太安全。(因为会显示在地址栏中）
- post：
- 请求的参数不会再地址栏中显示。会被封装在请求体中。
- 请求的参数大小没有限制（理论上）
- 较为安全。
1.4 注意:
- 表单项中的数据要想被提交：必须指定其name属性。
- 用户名：
- --> 提交按钮。
- form表单就是用于向服务器提交数据。
- 如果要提交的数据：指定提交的url，指定提交的方式
- 要被提交的内容必须在from包裹中，input标签要指定自己的name属性。
1.5 表单项标签：
- input：可以通过type属性值，改变元素展示的样式。
- type属性：
- text：文本输入框，默认值
- password：密码输入框（密码框与文本框的区别在于输入的字符会被隐藏密文“*”显示）。
- radio： 单选框
- 注意：
1.要想让多个单选框实现单选的效果，name的属性值必须是一样的。
2.一般会给每一个单选框提供value值。
3.checked属性，可以指定默认值。
4.如果想默认被选中，加一个checked。
1.6 复选框：
- checkbox：
<input type="checkbox" name="hobby" value="shoping">逛街
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="c">c - label：指定输入项的文字描述信息
- 注意：
- lable的for属性一般会和 input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
- checked ：默认值。
- 按钮： submit： 提交表单
- button： 常和javascript使用。
- image：图片提交按钮
- src 属性指定图片的路径
- select：下拉列表
<option>指定列表项 eg: <option>--请选择--</option> - textarea：文本域:
- cols:每行字符数
- rows：行数
- placeholder： 提示信息
二. CSS：页面美化和布局控制概述
2.1 概念：
1. Cascading Style Sheets 层叠样式表
2. 层叠：多个样式可以作用在同一个html的元素上，同时生效。
2.2 好处：
1.功能强大
2.将内容展示和样式控制分离。
3.降低耦合度，解耦。
4. 让分工协作更容易。
5. 提高开发效率
三. CSS的使用：–>实际上就是说的“CSS与HTML结合的方式”
3.1 内联样式： 在标签内使用style属性指定css代码。
- 如：
<div style="color:red;">hello css</div>
3.2 外联样式：在head标签内，定义style标签，style标签的代码内容就是css代码。
-
<head> <style><div> color : red <style></div> </head>
3.3 外部样式：
- 定义css资源文件。
- 在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值唯一。）
- 语法： #id属性值{}
- 元素选择器：选择具有相同标签名称的元素 如div标签，p标签
- 语法： 标签名称{}
- 注意： id选择器优先级高于元素选择器。
- 类选择器：选择具有相同的class属性值的元素。 标签内class="#"
- 语法：.class属性值{} 定义在标签内给标签class命名
（多个标签可以同时作用于同一个元素）
优先级： id选择器> 类选择器> 元素选择器 - 注意：在书写中id原则器的#是要加上的，class前有一个“.”；
- 语法：.class属性值{} 定义在标签内给标签class命名
4.2 扩展选择器
- 通用选择器：选择所有选择器：
- 语法 ：*{}
- 并集选择器：
- 选择器1，选择器2{}
- 后代选择器：筛选选择器1元素下的选择器2元素（所有的后代都生效）
- 语法：父选择器1， 子选择器2{}
- 子选择器：筛选选择器1的2选择器（只选择它的儿子，孙子不生效，就是说只能影响2同行同级别的同选择器）
- 语法：选择器1>选择器2 {}
- 属性选择器：
- 语法： 元素名称[属性名=‘属性值’]{}
如：input[type=‘text’]{}
- 语法： 元素名称[属性名=‘属性值’]{}
- 伪类选择器：选择一些元素具有的状态
- 语法 元素：状态{}
- 如：
link：初始
hover：悬浮
active：点击
visited：访问过
4.3 属性：
- 字体、文本
- font-size：字体大小
- color：文本颜色
- text-align:对齐方式
- line-height：行高
- 背景：
- backbround： 设置背景，复合属性
- 如：background：url（“img/logo.jpg”）no-repeat center;
（no-repeat（不重复））
- 边框：
- border：设置边框，复合属性。
- border-left-color：边框下面的颜色
- border：1px（边框长度）solid（实线）red;
- 尺寸：
- width：宽度
- height：高度
- 盒子模型: 控制布局
- margin：外边距 使用内部的盒子控制边距
- auto：水平居中
- padding：内边距 使用外部的盒子控制与内部的盒子的边距
- 默认情况下内边距会影响整个盒子的大小。
- box-sizing：border-box ; 可以设置盒子的属性，让width和height就是默认大小
- float:浮动
- left 左浮动
- right 右浮动
4.4 注意：
-
placehorder ：默认提示
-
border-radius：设置边框圆角 如：border-radius：5px;
-
padding-left:10px; 设置内边距10px
-
让超链接没有下划线：
<a href="#" style="text-decoration: none">立即登录</a>
扫一扫
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
