没有合适的资源？快使用搜索试试~ 我知道了~

首页前端入门指南：HTML标签与CSS基础

前端入门指南：HTML标签与CSS基础

需积分: 16 28 下载量 150 浏览量更新于2024-07-19 2 收藏 2.96MB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

试读

103页

"本资源是一份有条理且详尽的前端笔记，旨在引导读者逐步掌握Web开发的基础。它由十章节构成，从HTML的入门介绍开始，深入探讨了HTML标签的使用、网页结构的构建以及语义化的重要性。第1章详细讲解了HTML的基础概念，包括代码初体验、HTML与CSS的关系，以及各种基础标签如`<body>`、``、`<h>`标签的运用，还有代码注释的使用。在第2章，读者会学习如何通过语义化的标签让网页更好地被搜索引擎理解，如``、``、``、``、`<q>`、` `等标签的应用。接下来的章节中，还会介绍列表（`<ul>`、`<ol>`）和表格（`<table>`）的使用，以及如何利用CSS进行样式设计，包括表格的美化和`<img>`标签在插入图片时的样式控制。第3章至第5章主要关注与用户交互的部分，如表单元素（`<a>`、`<form>`、各种输入类型如文本框、密码框、下拉列表等）的使用，以及如何通过`<code>`和`<pre>`标签展示代码。第6章则全面介绍了CSS（Cascading Style Sheets），包括其基本概念、优势和语法，以及如何通过CSS为网页添加丰富的样式。这份笔记不仅适合初学者系统学习前端基础知识，也对有一定基础的开发者提供了深入理解和实践的平台。通过阅读和实践这些章节，读者将建立起扎实的HTML和CSS基础，能够创建出结构清晰、功能完备的网页。"

资源详情

资源推荐

16 / 103

有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置 css

样式，那么哪种方法真正有效呢？在右边编辑器就出现了这种情况

1、使用内联式 CSS 设置“超酷的互联网”文字为粉色。

2、然后使用嵌入式 CSS 来设置文字为红色。

3、最后又使用外部式设置文字为蓝色（style.css 文件中设置）。

但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式

是有优先级的，

记住他们的优先级：内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式 css 样式的位置一定在外部式的后面。如右代

码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</styl

e>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调

换顺序，再看他们的优先级是否变化。

其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中 css 样

式是在的相同权值的情况下，什么是权值呢？在后面的 9-2 小节中会讲解到。

--------------------------------

9.什么是选择器？

每一条 css 样式声明（定义）由两部分组成，形式如下：

选择器{

样式;

17 / 103

}

在{ }之前的部分就是“选择器”，“选择器”指明了{ }中的“样式”的作用对象，也就是“样式”

作用于网页中的哪些元素。比如右侧代码编辑器中第 7 行代码中的“body”就是选择器。

--------------------------------

10.标签选择器

(1)标签选择器其实就是 html 代码中的标签。如右侧代码编辑器中的<html>、<body>、

<h1>、、<img>。例如下面代码：

p{font-size:12px;line-height:1.6em;}

上面的 css 样式代码的作用：为 p 标签设置 12px 字号，行间距设置 1.6em 的样式。

--------------------------------

11.类选择器（class）

(2)类选择器在 css 样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为

“胆小如鼠”、“勇气”字体设置为红色。

语法：

.类选器名称{css 样式代码;}

注意：

1、英文圆点开头

18 / 103

2、其中类选器名称可以任意起名（但不要起中文噢）

使用方法：

第一步：使用合适的标签把要修饰的内容标记起来，如下：

胆小如鼠

第二步：使用 class="类选择器名称"为标签设置一个类，如下：

胆小如鼠

第三步：设置类选器 css 样式，如下：

.stress{color:red;}/*类前面要加入一个英文圆点*/

--------------------------------

19 / 103

12.ID 选择器（id）

(3)在很多方面，ID 选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置 id="ID 名称"，而不是 class="类名称"。

2、ID 选择符的前面是井号（#）号，而不是英文圆点（.）。

右侧代码编辑器中就是一个 ID 选择符的完整实例。

#stress{

color:red;

}

#setGreen{

color:green;

}

--------------------------------

20 / 103

13.类和 ID 选择器的区别

学习了类选择器和 ID 选择器，我们会发现他们之间有很多的相似处，是不是两者可以

通用呢？我们不要着急先来总结一下他们的相同点和不同点：

相同点：可以应用于任何元素。

不同点：

1、ID 选择器（同一 ID 名）只能在文档中使用一次。与类选择器不同，在一个 HTML 文

档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

下面代码是正确的：

三年级时，我还是一个胆小如鼠的小女孩，上

课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<spa

n class="stress">勇气来回答老师提出的问题。

而下面代码是错误的：

三年级时，我还是一个胆小如鼠的小女孩，上课从

来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id

="stress">勇气来回答老师提出的问题。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。

我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID 选择器是

不可以的（不能使用 ID 词列表）。

下面的代码是正确的。(完整代码见右侧代码编辑器)

剩余102页未读，继续阅读

用django写一个云笔记项目：用户可以在该系统注册、登录，登录后可以在里面写日记，包括对日记的增删改查需求分解：模块1：用户模块功能：用户注册、用户登录字段：用户名、密码界面：一般的简单注册登录界面即可模块2 ：云笔记模块功能：展示首页、对笔记进行增删改查字段：标题、内容、新增时间、修改时间界面：首页要求未登录状态显示登录和注册按钮，已登录状态显示欢迎用户以及查看笔记按钮；笔记列表界面要求用表格展示所有笔记，并且每个笔记包含修改和删除按钮，界面顶部显示欢迎用户以及新增笔记按钮；新增和修改界面要求包含标题、内容以及提交按钮；

模块3：认证模块功能：校验用户登录态，保持用户会话状态界面：无模块4：用户权限模块功能：管理用户权限，保证只有拥有权限的用户可以进行...7.集成前后端，进行完整性测试 8.部署到线上服务器 9.监控和维护

粉丝: 2
资源: 15

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前端入门指南：HTML标签与CSS基础

vue2-3笔记2023-8-31

前端学习的个人笔记

黑马前端css笔记.zip

b站 飞哥 大前端进阶 笔记

web前端开发笔记vscode

前端学习笔记 javascript

前端开发html笔记

前端html5css3笔记整理下载

web前端开发预习笔记

javaweb前端程序设计笔记

渡一前端html、css、js笔记及学习规划.zip

千锋教育python全套视频教程800集(完整版)笔记

超详细mit线性代数公开课笔记-完整

前端开发，pc电脑屏幕怎么模拟笔记本屏幕，用来看笔记本上页面样式有什么区别

请按照前3部列出详细完整的笔记

帮我写一个个人电子笔记本系统，前端使用vscold，采用jsp框架，后端用eclipse使用java语言，数据库用mysql，前端需要登陆且有录入功能，可以以日期进行搜索，然后增删改查。前端，后端，数据库的代码请给出

前端怎么适配笔记本电脑150%分辨率

基于libgraphics和simpleGUI库，生成一个笔记管理系统，打开笔记、关闭笔记、保存笔记、使用说明等内容  支持笔记创建，允许用户自主创建笔记以及命名  支持笔记编辑，允许用户对笔记内容进行编辑，文本输入

c语言笔记整理完整版

最新资源

b站飞哥大前端进阶笔记