HTML&CSS笔记

最新推荐文章于 2024-11-04 09:11:09 发布
最新推荐文章于 2024-11-04 09:11:09 发布
阅读量1k 收藏 17
点赞数 9
文章标签： html css 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/owen0409liu/article/details/139549135
版权

HTML笔记

一、网页的相关概念

1.1什么是网页

  1. 网站是指互联网上根据一定规则，使用HTML等制作的用于展示特定内容相关的网页集合

  2. 网页是网站中的一部分，通常是HTML的文件，它要通过浏览器来阅读

1.2什么是HTML

  1. HTML指的是超文本标记语言，是一种用来描述网页的语言；它不是一种编程语言，而是一种标记语言

  2. 它可以加入图片、声音、动画、多媒体等内容（超越文本限制）

  3. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超链接文本）

1.3网页的形成

  1. 网页是由网页元素组成的，这些元素是利用html标签来描述的，然后通过浏览器解析来显示给用户

  2. 前端人员开发代码--->浏览器解析代码--->生成最后的Web页面

二、常用浏览器

2.1常用的浏览器种类

  1. 常用的有：火狐（Firefox）、IE/Edge、谷歌（Chrome）、Safari和Opera等

  2. 浏览器内核：IE（内核：Trident）、firefox（内核：Gecko）、Safari（内核：Webkit）、Chrome&Opera（内核：Blink）

三、Web标准

  1. Web标准是由W3C组织及其他标准化组织指定的一系列标准的集合

3.1为什么需要Web标准

  1. 浏览器不同，它们显示的页面或排版就有些许差异

3.2Web标准的构成

  1. 主要包括结构、表现、行为三方面

    1.结构：用于对网页元素的整理和分类

    2.表现：用于设置网页元素的版式、颜色、大小等外观样式，主要是CSS

    3.行为：是网页模型的定义及交互的编写，现阶段主要是Javascript

四、HTML标签

4.1HTML语法规范

  1. HTML标签是由尖括号包围的关键词，例如<html>

  2. HTML标签通常是成对出现的，称为双标签，第一个是开始标签，第二个是结束标签

  3. 有些特殊的标签必须是单个标签，例如<br />，称之为单标签

4.2标签关系

  1. 双标签关系可以分为两类：包含关系和并列关系

  2. <html>

    <head><head>

    </html>//包含关系

  3. <html></html>

    <body><body>//并列关系

4.3HTML的基本结构标签

  1. 第一个HTML网页

    1. 每个网页都会有一个基本的结构标签（也叫骨架标签），页面内容也是在这些基本标签上书写

    2. HTML页面也称为HTML文档

4.4网页开发工具

  1. 文档类型声明标签：<!DOCTYPE >文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页

  2. lang 语言种类：用来定义当前文档显示的语言；en定义语言为英语，zh-CN定义语言为中文；eg：<html lang="en">

  3. 字符集 charset：以便计算机能够识别和储存各种文字；在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码；eg：<meta charset="UTF-8">

五、HTML常用标签

5.1标签语义

  1. 重点是记住每个标签的语义并理解其含义，再合适的地方选择合适的标签，可以让页面更加清晰

5.2标题标签

  1. 为了使网页标签更具语义化，我们经常会在页面中用到标题标签。HTML提供了六个等级的标签；即<h1>-<h6>

  2. 加了标题的文字会变加粗，字号也会依次变大；一个标题会独占一行

5.3段落标签和换行标签

  1. 在网页中，要把文字有条理的展示出来，就需要将文字分段显示。

  2. <p>标签用于定义段，可以将HTML文档分为若干个段落

  3. 文本在一个段落中会根据浏览器窗口大小自动换行

  4. <br />用于强制换行显示；该标签为单标签；该标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直距离

5.4文本格式化标签

  1. 在网页中，有时需要为文字设定加粗、斜体或下划线等效果，这是就需要HTML中的文本格式化标签，以突出重要性，比普通文字重要

