HTML的基本语法以及如何使用HTML来创建网页

一部分：HTML简介

什么是HTML？

HTML代表超文本标记语言（Hypertext Markup Language）。它是一种用于构建网页的标记语言。HTML文件包含一组标签，这些标签用于定义网页的结构和内容。浏览器读取HTML文件，并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式，并提供交互元素，例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 内容在这里 -->
</body>
</html>

让我们逐步解释这个结构：

<!DOCTYPE html>：这是文档类型声明，它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文档的根元素。所有其他元素都包含在<html>标签内。
<head>：包含与文档相关的元信息，如页面标题、字符集声明和外部样式表链接。
<title>：定义网页的标题，显示在浏览器标签页上。
<body>：包含网页的主要内容，如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称，例如<p>表示段落，<img>表示图像。标签通常成对出现，有一个开始标签和一个结束标签。例如：

<p>这是一个段落。</p>

<p>是开始标签，</p>是结束标签，文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的，不需要结束标签，例如<img>用于插入图像。

HTML注释

在HTML中，你可以使用注释来添加说明性文字，注释不会在浏览器中显示。HTML注释使用结尾，如下所示：

<!-- 这是一个注释 -->

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素：

<p>：定义一个段落。
<h1>到<h6>：定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。
<strong>：定义强调文本，通常以粗体显示。
<em>：定义强调文本，通常以斜体显示。
<a>：定义超链接，允许用户点击跳转到其他页面。

示例：

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像，可以使用<img>标签。它是一个自封闭标签，需要指定图像的src属性来指定图像文件的路径。

示例：

htmlCopy code
<img src="image.jpg" alt="图像描述">

src：指定图像文件的路径。
alt：提供图像的替代文本，用于无法加载图像时的文字描述。

链接

通过使用<a>标签，可以在网页中创建链接。链接通常包含在文本或图像中，并使用href属性指定目标URL。

示例：

<a href="https://www.example.com">访问示例网站</a>

href：指定链接的目标URL。

列表

HTML支持有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）。

无序列表

无序列表使用<ul>标签定义，每个列表项使用<li>标签。

示例：

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义，每个列表项使用<li>标签。

示例：

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签定义，每个定义项目使用<dt>标签定义术语，使用<dd>标签定义描述。

示例：

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表单

HTML表单允许用户与网页进行交互，提交数据。以下是HTML表单的基本元素：

<form>元素

<form>元素用于创建表单，可以包含文本字段、复选框、单选按钮、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表单元素在这里 -->
</form>

action：指定表单数据提交的目标URL。
method：指定提交方法，通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据，常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签，type属性设置为"text"。

示例：

<input type="text" name="username" placeholder="用户名">

type：指定字段类型。
name：指定字段的名称。
placeholder：设置文本框的占位符文本。

密码框

密码框使用<input>标签，type属性设置为"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密码">

单选按钮

单选按钮使用<input>标签，type属性设置为"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

name：指定单选按钮组的名称。
value：指定每个选项的值。

复选框

复选框使用<input>标签，type属性设置为"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select>和<option>标签创建。<select>定义下拉列表，而<option>定义选项。

示例：

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>

name：指定下拉列表的名称。
每个<option>标签表示一个选项，使用value属性定义选项的值。

第四部分：HTML样式和CSS

HTML用于定义网页的结构和内容，但要使网页看起来更吸引人，需要使用CSS（层叠样式表）。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例：

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中，并通过<link>标签将其链接到HTML文档。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中链接外部样式表：

<link rel="stylesheet" type="text/css" href="style.css">

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素，你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单，HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识，但HTML是一个广泛的主题，还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助，让你能够开始创建自己的网页。继续学习和实践，你将成为一个熟练的网页开发者。

么是瀑布流式页面布局

下面看几个现实的案例：

小红书中的瀑布流式页面布局

手机淘宝中的瀑布流式页面布局：

介绍

瀑布流式布局页面是什么？

