【html知识点】

沙粒。

已于 2022-03-25 18:27:14 修改

阅读量325

点赞数

文章标签： html css

于 2022-03-25 17:31:43 首次发布

本文链接：https://blog.csdn.net/weixin_43811708/article/details/123741188

版权

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA44KN6ZKi55C05rKh5pyJ5LqG5b-D44G0,size_20,color_FFFFFF,t_70,g_se,x_16

background-color ：设置元素的背景颜色

常用的值

color_name 规定颜色值为颜色名称的背景颜色（比如 red）
hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent 默认。背景颜色为透明。

background-image ：为元素设置背景图像

常用的值

url(‘URL’) 指向图像的路径。
none 默认值。不显示背景图像。

background-repeat：设置是否或如何重复背景图像

常用的值

repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。

CSS显示隐藏

display:

none：隐藏该元素并且该元素所占的空间也不存在了。(文档结构里移除了)
block; 显示元素
适合不频繁鼠标移入鼠标点击触发时

visibility:

hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。（还在文档结构里只不过透明度为0）
visible 显示元素
适合频繁显示和隐藏

CSS图片

清除图片下间隙

原因：图片默认与文本的基线对齐

解决方法一：将图片显示为块

img{display:block;}

解决方法二：改变图片的对齐方式，

img{vertical-align:不为baseline}

图片居中

方法1：父元素{text-align:center}

方法2：img {display:block;margin:0 auto;}

CSS 浮动

浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】

浮动属性

float
- left 左浮动
- right 右浮动
- float:none 不浮动(默认值)

浮动的基本特性

特性：

1.找父盒子左右边界遇到浮动元素or行内类型元素立即停止浮动

2.浮动打破标准流状态，形成浮动流

3.浮动元素提升层次压盖标准流元素但是不压盖文本流

4.浮动影响单向向下传递

5.任何类型的元素只要添加浮动属性就不用区分元素类型，变成了并排的块可以设置任何盒模型属性

浮动的问题（为什么要清浮动）

子元素浮动导致父元素高度塌陷(height为0)（本质原因: 浏览器不计算浮动元素高度）
影响之后元素的布局

清浮动的方法

解决问题即清除动的方法

应用场景

通常作为定位父级配合绝对定位使用

position:absolute绝对定位

没有定位父级时相对于html进行定位，有定位父级时相对于最近的定位父级进行定位

方法一：父元素固定高度法
描述：给浮动元素的父元素固定高度
缺点：不够灵活
方法二：父元素overflow方法
- 描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现
- overflow:hidden/scroll/auto 触发BFC盒子的形成，只要是BFC盒子那么它内部的浮动子元素也会参与高度计算
- 缺点：可能会隐藏内容或触发不需要的滚动条
方法三：额外标签法
- 描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式clear:both;
  - clear属性说明
    - 作用：清除浮动
    - 取值
      - left both right
      - 提示通常使用both,
    清除浮动影响的是只能块类型！！
  - 缺点：代码冗余，影响代码可读性
伪元素:after
- 描述：给浮动标签的父标签添加
```
.clearfix::after{
     content:"";
     display:block;
     clear:both;
}
写到浮动子元素的父盒子身上
```
- 优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用
- ie8-不支持双冒号用单冒号不考虑兼容性问题那就写双冒号
伪元素

伪元素作用：用css代码创造元素

语法如下:
```
 通过伪元素创造两个元素 插入到box盒子的内部 

 伪元素都是行内类型！！！
        
        E::after { 创造一个元素插入到E元素的所有内容之后

            content:"";//写伪元素文本


        }
        E::before {创造一个元素插入到E元素的所有内容之前
           content:"";
        }
           
      
```
== 注意：==

1. 一个元素只能有两个伪元素 ::after ::before

2. 伪元素必须要写content属性

3. 可以写:: 也可以写:

: 针对低版本浏览器(ie8及其以下)

:: 针对是高版本的浏览器

==适用场合：与数据没有太大关联起到修饰作用的小盒子！！==

CSS 定位

定位的作用

普通文档流中块元素垂直排列，行内元素水平排列。浮动可以实现多个块级盒子在一行无缝排列显示定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或者固定在屏幕中的某个位置）

position:relative相对对定位
相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。它原本所占的空间不会改变。
基础特性
不脱离文档流
提升元素层级
不定义偏移量时对元素基本没有影响

基础特性脱离文档流

提升元素层级

通常配合绝对定位使用（父相子绝）结合实际案例，如

应用场景：

相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏

position:static静态定位

表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

基础特性

常用于重置定位属性
静态定位的元素不会受到 top, bottom, left, right影响。

BFC

BFC是块级格式化上下文。它是一个独立的渲染区域，这个盒子内部不影响外部，外部不影响内部，这个盒子是密闭的独立的区域

生成BFC的条件

浮动元素和绝对定位元素，非块级盒子的块级容器，以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC，简单来说就是:BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

