青训营X豆包MarsCode技术训练营笔记

用户07543937520
147 阅读6分钟

HTML & CSS 入门

简介

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准语言，它允许开发者定义网页的基本结构，内容和样式，它使用了一些“标签”来定义网页的内容，这些内容包括标题、文本、图片、链接、表单、段落、列表等一系列元素。同时HTML还支持和CSS，JavaScript语言协作来实现页面的美化和事件的触发等更复杂的功能。

语法

标签

HTML是由标签构成的，每个完整的语句都要包含一对标签，例如：

<button class="btn">普通按钮</button>

代码中<button> 和</button>就是一对完整的标签，class="btn"为button的属性，可以用于定义样式，这个先不展开，后面再具体讲述。

基本结构

HTML的基本结构如下：

<html >

<head>
</head>

<body>
    hello world
</body>

</html>

<html>为整个文件的根标签
<head> 部分包含了文档的元数据，如标题、字符集、链接到外部资源（如 CSS 文件）的信息等，类似于头文件。
<body>标签中的内容则是需要显示在页面上的内容

标题标签

<h1>~<h6>为标题标签，数字越大，代表字体越大

html>
  <body>
    <h1>字体排印学</h1>
    <h2>历史</h2>
    <p>活字的雏形或可追溯至公元前两千年前后美
    索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
    均匀的印花被视作有可能是活字思想雏形。</p>
    <h3>印刷体源流</h3>
    <p>中国在唐代就已经出现雕版印刷术，公元868
    年的《金刚经》是现存最古老的印刷品之一，使用
    的技术即是木雕版印刷。</p>
    <h2>应用</h2>
    <p>...</p>
  </body>
</html>

image.png

段落标签

在上一段代码中我们使用了<p> </p>标签，是用于换行的标签，HTML中输入换行不会真的换行，而是在后面加一个空格，所以需要使用<p>来进行换行，不过实际上由于标题标签自占一行，在本例中删去换行标签也不会有任何影响，在编写连续的大段文本中使用得较多。

列表标签

HTML中，列表分为有序列表<ol>（列表项会自动编号）,无序列表<ul>（列表项带圆点）和定义列表<dl>：

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

<li>：列表项标签，用于定义列表中的一个项目。 <li>标签必须嵌套在<ol>、<ul>或<dl>标签内。
<dt>：定义术语，用于定义列表中的术语或名词。
<dd>：定义描述，用于定义列表中术语的解释或描述。

image.png

链接

 <a href="https://www.bytedance.com/" target="_blank">
        字节跳动官网
    </a>

herf表示需要引用的链接
target 表示用新的标签页打开 , 如果不写则在当前页打开。

图片和音视频

图片标签为<img>,音频标签为<audio>,视频标签为<video>

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>

<audio 
  src="/assets/music.ogg"
  controls
></audio>

<video
  src="/assets/video.mp4"
  controls
></video>

标签必须带有 src 属性，表示路径。
alt: 提供图像的替代文本，当图像无法显示时，浏览器会显示这个文本。 controls: 添加音频控件，如播放、暂停、音量等按钮，允许用户控制音频播放。

image.png

DOM树

DOM（Document Object Model，文档对象模型）树，是由HTML标签组成的逻辑结构。浏览器读取一个HTML文件时，首先会在内存中生成一个 Document 节点，作为树的根节点，然后再依次扫描文件中的每行，每扫描到一个内容，就创建一个子节点，记录节点的属性和值，并根据其在文件中的位置保存到DOM树中的对应位置，例子如下： image.png 当扫描到一个文件时，首先在内存中创建一个 Document 根节点，扫描到 html 元素时，就将其作为 Document 的子节点加入，记录它的属性 lang，由于没有扫描的html的结束符 /html ,再扫描到head时，就会将head作为html的子节点加入，依次类推就可以得到一个完整的DOM树。

那么DOM树有什么用呢？

有了DOM这个模型，我们就可以通过JavaScript代码，利用对象的方法和属性，方便地访问、修改、添加和删除DOM树的结点和内容。

假设我们有一个简单的HTML结构如下：

<div id="content">初始内容</div>
<button id="changeBtn">点击修改内容</button>

我们可以通过以下JavaScript代码来动态修改div中的内容：

document.getElementById('changeBtn').addEventListener('click', function() {
  document.getElementById('content').textContent = '内容已修改';
});

为什么不直接修改HTML文件呢？

因为直接在HTML中修改内容在静态网页中是可行的，但在动态网页或Web应用中，这种方法缺乏灵活性。而通过JavaScript将逻辑与内容分离可以提高代码的可维护性。如果要更新页面的行为，只需要修改JavaScript代码，而不需要触及HTML结构。这是现代Web开发的标准做法。

CSS

HTML只是描述了页面的基本结构，实际的网页中需要各种各样的美化设计，这就需要使用CSS样式设计了。

例如,在btn的例子中，我们提到了class="btn"为button的属性，可以用于定义样式：

.btn {
    background-color: #4CAF50; /* 绿色背景 */ 
    color: white; /* 白色文本 */ 
    padding: 15px 32px; /* 内边距 */ 
    text-align: center; /* 文本居中 */ 
    display: inline-block; /* 内联块元素 */ 
    font-size: 16px; /* 字体大小 */ 
    margin: 4px 2px; /* 外边距 */ 
    cursor: pointer; /* 鼠标指针 */
  }

通过.btn可以将所有属性名为btn的元素样式都设置为代码中注释所写的样式，最终效果如下：

image.png

这些样式设计的代码我们称为CSS，我们可以直接在HTML元素的style属性中定义样式。然而，为了让代码更加简洁，便于维护，通常会将CSS代码和HTML分成两个文件，然后在HTML的头部中使用<link>标签来引用这个CSS文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css"> <!-- 引用CSS文件 -->
</head>
<body>
  <button class="btn">按钮文本</button>
</body>
</html>

lang="en"属性指定了文档的语言为英语。

<meta>用于定义文档的元数据

charset="UTF-8" 设置文档的字符编码为UTF-8，保证中文部分不乱码。

name="viewport" content="width=device-width, initial-scale=1.0"定义了视口的元数据，确保页面在移动设备上正确显示。

width=device-width 设置视口宽度为设备宽度。

initial-scale=1.0 设置初始缩放比例为1。

<link>标签链接一个外部CSS文件styles.css。

rel="stylesheet"表示这个链接是一个样式表。

href="styles.css"指定样式表文件的路径。

通过这样就可以实现CSS样式美化了。

avatar
文章
阅读
粉丝