HTML+CSS基础

最新推荐文章于 2024-02-01 15:08:06 发布

吾恶不作

最新推荐文章于 2024-02-01 15:08:06 发布

阅读量935

点赞数

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/weixin_51302229/article/details/118488536

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、HTML骨架

输入！再tab可以生成基本的页面骨架结构

<!DOCTYPE html>//文档类声明
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

语言类型

<html lang="en">//定义语言为英语
<html lang="zh-CN">//定义语言为中文

对于文档显示来说，英文文档可以显示中文，中文文档也可以显示英文

字符集

<head>
  <meta charset="UTF-8"> //是多个字符的合集
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

2、HTML基础语法

标题标签

<h1></h1>~<h6></h6>

段落标签

<p></p>

换行标签

<br/>单标签

加粗标签

<b></b> <strong></strong>

倾斜标签

<em></em> <i></i>

删除线

<del><del> <s></s>

下划线

<ins></ins> <u></u>

盒子标签

<div></div> 独占一行 <span></span> 一行多个

图像标签

<img>可以拥有多个属性值且不分先后，单标签
属性值：

图片地址

<img src="timg.gif" />

文本替换：

<h4> 替换文本:图片不能正常显示，就显示文字 </h4>
<img src="timg1.gif" alt="胡歌咋吹笛子" />`

图片提示：

<h4> 鼠标放到图片上，显示的文字 </h4>
<img src="timg.gif" title="胡歌还在吹笛子等霍建华" />

图片宽度

<h4> 修改图片大小 宽度 width  </h4>
<img src="timg.gif" title="胡歌还在吹笛子等霍建华" width="600"  />

图片高度：

<h4> 修改图片大小 高度 height  </h4>
<img src="timg.gif" title="胡歌还在吹笛子等霍建华" height="600"  />

图片边框：

<h4> 带有边框的图片 </h4>
<img src="timg.gif" title="胡歌还在吹笛子等霍建华" width="600" border="10"  />

图像标签和相对路径

在同级路径中 <img src="baidu.GIF">//直接写文件名字
在下一级路径中<img src="./baidu.GIF">// 添加 ./
在上以级路径中<img src="../baidu.GIF">// 添加 ../

图像标签和绝对路径

从更根目录开始写
<img src=http://www.itcat.com/2018csn/images/logo">// 添加 ../

超链接标签

<a href="跳转目标" target="目标窗口弹出方式">content</a>
弹出方式：
*target="-self"在本窗口打开，默认
*target="-blank"在新窗口打开
跳转目标：
href="内部文件名/外部网址"
空连接不会跳转，如果是下载链接会自动下载

锚点链接

点击链接会快速定位到页面中的某个位置
<a href="#two">跳转到第二级</a>
<h3 id="two">第二级</h3>

表格标签

<thead>表头</thead>
 <thead>表身
  <table>
   <th>表头单元格</th>   //里面的文字加粗居中显示
     <tr>行
         <td>单元格的内容</td>   //必须嵌套在<tr>中
     </tr>
   </table>
 </thead>

表格属性： (写在table标签里面)
ailgn： (left、right、center) ~ 对齐方式
border： (1或“”) ~ 表格是否有边框，“”为默认，无
cellpadding：（像素值）~单元格边缘和内容之间的空白，默认为1像素
cellspacing：（像素值）~单元格之间的空白，默认为2像素
width：（像素值或百分比）~表格宽度
height：（像素值或百分比）~表格高度

合并单元格

跨行合并：rowspan="合并单元格的个数" ~由上往下
跨列合并：colspan="合并单元格的个数" ~由左往右

列表标签

主要用来布局页面

1.有序列表

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

2.有序列表

<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

3.自定义列表

<dl>
<dt></dt>
<dt></dt>
<dt></dt>
<dt></dt>
<dt></dt>
</dl>

去除列表前的项目符号 list-style:none;

表单标签

由表单域，表单控件，提示信息三部分组成

1. 表单域

是一个包含表单元素的区域
在HTML中，<form>标签用于定义表单域，以实现用户信息的收集，<form>会把它范围内的表单元素提交到服务器

属性	Value
action	url地址（用于指定接收处理表单数据的地址）
method	get/post请求（设置数据提交方式）
name	指定表单名称

2.表单元素

下拉标签：<select></select>

 <select name="" id="">
    <option value=""></option>
  </select>

<input>输入表单元素

  <input type="属性值" name="" value="" maxlength="" checked="">
  //value：规定input元素的值
  //name:  定义input元素的名称
  //maxlength:  定义输入字符串最大长度
  //checked:  首次加载时被选中

属性值：
button：可点按钮
checkbox：复选框
file:输入字段和“浏览”按钮，供文件上传
hidden：隐藏的输入字段
image：图像形式的提交按钮
password：密码字段
radio：单机按钮
reset：重置按钮，会消除表单中所有数据
submit :提交按钮，把数据提交到服务器
text：单行输入字段，用户可在其中输入文本，默认宽度20个字符

<label></label>标签用于绑定一个表单元素，当点击标签文本时，会自动勾选此选项

<input type="checkbox" id="a" value="haha" name="cn">
  <label for="a">haha </label>
  <input type="checkbox" id="b" value="hehe" name="cm">
  <label for="b">hehe </label>

<textarea></textarea>:文本域元素（大量文本时使用）

特殊字符

在这里插入图片描述

CSS基础

css选择器

1.标签选择器

选中所有p标签

<style>
p{
  }
</style>

2.类选择器

要选择不同的标签

<style>
.red{
   }
</style>
<li class="red"></li>

多类名使用方法

```html
<style>
.red{
   }
