HTML和CSS的常用基础知识笔记

HTML基础知识

标题标签：

段落标签： <p>一个段落</p>

换行标签： </br>

<body>

<p>这是一个段落</p>

我是<strong>加粗</strong>的文字

我是<b>加粗</b>的文字

我是<em>倾斜</em>的文字

我是<del>删除线</del>

我是<s>删除线</s>

我是<ins>下划线</ins>

我是<u>下划线</u>

</body>

布局标签：

<div>独占一行</div> 大盒子

<span>可跨行显示</span> 小盒子

图像标签：

src是<img>标签的必须属性，指定图片路径。

<... alt> 文本属性，替换文本（图片不显示时的文字）

<... title>文本属性，提示文本（鼠标放在图像上，显示的文字）

<... width>像素，设置图像的宽度

<... height>像素，设置图像的高度

<... border>像素，设置图像的边框粗细

图像标签属性注意点∶

①图像标签可以拥有多个属性，必须写在标签名的后面。

②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

③属性采取键值对的格式，即key=“value"的格式，属性=“属性值”。

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。（///）

①同一级路径：图像文件位于HTML文件同一级

②下一级路径：图像文件位于HTML文件下一级（/）

③上一级路径：图像文件位于HTML文件上一级（../）

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。（\\\）

超链接标签：

链接语法格式

