第一周预习-Web前端开发技术，HTML+CSS入门

最新推荐文章于 2024-07-11 15:29:37 发布

An_Ad

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量677

点赞数 13

文章标签：前端 html css

本文链接：https://blog.csdn.net/An_Ad/article/details/136966196

版权

一. Web前端开发技术

Web前端开发技术是指用于创建和优化用户在浏览器或应用程序中可见部分的技术，包括网页设计、交互设计和网站性能优化等。以下是Web前端开发涉及的主要技术：

HTML (HyperText Markup Language): HTML是一种超文本标记语言，用于构建网页的骨架。它定义了网页的结构和内容，包括文本、图片、链接等元素的组织方式。
CSS (Cascading Style Sheets): CSS是用来控制网页样式和布局的一种样式表语言。它使得开发者可以对HTML元素进行美化处理，包括颜色、字体、间距和响应式设计等。
JavaScript: 这是一种高级的、解释型的编程语言，主要用于网页交互。JavaScript能够实现动态功能，如动画、表单验证和异步数据加载等。

二.HTML

1.HTML是什么

HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建和设计网页的标准标记语言。它允许开发者通过一系列标签来定义网页文档的结构和内容，这些标签包括标题、段落、列表、链接、图片和其他多媒体元素等。以下是HTML的一些关键特点：

易于学习和使用：HTML是一种相对简单的语言，入门容易，是许多前端开发者的起点。
标准化：HTML遵循全球统一的Web标准，由万维网联盟（World Wide Web Consortium, W3C）进行规范和维护。
跨平台性：HTML编写的网页可以在任何操作系统和浏览器上显示，确保了网页内容的广泛可访问性。
支持嵌入其他语言：HTML可以与CSS和JavaScript等语言结合使用，以实现更丰富的功能和更美观的界面。

2.文件结构

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8"> 
<title>网页标题</title>
</head>
 
<body>
网页正文
</body>
 
</html>

一个HTML文件的基本结构包括DOCTYPE声明、html标签、head标签和body标签。这些组成部分共同构成了一个完整的HTML文档，允许浏览器正确解析并显示网页内容。

DOCTYPE声明：这是HTML文件中的第一行，它告诉浏览器正在使用的是哪个版本的HTML。例如，对于HTML5，这个声明通常是<!DOCTYPE html>。
html标签：这个标签是整个HTML文档的根元素，所有其他HTML元素都包含在这个标签内。它通常包括两个属性：lang（定义页面的语言）和xmlns（定义XML命名空间）。
head标签：这个标签包含了所有关于网页的元信息，如标题（通过<title>标签定义），字符集（通过<meta charset="UTF-8">定义），引入CSS文件（通过<link>标签定义）以及JavaScript文件（通过<script>标签定义）。
body标签：这个标签包含了网页的所有可见内容，如文本、图片、链接、列表等。它通常是HTML文件中体积最大的部分，因为它承载了用户在浏览器中实际看到的所有内容。

3.网页结构

网页的整体结构通常会被划分为若干区域，例如页眉、页脚、内容页、边栏等部分，在实现时，HTML需要在body中添加一些结构性标签，如div、header、footer等。

①.div标签

div标签用于划分区域，div本身没有特定的含义。可以通过id属性或class属性定义一个名字来区分这一区域

②.语义化结构标签

语义化结构标签是HTML5引入的一组新的标签，旨在使网页的结构更加清晰和标准化，从而提升代码的可读性和可维护性。以下是一些常用的HTML5语义化结构标签及其简要说明：

<header>：用于定义文档或节的页眉。通常包含网站或页面的标题、导航、搜索框等信息。一个页面可以有多个<header>元素。
<nav>：定义导航链接的区域。它用于包含网站的主要导航菜单或页内导航链接。
<main>：标识文档或应用的主体内容。在一个页面中，<main>元素应当是唯一的，并且不包含像头部（<header>）、导航（<nav>）或底部（<footer>）这样的辅助内容区域。
<article>：定义一个独立的内容块，如博客文章、新闻报道、用户评论等。这个标签强调内容的独立性，即即使从其余的页面内容中分离出来，该内容也是有意义的。
<section>：定义文档中的一个独立区域或节。可以将文章、评论、产品列表等划分为不同的<section>，每个<section>通常都有其标题。
<aside>：定义与主要内容相关但可以独立存在的内容，常用于侧边栏、广告、引用、相关链接等。
<footer>：定义文档或节的页脚，它可以包含作者信息、版权信息、联系信息等。与<header>类似，<footer>也可以在文档中出现多次。

