HTML+CSS基础学习笔记

XSSSR

已于 2022-03-15 12:28:10 修改

阅读量459

点赞数

分类专栏：前端学习笔记文章标签： html 学习 vscode

于 2022-03-15 11:11:16 首次发布

本文链接：https://blog.csdn.net/weixin_46050451/article/details/123497457

版权

前端学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

认识WEB

网页：主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。
浏览器：常用
浏览器内核：

web标准

构成：结构（HTML），表现（CSS），行为（JavaScript）
优点

语法规范

基本标签

开始、结束标签：<html></html>
基本成对出现，也有单标签<br/>

标签关系

包含关系

<head><br /><title></title><br /></head>

并列关系

<head></head><br /><body></body>

基本结构标签

<html> //html标签
<head> //文档头部
<title> //文档标题
<body> //文档主体
</body>
</title>
</head>
</html>

开发工具

VSCode的使用

新建文件（ctrl+N)
ctrl+加号/减号：放大/缩小视图
生成页面骨架：输入“！”
右键“Open in default browser”打开网页（快捷键alt+B）

VSCode插件安装

记得善用插件和安装使用

基本声明解释

文档类型声明标签：<!DOTYPE>告诉浏览器使用html
lang语言种类：en英文；zh-CN中文；fr法语…<html lang="en">
字符集：<meta charset="UTF-8">，"UTF-8"万国码

HTML常用标签

标签语义

添加语义标签使页面结构更清晰

标题标签

<h1> 一级标题</h1><br />

段落标签

分段<p></p><br />换行<br/>(单标签）

文本格式化标签

`<div>`和`<span>`

div：分割、分区（分成大块）
span：分成小块

图像标签

<img src="图像URL"/>
src是<img>标签的必须属性
alt：替换文本，在图像显示不出来的时候显示文字
title：鼠标放到图像上会出来的文字

路径

相对路径

同一级路径

图像和文件在一个文件夹里，只需要写图像名字就能用

下一级路径

图片在和文件同级的文件夹里<br />例如：<img src="images/img.jpg" />

上一级路径

文件在和图片同级的文件夹里
例如：<img src="../img.jpg" />

绝对路径

可以查找地址：
电脑中的某文件
网络上的某文件地址

超链接

语法

<a herf="跳转目标"target="目标窗口弹出方式">文本或图像</a>
target：链接页面的打开方式，_self为默认值，_blank在新窗口中打开

链接分类

外部链接：外部网址
内部链接：网站内部的相互链接

例如：<a href="index.html">首页</a>

空链接
下载链接：如果href里面是一个文件或压缩包，会下载这个文件
网页元素链接：网页中的如文本、图像、视频等都可以添加超链接
锚点链接：快速定位到页面中的某个位置。

设置属性值为#名字，如<a href="**#**two">第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 **id="two"**>第二集介绍</h3>

注释和特殊字符

注释

快捷键：ctrl+/

特殊字符

- 空格&nbsp
- <:&lt
- >:&gt

表格

表格标签

<table> //定义表格的标签
<tr> //定义表格的行，嵌套在<table></table>里
<td>单元格内的文字</td> //定义表格中的单元格，嵌套在<tr></tr>里
...
</tr>
</table>

表头单元格标签

加粗并居中
<table>
<tr>
<th>表头单元格内的文字</th>
…
</tr>
</table>

表格属性

- <table align="center></table>对齐方式left/center/right
- <table border="1"></table>加边框

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="300"></table>

标签结构

<thead>表格头部区域</thead>
内部必须包含<tr>
<tbody>表格主体区域</tbody>
以上两个标签都在<table>里

合并单元格

方式

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

目标单元格

跨行：最上侧为目标单元格写合并代码
跨列：最坐侧为目标单元格写合并代码
如：<td colspan="2"></td>

列表标签

无序列表

<ul>
<li>列表项</li>
<li>列表项</li>
</ul>
<ul>里面只能放<li>,但是<li>里面什么都可以放
去掉li前面的小圆点：list-style:none;

有序列表

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

自定义列表

<dl>
<dt>名词1</dt>
<dd>名词解释</dd>
<dd>...</dd>
</dl>

表单标签

表单域：包含元素的区域，表单元素信息交给服务器

<form action="demo.php"method="POST"name="name1">
</form>

表单控件(表单元素)

- <input type="属性值" />输入

除type外还有name,value属性，这两个属性值自定义。

- <label>标签

绑定表单元素

select下拉列表

<select>
<option>安徽</option>
<option>上海</option>
<option>北京</option>
</select>
<select>中至少包含一对<option>

textarea文本域元素

使用在多行文本输入，如留言板，，，
要写在<form>里
<form>
留言板：
<textarea cols="50"rows="10">
</textarea>
</form>

CSS

css简介

层叠样式表
可以美化html，布局页面
最大价值：由html做结构，样式交给css，即结构与样式相分离

css语法规范

选择器以及一条或多条声明
<style>
/* 选择器{样式} */
p {
color: red;
font-size: 12px;
}
</style>
写在<head>里，并且需要加分号表示结束，冒号分隔（键值对）

代码风格

样式格式
善于加空格

CSS基础选择器

CSS选择器的作用

根据不同需求，把不同标签选出来

选择器分类

标签选择器

选择页面中所有的某一大类，不能差异化选择，如p{ }、div{ }

类选择器

样式点定义

.类名{
属性：属性值；
}

<li class="red">米奇</li>

一个或多个
开发最常用

多类名

class属性中写多个类名
多个类名间用空格分开
方便统一修改

id选择器

#id名 {
属性：属性值；
}
<li id="red">米奇</li>
与class调用区别：#id只能调用一次，不会有多个调用，一般和js搭配