5.5<div>和<span>标签

  1. 这两个标签是没有语义的，他们就是一个盒子，用来装内容的

  2. div标签是用来布局的，但是一行只能放一个div标签

5.6图像标签和路径

  1. 在HTML标签中，<img>标签用于定义HTML页面中的图像；

  2. src是<img>标签的必须属性，它用于指定文件图像的路径与文件名

  4. 图像标签注意事项：

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

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

    3. 属性采用键值对的格式，即key=“value”

  5. 路径：

    1. 目录文件夹和根目录：实际工作中，我们的文件是不能随便乱放的，否则用起来会很难迅速找到，因此需要一个文件夹来管理

    2. 路径：相对路径/绝对路径

      1. 相对路径：以引用文件所在位置为参考基础，而建立的目录路径；简而言之就是图片相对于HTML页面的位置

      2. 相对路径分类：

      3. 绝对路径：是指目录下的绝对位置，直接到达目标位置通常是从盘符开始的路径；只在当前电脑上生效，使用较局限

5.7超链接标签

  1. 在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面

  2. 超链接的语法格式：

    1. <a href="跳转目标" target=目标窗口的弹出方式> </a>

    2. target 打开窗口方式：默认值是 self(当前窗口打开页面)；blank(在新窗口打开页面)

  3. 链接分类：

    1. 外部链接：href的内容为网址

    2. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可

    3. 空链接：如果当时没有确定的的链接目标，<a href="#"><a/>

    4. 下载链接：如果href里面的地址是一个文件或安装包，那么会下载这个文件

    5. 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频等都可以添加超链接

    6. 锚点链接：点击这个链接，可以快速定位到页面中的位置

      1. 在连接文本的href属性中，设置属性值为#名字的形式，如<a href="#two"><a/>

      2. 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two"></h3>

六、HTML中的注释和特殊字符

6.1注释

  1. 注释标签的作用是在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的文字

  2. <!--注释语句--> 快捷键：ctrl+/

6.2特殊字符

  1. 在HTML文件中，一些特殊符号无法直接使用，此时可以用特殊字符代替

七、HTML中的常用标签（二）

7.1表格标签

  1. 表格的主要作用：用于显示、展示数据

  2. 表格的基本语法：

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

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

    3. <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

    4. 字母td指表格数据，即单元格的内容

  3. 表头单元格标签

    1. 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

    2. <th></th>标签表示HTML表格中的表头部分

  4. 表格属性：实际开发中不常用，后面通过CSS来设置

  5. 表格的结构标签

    1. 因为表格可能很长，为了更好地表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

    2. 在表格标签中，分别使用：<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域

  6. 合并单元格

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

    2. 合并单元格的方式：跨行合并：rowspan="合并单元格的个数"；跨列合并：colspan=“合并单元格的个数”

    3. 目标单元格：（写合并代码）；跨行：最上侧单元格为目标单元格，写合并代码；跨列：最左侧单元格为目标单元格，写合并代码

    4. 合并单元格三部曲：

      1. 先确定跨行还是跨列

      2. 找到目标单元格，下还是那个合并代码

      3. 删除多余的单元格

7.2列表标签

  1. 表格是用来显示数据，那列表就是用来布局；列表最大的优势就是整齐、整洁、有序。它做为布局会更加自由和方便

  2. 无序列表

    1. <ul>标签表示HTML项目中的无序列表，一般会以项目符号呈现列表，而列表项似乎用<li>标签定义

    2. 基本语法格式：<ul><li></li></ul>

    3. 无序列表的各个列表之间没有顺序级别之分，是并列的

    4. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字是无效的，<li></li>中可以放置任何标签

  3. 有序列表

    1. 有序列表即为有排列顺序的列表，其各个列表会按照一定的顺序排列定义

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

    3. 其余注意事项与无序列表类似

  4. 自定义列表

    1. <dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用，基本格式与无序列表类似

    2. <dl></dl>中只能包含<dt>和<dd>

    3. <dd>和<dt>的个数没有限制

