网页设计与制作：从基础到进阶的全面指南

亿口蛋黄酥

已于 2024-12-17 21:32:07 修改

阅读量777

点赞数 30

文章标签： html css vscode

于 2024-12-17 20:15:54 首次发布

本文链接：https://blog.csdn.net/2402_88947053/article/details/144535421

版权

一、HTML是一种用于创建网页的标准标记语言。它由一系列的元素组成，这些元素告诉浏览器如何展示内容。以下是HTML中一些基本且常用的标签和属性，它们构成了网页的基础结构和内容。每个标签和属性都有其特定的用途和语义，正确使用它们可以创建结构化良好、易于维护和访问的网页。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#features">功能</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h1>欢迎来到我的网站</h1>
<p>这里是首页的介绍文本。</p>
</section>

<section id="features">
<h2>功能亮点</h2>
<article>
<h3>功能一</h3>
<p>详细介绍功能一的内容。</p>
</article>
<article>
<h3>功能二</h3>
<p>详细介绍功能二的内容。</p>
</article>
</section>

<section id="about">
<h2>关于我们</h2>
<p>这里是关于我们的信息。</p>
</section>
</main>

<footer>
<p>版权所有 © 2024 我的网站</p>
</footer>
</body>
</html>

.css
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
background-color: #f4f4f4;
}

header, footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}

main {
padding: 1rem;
background: #fff;
margin: 1rem auto;
max-width: 800px;
}

section {
margin-bottom: 1rem;
}

h1, h2, h3 {
font-weight: normal;
}

footer p {
margin: 0;
}

语义化HTML：使用<header>、<nav>、<main>、<section>、<article>和<footer>等语义标签，使结构更清晰，有助于SEO和无障碍访问。
CSS模块化：将样式分离到外部文件styles.css中，便于管理和维护。
可读性：CSS代码中适当的注释和空格，提高了代码的可读性。
响应式设计：虽然没有在代码中体现，但在实际项目中，应使用媒体查询来实现响应式设计。
无装饰的列表：nav ul样式去除了列表标记，并使列表项水平排列，这是导航菜单的常见样式。
可访问性：确保所有链接都有颜色和足够的对比度，以提高可访问性。

基本结构标签

<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。

<html>：根元素，包含整个HTML文档。

<head>：包含了文档的元数据，如<title>、<link>、<script>等。

<title>：定义文档的标题，显示在浏览器标签页上。

<body>：文档的主体，包含可见的页面内容。

文本内容标签

<h1>到<h6>：标题标签，<h1>是最高级别，<h6>是最低级别。

<p>：段落标签。

<br>：换行标签。

<hr>：水平线标签，用于分隔内容。

<strong>或<b>：粗体文本，<strong>表示重要性，<b>仅表示样式。

<em>或<i>：斜体文本，<em>表示强调，<i>表示样式。

<mark>：标记文本，通常显示为背景高亮。

<del>：删除线文本。

<ins>：下划线文本，表示插入的内容。

<pre>：预格式化的文本，保持空格和换行。

<blockquote>：块引用，用于引用一段文本。

<q>：短引用，用于行内引用。

链接和图像标签

<a>：锚标签，用于创建链接。

href：指定链接的目标URL。

target：指定链接打开的位置，如`_blank`表示新标签页打开。

常用图像格式：GIF格式，PNG格式，JPEG格式。

<img>：图像标签。

src：图像的URL。

alt：图像的替代文本，用于图像无法显示时显示。

width和 height：图像的宽度和高度。

列表标签

<ul>：无序列表。

<ol>：有序列表。

<li>：列表项。

表格标签

<table>：表格。

<tr>：表格行。

<th>：表头单元格。

<td>：表格单元格。

<thead>：表头分组。

<tbody>：表体分组。

<tfoot>：表尾分组。

colspan和rowspan：单元格跨列和跨行属性。

表单标签

<form>：表单标签，用于收集用户输入。

action：表单提交的目标URL。

method：提交方式，如GET或POST。

<input>：输入字段，类型可以是text、password、radio、checkbox等。

type：输入字段的类型。

name：输入字段的名称。

value：输入字段的值。

<textarea>：多行文本输入。

<button>：按钮。

<label>：为<input>元素定义标签，提高可访问性。

二、在HTML中，标签可以分为语义标签和非语义标签两大类。语义标签：强调内容的结构和意义，有助于提高页面的可访问性和搜索引擎优化。

非语义标签：强调布局和样式，不传达特定的内容结构或意义。在实际开发中，推荐尽可能使用语义标签，因为它们提供了更好的结构化和语义化，使得代码更易于理解和维护。同时，非语义标签在需要控制布局和样式时也是必不可少的。

下面分别解释这两类标签：

语义标签

语义标签是指那些能够传达特定意义或内容结构的HTML标签。它们帮助开发者和浏览器理解页面的结构和内容，同时也对搜索引擎优化和辅助技术非常友好。语义标签的主要目的是让代码更易于理解和维护。

常见的语义标签包括：

<header>：通常用于页面或内容区块的头部，包含导航链接、标题等。

<footer>：页面或内容区块的底部，通常包含版权信息、联系方式等。