BFC渲染规则（特性）

内部的Box会在垂直方向，一个接一个地放置 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷)
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
BFC的区域不会与浮动区域重叠。
计算BFC盒子的高度时，它内部的浮动子元素也会参与高度计算

BFC解决的问题

清除浮动
解决外边距塌陷
避免文字环绕
自适应两栏布局

表单

表单元素标签

input标签

概述：<input> 标签是最重要的表单元素。 type属性取值不同，可以展示出不同的表单形式
作用：用来定义不同种类的输入控件
语法：<input type="类型">
常用类型9种
- type="text"
  - 作用：用于文本输入的单行输入字段
- type=”password”
  - 作用：定义密码字段。
  - 注意：该字段中的字符被掩码（显示为星号或实心圆）
- type=”radio”
  - 作用：定义单选按钮，允许用户在有限数量的选项中选择其中之一（需要指定单选按钮组）
- type=”checkbox”
  - 作用：定义复选框，允许用户在有限数量的选项中选择零个或多个选项
- type=”button“
  - 作用：定义普通按钮
  - 注意：Value属性定义按钮显示的文本
- type=”submit”
  - 作用：定义用于向表单处理程序提交表单的按钮
  - 注意：省略了提交按钮的 value 属性，该按钮将显示默认文本”提交”（不同浏览器表现不同）
- type="reset"
  - 作用：定义重置按钮，将表单元素的value属性值重置为它最初的默认状态
  - 注意：省略了提交按钮的 value 属性，该按钮将显示默认文本”重置”（不同浏览器表现不同）
- type="image"
  - 作用：定义图像形式的提交按钮。
  - 属性
    - src=""：指定图片地址
    - alt=""：指定替换文本
    - 注意：src 属性和alt 属性必须与 <input type="image"> 结合使用
- type="file"
  - 作用：用于文件上传

textarea标签

作用：定义多行输入字段（文本域）
语法：<textarea>初始值</texarea>
注意：不能够使用value属性规定它的初始值，初始值在开始和结束标签之间设置

select标签

概述：select标签用于定义下拉列表，下拉列表种通过option标签定义选项
语法：
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">天津</option>
</select>

表单元素属性

name属性
- 作用:定义表单元素的名称，用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据
- 注意：name属性是必须的，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
value属性
- 作用：规定输入字段的初始值和修改按钮上的文字内容
readonly属性
- 作用：规定输入字段为只读（不能修改）
disabled 属性
- 作用：规定输入字段是禁用的，被禁用的表单元素不能编辑也不能被提交
maxlength属性
- 作用：maxlength 属性，规定输入字段允许的最大长度
selected 属性
- 作用：规定<select>的选项<option>在页面加载时预先选定该选项。
size属性
- 作用：规定下拉列表中可见选项的数目

表单元素标注

作用：为 input 元素定义标注（标记）通过<label> 标签的 for 属性值与相关元素的 id 值相同，绑定表单元素
语法：<label for=""></label>
效果描述：当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

表单区域

form标签

语法：<form></form>
作用：定义 HTML 表单域，是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明：比如最为常见的交互操作，注册会员、跟帖留言或者文章发布等
注意：form表单实现上述操作是最为常见方式之一，也可以使用其他方式，比如ajax等

form的属性

action属性
- 作用：表单的动作属性，定义了目的文件的文件名由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。可以是绝对路径或相对路径也可以是接收数数据的email邮箱地址
- 注意：如果省略 action 属性，则 action 会被设置为当前页面。
- 代码演示
method属性
- 作用：规定发送表单数据的 HTTP 方法
- 取值：get(默认)/post
- get 方法：将表单中数据的按照 variable=value 的形式，添加到 action 所指向的【 URL 后面，并且两者使用“?”连接】，而各个变量之间使用“&”连接
- post方法：将表单中的【数据放在 form 的数据体】中，按照变量和值相对应的方式，传递到 action 所指向 URL。
- 代码演示
- get 和 post 区别
  - 用途：get 从指定的资源请求数据,是用来从服务器上【获得数据】，而 POST - 向指定的资源提交要被处理的数据,是用来向服务器【上传递数据】
  - 安全性：【get 是不安全的】，因为【规定发送表单数据的 HTTP 方法（get 或 post）：】，一些系统内部消息将会一同显示在用户面前。【post 的所有操作对用户来说都是不可见的】
  - 数据量：【get 传输的数据量小】，这主要是因为受 URL 长度限制；而 post 可以传输大量的数据，所以上传文件只能使用 post（当然还有一个原因，将在后面的提到）。

沙粒。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【html知识点】

background-color ：设置元素的背景颜色常用的值 color_name 规定颜色值为颜色名称的背景颜色（比如 red） hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 transparent 默认。背景颜色为透明。 background-image ：为元素设置背景图像常用的值 url(‘...
复制链接

扫一扫