7.3表单标签

  1. 表单的主要功能是收集信息；表单通常由表单域、表单控件和提示信息三部分构成

  2. 表单域：一个包含表单元素的区域

    1. 在HTML标签中，<from>标签用于定义表单域，以实现用户信息的收集和传递；<form>会把它范围内的表单元素信息提交给服务器

  3. 表单控件（表单元素）

    1. input输入表单元素：

      1. <input>标签用于收集用户信息；标签内包含一个type属性，根据不同的type属性值，输入内容可以有很多种形式，<input type="属性值" />

      3. 除type属性外，<input>标签还有很多其他属性：

      4. name和value是每个表单元素都有的属性值，主要是给后台人员看的

      5. name表单元素的名字，要求单选按钮和复选框要有相同的name

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

    2. <label>标签

      1. 该标签为input元素定义标注

      2. 该标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转到或选择对应的表单元素上

      3. 语法格式：

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

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

        核心：<label>标签的for属性应当与相关元素的id属性相同

    3. <select>下拉表单

      1. 使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>控件定义下拉表单

      2. 语法：<select> <option>option1<option> <option>option2<option> <select>

      3. 该控件中至少包含一个option；且可以定义selected=“selected”，当前项即为默认选项

    4. textarea文本域标签

      1. 在用户输入内容较多的情况下，我们可以使用<textarea>标签定义多行文本输入

      2. 语法格式：<textarea cols="10" rows="10">text</textarea>

CSS笔记

一、导读

1.1简介

  1. CSS（层叠样式表）也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式

  2. CSS用于美化HTML页面

1.2CSS语法规范

  1. CSS规则由两个主要部分构成：选择器以及一条或多条声明

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

  4. 属性和属性值之间用“：”分开/属性与属性之间用“;”分开

1.3CSS代码风格

  1. 样式格式书写

    1. 紧凑型格式：h3{color:deeppink;font-size:20px}

    2. 展开格式：h3{

      ​ color:deeppink;

      ​ font-size:20px;

      ​ }

  2. 大小写规范：建议样式选择器，属性名，属性值关键字全部使用小写字母

  3. 空格规范：属性值的前面，冒号后，都打一个空格；选择器标签和大括号中间保留空格

二、CSS的基础选择器

2.1选择器简介

  1. 选择器的作用：根据不同需求把不同的标签选出来，简而言之就是选择标签

  2. 选择器分类：基础选择器和复合选择器

    1. 基础选择器：由单个选择器组成；包括：标签选择器、类选择器、id选择器和通配符选择器

2.2标签选择器

  1. 是指使用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签制定统一的CSS样式

  2. 可以把某一类标签都选择出来，如<div>标签或<span>标签

2.3类选择器

  1. 如果想要差异化选择不同的标签，单独选择一个或某几个标签，可以使用类选择器

  2. .类名 {

    属性1: 属性值1;

    ...

}

  1. 例如，将所有拥有 red 类的 HTML 元素均为红色。

    .red {

    color: red;

    }

  2. 语法

    结构需要用class属性来调用 class 类的意思

    <div class=‘red’> 变红色 </div>

  3. 口诀：样式点定义，结构类调用。一个或多个，开发最常用

  4. 多类名使用方式：<div class="red font20">亚瑟</div>；这样这个标签就可以具有这些类名的样式

2.4id选择器

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

  2. 基本语法：#id名 {

    属性1: 属性值1;

    ...

}

  1. id属性只能在每个HTML文档中出现一次

  2. 口诀：样式#定义,结构id调用, 只能调用一次, 别人切勿使用.

2.5通配符选择器

  1. 使用“*”定义，表示选取页面中所有元素

  2. 语法格式：* {

    属性1: 属性值1;

    ...

}

  1. 不需要调用，自动就给所有的元素使用样式

2.6总结

三、字体属性

3.1字体系列

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

  2. 语法格式：p { font-family:"微软雅黑";}

    div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

  3. 个字体之间必须使用英文状态下的逗号隔开

  4. 常见字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