href，用于指定链接目标的url地址，(必须属性）

target，用于指定链接页面的打开窗口方式

外部链接：

<a href=" 腾讯首页 " target="_blank">腾讯</a> 其中，_self当前窗口打开页面；_blank新窗口打开页面。

内部链接：网站内部页面之间的相互链接

空链接：#

下载链接：地址链接的是文件.exe或者是 zip等压缩包形式

网页元素链接

锚点链接:点我们点击链接,可以快速定位到页面中的某个位置

h4 id="bili">1、外部链接</h4>

注释：

快捷键 Ctrl+/

特殊字符：

空   格

表格标签： tr“行标签”

表头单元格格式

<table>

<tr>

加粗效果 <th>...</th>

...

</tr>

...

</table>

普通单元格格式

<table>

<tr>

...

</tr>

...

</table>

align （left、center、

表格结构标签

<table>

<thead> 头部区域

<tr>

</tr>

</thead>

<tbody> 主体区域

<tr>

...

</tr>

...

</tbody>

</table>

...

</table>

right）：表格相对周围元素对齐方式

border（1或“”）：是否有边框，默认为“”，表示无边框

cellpadding：单元格与其内容之间的空白

cellspacing：单元格之间的空白

合并单元格

colspan：合并跨列单元格

rowspan：合并跨行单元格

</table>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

</tr>

</table>

列表标签：

无序列表

<ul>

</ul>

有序列表

<ol>

</ol>

自定义列表

<dl>

</dl>

表单标签：

一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

各种表单元素控件

</form>

表单控件

1、<input>表单元素：用于收集用户信息

type属性值

用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>

密码：<input type="password" name="pwd"><br>

性别：男 <input type="radio" name="sex"> 女 <input type="radio" name="sex" checked="checked"> 人妖 <input type="radio" name="sex"><br>

爱好：吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox"> 打豆豆 <input type="checkbox">

上传头像：<input type="file">

</form>

checked 规定此input元素首次加载时应当被选中

maxlength 规定输入字段中的字符的最大长度

hidden 定义隐藏的输入字段（type属性值）

image 定义图像形式的提交按钮（type属性值）

<label>标签为input元素定义标注

该标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上用来增加用户体验.

注意：<label>标签for属性与相关元素的id属性相同。

<select>表单元素：定义下拉列表

</select>

<textarea> 表单元素：定义多行文本输入

请输入文字：

</textarea>

附加：

1、<hr>横线——

2、去掉li前面的项目符号（小圆点） li {list-style: none;}

CSS基础知识

语法规范：

<style>

/* 选择器 {样式} */

/* 给谁改样式 {改什么样式} */

p {

color: blueviolet;

font-size: 24px;

}

</style>

CSS基础选择器：

1、类class选择器：“.”

.pink {

color: pink;

}

类命名规则：

多类名使用方式：（中间用空格隔开）

<style>

.pink {color: pink;}

.font {font-size: 24px;}

</style>

id选择器：（一般和js搭配使用）

<style>

/* id选择器：样式#定义，结构id调用，只能使用一次，别人切勿使用 */

#pink {color: pink;}

</style>

通配符选择器：“*”表示选取页面中所有元素

* {color: red;}

特殊情况才使用

CSS字体属性：

1、字体系列：使用font-family属性定义

h2 {font-family: 微软黑体;}

p {font-family: 'Courier New', Courier, monospace, "微软黑体";}

2、字体大小：使用font-size属性定义

/* 标题标签比较特殊，需要单独指定文字大小 */

h2 {font-size: 16px;}

p {font-size: 20px;}

3、字体粗细：使用font-weight属性定义

.bold {font-weight: bold;}

4、文字样式：使用font-style属性定义

p {font-style: italic;}/* normal */

5、字体复合属性

div {

/*font-size: 16px;

font-weight: 700;

font-style: italic;

font-family: 'Microsoft yahei';*/

/* 复合属性：简写的方式节约代码*/

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

font: italic 700 16px 'Microsoft yahei';

}

其中在font-weight中，700相当于bold;400相当于normal.

注意;

使用font属性时，必须按照顺序书写，不能更换，用空格隔开.

不需要设置的属性可以省略，但必须保留font-size和font-family属性.

CSS文本属性：

文本颜色

div {color: deeppink;}

div {color: #cc00ff;} 最常用

div {color: rgb(255, 0, 255);}

对齐文本：text-align

属性值：Left；center；right

h2 {text-align: center;}

装饰文本：text-decoration

none 默认，没有装饰线（可取消下划线）

underline 下划线，链接a自带下划线

overline 上划线 line-through 删除线

div{text-decoration: underline;}

文本缩进：text-indent，指定文本第一行的缩进

/* 文本的第一行音行缩进多少距离 */

/* p {text-indent: 20px;} */

/* 如果此时写了2em则是缩进当前元素2个文字大小的距离 */

p {text-indent: 2em;}

行间距：line-height，上间距+文本高度（16px）+下间距

div {line-height: 26px;}

p {line-height: 25px;}

CSS引入方式：

CSS的三种样式表

内部样式表（内嵌样式表）

写到html页面内部.是将所有的CSS代码抽取出来，单独放到一个<style>标签中。

<style>

div {

line-height: 26px;

}

</style>

行内样式表

外部样式表

实际开发都是外部样式表.适合于样式比较多的情况.

核心:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用.

引入方法：

Emmet语法：

快速生成HTML结构语法

1、生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成<div></div>

2、生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div

3、如果有父子级关系的标签，可以用>比如ul>li就可以了

4、如果有兄弟关系的标签，用＋就可以了比如div+p

5、如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以

6、如果生成的div类名是有顺序的，可以用自增符号$

7、如果想要在生成的标签内部写内容可以用{ }表示

快速格式化代码

Shift+Alt+F

CSS的复合选择器：

1、*后代选择器（包含选择器）

ol li{ color: pink;}

ol li a {color: plum;}

.nav li a {color: purple;}

<ol>

</ol>

</ul>

元素1，2必须用空格隔开；元素1是父级，2是子级

2、子选择器

只能选择作为某元素的最近一级子元素（选亲儿子元素）。

.nav>a {color: purple;}

只能使“我是美女”变成紫色。

3、*并集选择器

div,

.pig li {

color: salmon;

}

</ul>

4、伪类选择器：用（:）表示

用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

*链接伪类选择器

a : link /*选择所有未被访问的链接*/

a :visited /*选择所有已被访问的链接*/

a : hover /*选择鼠标指针位于其上的链接*/

a : active /*选择活动链接（鼠标按下时的链接）*/

a:link {

color: #333;

text-decoration: none;

}

a:visited {

color: sandybrown;

}

a:hover {

color: skyblue;

}

a:active {

color: springgreen;

}

注意：必须按照顺序书写 l-v-h-a. （常用 a{ }；a:hover{ }）

:focus伪类选择器（用于获取获得焦点的表单元素）

焦点就是光标，主要针对<input>类表单元素

input:focus {

background-color: pink;

}

CSS的元素显示模式：

HTML元素一般分为块元素和行内元素两种类型

1、块元素：独占一行，可以设置宽度和高度

常见的有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

注意：

文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

2、行内元素（内联元素）：不可以设置宽度和高度

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<$>、<ins>、<u>、<span>等

注意：

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

3、行内块元素：可以设置宽度和高度

在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。

行内块元素转化为块元素、块元素转化为行内块元素：

a {

display: block; 显示：块；

}

a {

display: inline-block; 显示：行内块；

}

4、小技巧：单行文字垂直居中

让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

div {

height: 40px;

line-height: 40px;

}

CSS的背景：

背景颜色

background-color: pink;

一般情况下元素背景颜色默认值是transparent（透明），可自行设置

背景图片

background-image: url(images/qiwen.jpg);

none为无背景图（默认）

背景平铺

background-repeat: repeat /*no-repeat repeat-x repeat-y */;

背景图片位置

方位名词：center、top、left、right、bottom

background-position: center top; 可交换位置

background-position: right; 第二个默认居中对齐

（网上扒图：右键—选择open in new tab）

精准单位：20px......

background-position: 20px 50px; 不可交换位置，x、y轴

background-position: 50px; 第二个默认垂直居中

混合单位

/* 一定 x 为center, y 为center */

background-position: 50px center;

背景图像固定

后期可以制作视差滚动的效果。

background-attachment: fixed;

/* scroll 滚动效果*/

背景复合写法

没有特定的书写顺序，一般是：

背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置

background: pink url(images/img.jpg) no-repeat fixed top;

背景色半透明：alpha透明度，取值范围0~1之间

background: rgba(0, 0, 0, 0.3); 后面必须四个值

background: rgba(0, 0, 0, .3);

CSS的三大特性：

层叠性（就近原则）、继承性（子承父业）

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=" "	1,0,0,0
!important重要的	∞无穷大

权重叠加∶如果是复合选译器，则会有权重叠加，需要计算权重。

盒子模型：

margin-top

margin-bottom

CSS盒子模型本质上是

border-top

border-bottom

一个盒子，封装周围的HTML

content

padding-top

元素

它包括:边框、外边距、

内边距、和实际内容

边框（border）

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)边框样式边框颜色

border-width: 5px;

border-style: solid;

border-color: turquoise;

边框简写：没有顺序要求

border: 5px solid turquoise;

边框分开写法

border-top: 5px solid turquoise;

表格细线边框

table,

th {

border: 1px solid blueviolet;

/* 合并相邻的边框 */

border-collapse: collapse;

}

边框影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1、测量盒子大小的时候,不量边框.

2、如果测量的时候包含了边框,则需要width/height减去边框宽度

内边距（padding）

padding: 5px;

/* 一个值，代表上下左右都有5像素内边距 */

padding: 5px 10px;

/* 两个值，代表上下内边距5像素，左右内边距10像素 */

padding: 5px 10px 20px;

/* 三个值，代表上内边距5像素，左右内边距10像素，下内边距20像素 */

padding: 5px;

/* 四个值，代表上是5像素，右是10像素，下是20像素，左是30像素*/

外边距（margin）

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

①盒子必须指定宽度（width）

②盒子左右的外边距都设置为auto

常用三种写法：

margin-left:auto；margin-left:auto；
margin:auto；

margin:0 auto；

注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

外边距合并-嵌套块元素塌陷

对于两个嵌套关系(父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

.father {

width: 400px;

height: 400px;

background-color: purple;

margin-top: 50px;

}

.son {

width: 200px;

height: 200px;

background-color: pink;

margin-top: 100px;

}

解决方案:

①可以为父元素定义上边框。

border: 1px solid transparent;

②可以为父元素定义上内边距。

padding: 1px;

③可以为父元素添加overflow:hidden。

overflow: hidden;

清除内外边距

* {

padding: 0; 清除内边距

margin: 0; 清除外边距

}

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

圆角边框*：

border-radius属性用于设置元素的外边框圆角。

border-radius: 10px; 10px：圆的半径

参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%

如果是个矩形，设置为高度的一半就可以做
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius

盒子阴影：

/* box-shadow: h-shadow(水平阴影的位置，可负) v-shadow(垂直阴影的位置，可负) blur(模糊距离) spread(阴影的尺寸) color(阴影的闫森) inset(将外部阴影改为内部阴影); */

box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);

文字阴影：

h-shadow、v-shadow、blur、color

text-shadow: 10px 10px 10px rgba(0, 0, 0, .3);

浮动导读：

标准流：标签按照规定好默认方式排列

浮动特性：

1、脱离标准普通流的控制（浮）移动到指定位置（动)，（俗称脱标）

