HTML/CSS学习笔记

呈福

已于 2022-06-10 17:01:23 修改

阅读量3.3k

点赞数 12

文章标签： html css 学习

于 2022-06-10 11:13:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54687499/article/details/124177429

版权

HTML/CSS

文章目录

HTML/CSS
前言
一、HTML
二、CSS

前言

HTML/CSS 自学笔记，加油！
//使用 vscode
使用视频：B站黑马程序员前端课程（如侵权，立即删，请私信）

一、HTML

1. 基础简介

1.1 Web标准

HTML                  决定结构
CSS                   决定样式
JavaScript            决定页面交互动态效果

1.2 使用记事本设置自己的第一个html文档

创建文档---->修改 .txt 为 .html ---->写入代码
例子：

<strong>我变粗了</strong>

效果：
我变粗了

1.3 HTML页面固定结构

<html>
	<head>
		<title>网页标题</title>   
	</head>
	<body>
	          网页主体内容
	</body>
</html>

1.4 vscode快捷方式与设置

vscode设置：查看–>自动换行//方便看代码

！    //回车，便会自动显示html框架

<!DOCTYPE html>
<!-- 中文网站 -->
<html lang="zh-CN">
<head>
    <!-- 规定字符编码 -->
    <meta charset="UTF-8">
     <!-- 解决ie兼容性 -->
    <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>

快捷键	作用
Ctrl+S	保存
Ctrl+/	加注释/取消注释
tab	选中代码，往后移
shift+tab	选中代码，往前移
alt+左键	选多行加内容或删除
alt+B	进入网页

2. HTML标签

2.1 HTML标题标签

<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4> //选中第一个数字，按ctrl+D，选中后面的一个数字；再按一次总共选中三个，则可快捷修改标题等级。
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>

- 共有6级标签；
- 文字都加粗；
- h1->h6文字都变大，但逐渐减小；
- 独占一行。

2.2 HTML段落标签

<body>
       <p>场景：文章中用于分段显示</p>
       <p>段落之间存在间隙（css可设置）</p>
       <p>独占一行</p>
</body>

2.3 HTML换行标签与水平线标签

<br>//换行
<hr>//水平线

2.4 HTML文本格式化标签

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线
strong	加粗（下面突出重要性，视觉效果一样）
ins	下划线
em	倾斜
del	删除线

2.5 媒体标签

2.5.1 图片标签

<img src="" alt="" title="" width="" height="">

属性名：src
属性值：目标图片的路径

当前网页和目标图片在同一文件夹，直接写目标图片名或在名前加"./"
绝对路径（工作中不用）
相对路径：从当前文件开始出发找目标文件的过程
在下级目录中：./文件夹/目标文件名
在上级目录中：. ./目标文件名

属性名：alt
属性值：替换文本

当图片加载失败，显示alt文本
图片加载成功，不会显示alt文本

属性名：title
属性值：提示文本

当鼠标悬停时显示

属性名：width/height
属性值：宽/高大小设置

只改变宽高中的一个，另一个等比例缩放（工作中只写其中一个即可)

2.5.2 音频标签

<audio src="" controls autoplay loop></audio>

属性名	功能
controls	显示播放的控件
autoplay	自动播放（有的浏览器不支持）
loop	循环播放

2.5.3 视频标签

<video src="" controls></video>

谷歌浏览器autoplay和muted共同使用，实现静音自动播放

2.5.4 链接标签

<a href="#" target="">空链接</a>

属性名：target
属性值：目标网页打开形式

_self（默认覆盖原网页）
_blank（保留原网页）

2.6 列表标签

2.6.1 无序列表

<ul>
           <li>内容</li>
           <li></li>
</ul>

2.6.2 有序列表

<ol>
        <li>内容</li>
        <li></li>
</ol>

2.6.3 自定义列表

       <dl>
           <dt></dt>//主题
           <dd></dd>//内容，dd会默认显示缩进效果
       </dl>

2.7 表格标签

