HTML基础知识 详细笔记

来源于黑马pink老师的视频内容学习,做的文字笔记,方便自己查阅复习,也方便大家一起翻阅查询学习.

文本格式化标签

加粗

<strong>文本</strong>或者<b>文本</b> 推荐使用第一个,语义更强烈

倾斜

<em>文本</em>或者<i>文本</i> 推荐使用第一个,语义更强烈

删除线

<del>文本</del>或者<s>文本</s>推荐使用第一个,语义更强烈

下划线

<ins>文本</ins>或者<u>文本</u>推荐使用第一个,语义更强烈

<div>和<span>标签 这两个标签是没有语义的 类似与盒子,用来装内容:图片,文字等等

<div>内容</div> <span>内容</span>

div是division的缩写,表示分割,分区.span意为跨度,跨距.

特点

<div>一行只允许存在这一个其中的内容,可写多行<div> 大盒子

<span>是一行上显示这个内容 小盒子

---

图像标签

在HTML标签中,<img>标签用于定义HTML页面的图像

image :图像

格式:<img src="路径" /> src是标签的必须属性,用于指定图像文件的路径和文件名

属性:属于这个图像的特性

alt:替换文本

<img src ="路径" alt="文本" />

alt用于文字说明,解释此处是图片 适用于纯文本浏览器的阅读者 方便其阅读网页内容

title:提示文本 鼠标放到图像上提示的文字

<img src ="路径" alt="文本" title="提示内容" />

width:图像的宽度

height:图像的高度

格式:width="数值" height="数值"

一般情况下,修改其中一个就可以

border:设置图像边框粗细 格式:border="数值" 边框可以修改颜色 ,后面会提到

图像标签注意点:

1. 图像标签可以拥有多个属性,必须写在标签名后面

2. 属性之间不分先后,标签名与属性,属性与属性之间均以空格分开

3. 属性采取键值对的格式 即:属性="属性值"

请思考:

1. 图像标签哪个属性是必须写的?

2. alt和title的区别

---

路径

目录文件,根目录

路径可以分为:

相对路径

意:以引用文件所在位置为参考基础,而建立出的目录路径

图片相对于HTML页面的位置

同一级路径:

格式:<img src ="路径" />

下一级路径:

格式:<img src="路径 />

上一级路径:

格式:<img src="../路径" />

绝对路径

意:目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径

格式:<img src="D:\web\...\.. /> 或者 完整网络地址 <img src="www.1111.com"/>

---

链接标签

重点:超链接标签

<a>用于定义超链接标签,作用:从一个页面链接到另一个页面

链接的格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或者图像 </a>

href:用于指定链接目标的地址,当属性为href时,就具备了超链接的功能

target:用于连接页面的打开方式,其中_self为默认值 在当前窗口打开方式,_blank为在新窗口打开方式

链接的分类

外部链接

<a href ="www.baidu.com">百度</a>

内部链接

网站内部页面之间的相互链接,直接内部页面名称即可:<a href="地址.html">首页</a>

空链接:<a href="#">内容</a>

下载链接

如果href里面地址是一个文件.exe或者压缩包.zip,会下载这个文件

<a href="地址">内容</a>

网页元素链接

在网页中各种网页元素,如文本,图像,表格,音频,视频等等都可以添加超链接

<a href="地址"<文本,图像,表格,音频,视频等等的链接></a>

锚点链接

点击链接,快速定位到页面中的某个位置

在链接文本属性中,设置属性值为#名字的形式,如:<a href="#t">1</a>

找到目标位置标签,里面添加一个id属性=刚才的名字,如:<h3 id="t">1介绍</h3>

注释标签

以"<!--"开头,"-->"结束

格式:<!-- 注释内容 -->快捷键:ctrl+/ 可自动生成或者取消这个标签

养成良好的注释习惯,便于开发人员的理解与阅读代码,程序不会执行注释内容

特殊标签

在开发页面中,一些特殊符号很难或者不方便直接使用,这里就可以使用字符代替

---

表格标签

表格是实际开发中常用的标签

表格主要展示，显示数据，可以让数据规整，可读性好

基本语法：

<table>

<tr> 

   <td>单元格内的内容</td>

            .....

</tr>

        ..........

  </table>

1. <table></table>是用于定义表格的标签