4.HTML常用标签

在HTML文件中，还可以使用多种标签来组织内容，如HTML提供6级标题，<h1>到<h6>用于标题，<p>用于段落，<a>用于链接，<img>用于图片，<ul>和<ol>用于列表等。

在HTML中，有许多常用的标签来构建网页的结构和内容。以下是一些常用的HTML标签及其简要说明：

段落和换行
<p>：用于定义一个段落，使文本呈现为一个块级元素，段落之间会自动添加空行。
<br/>：用于在文本中创建换行，它是一个单标签，不需要结束标签。
<pre>：用于定义预格式化的文本，即按照文本的原始格式显示在画面中，文本中的空格和换行符会被保留。
<span>:用于组合小段文字，以便对其单独进行样式设置。
<strong>:表示重要的文本，内的文本默认粗体显示。
<em>表示强调，默认斜体显示。
<hr/> 会显示为一条水平分割线，线条样式不可设置。

除了上述标签，还有许多其他的HTML标签用于特定的功能，如表单处理、框架、嵌入内容等。掌握这些基础标签对于构建一个结构良好的网页至关重要。

标题
<h1>至<h6>：用于定义不同级别的标题，其中<h1>是最高级别，字体最大，而<h6>是最低级别，字体最小。这些标签通常用于表示文章的标题或副标题，并且可以通过align属性设置标题的对齐方式。
超链接
<a>：用于定义超链接，可以链接到其他网页或页面内部的某个部分。格式如下：<a herf="跳转的目标位置">文字或图片</a>
图像、音频、视频
<img>：用于插入图像，需要指定图像的源文件（src）和可选的alt属性（当图像无法显示时的替代文本）。格式如下：<img src="图片位置+文件名+扩展名" alt="logo"/>
<audio>:直接插入单一来源的音源文件，格式如下：<audio src="音频文件"controls="controls" loop="loop"></audio>。其中，src取值由音频文件位置、文件名、扩展名构成；controls属性可选，取值"controls"表示显示控制条；loop属性可选，取值"loop"表示循环播放。
<video>：用于直接插入单一来源的视频文件，格式如下：<video src="视频文件" controls="controls" loop="loop"width="视频窗口宽度"></video>。其中，width属性设定视频窗口宽度，高度可以省略。
表格
<table>：用于创建表格。
<tr>：定义表格中的一行。
<td>：定义表格中的一个单元格。
<th>：定义表格中的一个表头单元格。
列表
<ul>：定义无序列表。
<ol>：定义有序列表。
<li>：定义列表中的一个项目。
注释
：用于在代码中添加注释，注释内容不会在浏览器中显示。
文档类型声明和元信息
<!DOCTYPE html>：用于声明文档类型，告诉浏览器页面使用的是HTML5规范。
<meta>：用于提供关于HTML文档的元数据，如字符编码、关键词、描述等。
<title>：定义文档的标题，显示在浏览器的标题栏或标签页上。

三.CSS入门

1.CSS是什么

CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于定义网页的视觉表现和布局样式的语言。

CSS的主要功能是分离内容与设计，使得网页开发者能够更好地控制网页的外观和格式。它可以用来指定字体、颜色、边距、间距、大小、对齐方式等，从而使得网页的视觉效果更加丰富和多样化。

CSS的使用方式主要有两种：

内部样式表：将CSS规则直接写在HTML文档的<head>部分的<style>标签内，这种方式只适用于当前文档。

外部样式表：将CSS规则写在一个单独的文件中，该文件以.css为扩展名，然后通过HTML文档中的<link>标签引入。这种方式可以让多个页面共享同一个样式表文件，有助于维护和提高效率。