<table border="1">              //表格  //border设置边框
       <caption>表格标题</caption>
        <thead>               //表格头部
	         <tr>              //第一行
	             <th></th>    //表头内容
	             <th></th>
	         </tr>
        </thead>
        <tbody>               //表格主体
	         <tr>              //第二行
	             <td></td>     //普通内容
	             <td></td>
	         </tr>
        </tbody>
        <tfoot>                  //表格底部
	          <tr>                //第三行
	              <td></td>     
	              <td></td>
	          </tr>
        </tfoot>
</table>

合并单元格步骤 //不能跨结构合并

上下合并——保留上面的，删除其他
左右合并——保留左面的，删除其他
跨行合并：

<td rowspan="2">
</td>

跨列合并：

<td colspan="2">
</td>

2.8 表单标签（登录，注册，搜索区域使用）

2.8.1 input系列

<form action="">           //在外层加上该表单，才能确定重置范围
       文本框：<input type="text" placeholder="提示字">       //文本框
       <input type="password" placeholder="密码">     //密码框
       
       <input type="radio" name="分组" checked>男        //单选框  name进行分组 默认选中
       <input type="radio" name="分组">女 
       
       <input type="checkbox">     //多选框
       <input type="file" multiple>         //上传文件     上传多个文件

      
       <input type="submit" value="提示文字">      //提交按钮
       
       <input type="reset">       //重置按钮
       
       
       <input type="button" value="提示文字">      //普通按钮
 </form>

2.8.2 button按钮标签

       <button type="submit"> 提示文字</button>  //提交按钮
       <button type="reset"> </button>   //重置按钮
       <button type="button"> </button>   //普通按钮

2.8.2 select下拉菜单标签

       <select>                          
           <option>内容1</option>            //下拉菜单内容
           <option>内容2</option>
           <option selected>内容3</option>  //默认选中
       </select>

2.8.3 textarea文本域标签

<textarea cols="30" rows="10"></textarea>   //宽度  行数

2.8.4 label标签

<input type="radio" name="分组" id="nan"><label for="nan">男</label>        //方法1：单选框加id和for，使一致，点击男也可选中
<label><input type="radio" name="分组" >女 </label>                         //方法2简单：直接在外部加label标签，删除for

2.9 语义化标签

2.9.1 没有语义的布局标签-div和span

2.9.2 有语义的标签，手机端常用

       <header>网页头部</header>
       <nav>网页导航</nav>
       <footer>网页底部</footer>
       <aside>网页侧边栏</aside>
       <section>网页区块</section>
       <article>网页文章</article>

2.10 字符实体

字符实体&nbsp;&nbsp;表示两空格

二、CSS

1. 基础简介

1.1 css语法规则

内嵌式：css写在style标签中，style标签一般写在head标签里面，title标签下面（小案例）

    <style>
        /* 格式：选择器{css属性} */
        /* 选择器：查找标签 */
        p{
            /* 文字颜色变红 */
            color: crimson;   
            /* 文字大小 px：像素 */
            font-size: 30px;
        }
    </style>

外联式：css写在单独的.css文件中，需要link接入html（项目中）

<!-- 写到head中，关系：样式表 -->
<link rel="stylesheet" href="./my.css">

行内式：（配合js）

<p style="color: crimson;"></p>

2. css基础选择器

2.1 标签选择器

结构：标签名{css属性名：属性值；}
修改全部的该标签样式

2.2 类选择器

结构：.类名{css属性名：属性值；}
类名可以由数字、字母、下划线、中划线组成，但不能以中划线开头
一个标签多个类名可在中间空一格使用
多个标签可用同一个类名

        .red{
            
            color: crimson;   
        }
         .size{
            font-size: 66px;
        }
    <p class="red">变红 </p>
    <div class="red size">变大也变红</div>

2.3 id选择器

结构：#id属性值{css属性名：属性值；}
id是唯一的，不可重复

        #blue{
            color: blue;
        }
        <div id="blue">变蓝</div>

2.4 通配符选择器

结构：*{css属性名：属性值；}
为所有标签设置样式

3. 字体和文本样式