3.2字体大小

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

  2. 语法格式：p {

    font-size: 20px;

}

  1. 可以给body指定真个和页面文字的大小

3.3字体粗细

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

  2. 语法格式：p {

    font-weight: bold;

}

3.4文字样式

  1. CSS 使用 font-style 属性设置文本的风格。

  2. 语法格式:p {

    font-style: normal;

}

3.5字体符合属性

  1. 字体属性可以把以上文字样式综合来写, 这样可以更节约代码

  2. body {

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

}

  1. 使用font属性时，必须按照上面的语法格式中的顺序书写，不能更改顺序，各个属性之间以空格隔开

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

3.6总结

四、文本属性

4.1文本颜色

4.2对齐文本

  1. text-align属性用于设置元素内文本内容的水平对齐

  2. 语法格式：div{text-align：center；}

  3. left：左对齐；right：右对齐；center：居中对齐

4.3装饰文本

  1. text-decoration属性规定添加到文本的装饰

  2. 语法格式：div{text-decoration：underline；}

  3. underline：下划线；overline：上划线；line-through：删除线

4.4文本缩进

  1. text-indent属性用来定义文本的第一行缩进

  2. 语法格式：p{text-indent：20px/2em；}

  3. em是一个相对单位，就是当前元素一个文字的大小，如果没有设置大小，则会按照父元素的1个文字大小

4.5行间距

  1. line-height属性用于设置行间的距离

  2. 语法格式：p{line-height：26px；}

4.6总结

五、CSS引入方式

5.1CSS的三种样式表

  1. CSS三种样式：行内样式表、内部样式表、外部样式表

5.2内部样式表

  1. 就是在html页面内部写样式，但是是单独写到style标签内部

  2. 格式：<style>

    ​ div{

    ​ background-color: blue;

    ​ }

    </style>

  3. <style>标签理论上可以放在HTML文档中的任何位置

5.3行内样式表

  1. 是在元素标签内部的style属性中设定CSS样式，适用于简单修改样式

  2. 语法格式：<div style="color: blueviolet; font-size: 20px;">liusichen</div>

  3. style其实就是标签的属性；在双引号中间，写法要符合CSS规范

5.4外部样式表

  1. 实际开发都是使用外部样式表，适用于样式较多的情况；核心是单独写到CSS文件中，之后把CSS文件引入得到HTML页面中使用

  2. 引入外部样式表：

    1. 新建一个后缀名为.css的样式文件2，把所有CSS代码都放如此文件中

    2. 在HTML页面中，使用<link>标签引入这个文件；<link rel="stylesheet" href="css文件路径">

5.5总结

六、Chrome调试工具

  1. Chrome浏览器提供了一个非常好的调试工具，可以用来调试我们的HTML结构和CSS样式

  2. 按F12键或右击页面空白处-检查