通配符选择器

{
color: red;
}
自动给所有元素使用样式
特殊情况才使用

CSS字体属性

字体

font-family: ‘Times New Roman’, Times, serif;

大小

font-size: 20px;
记得加px
标题标签比较特殊，需要单独指定文字大小。

粗细

font-weight：normal/bold/
/* font-weight: bold; */
font-weight: 700;
实际中常用数字进行加粗
400normal
700bold

文字样式

.qin {
font-style: italic;
}
em {
font-style: normal;
}

倾斜：litalic
让倾斜（em/i）变正常：normal

复合属性

font: font-style font-weight font-size/line-height font-family

一定按照这个顺序，各属性间用空格隔开
一定要有文字大小（size）和字体（family），否则font不起作用

总结

CSS文本属性

文本颜色

red
十六进制：#ff0000
RGB代码：rgb(255,0,0)

开发中常用16进制

对齐文本

text-align：水平对齐
text-align：center/left/right

装饰文本

text-decoration：none/underline/overline/line-through;
none：可以取消默认下划线等。

首行缩进

text-indent：20px;
text-indent：2em;（两个文字大小单位）

行间距

line-height：20px;
行高=文字高度+上间距+下间距

总结

CSS引入方式

内部样式表

放到<style>
…
</style>
里面
此种方式可以方便控制整个页面的样式
没有完全分离

行内样式表

修改简单样式时
<div style="color:red; font-size:20px;"></div>
直接写在标签内部，只能控制当前标签样式

外部样式表

样式单独写在css文件中
css文件里只写样式就可以，没有标签
在html页面中，用<link>引用css文件
<link rel="stylesheet" href = "XX.css">
注意：编辑图片格式，要在它上一级改，如：<p class="pic"><img src="images/7.jpg"></p>
写在<p>里面

浏览器调试工具

Emmet语法

快速生成html结构语法

CSS复合选择器

基本选择器的组合

后代选择器

（包含选择器）

如果写了类：<ul class="nav">
就可以：.nav li { }

子选择器

选择最近一级子元素（亲儿子元素）

并集选择器

集体声明

伪类选择器

向某些选择器添加特殊效果

链接伪类

注意事项：

一定要按照LVHA顺序声明：link;visited;hover;active
因为a链接在浏览器中有默认样式，所以实际工作中都要给链接单独指定样式。

:focus伪类选择器

选取获得焦点的表单元素，焦点就是光标

总结

CSS的元素显示模式

元素显示模式就是元素(标签)以什么方式进行显示
HTML元素一般分为块元素,行元素两种类型

块元素

行内元素

行内块元素

总结

元素显示模式转换

一个模式的元素需要另一种模式的特性,比如增加a链接的触发范围

一个小工具 snipaste

单行文字垂直居中

让文字的行高=盒子高度

CSS的背景

背景颜色

background-color:颜色值;
默认的是:transparent(透明色)

背景图片

background-image
常见于logo,装饰性小图片或超大背景图片,便用控制位置
background-image:url( )

背景平铺

background-repeat:repeat(默认平铺)/no-repeat(不平铺)/repeat-x/repeat-y;

背景图片位置

background-position:center top;

背景图像固定

background-attachment:scroll(滚动)/fixed(固定)

背景的复合型写法

没有顺序要求
background: black url(image.jpg) no-repeat fixed top;

背景色半透明

总结

CSS的三大特性

层叠性

继承性

行高的继承

优先级

注意:

复合选择器会有权重叠加的问题(但是不会有进位)

CSS的盒子模型

盒子模型组成

边框(border)

边框简写(没有顺序)

还能边框分开写,见上.
边框合并(细线边框)

边框会影响盒子的实际大小