p{
    font-size: 30px;           /* 设置字体大小 */
    font-weight: 700;          /*加粗*/
    font-weight: 400;          /*不加粗*/
    font-style: italic;         /*倾斜*/
    font-family: 微软雅黑,黑体k,宋体,sans-serif;           /*字体格式多加几个，用户系统没有则显示下一个，最后为无衬线系列*/
    font: italic 700 30px/1.5 宋体;  /*简写，复合属性：style weight size/line-height family，只设置后两个，则前两自动取默认值*/
    
    text-indent: 2em;       /*首行缩进2字符*/
    text-align: center;      /*内容水平对齐方式，文字，图片，input都可用，给其父级添加*/
    text-decoration: underline;/*文字修饰属性，下划线等，none为无装饰*/
    line-height: 1.5;/*行高,50px为行高像素，1.5为字体的倍数*/
}

层叠性：后面的样式覆盖前面的
1em=当前标签font-size大小，即一个字的大小
标签水平居中方法：margin：0 auto；

4. 谷歌调试工具

f12或fn＋f12打开调试工具
黄叹号错误：css代码格式错误
删除线：被覆盖

5. 选择器进阶

5.1 后代选择器：空格(所有是选择器2的后代都会变)

结构：选择器1 选择器2{css属性名：属性值；}

div p{
    color: red;
}

5.2 子代选择器：>(只有子代的选择器2变,孙子的选择器2不变)

结构：选择器1 >选择器2{css属性名：属性值；}

div>p{
    color: red;
}

5.3 并集选择器:，（选中多种标签设置一样的样式）

结构：选择器1，选择器2{css属性名：属性值；}

div，
p，
span，
h1{
    color: red;
}

5.4 交集选择器:（同时满足多个选择器的标签）

结构：选择器1选择器2{css属性名：属性值；}

div.box{
    color: red;
}

5.5 hover伪类选择器:（鼠标悬停在元素上的状态）

结构：选择器：hover{css属性名：属性值；}

a：hover{
    color: red;
}

5.6 emmet语法（代码快捷键）

<!-- div.box#one 效果-->
<div class="box" id="one"></div>
<!-- div+p -->
<div></div>
<p></p>
<!-- ul>li*3 -->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
 <!-- a{导航$}*5 -->
<a href="">导航1</a>
<a href="">导航2</a>
<a href="">导航3</a>
<a href="">导航4</a>
<a href="">导航5</a>

css快捷用首字母输入即可

       div{
       /* w300+h200+bgc */
            width: 300px;
            height: 200px;
            background-color: #fff;
        }

6. 背景相关属性

6.1 背景色

默认透明
rgb，rgba，十六进制表示法
需要设置盒子大小

6.2 背景图片（默认平铺）

       div{
         background-image: url('图片路径');
        }

6.3 背景平铺（横着铺或竖着或只有一个）

       div{
         background-repeat: no-repeat;  //只有一个
         background-repeat: repeat-x;   //横着铺
        }

6.4 背景位置

       div{
         background-position: 水平位置 垂直位置;
        }

水平位置：left center right
垂直位置：top center bottom
或者坐标 background-position: 20px 20px;
两方式可混用
背景色和背景图只显示在盒子内

6.5 背景图大小

设置背景图大小
取值：

数字+px
百分比，相当于盒子自身宽高比
cotain，背景图等比例缩放，直到不会超出盒子大小，盒子可能有留白
cover：背景图等比缩放，刚好填满盒子，图可能会显示不全

div{
    background-size: 0 0;/*宽度  高度*/
}

6.6 背景复合

       div{
          /*可以换顺序，数值不能换位置*/
         background: #000 url() no-repeat position/size;
        }

6.7 背景图和img区别

img一般比较重要
img为标签
div＋背景图片需设置css

7. 元素显示模式

7.1 块级元素

独占一行
宽度是父元素宽度，高度默认由内容撑开
可以设置宽高
div、p、h、ul、li、footer
转换：display：block

7.2 行内元素

一行可以显示多个
宽度和高度默认内容撑开
不可以设置宽高
a、span、b、u、i、s、strong、em、ins
转换：display：inline

7.3 行内块元素

一行可以显示多个
可以设置宽高，没宽度也没内容，盒子宽度尺寸就是0
input、textarea、button、select
img
转换：display：inline-block

8. css三大特性