.font35{
   }
</style>
<body>
<li class="red font35"></li>
//要用空格隔开
</body>

3.id选择器

可以指定唯一id的元素

<style>
#red{
   }
</style>
<body>
<li id="red"></li>
</body>

4.通配符选择器

不需要调用，自动所有样式使用

<style>
.*{
  padding：0;
  margin:0;
   }
</style>

5.后代选择器

列表标签中有多个同样的标签,或者有孙级标签等，一般选择器不好调用
层级之间记得用空格隔开

<style>
ol li{
 color:pink;
   }
ol li a{
 color:pink;
   }
</style>
<body>
 <ol>
     <li></li>
     <li></li>
     <li>
      <a></a>
          </li>
</ol>
</body>

6.子选择器
只能选择某元素最近一级的子元素

<style>
.nav > a{
 color:pink;
   }
</style>
<body>
<div class="nav">
    <a href=""></a>  //只有这个会变
    <p>
      <a href=""></a>
    </p>
  </div>
</body>

7.并集选择器
可以选择多组标签，同时为他们定义相同的标签，且任何选择器都可以作为并集选择器的一部分

<style>
.nav,a,p{
 color:pink;
   }
</style>

8.伪类选择器

用于添加特殊效果，效果表现为网站点击后链接会变色，点击时会变色，点击前会变色

链接伪类选择器：
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hver 选择鼠标指针位于其上方的链接头
a:active 选择活动链接（鼠标还未松开的链接）

9.focus伪类选择器

用于选取获得焦点的表单元素，一般情况input表单才能获取，因此这个选择器也主要针对表单

input:focus{
   background-color:pink;
   }

字体

.p{font-family:"微软雅黑"}：定义文本样式
.p{font-weight:"300"} :文本字体粗细（默认：normal—400；加粗：bold—700）
.p{font-style:"normal"}:文本样式（默认：normal；斜体：italic）

复合写法：

.div{
  font-family:"微软雅黑";
  font-weight:"700";
  font-style:"normal";
  font-weight:"700";
  }

简便写法
.div{ font: italic 700 16px "微软雅黑" } 顺序不能改变，且要用空格隔开，必须保留size,family

文本颜色
十六进制：#FF0000 或 #290794
RGB： rgb(255,0,0,0)或rgb(100%,0%,0%)

对齐文本

div{
 text-align:center;
}

项目	Value
left	左对齐（默认值）
right	右对齐
center	居中对齐

装饰文本

div{
 text-decoration:underline;
}

项目	Value
none	默认，没有线
underline	下划线
overline	上划线
line-though	删除线

文本缩进

text-indent：5emem是汉字单位相当于一个汉字大小

行间距

p{line-height:26px;} 设置行间的行高，行与行之间的距离
行高由上间距、下间距、文本高度三个相加而来

垂直居中
css中没有垂直居中的代码
用文字或者元素的行高等于盒子的高度

元素等级

1. 块级元素

有 div p ol ul table address form blockquote

独占一行
可以设置长宽高宽度
默认为父级宽度的100%
里面可以方行内或者块级元素

文字类的元素内不能使用块级元素，p标签用于存放文字就不能放块级元素，h1~h6都是

2.行内元素

有 a span br i em strong label q

一行可以有多个
高宽直接设置无效
宽度默认是本身的宽度
只能容纳文本或者其他的行内元素

链接里不能存放链接，特殊情况a标签里可以存放块级元素，但是最好转换成块级再放

3.行内块元素

有img input td