2. <tr> </tr>标签用于定义表格中的行，必须在<table></table>标签里面

3. <td></td>用于定义表格中单元格的内容，必须在<tr> </tr>标签里面

4. td：table data ，就是单元格的内容

表头单元格标签：一般表头单元格位于表格的第一行或第一列，表头单元格里面的内容加粗居中显示

<th>标签表示HTML表格的表头部分<table head>的缩写

格式：

<table>

<tr>

<th>内容</th>

.....

</tr>

..........

</table>

表格属性

表格标签这部分属性在实际开发中并不常用，后面通过CSS来设置

目的：

1. 记住这些英语单词

2. 直观感受表格的外观形态

这些属性要写到表格标签table里面去

任务：尝试做一个排行表格

表结构标签

在实际场景中，因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成 表格头部 和 表格主体 两大部分

在表格标签中：分别用：<thead>标签 表示表格的头部区域，<tbody>标签 表示表格的主体区域 这样可以方便分清表格结构

1. <thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签，一般位于第一行

2. <tbody></tbody>:用于定义表格的主体，主要用于放数据本体

3. 以上标签都是放在<table></table>标签中

合并单元格

特殊情况下,可以把多个单元格合并为一个单元格

合并单元格方式

跨行合并:rowspan="合并单元格的个数"

跨列并列:colspan="合并单元格的个数"

1. 目标单元格(写合并代码)

跨行:最上侧单元格为目标单元格,写合并代码

跨列:最左侧单元格为目标单元格,写合并代码

2. 合并单元格步骤

三部曲:1.先确定是跨行还是跨列合并

2.找到目标单元格,写上合并方式=合并的单元格数量.eg:<td rowspan="2"></td>

3.删除多余的单元格

表格总结:三大部分

1. 表格的相关标签

2. 表格的相关属性

3. 合并单元格

---

列表标签

表格是用来显示数据的,列表就是用来布局的

列表的最大特点:整齐,整洁,有序

列表可以分为三大类:无序列表,有序列表,自定义列表

无序列表(重点)

<ul>标签表示HTML页面的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义

语法:

<ul>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

....

</ul>

1. 无序列表各个列表项之间没有顺序级别之分,是并列的

2. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不允许的

3. <li>和</li>之间相当于一个容器,可以容纳所有元素

4. 无序列表会带有自己的样式属性,但在实际使用时,我们通过CSS来设置

有序列表(理解)

排有顺序的列表,其各个列表项会按照一定的顺序来定义

<ol>标签用于定义有序列表,列表排序以数字显示,并使用<li>标签来定义列表项

语法:

<ol>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

....

</ol>

1. <ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不允许的

2. <li>和</li>之间相当于一个容器,可以容纳所有元素

3. 有序列表会带有自己的样式属性,但在实际使用时,我们通过CSS来设置

自定义标签(重点)

使用场景:通常用于对术语或者名词进行解释或者描述,定义列表项前没有任何项目符号

<dl>标签用于定义描述列表(或定义列表),该标签,会与<dt>(定义项目/名字)和<dd>(描述每一个项目名字)一起使用

语法:

<dl>

<dt>名词1</dt>

<dd>名词1解释1</dd>

<dd>名词1解释2</dd>

</dl>

1. <dl></dl>里面只能包含<dt>和<dd>

2. <dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>

列表总结

注意:

1. 学会什么时候用无序列表,什么时候用自定义列表

2. 无序列表和自定义列表代码怎么写

3. 列表布局在学习完css后再来完成

---

表单标签

1. 为什么需要表单

使用表单方便收集用户信息

2. 表单的组成

表单域,表单控件(表单元素),提示信息

表单域:包含表单元素的区域 <form>用于定义表单域,以实现用户信息的收集和传递

<form>会把他范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">

各种表单元素控件

</form>

常用属性:

表单控件

在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的控件

input输入表单元素

<input>标签用于收集用户信息

语法:

<input type="属性值" /> 属性值的不同,输入字段拥有很多形式(文本,复选框,文本控件,单选按钮,按钮等等)

这个标签为单标签

type可取的值如下:

eg:

radio:单选按钮 实现多选一

注意:name是表单元素名字,实现多选一时,必须拥有相同的name,才可以实现 eg:

这里的name都是sex