内边距padding

padding-left/right/top/bottom: 20px;

简写:padding:

padding会影响盒子大小

内边距会往外撑大盒子

padding不会撑开盒子的情况

只给一个高度,没给宽度属性,就不会撑开

外边距(margin)

控制盒子与盒子之间的距离

外边距让块级盒子水平居中

外边距的塌陷

清除内外边距

行内元素尽量只设置左右内外边距

圆角边框

border-radius：length;】
length可以是像素，也可以是百分比

盒子阴影

box-shadow：

box-shadow: 10px 10px 10px gray ;
gray也可以用：rgba(0,0,0,.3)
box-shadow: 10px 10px 10px gray inset;
inset:内阴影

文字阴影

浮动

标准流浮动定位三种布局方式
多个块级元素竖着排列找标准流
多个块级元素横向排列找浮动

浮动特性

脱离标准流(脱标)

脱离普通标准流控制浮动到指定位置
浮动的盒子不再保留原来的位置

如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并顶端对齐排列

浮动元素紧靠在一起,如果父级宽度装不下这些盒子,会另起一行排列

任何元素都可以浮动,不管原先是什么模式的元素,添加浮动后都具有行内块元素特性.

浮动元素经常和标准流父级搭配使用

浮动布局注意点

清除浮动

clear:both闭合浮动

额外标签法

父级添加overflow

在父级添加：overflow:hidden

:after伪元素法

用上面的代码，需要在哪里清除浮动就可以在那一块的class加一个clearfix调用过来即可。

双伪元素

总结

PS切图

图片格式

图层切图

点击想要切图的地方，找到那一块图层，右击选“快速导出png”即可

切片切图

选择切片工具：选择想要的地方，“文件”–“导出”–“存储为web格式”–右上改为JPEG格式–“存储”–切片选择“选中的切片”
如果想要透明底色的，可以先把背景色的图层隐藏，再导出，但此时记得导出为png

PS插件切图

cutterman

CSS书写顺序

定位

某个元素可以在一个盒子内移动位置，并压住其他盒子
滚动窗口时，盒子固定在屏幕中的某个位置
注意：浮动可以让多个块级盒子横向排列显示；定位可以让盒子自由在盒子内移动位置或者固定屏幕中某个位置，可以压住其他盒子。

定位的组成

定位=定位模式+边偏移

定位模式

指定一个元素在文档中的定位方式，通过CSS的position属性设置

边偏移

定位的盒子移动到的最终位置

静态定位static

默认定位方式=无定位
选择器 { position : static;}
没有边偏移，和标准流差不多，不使用

相对定位relative（重要）

position: relative;
```
     top: 100px;
     left: 100px;
```
相对它自己原来的位置移动
不脱标，继续保留原来的位置（相对移动了之后，挨着它下面的盒子不会贴上去）

绝对定位absolute（重要）

元素移动时相对祖先元素
如果没有父元素或父元素没有定位（父元素是标准流），就以浏览器对齐
如果父元素有定位，就能以父元素为参考点移动位置（以最近一级带有定位的元素为参考）
脱标，绝对定位移走了就不占有原来的位置（与相对定位不同）

子绝父相

子级绝对定位，不会占有位置，可以放到父盒子任一地方不影响兄弟盒子
父级需要占有位置，只能用相对定位

固定定位fixed（重要）

元素固定于浏览器可视区的位置
position:fixed；

以可视窗口为参考点
与父元素没有关系
不随滚动条滚动而动
固定定位也是脱标的
小技巧：固定在版心旁边
让固定定位盒子left:50%走到浏览器可视区的一半；让margin-left:版心宽度的一半距离,就可以贴右侧对齐了。

粘性定位sticky

相对定位和固定定位的混合
{position:sticky;top:10px；}

以浏览器的可视窗口为参考点移动元素
占有原先的位置
必须添加top、left、bottom、right其中一个元素才有效
兼容性差，IE不支持！

定位总结

定位叠放次序z-index

z轴
{z-index：1；}

数值可以是正整数、负整数、0、默认是auto，数值越大，盒子越靠上
若属性值相同，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

定位拓展

绝对定位的盒子居中

不能通过margin: auto居中
用left:50%;再margin:负值往左走自己盒子宽度的一半.

绝对定位和固定定位和浮动类似

行内元素<span>添加绝对或固定定位可以直接设置高度和宽度
块级元素添加绝对或固定定位,若不给宽度或高度,默认是内容大小

脱标的盒子不会触发外边距塌陷
绝对定位(固定定位)会完全压住盒子(压住下面标准流所有的内容);

浮动元素不同,只会压住它下面标准流的盒子,不会压住标准流盒子里的文字/图片;
浮动产生是最初目的是做文字环绕效果.