同时具有块元素和行内元素的特点
相邻的行内块一行显示多个，但是之间会有缝隙
默认宽度是它本身宽度
高度，行高，外边距，内边距都可以控制

行内块元素就是一行内可以放几个块级元素

4.元素模式的转换

转换为块级元素：display:block
转换为行内元素：display:inline
转换为行内开元素：display:inline-block

背景

背景复合写法：
background: 没有特动的书写顺序
背景色透明度：
background：rgba (0,0,0,0.3)1~3内取值

背景颜色：background-color 背景图片：background-image
是否平铺：background-repeat /no-repeat/repeat-x/repeat-y/
背景位置：background-postion length/postion 分别是x和y
背景附着：background-attachment scroll背景滚动/fixed背景固定
背景透明度：background:rgba

css样式的层叠性（冲突）

只有冲突的哪一项才会有就近原则，其他的还是会继承

继承性：
子级会继承父级的样式

<style>
    div {
      font-size: 20px;
      color: pink;
    }
  </style>
</head>

<body>
  <div>
    <p>xxxxxx</p>
  </div>
</body>

所以xxxx是pink色的

行高的继承：
行高可以跟单位，也可以不跟 - font:12px/24px (字体大小/行高)
子级继承父级，会继承1.5倍字体大小的行高

优先级

选择器相同，则执行层叠性
选择器不同，会根据选择器权重执行
!Important>行内样式>ID选择器>类选择器>元素>通配符>继承>浏览器默认属性
选择器复合写法，权重会叠加

在这里插入图片描述

盒子模型

在这里插入图片描述

边框

border-width : 边框粗细
border-style : 边框样式
border-color : 边框颜色
（solid实线 dashed虚线 dotted点线）

复合写法（没有顺序）

border：1px solid red;
border-top：1px solid red;
…

表格的细线边框

border-collapse 控制相邻单元格的边框
border-collapse：collapse 合并相邻边框
盒子边框会影响盒子的实际大小，内边距也会影响盒子大小

内边距

边框与盒子的距离，如果盒子已经设定了大小，再加上padding就会把盒子撑大，最好不设置盒子宽高，用padding来撑开盒子
简写：

padding:5px; // 上下左右都是5像素
padding：5px 10px; // 上下5，左右10
padding：5px 10px 20px 30px; // 上5 右10 下20 左30 （逆时针）

小应用：

直接设置盒子大小，盒子是写死的不会根据字体的长短大小来始应，会留有空白，不好看
不把盒子写死，只写内边距，盒子会更好看

外边距

盒子与盒子之间的距离

margin : 5px; // 上下左右都是5像素
margin ：5px 10px; // 上下5，左右10
margin ：5px 10px 20px 30px; // 上5 右10 下20 左30 （逆时针）

小应用： 外边距让块级元素水平居中

盒子必须设定宽度
盒子左右外边距都设置为auto margin: 0 auto

行内元素居中显示只需要给父元素添加 text aligen-center

外边距合并

两个嵌套的块级元素（父子关系），父元素和元素都有上边距的时候，这个距离会一起加到父元素的上边距里

解决办法：

为父级定义一个边框
为父级定义一个内边距
为父级添加overflow：hidden

盒子的圆角边框

border-radius: 可以用px也可以用百分比
border-radius:50% 长宽各50% 圆盒子
圆角矩形：直接设置高度一半即可
简写属性：左上角、右上角、右下角、左下角

盒子阴影

复合写法: box-shadow: h-shadow v-shadow blur spread color inset

h-shadow ：必须，水平阴影位置，允许负值
v-shadow ：必须，垂直阴影位置，允许负值
blur ：可选，模糊距离
spread ：可选，阴影尺寸
color ：可选，阴影颜色
inset ：可选，将外部阴影改为内部阴影

浮动

传统网页布局的三种方式

1. 标准流

标签按从上到下的排列方式，多个块级元素纵向排列就用标准流，横向排列就用浮动流

2. 浮动流

float：none/left/right 不浮动、左、右

浮动布局一般在标准的父级盒子下，方便限制位置，用标准流的父元素排列上下，在内部使用浮动，浮动盒子只能影响后面的标准流，不会影响前面的

特点：

浮动元素会脱离标准流，不再保留原来的位置
浮动元素会在一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特征
不管什么元素都可以浮动，且浮动后会具有行内块元素的特征
浮动的盒子中间没有缝隙

为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题如下: 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。
当我给内部两个盒子加上float属性的时候
底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了

清除浮动的方法（最常用的4种）

清除浮动后，父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

额外标签法

