~初识前端·在新手村生存的第一天~

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

Featherwit_Ben

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

阅读量375

点赞数 1

分类专栏： NENU工作室 · 前端篇文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_66849193/article/details/129887868

版权

NENU工作室 · 前端篇专栏收录该内容

6 篇文章 0 订阅

订阅专栏

&HTML标签&

通过小ben的上一篇博客大家能够了解到：HTML是超文本标记语言（Hypertext Markup Language）的缩写。它是一种用于创建网页的标记语言，它的主要作用是描述网页的结构、内容和格式，使网页在浏览器中得以正确显示。

而HTML文档由多个元素（Element）组成，每个元素可以包含内容或者其他元素。

HTML元素由开始标记和结束标记组成，开始标记以“<”符号开始，结束标记以“>”符号结束。例如，一个段落元素的开始标记是“<p>”，结束标记是“</p>”。

上面说的都是HTML的概念和基本语法。按照小ben的理解，就像去餐馆吃饭一样，要点一道菜，不仅先了解这道菜叫什么，还要了解这道菜都有什么。如果把我们写的HTML代码比作一道菜的话（可能称为一顿饭的主菜更合适），那么HTML标签就是这道主菜的原料，这道菜，只有用很多很多的HTML标签组合起来，才能称得上是一道合格美味的菜。（个人想法，轻喷勿怪哈）

HTML标签是Web开发中最基础的元素，也是构建网页的基础。HTML中的标记（Tag）分为两类：块级标记和行内标记。块级标记用于组织页面内容，如段落、标题、列表等；行内标记用于在文本中添加样式或链接，如加粗、超链接等。

HTML标签的基本结构

HTML标签是由尖括号（<>）和标签名组成的，通常有开始标签和结束标签，中间包含标签内容。开始标签和结束标签的标签名是相同的，但是结束标签会在标签名前加上一个斜杠（/）。

例如，下面是一个段落标签的例子：

在这个例子中，<p>是开始标签，</p>是结束标签，p是标签名，中间的内容是标签的内容。

HTML常用标签

标题标签：用于定义页面的标题，有六个不同级别的标题标签，分别是<h1> - <h6>。
段落标签：用于定义段落，标签名为<p>。
超链接标签：用于创建链接，标签名为<a>，href属性用于指定链接的目标。
图像标签：用于显示图像，标签名为<img>，src属性用于指定图像文件的路径。
列表标签：用于创建有序和无序列表，有三个标签，分别是<ul>、<ol>和<li>。
表格标签：用于创建表格，有四个标签，分别是<table>、<tr>、<td>和<th>。
表单标签：用于创建表单，有五个标签，分别是<form>、<input>、<textarea>、<select>和<option>。
多媒体标签：用于嵌入音频和视频文件，有三个标签，分别是<audio>、<video>和<source>。
样式和布局标签：用于设置样式和布局，有六个标签，分别是<div>、<span>、<br>、<hr>、<pre>和<code>。
元信息标签：用于设置页面的元信息，有五个标签，分别是<head>、<meta>、<link>、<title>和<script>。
区块标签：用于定义页面的不同区块，有六个标签，分别是<header>、<nav>、<section>、<article>、<aside>和<footer>。

还有一些基础标签：

1.<!DOCTYPE>：文档类型声明，告诉浏览器使用哪个版本的HTML解析器解析文档。1

2.<html>：文档的根元素，表示整个HTML文档的开始和结束。

3.<head>：文档头部，包含了页面的元数据，如标题、描述等。

4.<body>：文档主体，包含了页面的所有内容，如文本、图像等。

HTML标签的属性

HTML标签可以带有属性（Attribute），属性可以为标签提供附加信息，用于控制标签的行为和样式。属性通常出现在标签的开始标记中，由属性名和属性值组成。

属性值需要用引号引起来。

例如，下面是一个超链接标签（<a>）的例子：

在这个例子中，href是<a>标签的一个属性，它的值是链接的地址（https://www.example.com）。

下面是一些常见的HTML标签属性：

href：用于指定链接地址，通常用于<a>标签和<link>标签中。

src：用于指定图像、音频、视频等媒体文件的地址，通常用于<img>、<audio>、<video>等标签中。

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

style：用于指定样式，可以设置元素的字体、颜色、大小等属性。

class：用于指定元素的类名，可以为元素定义样式规则。

id：用于指定元素的唯一标识符，可以为元素定义样式规则和JavaScript操作。

title：用于指定元素的标题，当鼠标悬停在元素上时，标题将显示。

小benの话

小ben在学习HTML的时候，有关HTML的基础写了一个小小的文章（算作是学习笔记），在这里放出来，希望对大家有所帮助。

https://www.yuque.com/g/u33298822/gau60p/ggs2r176p7bv2z88/collaborator/join?token=992bSQ0TnCtQL0Fp# 《Two HTML基础》

& CSS基础 &

CSS 发展历史

CSS（Cascading Style Sheets）是一种用于描述HTML和XML文档样式的样式表语言。它的发展历史可以追溯到上世纪90年代初期，下面就让我们跟着小ben一起回顾CSS的发展历史吧!

1994年，Hakon Wium Lie在瑞典CERN工作期间创建了CSS。最初的CSS版本是CSS1，主要用于控制网页的布局和颜色。CSS1的主要特点是简单易用，但功能相对较弱。

1996年，CSS2的开发工作开始了。CSS2相比CSS1增加了更多的选择器、样式属性以及媒体查询等功能。同时，CSS2引入了盒模型的概念，这是CSS布局中非常重要的概念。