效果图:

这里只可以在一个圆圈里面进行选择,如果没有相同的name或者没有写name,那么导致的结果就是,两个可以同时选择

所以在实现需要选择的框中,不论是单选或者复选框,最好都加上相同的name="这里面的文字自己随便取",这样代码才算完整

1. name和value是每个表单元素都有的属性值,主要给后台人员使用

2. name表单元素的名字,要求单选按钮和复选框要求有同样的name值

3. checked属性主要针对单选按钮和复选框,主要作用于一打开页面,就可以默认选中某个表单元素

4. maxlenghts用户在表单元素输入的最大字符数

任务:把属性都敲一遍,感受一下

label标签

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

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

语法:

<label for="sex">男</label>

<input type="radio" name="sex" id="sex" />

核心:<label>标签的for属性应当与id属性相同

select下拉表单元素

使用场景:在页面中,如果有多个选择让用户选择,并且想要节约页面空间时,我们可以使用这个标签空间定义下拉列表

语法:

<select>

<option>选项一</option>

<option>选项二</option>

<option>选项三</option>

......

</select>

1. <select>中至少包含一对<option>

2. 在<option>中定义selected="selected"时,默认选中项

textarea文本域表单元素

使用场景:当用户输入内容过多时,就不能使用文本框表单了,此时用这个控件

在表单元素中,此标签用于定义多行文本输入的控件

语法:

<textarea rows="5" cols="20">

文本内容

</textarea>

1. 通过<textarea>标签可以轻松的创建多行文本输入框

2. cols="每行中的字符数",rows="显示的行数",在我们的开发中不会使用,都是通过css来改变大小

综合案例

所用知识:

1. 表格标签

2. 列表标签

3. 表单标签

查阅文档

w3school 在线教程

MDN 网页文档 (mozilla.org)

css

css简介

CSS是层叠样式表(Cassadading Style Sheets)的简称或者称为CSS样式表或者级联样式表

CSS也是一种标记语言

CSS主要用于设置HTML页面中的文本内容(字体大小,内容大小,对齐方式等)、图片的外形(宽高、边框样式、边距)等等以及页面的排版布局和外观显示样式.

CSS最大的价值:由HTML专注去做架构呈现,样式交给CSS,即结构和样式相互分离

CSS语法规范

规范书写:

通常CSS是写在<head></head>的里面

在<head></head>里面加上<style></style>,在这里面书写

eg:

修改颜色

1. 选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式

2. 属性和属性值以"键值对"的形式出现

3. 属性是指指定对象设置的样式属性,如字体颜色,文本颜色,字体大小等等

4. 属性和属性值之间以英文的 ":" 分开

5. 多个"键值对"之间用英文的 ";" 区分

CSS代码风格

1. 样式格式书写

推荐第二种,更直观

2.样式大小写

推荐选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外

3.空格规范

1. 属性值前面,冒号后面,保留一个空格

2. 选择器(标签)和大括号中间保留空格

css基础选择器

作用:

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用,简单来说,就是选择标签用的

选择器分类

选择器分为基础选择器和复合选择器两个大类

基础选择器:是由单个选择器构成的

基础选择器又包括:标签选择器,类选择器,id选择器和通配符选择器

1. 标签选择器

标签选择器(元素选择器)是指用HTML名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式

作用:标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签

优点:能快速为页面中同类型的标签统一设置样式

缺点:不能设计差异化样式,只能选择全部的当前标签

2. 类选择器

如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以只用类选择器

类选择器在HTML中以class属性表示,在CSS中,类选择器以一个"."号显示

注意:1.类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)

2.可以理解为给这个标签起了一个名字,来表示

3.长名称或词组可以使用横线来为选择器命名

4.不要使用纯数字,中午等命名,尽量使用英文字母来表示

5.命名要有意义,尽量使别人一眼就能知道这个类名的目的

类选择器在开发中是较为常用的

案例:

3. 多类名

我们可以给一个标签指定多个类名,从而达到更多的选择目的.这些类名都可以选出这个标签.简单理解就是一个标签有多个名字.

1. 多类名使用方式

在标签class属性中写多个类名.多个类名中间必须用空格分开.这个标签就可以分别具有这些类名的样式

4.id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义

id选择器和类选择器的区别