总的来说，掌握CSS对于前端开发是非常重要的，它不仅可以提高网页的美观度，还能提升用户体验和网站的可访问性。

2.CSS的作用

美化界面：CSS能够设置标签的文字大小、颜色、字体加粗等样式，使得网页视觉上更加吸引人。
布局网页：CSS负责网页的布局，可以控制元素的位置、尺寸和排列方式，使得页面结构更加合理和美观。
分离内容与设计：通过使用CSS，可以实现HTML专注于内容的呈现，而样式则由CSS负责，这样的结构与样式的分离有助于代码的维护和更新。
提升可访问性：CSS还能够帮助改善网站的可访问性，例如通过调整颜色对比度来帮助视力不佳的用户更好地阅读内容。
响应式设计：CSS还支持媒体查询，可以针对不同的设备（如手机、平板、电脑）制定不同的样式规则，实现响应式网页设计。

3.CSS语法格式

CSS样式添加的方式不同，使其语法构成略有不同，通常情况下语法格式如下：

选择器{

           属性名：属性值；

           属性名：属性值；

            ...

}

4.CSS引用方式

CSS的引用方式主要有以下几种：

行内样式：这是最直接的方法，通过在HTML标签的style属性中直接添加CSS代码。例如<p style="color:#F00;">。这种方式的优点是简单快捷，但缺点是它使得HTML代码不够纯净，且不利于维护和浏览器编译。
内嵌样式：将CSS代码写在HTML文件的<head>区域中，通常用<style type="text/css">标签包围。例如<style type="text/css"> p{ color: blue; } </style>。这种方式适用于样式较少时使用，易于查看和修改。
外部样式：将CSS代码保存在单独的.css文件中，然后通过HTML文件中的<link>标签或@import规则来引入。例如<link rel="stylesheet" href="styles.css">。这种方式是最为推荐的，因为它有助于样式的重用和维护，并且可以缓存外部样式表，减少网页加载时间。

5.CSS三大特性

层叠性：层叠性是CSS的核心特性之一，它指的是CSS样式可以从多个来源叠加在一起。这些来源可以是外部样式表、内部样式表、行内样式或者浏览器的默认样式。当同一个HTML元素被多个样式规则应用时，它们的优先级会被考虑在内，以确定最终应用哪个样式。
继承性：继承性允许样式从父元素传递到子元素。有一些属性是继承的，这意味着如果父元素没有明确的样式定义，子元素可以继承这些样式。这有助于减少代码的重复，并且使得样式更加统一。
优先级：当多个样式规则应用于同一元素时，CSS提供了一个特定的机制来决定哪个规则将被优先应用。这个机制考虑了样式的来源（如标签的style属性、外部或内部样式表）、特定性（选择器中元素的类型和数量）、顺序（后定义的规则优先级更高）等因素。

6.CSS常用属性

外观属性：这包括了color（颜色）、font-size（字体大小）、line-height（行高）、letter-spacing（字间距）、word-spacing（词间距）等，这些属性用于调整文本的视觉表现。
背景属性：例如background-color（背景颜色）、background-image（背景图片）、background-repeat（背景图片是否重复）等，用于设置元素的背景效果。
盒模型属性：包括width（宽度）、height（高度）、padding（内边距）、margin（外边距）等，这些属性定义了元素的盒子模型，影响元素在页面上的布局和空间占用。
定位属性：如position（定位方式）、top（顶部位置）、left（左侧位置）等，它们用于精确控制元素的位置。
显示属性：display是一个非常重要的属性，它定义了元素的显示类型，如block、inline、inline-block等，这直接影响元素如何显示在页面上

An_Ad

关注

13
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
第一周预习-Web前端开发技术，HTML+CSS入门

CSS的主要功能是分离内容与设计，使得网页开发者能够更好地控制网页的外观和格式。它可以用来指定字体、颜色、边距、间距、大小、对齐方式等，从而使得网页的视觉效果更加丰富和多样化。
复制链接

扫一扫