p和h不能相互嵌套
a里不能嵌套a
继承性：控制文字的属性都可以继承，其他不能，子承父业（超链接不继承颜色，h1不继承字号）
都是继承，继承里哪个父级高，哪个选择器生效
层叠性：后面的覆盖前面的，只有优先级相同才能层叠
优先级：优先级高的选择器样式覆盖优先级低的样式
优先级公式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

line-height: 1.5 !important;

9 盒子模型

9.1 盒子模型

盒子模型

div{
    width: 300px;
    height: 300px;
    background-color: pink;
    border: 1px solid red;/*边框线  粗细 线条种类（dashed虚线 dotted点线） 颜色 快捷键：bd+tab*/
    padding: 20px;/*内边距*/
    margin: 50px;/*外边距*/
    box-sizing: border-box;/*不需要自己做减法,盒子尺码就会自动成为宽高大小*/
}

属性-方向给某个方向设置格式

div{
    width: 300px;
    height: 300px;
    background-color: pink;
    border-top: 1px solid red;/*边框线*/
    padding-left: 20px;/*内边距*/
    margin-right: 50px;/*外边距*/
}

border会撑大盒子，设计时注意尺寸，加box-sizing: border-box;则不用算
从外到内设计：先宽高背景色，放内容，调节内容位置，控制文字细节
padding复合属性：上右下左如padding: 10px 20px 30px 40px;顺时针转

9.2 清除默认内外边距

所有项目都需要清除

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

9.3 版心居中

margin：0 auto  /*上下   左右*/

9.4 去掉列表的符号

ul{
    list-style: none;
}

9.5 边距问题

1.垂直布局的块级元素上下margin会合并
最终两者距离为margin的最大值
解决办法：只给其中一个盒子设置
2.互相嵌套的块级元素，子级元素的margin会导致父级盒子外边距也发生改变
解决办法：改为padding；或给父元素设置overflow:hidden；或转换成行内块元素
3.margin或padding不能改变行内标签垂直（上下)位置
解决办法：使用line-height

10. css浮动

10.1 结构伪类选择器

场景：查找父级元素的子元素

li:first-child{}   /*匹配父元素中第一个子元素，并且为li元素*/
li:last-child{}       /*匹配父元素中最后一个子元素，并且为li元素*/
li:nth-child(n){} /*匹配父元素中第n个子元素，并且为li元素*/
li:nth-last-child(n){} /*匹配父元素中倒数第n个子元素，并且为li元素*/

n为0,1，2，3，4…
也可为公式：2n，-n+5（前五个）

10.2 伪元素

div::before{                    /*content必须要有*/
    content: '哈哈';         /*在父级前或后加不重要装饰性小图*/
    background-color: pink;/*默认行内元素*/
}
div::after{
    content: '哈哈';
}

10.3 浮动

行内块问题：代码换行，行内块之间会产生一个空格
作用：1.图文环绕2.页面布局：块标签在一行排
float不再占用标准流位置，可覆盖原来的元素，但文字不会覆盖
下一个浮动会在上一个浮动元素后面左右浮动
浮动为顶对齐，具备行内块特点
父级宽度不够，会自动换行
margin：0 auto不会生效

div1{
    float: left;/*两块可完美排在一行*/
}
div2{
    float: left;
}

10.4 清除浮动

问题：父子级标签，子级浮动，父级没有高度，后面的标准流盒子会浮动，显示到上面的位置
解决办法
1.增加高度
2.在父元素内容最后添加一个块级元素：给添加的块级元素设置clear：both（清除左右浮动影响）

<div class="clearfix"></div>

.clearfix{
    clear: both;
}

3.单伪元素清除法
给标签加clearfix类即可（工作常用清除下面）

.clearfix::after{
    content: '';
    display: block;
    clear: both;
    height:0;
    visibility:hidden
}

4.双伪元素清除法
给标签加clearfix类即可（工作常用清除上下和塌陷）

.clearfix::before,
.clearfix::after{    /*解决塌陷问题*/
    content: '';
    display: table;
}
.clearfix::after{
    clear: both;
}

5.给父级设置overflow:hidden