1. 类选择器(class)好比人的名字,一个人可以有很多名字,同一个名字也可以被多个人使用

2. id选择器好比人的身份证号码,全国是唯一的,不得重复

3. id选择器和类选择器最大的不同在于使用次数上

4. 类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和javaScript搭配使用

5.通配符选择器

在CSS中,通配符选择器用"*"定义,他表示选取页面中所有元素(标签)

选择器总结

css字体属性

CSS Fonts(字体)属性用于定义字体系列,大小,粗细和文字样式

字体系列

CSS使用font-family属性定义文本的字体系列

字体大小

CSS使用font-size属性定义字体大小

标题比较特殊,可以单独设置大小,即使是处于整个页面中,也可以设置,不受整体影响

字体粗细

CSS使用font-weight属性设置文本字体的粗细

实际开发中,提倡使用数字进行表示加粗或者变细

文字样式

CSS中使用font-style属性设置文本的风格

字体复合属性

字体属性总结

文本属性

文本颜色

开发中最常用的是十六进制

对齐文本

装饰文本

重点记住下划线

文本缩进

行间距

CSS文本属性总结

css的三种样式表

按照css样式书写的位置(或者引入的方式),css样式表可以分为3大类:

1. 行内样式表(行内式)

2. 内部样式表(嵌入式)

内部样式表(内嵌样式表)是写到html页面内部.是将所有的css代码抽取出来,单独放到一个<style>标签中

3. 外部样式表(链接式)

css引入方式总结

Chrome调试工具

Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法

1. 快速生成HTML结构语法

2. 快速生成CSS样式语法

自动格式化代码

保存的时候自动格式化代码

因为工具不同,所以设置不一样,自行百度即可

CSS的复合选择器

1. 什么是复合选择器

2. 后代选择器(重要)

3. 子选择器(重要)

4. 并集选择器(重要)

1. 伪类选择器

1. 链接伪类选择器

2. focus伪类选择器

b.复合选择器总结

CSS的元素显示模式

1. 什么是元素的显示模式

2. 元素显示模式的分类

a.块元素

b.行内元素

c.行内块元素

总结

3.元素显示模式的转换

单行文字垂直居中

css没有提供居中代码,但我们可以自己实现

单行文字垂直居中的原理

css的背景

通过css背景属性,可以给页面元素添加背景样式

1. 背景颜色

2. 背景图片

3. 背景平铺

4. 背景图片位置

5. 背景图像固定(背景附着)

6. 背景复合性写法

7. 背景颜色半透明

8. 背景总结

CSS三大特性

1. 层叠性

上面代码中,会选择pink属性

颜色依旧是pink属性,但是大小咩有冲突,会正常执行,大小是12px

2. 继承性

测试文字的颜色为red 大小为:14px

注意:不是所有元素都可以继承

行高的继承

3. 优先级

权重叠加

css盒子模型

1. 看透页面布局的本质

2. 盒子模型(Box Model)组成

3. 边框(border)

边框简写

4. 表格的细线边框

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

6. 内边距(padding)

内边距复合写法

以上的几种复合写法,开发中都会使用到

7. 外边距(margin)

8. 外边距合并

9. 清除内外边距

*:通配符

ps的基本操作

圆角边框(重点)

盒子阴影(重点)

文字阴影

CSS浮动

浮动(float)

1. 标准流(普通流/文档流)

为什么需要浮动?

什么是浮动?

浮动特性(重难点)

特性:脱标

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

常见的网页布局

第三图代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{

margin:0;

padding: 0;

}

.top{

height: 50px;

background-color: gray;

}

.banner{

width: 980px;

height: 150px;

background-color:gray;

margin: 10px auto;

}

.box{

width: 980px;

margin: 0 auto;

height: 300px;

background-color: pink;

}

li{

list-style: none;

}

.box li{

width: 237px;

height: 300px;

background-color: gray;

float: left;

margin-right: 10px;

}

.box .last{

margin-right: 0;

}

.footer{

height: 200px;

background-color: gray;

margin-top: 10px;

}

</style>

</head>

<body>

<div class="top">top</div>

<div class="banner">banner</div>

<div class="box">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li class="last">4</li>

</ul>

</div>

<div class="footer">footer</div>

</body>

</html>

浮动布局注意点