owen0409liu
关注
html&css笔记完整版
小旻
10-23 4541
把1,2合在一起了，方便查看 教程指路：这里 目录 1.导入 京东界面练习（p102-114） 设置网站图标（用在标题栏和收藏栏） 2.vscode使用 3.html 实体 meta标签： 语义化标签 块元素和行内元素 列表 超链接 路径： 图片标签 内联框架 音视频 表格table 表单form CSS 设置样式： 语法： 选择器： 单个选择器： 复合选择器： 父子兄弟选择器： 属性选择器 伪类选择器： 否定伪类： 超链接伪类： 伪元素选.
HTML CSS整理笔记
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
HTML&CSS 学习笔记
Mxs_503的博客
04-28 1134
HTML&CSS学习 提示：这是我看狂神的Html+css视频时，所记录的笔记！希望对大家有所帮助！
前端 HTML&CSS 学习笔记2（基于尚硅谷教学视频）
rangpin的博客
08-09 942
十一集（图片标签） 1.使用img自结束标签向网页中引入外部图片 2.src 设置一个外部图片的路径 3.alt 在图片不能显示时，设置对图片的描述，而且搜索引擎可以通过alt属性来识别不同图片，如果不写alt属性，则搜索引擎不会对该图片进行收录 4.width 设置宽度，一般以px为单位 5.height 设置高度，一般以px为单位 6.宽度和高度如果只设置一个，另一个也会等比例调整大小 十...
笔记33-HTML&CSS
热门推荐
terence的博客
06-30 7万+
今日内容： 1. HTML标签：表单标签 2. CSS： HTML标签：表单标签 * 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 * 分类：一共7种，2种比较常用 * get：
HTML5&css的学习笔记
GRIT0716的博客
01-03 256
我要在这里存放一些HTML5和cssの学习笔记
最全 HTML + CSS 笔记
The_RedMaple的博客
07-09 2364
HTML编程语言 超文本标记式编译语言 HTML语言不区分大小写 双目标签命令： <></> 单目标签命令： </> 单目标签中/可以省略 属性和属性之间用空格隔开，引号可写可不写 常见的html标签 <html></html>:包含两个子标签 <head></head>:设置基础参数信息 <body></body>:负责通知浏览器将指定内容以指定方式显示出来 <!---->：注解 &l
HTML & CSS 概述_1
qq_45370222的博客
04-10 3262
HTML & CSS 笔记_1
CSS笔记
2201_76100326的博客
08-12 3721
before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置高宽度等属性需要首先设置为块元素。content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content: ' ';before与after的主要用途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以方便对伪元素定位。
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
qq_43754404的博客
01-05 7498
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20 单位数字：10个（0-9） 2.二进制（计算机底层的进制）： 特点：满2进1 计数：0 1 1...
HTML&CSS自学笔记大全
04-09
HTML和CSS是构建网页的基础，它们分别负责网页的结构和表现。HTML（HyperText Markup Language）是超文本标记语言，它的主要任务是描述网页的结构，就像人体的骨架一样，为网页提供基本框架。HTML使用一系列标签来...
HTML&CSS的思维导图笔记
04-12
这份“HTML&CSS的思维导图笔记”无疑是对这两个核心技术的全面梳理，对于初学者和进阶者都是极好的学习资源。 HTML是网页内容的结构语言，它定义了网页的基本元素，如标题、段落、图片、链接等。HTML由一系列的标签...
B站Mosh终极 HTML & CSS 课程汇总笔记
07-20
这个笔记都是我在看Mosh的web前端Html和css课程，自学时记下的笔记。总共不到2w字，前面在讲一些基础的时候记录的文字较多，但是后面基本上都是敲代码了，所以，笔记就很少了，基本全是代码。 还有一点，就是我用的...
HTML 基础标签——元数据标签 ＜meta＞
Allen-
11-01 272
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
CSS:基础选择器,文字控制属性(HTML)
最新发布
m0_75035023的博客
11-04 75
CSS:基础选择器,文字控制属性(HTML),javaweb
flex布局的练习题 ---都抖音解决方案(web)
m0_75035023的博客
10-31 382
flex布局的练习题 ---都抖音解决方案(web),html,
Html编写发射粒子爱心
m0_58419490的博客
10-31 1139
【代码】Html编写发射粒子爱心。
HTML 基础标签——文本内容标签 ＜ul＞、＜ol＞、＜blockquote＞ 、＜code＞ 等标签的用法详解
Allen-
11-01 500
在 HTML 文档中，文本内容标签用于定义和格式化文本信息。这些标签不仅使文本内容易于阅读和理解，还可以通过不同的格式和结构增强网页的可读性。本文将详细介绍常用的文本内容标签，包括标题标签、段落标签、文本格式化标签、列表标签、引用标签，以及代码和预格式文本标签。
HTML&CSS基础学习笔记：超链接与基本标记解析
"HTML&CSS 学习笔记" HTML（HyperText Markup Language）是网页开发的基础，它是一种标记语言，主要用于创建结构化的文档，并通过样式（如CSS）进行美化。HTML的特点是忽略大小写，语法相对宽松，而XML（Extensible...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值