<section>：表示文档中的一个独立区段，通常包含一个标题（<h1>至<h6>）。

<article>：表示一个独立的、完整的内容区块，如博客文章、新闻故事等。

<aside>：表示与页面主要内容稍微相关的侧边内容，如侧边栏。

<nav>：表示导航链接的区块，用于页面导航。

<main>：表示文档的主要内容，每个页面中只能有一个<main>元素。

<section>：表示文档中的一个区段，通常包含一个标题。

<article>：表示一个独立的、自包含的内容区块，如博客文章、新闻报道等。

<figure>：表示自包含的内容，通常与<figcaption>一起使用，用于图像、图表等。

<figcaption>：表示<figure>元素的标题或说明。

非语义标签

非语义标签，也称为流式标签，是指那些不传达任何特定意义或内容结构的HTML标签。它们主要用于控制内容的布局和样式，而不是内容的语义。非语义标签通常需要CSS来定义样式。

常见的非语义标签包括：

<div>：块级容器，用于组织内容，没有特定的语义。

<span>：行内容器，用于组织文本或其他行内元素，没有特定的语义。

<p>：虽然<p>标签本身是语义化的，表示段落，但在这里提到是因为它可以被CSS样式化，从而在布局上起到非语义的作用。

<br>：换行，用于文本中的强制换行，没有语义。

<hr>：水平分隔线，用于内容的分隔，虽然有一定的语义，但通常更多地用于布局。

三、CSS用于设置HTML元素的样式。选择器是CSS中用于选择页面上的HTML元素并应用样式的模式。通过这些基础和复合选择器，你可以创建精确的规则来控制页面上元素的样式。以下是CSS中的基础选择器和复合选择器的介绍：

基础选择器

1. 类型选择器：

根据元素的类型（标签名）选择元素。

例如：p会选择所有的<p>标签。

css

p {

color: blue;

}

2. 类选择器：

根据元素的class属性选择元素。

使用点`.`表示。

例如：my-clas会选择所有class属性包含my-class的元素。

css

.my-class {

font-size: 20px;

}

3. ID选择器：

根据元素的`id`属性选择元素。

使用井号`#`表示。

例如：#my-id会选择`id`属性为`my-id`的元素。

css

#my-id {

background-color: yellow;

}

4.属性选择器：

根据元素的属性及其值选择元素。

例如：`[type="text"]`会选择所有`type`属性为`text`的元素。

css

[type="text"] {

border: 1px solid #ccc;

}

5.伪类选择器：

根据元素的特殊状态选择元素。

例如：`:hover`会选择鼠标悬停时的元素，`:first-child`会选择每个父元素的第一个子元素。

css

a:hover {

color: red;

}

p:first-child {

font-weight: bold;

}

6. 伪元素选择器：

根据元素的特定部分选择元素。

例如：:first-line会选择元素的第一行文字，::before和::after可以在元素前后添加内容。

css

p::first-line {

font-weight: bold;

}

div::after {

content: "END";

}

复合选择器

复合选择器用于组合基础选择器，以更精确地定位元素。

1. 后代选择器：

空格分隔，选择某个元素的后代。

例如：`div p`会选择所有在`<div>`元素内部的`<p>`元素。

css

div p {

margin: 10px;

}

2.子代选择器：

`>`符号分隔，选择某个元素的直接子元素。

例如：`ul > li`会选择所有直接在`<ul>`元素内部的`<li>`元素。

css

ul > li {

list-style-type: none;

}

3. 相邻兄弟选择器：

`+`符号分隔，选择紧随其后的相邻兄弟元素。

例如：`h1 + p`会选择紧跟在`<h1>`元素之后的`<p>`元素。

css

h1 + p {

color: green;

}

4.通用兄弟选择器：

`~`符号分隔，选择所有后续的兄弟元素。

例如：`h1 ~ p`会选择所有在`<h1>`元素之后的`<p>`元素。

css

h1 ~ p {

color: purple;

}

5. 否定伪类：

`:not()`用于排除不符合条件选择器的元素。

例如：`:not(.disabled)`会选择所有没有`disabled`类的元素。

css

button:not(.disabled) {

cursor: pointer;

}

6. 属性选择器的复合形式：

可以结合使用属性选择器和操作符（如`=`、`|=`、`~=`、`*=`、`^=`、`$=`）来精确选择元素。

例如：`a[href^="http"]`会选择所有`href`属性以`http`开头的`<a>`元素。

css

a[href^="http"] {

color: blue;

}

四、CSS盒子模型是一个用于设计和布局的基础概念，它描述了一个元素在页面上是如何占据空间的。理解CSS盒子模型对于创建响应式和灵活的网页布局至关重要。每个HTML元素都可以看作是一个盒子，盒子模型包括以下几个部分：

1. 盒子模型的组成部分

内容（Content）：盒子的内容，即元素要展示的文本或图片等。

内边距（Padding）：内容与边框之间的空间，用于在内容和边框之间创建间隔。

边框（Border）：围绕内边距和内容的线，可以设置宽度、样式和颜色。

外边距（Margin）：边框外的透明空间，用于在盒子之间创建间隔。

