HTML+CSS学习笔记：从入门到精通

需积分: 12 38 浏览量更新于2024-07-19 收藏 1.04MB DOC 举报

"这是一份全面的Web学习笔记，主要关注HTML、CSS和网页布局的基础知识，特别提到了React作为标签之一，可能意味着在后续内容中会涉及到React框架的应用。笔记详细介绍了HTML的基础结构和元素，包括头部信息、主体元素、文本和图像的使用、表格和链接的创建，以及列表和表单元素。此外，还涵盖了CSS的基础，如语法、选择符、属性和继承，以及如何控制元素的显示效果。" 这份Web学习笔记是为初学者准备的，它首先讲解了网页的基本构成和Web标准的重要性，通过一个简单的示例帮助理解。接着，深入探讨了CSS的原理，包括什么是CSS，其语法结构，以及调用样式的优先级。在HTML部分，笔记详细阐述了HTML页面的基本结构，如元素的书写格式和属性，以及如何定义头部信息，如文档类型、页面标题、样式和链接。 HTML元素的使用是笔记的重点，包括页面主体元素<body>的设置，如背景、文本、边界的定义，以及使用文本元素如<div>、<p>、<h1>至<h6>等。图像元素<img>和表格元素的使用也得到了详细解释，包括链接元素<a>的各种形式，以及列表和表单元素的使用，如<input>、<select>、<textarea>和<label>。在CSS部分，笔记介绍了CSS的语法基础，如选择符、属性和属性值，以及继承的概念，这些都是控制元素显示效果的关键。虽然笔记没有详细展开盒子模型等内容，但可以推测这是后续学习的重要一环，因为控制元素的布局和样式是CSS的核心功能。最后，虽然标题中没有明确提到React，但在标签中被提及，暗示笔记可能包含React框架的介绍，可能是关于如何将React与HTML和CSS结合使用，创建动态和交互式的Web应用。这部分内容可能会涉及组件化开发、状态管理和React的生命周期方法等。这份Web学习笔记提供了一个全面的入门指南，涵盖了Web开发的基础，对于想要系统学习Web开发的读者来说，是非常有价值的参考资料。

学习笔记—杨也

（）正确嵌套所有元素当进行元素嵌套时，必须按照打开的顺序关闭 "/元

素中不能包含其他的"/元素、8&!/元素中不能包含其他的8&!/元素

（）元素必须要封闭如图片)%+$!60K(%6D(+K/

（>）属性必须加上双引号如：":1*%.0K>(-K/

（<）明确所有属性的值 616B1. 属性是可以不取值的，但必须用自己的名称

作为值。

（F）特殊字符要用编码表示：P必须用P"( 的形式。

（M）推荐使用级联样式来控制外观推荐使用外部连接来调用脚本

（）使用页面注释 这是一个注释/

4.选择文档类型

 是文档类型的简写，在页面中用来指定页面的  版本。

三种文档类型：过渡的文档类型（!"#$%%&#"）、严格的（ I!%6E和框架的

（Q!"1$1）。

第五章：定义页面头部信息

1.页面基本元素<html>

控制文本的显示方向：默认为从左向右显示，.%!0K!K/设置为从右向左显

示.%!0K!K/

指定页面的语言：通过 6&#1#"#+3"+1 来设置：如 1"  (

123%40K6&#1#"#+3"+1K6&#1#0K?'K/（意思是本页面使用的是中文语言，

' 是中国版本）。

2.页面头部元素<head>

3.显示页面标题<title>

%1 是 1". 部分唯一必须的元素，作用是在浏览器的标签栏显示该页面的标题。

4.基本设置元素<base>

为页面上的所有链接规定默认地址或者是默认目标。

5.定义页面的信息<meta>

定义文字编码

使用 (123%4 的 6&#1#5(1 可以提供网页的编码信息，以告诉浏览器网页使用

的是什么编码，以免出现乱码情况。

1"  (123%40K6&#1#5(1K  6&#1#0K1-K76"!1$10Q

K/

Q 是国际化编码。在中国还可以使用 +: 编码。如果一台电脑没有没有安装

简体中文字符集时，当它访问编码为 +: 的中文网页时，则显示出来的是乱码。

原因：历史遗留 文档体积不同。用 +: 一个汉字占用  个字节的大小，而国

际标准则占  个字节甚至更多，所以使用 +: 字符来进行编码存储的体积较小。而对

于文字多，访问量大的中文网站来说，使用 +: 编码的网页文档在下载、传输上可以

节省很多的流量。

学习笔记—杨也

定义页面的关键字

为搜索引擎提供关键字列表。1"#"10KB15*&!.$K6&#1#0K关键字

，关键词 L关键词 K/

定义页面的主要内容

1"#"10K1$6!%(%&#K6&#1#0K你网页的简述”/

>定义页面的搜索方式

1"  #"10K,&:&$K  6&#1#0KHR'&#1R#.1-R'&%#.1-RQ&&*R

'&8&&*K/可以选择相应的参数。

<定义页面的版权信息

1"#"10K&(5!%+K6&#1#0K本页版权 $"!S!1所有。H,%+$

,1$1!41.O/

F定义页面的作者信息

1"#"10KH3&!K6&#1#0K杨勇”/

M定义页面的刷新时间

页面停留一段时间后刷新1"(123%40K,18!1$K6&#1#0KK/

时间  秒

在页面停留 < 秒后，页面自动跳转到 +&&+1 的首页。代码为：

1"  (123%40K,18!1$K

6&#1#0K<K7!0()***+&&+16&K/

定义页面的跳转

在页面载入或者是退出的时候，对页面加入一些效果。需要用到两个属性。

"+11#1!（进入）和 ("+11-%（退出）。两种滤镜，一种是 :1#.!"#$L产生渐

隐效果。

1"(123%40K("+11#1!K6&#1#0K:1#.!"#$C3!"%&#0-EK/

1"(123%40K("+11-%K6&#1#0K:1#.!"#$C3!"%&#0-EK/

另一种动态滤镜 !141"!"#$ 用于页面进入与退出的效果。

1"(123%40K("+11#1!K6&#1#0K!141"!"#$C.3!"%&#0-L!"#$%%&#05EK/

1"(123%40K("+11#1!K6&#1#0K!141"!"#$C.3!"%&#0-L!"#$%%&#05EK/

其中：!"#$%%&# 表示滤镜的类型，表示使用哪种特效，取值为 T

3!"%&#)表示滤镜特效的持续时间，单位为秒。

6.创建页面的样式<style>

$51/

选择符｛属性：属性值；｝

$51/

两种调用方式，6"$$ 和 。页面的所有样式都可以写在$51/和$51/间。

7.链接元素<link>

常用于链接样式表%#B!180K$51$6$$K!10K$51$11K5(10K1-6$$K/

J制作收藏夹图标

为了兼容，一般需要把图片转化成 %6& 格式，然后再加以调用。

%#B!10K$&!63%6&#K!180K8"4%6&#%6&K/

剩余42页未读，继续阅读

li610218

粉丝: 0
资源: 1

HTML+CSS学习笔记：从入门到精通

一个记录笔记的软件, 把自己的一些学习到的东西记录下来

wx494社区门诊管理系统小程序-php+vue+uniapp.zip（可运行源码+sql文件+文档）

SMS学习笔记

JAVA WEB学习笔记

java web 学习笔记

semantic web学习笔记

web学习笔记.docx

web学习笔记 —— tomcat

web学习笔记.doc

web学习笔记 —— javascript基础

最新资源