然而，由于浏览器对CSS2的实现不一致，导致了开发者在开发网页时需要写大量的浏览器兼容性代码。这也促使W3C组织在2001年发布了CSS2.1标准，以解决浏览器兼容性问题。

2005年，CSS3的开发工作正式开始。CSS3的主要特点是功能更加强大，可以实现更多的效果，例如圆角、阴影、渐变和动画等。CSS3的开发分为多个模块，每个模块对应一组新的CSS属性。

随着CSS3的逐渐成熟，现代浏览器对CSS3的支持程度也越来越高。CSS3让开发者可以更加轻松地实现复杂的布局和视觉效果，同时还支持响应式设计和移动设备适配。

总之，CSS的发展历史充满了创新和变革，它的不断更新和发展让Web开发变得更加轻松、高效和美观。

CSS作用

CSS（Cascading Style Sheets）是一种用于描述HTML和XML文档样式的样式表语言。它的主要作用是控制网页的样式和布局，可以让开发者轻松地定义网页中的各种元素的外观、大小、颜色、位置等属性。

以下是CSS的主要作用：

分离样式和内容：CSS允许开发者将样式和内容分离，让网页更易于维护和管理。开发者可以使用CSS文件来控制网页的样式，而不是在HTML文件中直接写样式代码。

可重用性：CSS的样式可以在多个页面中重复使用，从而节省开发时间和代码量。通过定义CSS样式类，开发者可以在多个元素中应用相同的样式，避免了重复编写样式代码。

网页布局：CSS可以让开发者轻松地实现网页的布局和定位，包括盒模型、浮动、定位和网格布局等功能。这些功能可以让开发者更加灵活地设计网页布局，实现各种复杂的效果。

美化网页：CSS可以让开发者轻松地美化网页，包括颜色、字体、边框、背景、阴影和动画等效果。这些效果可以增强网页的视觉吸引力，提高用户体验。

响应式设计：CSS可以帮助开发者实现响应式设计，即网页可以自动适应不同的设备和屏幕尺寸。通过CSS媒体查询和响应式布局技术，开发者可以让网页在桌面、平板和移动设备上都具有良好的显示效果。

CSS引用方式

在HTML文档中，可以使用三种方式来引用CSS样式：

1. 外部样式表：将CSS代码保存在一个单独的CSS文件中，然后在HTML文件中使用<link>标签引用该文件。这种方式可以提高代码的可维护性和可重用性，因为同一个样式表可以被多个页面共用。例如：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- HTML content here -->
  </body>
</html>

2. 内部样式表（很常用）：在HTML文档的<head>标签中使用<style>标签来定义CSS样式。这种方式适用于仅用于一个页面的简单样式，例如：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

3.行内样式：在HTML标签中使用style属性来定义CSS样式。这种方式适用于需要对单个元素应用不同样式的情况，但不推荐在大型项目中使用，因为它使得代码难以维护。例如：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1 style="color: red;">Hello World!</h1>
  </body>
</html>

通常建议使用外部样式表。

CSS三大特性（引用仅供参考）

CSS（层叠样式表）是一种用于网页样式设计的语言，其三大特性如下：

层叠性：当多个样式规则应用于同一个元素时，它们会根据优先级和特定的层叠规则进行组合和叠加。例如，一个元素可以同时拥有来自外部样式表、内部样式表和行内样式的样式，它们将按照优先级进行组合和叠加，以形成最终的样式。

继承性：某些属性会被子元素继承自其父元素。例如，如果父元素的颜色为红色，那么其子元素的颜色也将是红色，除非子元素显式地覆盖了这个样式。这种继承机制使得样式更易于管理，减少了需要编写的CSS代码。

优先级：在多个样式规则应用于同一个元素时，根据不同的选择器和特定的规则确定哪个规则具有更高的优先级。通常，内联样式>id选择器>class选择器>标签选择器，而!important可以将一个样式规则的优先级提升到最高。

这三大特性是CSS的重要特点，掌握它们有助于编写更高效和灵活的CSS代码。

CSS常用属性

字体属性：控制字体的大小、颜色、样式等。常用属性有font-size、color、font-style等。
背景属性：控制元素的背景颜色、图片、重复方式等。常用属性有background-color、background-image、background-repeat等。
边框属性：控制元素的边框样式、颜色、宽度等。常用属性有border-style、border-color、border-width等。
尺寸属性：控制元素的尺寸和位置。常用属性有width、height、margin、padding等。
布局属性：控制元素的布局方式。常用属性有display、position、float、clear等。
动画属性：控制元素的动画效果。常用属性有animation、transition等。
文本属性：控制文本的对齐方式、缩进、换行等。常用属性有text-align、text-indent、white-space等。

当然还有很多其他属性，需要根据实际需求选择使用。掌握这些属性可以帮助你实现网页的各种样式效果。

建议学习链接：https://www.w3school.com.cn/

Featherwit_Ben

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
~初识前端·在新手村生存的第一天~

如果把我们写的HTML代码比作一道菜的话（可能称为一顿饭的主菜更合适），那么HTML标签就是这道主菜的原料，这道菜，只有用很多很多的HTML标签组合起来，才能称得上是一道合格美味的菜。它的主要作用是控制网页的样式和布局，可以让开发者轻松地定义网页中的各种元素的外观、大小、颜色、位置等属性。例如，一个元素可以同时拥有来自外部样式表、内部样式表和行内样式的样式，它们将按照优先级进行组合和叠加，以形成最终的样式。例如，如果父元素的颜色为红色，那么其子元素的颜色也将是红色，除非子元素显式地覆盖了这个样式。
复制链接

扫一扫