网页布局总结

元素的显示与隐藏

display(搭配js使用)

display:none;隐藏对象,隐藏元素后,不再占有原来的位置
display:block;除了转换为块级元素之外,有显示元素的意思

visibility 可见性

visibility:visible;可见
visibility:hidden;元素隐藏,隐藏元素后继续占有原来位置

overflow 溢出

如果内容溢出框
overflow:visible;溢出部分显示出来(默认也是显示)
overflow:hidden;隐藏溢出部分(内容只能在盒子里面显示)
overflow:scroll;溢出的部分显示滚动条(不溢出也显示滚动条)
overflow:auto;在需要的时候添加滚动条
有定位的盒子要慎用overflow:hidden

CSS高级

精灵图

目的:有效减少服务器接受和发送次数.
主要针对背景图片使用,就是把多个小背景整合到一张大图片中
移动背景图片位置,使用background-position
一般情况下精灵图都是负值(x轴左边走为负,y轴往上走为负)

字体图标iconfont

用于通用的小图标
展示的是图标,本质上是字体
使用:直接从网上下载;

字体图标下载:http://icomoon.io 或者 http://www/iconfont.cn/
字体图标引入:把fonts文件夹放入页面根目录
在CSS样式中全局声明字体

@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?p4ssmb’);
src: url(‘fonts/icomoon.eot?p4ssmb#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?p4ssmb’) format(‘truetype’),
url(‘fonts/icomoon.woff?p4ssmb’) format(‘woff’),
url(‘fonts/icomoon.svg?p4ssmb#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;
}
在html标签内添加小图标: <span> </span>
给span指定字体标签 font-family: ‘icomoon’;
追加字体图标(原来的字体不够用了:把压缩包里的selection.json重新上传,然后加上想要的图标再下载

CSS三角

.box2 {
width: 0;
height: 0;
border: 50pxsolidtransparent;
border-left-color: pink;
margin: 100pxauto;
把边框改为透明,设置一个边框的颜色就是三角.

用户界面样式

鼠标样式cursor

轮廓线outline

input { outline : none}可以去掉默认的蓝色边框

防止拖拽resize

textarea { resize: none} 文本域不会被拖大

vertical-align属性

用于设置图片或表单和文字垂直对齐(只对行内元素和行内块元素有效)
vertical-align : baseline | top| middle| bottom;

解决图片底部默认空隙问题

因为默认行内块元素与文字基线对齐,改一下vertical-align属性即可
或者把图片转换为块级元素display: block

溢出的文字省略号显示

单行文本溢出显示省略号

强制一行内显示

/* 这个单词的意思是如果文字显示不开自动换行 /
/ white-space: normal; /
/ 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;

溢出部分隐藏

/* 2.溢出的部分隐藏起来 */
overflow: hidden;

文字溢出部分用省略号显示

/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;

多行文本溢出显示省略号

了解,有兼容性问题
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 /
display: -webkit-box;
/ 限制在一个块元素显示的文本的行数 /
-webkit-line-clamp: 3;
/ 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

常见布局技巧

margin负值的应用

用于几个边框紧密排在一起,让两个框相接处看起来是一个框(margin-left:-1px)正好压住相邻盒子边框
鼠标经过某个盒子,适当提高盒子的层级:如果没有定位则添加相对定位; 如果有定位则加z-index

文字围绕浮动元素

直接在盒子里加标准流文字,盒子里的图片加浮动,文字就会围绕图片

行内块巧妙运用

一行有很多小块,比如选则第几页的下标

CSS三角强化

长方形+三角形=梯形
/* 1.只保留右边的边框有颜色 /(较高的直角三角形)
border-color: transparentredtransparenttransparent;
/ 2. 样式都是solid /
border-style: solid;
/ 3. 上边框宽度要大，右边框宽度稍小，其余的边框该为 0 */
border-width: 100px50px00 ;

CSS初始化

不同浏览器对有些标签默认值不同,需要初始化
如:
/* 把我们所有标签的内外边距清零 /
{
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 /
em,
i {
font-style: normal
}
/ 去掉li 的小圆点 /
li {
list-style: none
}
img {
/ border 0 照顾低版本浏览器如果图片外面包含了链接会有边框的问题 /
border: 0;
/ 取消图片底侧有空白缝隙的问题 /
vertical-align: middle
}
button {
/ 当我们鼠标经过button 按钮的时候，鼠标变成小手 /
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/ “\5B8B\4F53” 就是宋体的意思这样浏览器兼容性比较好 /
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif
}
body {
/ CSS3 抗锯齿形让文字显示的更加清晰 /
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/ 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: “.”;
height: 0
}
.clearfix {
*zoom: 1
}