页面上给人一种参差不齐的多栏布局，其中元素大部分为图片，图片的宽度是统一固定的，但是由于高度不一样，第一行图片排满之后，新的图片会插入到第一排中高度最低的图片下面，并更新高度，如此循环，最终达到瀑布流式的效果。

优点：

吸引眼球： 瀑布流布局的不规则排列方式能够引起用户的兴趣，使界面更吸引人。用户会感到好奇，想要浏览所有的项目，因为每个项目都以不同的方式呈现。
有效利用空间： 瀑布流布局可以充分利用页面空间，无论是横向还是纵向滚动，都可以容纳很多项目。这对于展示大量内容或产品非常有用。
适应性： 瀑布流布局可以适应不同屏幕大小和设备类型，因为它是响应式设计的一部分。这意味着它可以在桌面电脑、平板电脑和移动设备上都有良好的表现。
提高用户参与度： 用户通常更愿意探索页面上的不同项目，因为每次滚动都可能带来新的发现，从而增加了用户的参与度和浏览时间。

缺点：

信息层次不明确： 由于项目的不规则排列，瀑布流布局可能会使用户难以识别内容的层次和重要性。重要内容可能会被埋没在次要内容中。
不适用于所有类型的内容： 瀑布流布局更适合视觉导向的内容，如图片、照片、商品展示等。对于需要详细信息或结构化内容的页面，这种布局可能不够合适。
加载时间问题： 当页面包含大量项目时，瀑布流布局可能导致页面加载时间变长，特别是在网络连接较慢的情况下。这可能会影响用户体验。
有限的导航性： 用户可能会发现导航和查找特定项目变得更加困难，因为项目的位置是不固定的。这可能会使用户在页面上迷失方向。

代码实现

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js瀑布流</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- container容器用来存放box容器，一个box放一张图片 -->
  <div id="container">
      <!-- 根据自己的需求添加图片的数量 -->
    <div class="box">
      <div class="box-img"><img src="./img/1.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/2.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/3.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/4.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/5.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/6.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/7.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/8.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/9.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/10.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/1.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/2.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/3.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/4.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/5.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/6.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/7.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/8.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/9.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/10.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/1.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/2.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/3.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/4.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/5.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/6.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/7.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/8.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/9.jpg" alt=""></div>
    </div>
  </div>

  <script type="text/javascript" src="waterfall.js">
    
  </script>
</body>
</html>

CSS：

*{
  margin: 0;
  padding: 0;
}

.box{
  float: left;
  padding: 5px;
}

.box-img{
  width: 165px;  // 图片的宽度，他会决定一行能放多少张图片
  padding: 5px;
  border: 1px solid #ccc;
}

img{
  width: 100%;
}

JS：

// 读取用户屏幕第一行放了多少张图
// 操作下一张图，找到上一行最矮的高度，将图片排放到其下方