2. 边框（Border）

边框是围绕元素内容和内边距的一条线，可以设置以下属性：

`border-width`：边框的宽度。

`border-style`：边框的样式，如`solid`（实线）、`dashed`（虚线）、`dotted`（点线）等。

`border-color`：边框的颜色。

也可以使用简写属性`border`，例如：

css

border: 1px solid black;

（这行代码设置了边框宽度为1像素，样式为实线，颜色为黑色。）

3. 内边距（Padding）

内边距是内容和边框之间的空间，只能设置一个宽度值，可以是：

`padding-top`：上内边距。

`padding-right`：右内边距。

`padding-bottom`：下内边距。

`padding-left`：左内边距。

也可以使用简写属性`padding`，例如：

css

padding: 10px 20px;

（这行代码设置了上和下内边距为10像素，右和左内边距为20像素。）

4. 外边距（Margin）

外边距是边框外的空间，用于在盒子之间创建间隔，可以设置：

`margin-top`：上外边距。

`margin-right`：右外边距。

`margin-bottom`：下外边距。

`margin-left`：左外边距。

也可以使用简写属性`margin`，例如：

css

margin: 10px 20px;

（这行代码设置了上和下外边距为10像素，右和左外边距为20像素。）

5. 宽高（Width and Height）

`width`：元素的宽度。

`height`：元素的高度。

元素的实际占据空间计算如下：

总宽度 = `width` + `padding-left` + `padding-right` + `border-left` + `border-right` + `margin-left` + `margin-right`

总高度 = `height` + `padding-top` + `padding-bottom` + `border-top` + `border-bottom` + `margin-top` + `margin-bottom`

6. 盒子模型的box-sizing属性

默认情况下，元素的宽度和高度只包括内容区域，不包括内边距、边框和外边距。但是，可以通过设置`box-sizing`属性来改变这一行为：

`box-sizing: content-box;`：默认值，宽高只包括内容区域。

`box-sizing: border-box;`：宽高包括内容区域、内边距和边框，不包括外边距。

例如：

css

.box {

box-sizing: border-box;

width: 200px;

height: 200px;

padding: 20px;

border: 5px solid black;

}

（在这个例子中，如果`box-sizing`设置为`border-box`，那么盒子的总宽度和高度将正好是200像素，包括内容、内边距和边框。）

盒子例子：

五、在CSS中，过渡和动画是两种强大的，它们允许你为元素添加动态效果，以提高用户体验和视觉吸引力。使用过渡和动画可以创建吸引人的视觉效果，但应谨慎使用，以免影响页面的性能和可用性。

过渡与动画的区别：

触发方式：过渡通常由属性值的变化触发，如鼠标悬停、尺寸变化等；而动画可以通过CSS或JavaScript在特定时间点触发。

可控性：动画提供了更多的控制，允许定义多个关键帧和复杂的动画序列。

性能：过渡和动画都是性能优化的，但过渡通常更简单，性能开销较小。

过渡（Transitions）

过渡效果的例子：

过渡是一种在CSS属性值之间创建平滑变化的技术。它需要以下几个属性：

1.transition-property：指定要添加过渡效果的CSS属性或属性列表。

基本语法格式：transition-property:none|all|property;

none:表示没有属性会获得过渡效果。

all：表示所有属性都会获得过渡效果。

property：定义应用过渡效果的css属性，多个属性之间以逗号分隔。

2.transition-duration：定义过渡效果的持续时间。

基本语法格式：transition-duration：time；

time的值为指定单位时间，常用单位为s（秒）或ms（毫秒）。

3.transition-timing-function：定义速度曲线，即过渡如何随着时间加速或减速。

4.transition-delay：定义过渡开始前的延迟时间。

基本语法格式：transition-delay：time；

示例代码：

css

.box {

width: 100px;

height: 100px;

background-color: blue;

transition: width 2s, height 2s, background-color 2s; }

.box:hover {

width: 200px;

height: 200px;

background-color: red;

}

（在这个例子中，当鼠标悬停在`.box`元素上时，它的宽度、高度和背景色会在2秒内平滑过渡到新值。）

人跑步的过渡效果例子：

动画（Animations）

动画允许你在一定时间内多次循环一系列的样式变化。它涉及`@keyframes`规则，用于定义动画的中间步骤。

1. @keyframes：定义动画序列。

2. animation-name：指定`@keyframes`名称。

3. animation-duration：定义动画的持续时间。

4. animation-timing-function：定义速度曲线。

5. animation-delay：定义动画开始前的延迟时间。

6. animation-iteration-count：定义动画循环的次数。

7. animation-direction：定义动画播放的方向（正向、反向或交替）。

8. animation-fill-mode：定义动画在开始前和结束后应用的样式。

示例代码：

css

@keyframes example {

from { background-color: red; }

to { background-color: yellow; }

}

.box {

width: 100px;

height: 100px;

animation-name: example;

animation-duration: 4s;

animation-iteration-count: infinite;

}

（在这个例子中，`.box`元素的背景色会在4秒内从红色过渡到黄色，并且这个动画会无限循环。）

3D变形的例子：