10.5 项目制作技巧

css书写顺序

浮动，display
盒子模型：margin border padding 宽高背景色
文字样式

所有网站首页：index.html
新建css文件夹，index.css用来修饰首页
点右上角小图标，分屏，一边html，一边css
版心盒子名字：wrappper
logo用h1标签
主导航用li>a
让字体在一行排，就用浮动
修改提示字格式：input：：placeholder{}
小的装饰图比如搜索图标，直接设置背景图

11. css定位

属性名:position

11.1 相对定位

div1{
    position: relative;
}

占有原来的位置
仍然具备原有标签的显示特点
改变位置是参照自己原来的位置
如果right和left都存在，以left为准，上下以top为准

11.2 绝对定位

div1{
    position: absolute;
}

相对于父元素进行定位移动
先逐层找已经定位的父级；父级没定位，以浏览器为参照
脱标，不占位置
不具备原有标签的显示特点，具备行内块特点
子绝父相：一般父级用相对，子级用绝对
绝对定位的盒子不能使用margin：0 auto居中
居中方法：

div1{
    position: absolute;/*水平方向*/
    left: 50%;/*偏右位置*/
    margin-left: 负的物体宽度的一半px;
}
div1{
    position: absolute;/*垂直方向*/
    top: 50%;
    margin-top: 负的物体高度的一半px;
}
div1{
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);/*自动计算*/
}

11.3 固定定位

脱标
行内块特点
只相对于浏览器改变

div1{
    position: fixed;

}

11.4 层级关系

标准流<浮动<定位
定位层级：后边的在上面显示
配合定位使用：z-index：整数；取值越大，显示顺序越靠上，默认值为0

12. css装饰

12.1 垂直对齐方式

默认基线对齐
问题：浏览器行内块当做文字处理，垂直方向不齐（也可改变display为block）

div{
    vertical-align:middle;/*中部对齐*/
    vertical-align:top;/*顶部对齐*/
    vertical-align:bottom;/*底部对齐*/
}

12.2 光标

属性名：cursor
default：默认值，箭头
pointer：小手，提示可以点击
text：工字型，提示可以选择文字
move：十字光标，提示可以移动

12.3 边框圆角

属性名：border-radius
取值：数字+px，百分比（一个值为4个角都变，四个值从左上顺时针看，两个值为对角相同）
场景：正圆：border-radius值设置为正方形宽高的一半或为50%
胶囊按钮：盒子为长方形，border-radius值设置为盒子高度的一半

12.4 溢出部分显示效果

属性名：overflow
默认可见
hidden:溢出部分隐藏
scroll：无论是否溢出都显示滚动条
auto：自动显示或隐藏滚动条

12.5 元素本身隐藏

让元素本身在屏幕中不可见
场景：鼠标悬停显示图片：a::hover img{display:block;}

div{
    visibility: hidden;/*占位置，一般不使用*/
    display: none;/*不占位隐藏，配合上述场景使用*/
}

12.6 元素整体透明度

属性名：opacity
属性值：0-1
包括文字等所有元素

13. 样式补充

13.1 精灵图

场景：将多张小图合并成一张大图
优点：提高加载速度
步骤：

创建一个盒子，设置盒子尺寸和小图尺寸相同
将精灵图设置为盒子的背景图
修改背景图位置
一般精灵图用行内标签:span，b，i

span{
    background-position: 0 0;/*水平  垂直    取负值*/

}

13.2 盒子阴影

属性名：box-shadow
参数
h-shadow:必须写，水平位置
v-shadow：必须写，垂直位置
blur：可选，模糊度
spread：可选，阴影扩大
color：可选，阴影颜色
inset：可选，将阴影改为内部阴影

13.3 过渡

作用：样式慢慢变化，配合hover使用
属性名：transition
参数
过渡的属性：all：所有能过渡的属性都过渡 width：只有宽过渡
过渡的时长：数字+s
配合hover使用，谁变化谁加过渡属性；如box:hover,属性加到box上

13.4 SEO三大标签

开头的meta属性
title：网页标题
description：网页描述
keywords：网页关键词
内容由公司给出

13.5 标题图标

<head>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>