function imgLocation(parent,content){  // 当前有多少图片要摆放

  // 获取到大盒子cparent(大盒子内存放了很多个box，其中每一个box盒子存放着一张图片)
  var cparent = document.getElementById(parent)
  // 将大盒子cparent中所有的box盒子存放在一个数组ccontent中
  var ccontent = getChildElement(cparent,content) 
  // 获取到第一张图片的宽度(已知每一张图片的宽度都相同)
  var imgWidth = ccontent[0].offsetWidth
  // 其中num计算后为页面一行能存放图片的张数，也就是一行能放多少个box盒子
  // document.documentElement.clientWidth 获取整个屏幕的宽度
  var num = Math.floor(document.documentElement.clientWidth/imgWidth)  
  cparent.style.cssText = `width: ${imgWidth*num}px`

  // 创建一个数组用来存放第一行每个图片的高度(此处高度会随着新图片的插入而变大)
  var BoxHeightArr = []
  for(var i=0; i<ccontent.length; i++){
    if(i<num){
      // 先将第一行放满
      BoxHeightArr[i] = ccontent[i].offsetHeight
    }else{   // 要操作的图
       
      /* 找到高度最小值图片对应的下标 */
      // 获取到第一行中的高度最小值
      // apply为借用前面的Math.min方法给数组，不能直接使用Math.min找到数组中的最小值
      var minHeight = Math.min.apply(null,BoxHeightArr) 
      // 找到高度最小值对应在数组BoxHeightArr中的下标
      var minIndex = BoxHeightArr.indexOf(minHeight)
      /* 找到高度最小值图片对应的下标 */
     

      /* 新插入的图片进行定位 */
      // 将新要插入的图片设置为绝对定位
      ccontent[i].style.position = 'absolute'
      // 将新要插入的图片的顶部到页面顶部的距离设置为找到的最小的高度值
      ccontent[i].style.top = minHeight +'px'
      // 将新要插入的图片的左边到页面左边的距离设置和最小高度图片的左边到页面的距离相同，
      // 使两张图片左边对齐
      ccontent[i].style.left = ccontent[minIndex].offsetLeft+'px'
      /* 新插入的图片进行定位 */

      // 更新这一列的高度(这里很关键，因为数组中只会存放num（一行放图片的数目）个元素，
      // 所以插入新图片后原来高度最小值就未必是最小了)
      BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
    }
  }
}


// 定义一个函数获取一个容器内中某个容器的数目(此处为获取所有container容器内的box容器)
function getChildElement(parent,content){
  var contentArr = []
  var allContent = parent.getElementsByTagName("*")
  for(var i=0;i<allContent.length;i++){
    if(allContent[i].className == content){
      contentArr.push(allContent[i])
    }
  }
  return contentArr
}


imgLocation('container','box')

最终代码实现效果

图片只有8张时（正好放在一行）

多放几张图片

图片多到排满整个页面

作者：全糖奶茶不加糖
链接：https://juejin.cn/post/7294852698460438540

lass属性 - 定制化网页设计的强大武器

在HTML中,Class属性是一个非常强大而又灵活的工具。它可以让您为网页中的各种元素赋予独特的样式和功能,从而打造出与众不同的视觉效果和交互体验。本文将为您解密Class属性的魔力,教您如何利用它来实现个性化的网页设计。

1. Class属性的基本用法

Class属性允许您为HTML元素指定一个或多个类名。这些类名可以在CSS中定义样式规则,从而影响元素的外观。

<div class="header">
  <h1 class="title">欢迎来到我的网站</h1>
  <p class="description">这里是网站的简介信息</p>
</div>

.header {
  background-color: #f2f2f2;
  padding: 20px;
}

.title {
  color: #333;
  font-size: 24px;
}

.description {
  color: #666;
  font-size: 16px;
}

2. Class属性的进阶用法

除了基本的样式定制,Class属性还可以用于更复杂的场景。您可以为同一个元素指定多个类名,实现更细致的样式控制。

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

3. Class属性与JavaScript的结合

Class属性不仅可以用于样式定制,还可以与JavaScript进行联动,实现各种交互效果。您可以通过JavaScript动态地添加、修改或删除元素的类名,从而改变它们的外观和行为。

<div id="box" class="box">这是一个盒子</div>

const box = document.getElementById('box');

box.classList.add('active'); // 添加类名
box.classList.remove('box'); // 删除类名
box.classList.toggle('hidden'); // 切换类名

4. Class属性的最佳实践

在使用Class属性时,有几个需要注意的最佳实践:

类名要具有描述性,方便理解和维护
避免过多的类名,保持CSS规则的简洁性
利用CSS预处理器如SASS/LESS来管理类名和样式规则
结合BEM或OOCSS等命名方法论,提高代码的可读性和可维护性

总之,HTML Class属性是一个非常强大的工具,它可以帮助您定制化网页设计,打造出独一无二的视觉效果和交互体验。只要掌握好它的用法,相信您一定能创造出令人惊叹的网页作品。

在线咨询

上一篇：弱电接地的真实情况是这样的，别听不靠谱的电工瞎掰
下一篇：网页在线视频播放代码大全

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商