给谁清除浮动，就在其后额外添加一个空白标签
优点：通俗易懂，书写方便。（不推荐使用）
缺点：添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>
  
  .clear{
        clear:both;
    }

父级添加overflow方法

可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

注意：别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

使用after伪元素清除浮动

:after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）

优点：符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：由于IE6-7不支持：after，使用zoom：1

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

<body>
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

使用before和after双伪元素清除浮动

推荐使用

<style>
            .father{
                border: 1px solid black;
                *zoom: 1;
            }
            .clearfix:after,.clearfix:before{
                   content: "";
                   display: block;
                   clear: both;
               }
               .big ,.small{
                width: 200px;
                height: 200px;
                float: left;
               }
               .big{
                background-color: red;
               }
               .small{
                background-color: blue;
               }
        </style>
   <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
   </div>
    <div class="footer"></div>
</div>

3. 定位

通过css的position属性来设置

定位模式+边偏移（边偏移就是盒子的最终位置）

static ：静态定位
relative ：相对定位
absolute ：绝对定位
fixed ：固定定位

静态定位：

静态定位就是元素默认的定位方式，无定位没有边偏移的意思
语法：选择器：｛position：static｝

相对定位：

相对定位是元素移动时，相对于它原先的位置，会保留原来的位置（主要用来限制绝对定位）
语法：选择器{ position:relative; left:100px; top:100px; }

绝对定位：

绝对定位是元素在移动位置的时候，是相对它的祖先元素来说，如果没有祖先元素就以浏览器为准，如果有多个父级元素就以最近的哪一个父元素为准
语法:
选择器{ position:absolate; top:100px; left:100px }

大多数情况都使用子绝父相

固定定位：

固定定位是元素固定于浏览器可视区的位置，页面滚动时，元素位置不发生变化，以浏览器的可视窗口为参照物，不会保留位置，不随窗口滚动
语法：选择器{position:fixed;}

粘性定位：

相当于固定定位和相对定位的结合，在没有满足css中条件时时固定定位，一旦窗口滚动复合了css条件后变为相对定位
语法：选择器{position:sticky; top:10px;}

以浏览器的可视窗口范围为参照元素（固定特点）
粘性定位会占有原来的位置（相对）
必须添加top、left、right、bottom其中一个值才生效

定位布局时的注意事项：

1.定位叠放次序
定位布局时出现了盒子重叠的情况时，用z-index来控制盒子的前后次序
语法：选择器{z-index：1；} 数值越大越靠前，且不能跟单位

2.绝对定位的盒子的水平居中
margin：0 auto 无效

先left：50%
在right：自身宽度的一半

行内元素添加定位后可以设置宽度和高度
块级元素添加定位后，盒子大小就是内容的大小

定位会完全遮挡盒子，包括文字
浮动不会，它只会遮挡下面标准流的盒子，但是不会遮挡文字

元素的显示和隐藏

1.display

除了元素转换，也可以隐藏元素
display：none; 隐藏元素，隐藏之后不会占有原来的位置
display：block; 除了元素转换外，也可以显示元素

2.visibility

指定元素时可见还是隐藏
visibility：visible；元素可见
visibility：hidden；元素隐藏，会占有原有位置

3.overflow

溢出：
overflow：hidden； 超出部分隐藏
overflow：scroll； 溢出部分显示滚动条，不溢出也显示
overflow：auto； 同上，不溢出不显示
overflow：visible； 不剪切内容也不添加滚动条

简单应用：当鼠标划过时，遮罩显示

.mask{
 display:none;
 }
.父级：hover .mask{
 display:block;
 }

精灵图

为了减少服务器接受和发送请求的次数，出现了css精灵技术
主要针对背景图片（小背景图片），就是把多张小图片整合到一张大图片里，这个大图片称为精灵图
这就是张精灵图
使用：

插入精灵图，会默认显示图片的左上角，至于显示多大就要看设置的盒子有多大了
移动背景图片：background-position：x轴，y轴 （一般情况往上和往左都是负值）
缺点：

图片文件比较大
缩放会失真
一旦图片制作，不利于维护

解决办法：字体图标 iconfont

字体图标 iconfont

一种更加方便的使用方式：展示的是图标，本质是文字，比图片更小，加载更快
不能替代精灵图，只能用于简单图标的应用

使用：

字体图标的下载淘宝字体图标库
字体图标的引入
复制到根目录下后，需要在css中全局引入，代码直接复制下载文件夹里的style.css文件的代码（只复制蓝色区域即可）
再创建一个空标签，把图标复印进来
之后还要给标签添加样式

因为是文字，所以可以随意设置颜色和大小和文字的设置方法一样
字体图标的追加