2、浮动的盒子不再保留原先的位置

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

4、如果行内元素有了浮动,则不需要转换块级\行肉块元素就可以直接给高度和宽度。

清除浮动：

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

方法：

额外标签法也称为隔墙去，是W3C推荐的做法。

.clear { clear: both }

<div class="clear"> </div> 新增盒子元素要求必须是块级元素

父级添加overflow属性

overflow: hidden; 父级添加

父级添加after伪元素（照顾低版本浏览器）

.clearfix::after {

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

/*IE 6、7专有 */

*zoom: 1;

}

4、父级添加双伪元素

.clearfix:before,

.clearfix:after {

content: "";

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

/*IE 6、7专有 */

*zoom: 1;

}

CSS定位：

定位︰将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式＋边偏移。

定位模式（position）

static 静态定位 relative 相对定位

absolute 绝对定位 fixed 固定定位

边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottoml、eft和right 4个属性。

*相对定位relation

相对定位的特点∶（务必记住）

1．它是相对于自己原来的位置来移动的(参照点是自己原来的位置)。

2原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置）

*绝对定位absolute

1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)。

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3．绝对定位不再占有原先的位置。（脱标）

*固定定位fixed

1、以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系不随滚动条滚动。

2、固定定位不在占有原先的位置。固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

固定定位小技巧：固定在版心右侧

小算法：

1、让固定定位的盒子left: 50%，走到浏览器可视区（也可以看做版心）的一半位置。

2、让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置

粘性定位sticky

1、以浏览器的可视窗口为参照点移动元素（固定定位特点）

2、粘性定位占有原先的位置（相对定位特点）

3、必须添加top. left、right、bottom其中一个才有效。

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

语法:

选择器{ z-index：1；}

1、数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上

2、如果属性值相同，则按照书写顺序，后来居上

3、数字后面不能加单位

4、只有定位的盒子才有z-index属性

定位的拓展

绝对定位的水平居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。

left:50%;:让盒子的左侧移动到父级元素的水平中心位置。

margin-left:-100px;:让盒子向左移动自身宽度的一半。

2、定位特殊特性

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

①行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

②块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3、脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

4、绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它卜面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)

但是绝对定位（固定定位）会压住下面标准流所有的内容。

元素的显示与隐藏：

CSS新增伪元素：

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTM结构。

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容

注意∶

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

语法:element::before { }
before和after必须有content属性

before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器—样，权重为1

附加：

*CSS属性书写顺序：

建议遵循以下顺序:

1.布局定位属性:display / position/ float / clear/ visibility / overflow(建议display第一个写，毕竟关系到模式)

2.自身属性: width/ height / margin/ padding/ border / background

3.文本属性 :color / font / text-decoration / text-align / vertical-align / white- space / break-word

4.其他属性（CSS3) : content / cursor / border-radius/ box-shadow / text-shadow/ background:linear-gradient...

实际开发中，我们不会直接用链接a而是用li包含链接(li+a)的做法。

1. li+a语义更清晰，一看这就是有条理的列表型内容。

2．如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

HTML和CSS的常用基础知识笔记相关推荐

HTML+CSS+JS的基础知识笔记
语义化:通俗来说就是明白每个标签的用途(在什么情况下使用此标签合理) 语义化的好处:1更容易被搜索引擎收录.2. 更容易让屏幕阅读器读出网页内容. html文件基本结构: <html> ...
【重识 HTML + CSS】网页基础知识、基本 HTML 标签
重识 HTML + CSS 网页的基础知识网页的显示过程缓存(cache)技术浏览器内核常用 HTML 元素 DOCTYPE 文档说明 html 元素:根元素 lang 属性 head 元素: ...
Java基础知识笔记-11_2-Swing用户界面组件
Java基础知识笔记-11_2-Swing用户界面组件这章教程两个版本,一个语法是非lambda表达式版本,另一个是lambda表达式版本非lambda表达式版本 1 Java Swing概述 J ...
b站唐老师人工智能基础知识笔记
b站唐老师人工智能基础知识笔记 0.机器学习(常用科学计算库的使用)基础定位.目标定位 1.机器学习概述 1.1.人工智能概述 1.2.人工智能发展历程 1.3.人工智能主要分支 1.4.机器学习工作 ...
python详细基础知识笔记
详细基础知识笔记注: ·第一章学习准备 1.1高级语言.机器语言.汇编语言 1.2 汇编.解释 1.3 静态语言.脚本语言 1.4 Python的历史 1.5 Python语言的优点.缺点 1.6 ...
HTML基础知识笔记（0基础入门）
HTML&CSS基础知识笔记 HTML 一.HTML介绍二.实体三.meta标签四.语义化标签(一) 五.语义化标签(二) 六.语义化标签(三) 七.列表八.超链接九.图片标签十. ...
access2013数据库实验笔记_医学科研实验基础知识笔记（十）：甲基化
往期回顾医学科研实验基础知识笔记(一):细胞增殖医学科研实验基础知识笔记(二):细胞凋亡检测医学科研实验基础知识笔记(三):细胞周期检测医学科研实验基础知识笔记(四):细胞自噬研究策略医学科 ...
网络服务器最基本的是文件,你可能想知道的15个网络常用基础知识
原标题:你可能想知道的15个网络常用基础知识网络是一个复杂的系统,涉及知识很多.现在腾正小超人给大家分享15个常用的网络基础知识: 1) 如何查看本机所开端口用netstat -a -n命令查看! ...
Swift常用基础知识（二）
Swift常用基础知识(一) 函数式编程函数合成 func add1(_ v1: Int, _ v2: Int) -> Int { v1 + v2 }func currying<A, B ...

HTML和CSS的常用基础知识笔记

HTML和CSS的常用基础知识笔记相关推荐

最新文章

热门文章