一篇文章带你快速学习前端之HTML

tsx81428  论坛元老 | 2025-4-3 09:08:33 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1809|帖子 1809|积分 5429


           你好，我是安然无虞。      

  

网页与前端

学习前端之前, 我们首先得明白网页与前端之间的关系, 前端是构建网页的一部分, 负责用户在浏览器中看到和与之交互的内容. 以下是它们之间的关系的扼要说明:


  • 网页: 网页是浏览器中呈现内容的文档或页面. 通常使用HTML (Hypertext Markup Language) 编写, HTML 界说了页面的结构和内容, 包括文本、图像、链接等. 网页通常还包括 CSS (Cascading Style Sheets) 用于界说页面的样式和结构, 以及 JavaScript 用于添加交互性和动态功能.
  • 前端: 前端开发是创建页面的过程, 它涵盖了 HTML、CSS和 JavaScript 的开发. 前端开发职员负责将 UI 计划的页面转化为可在浏览器中渲染的现实页面.
  • HTML: HTML是网页的骨架, 界说了页面的结构, 包括标题、段落、图像、链接等.
  • CSS: CSS用于控制页面的样式, 包括字体、颜色、间距、结构等. 它使网页看起来漂亮且同等.
  • JavaScript: JavaScript是一种编程语言, 用于添加交互功能. 前端开发职员使用 JavaScript 来创建动态元素、处理用户输入、与服务通讯等, 以提供更丰富的用户体验.
总之, 页面是通过前端开发来创建和维护的, 前端技术包括HTML、CSS和 JavaScript, 它们共同构建了用户在浏览器中看到和与之交互的内容. 前端开发的目的是提供具有吸引力、易用性和高性能的网页.
相比于后端而言, 前端更容易入门, 只要掌握了 HTML、CSS、JavaScript, 就可以开发一些简单的页面了.
HTML界说了网页的结构和内容, CSS控件网页的样式和表面, JavaScript增强网页的交互性和动态性.
我们可以这么理解:
   HTML 是网页的结构, CSS 是网页的表面, JavaScript 是网页的行为.
  随着技术的进步, 前端开发社区开发了许多框架和库, 如Vue、React、Angular等. 这些框架简化了前端开发流程, 提供了组件化开发, 状态管理和路由等功能, 使开发更高效.
HTML

HTML (Hypertext Markup Language) 中文名就是 超文本标记语言, 用于创建网页的结构和内容.
HTML是Web页面的基础, 它描述了页面的语义结构, 使浏览器能够准确的显示和解释内容. 它使用一些列的标签(也称为元素), 来界说文本、图像、表格等在网页上的排布和呈现方式.
HTML 标签是由尖括号包围的关键字, 例如:
  1. <p>这是一个段落.</p>
复制代码
在HTML中, 标签用于界说和包围网页中的各个元素. 标签分为两种主要范例: 单标签和双标签.

  • 单标签:

    • 单标签通常用于表示没有内容的元素, 例如图像、换行、横线等.
    • 它们以自封闭的方式出现, 不必要闭合标签, 由于它们没有内部内容.
    • 单标签的典型形式是<tagname>, 其中 tagname 是标署名称. 示例: <img src='image.jpg' />表示插入一张图片, <br>  表示换行

  • 双标签:

    • 双标签用于界说包含内容的元素, 例如段落、标题、列表等.
    • 双标签由两部分组成: 开始标签和结束标签
    • 开始标签用于界说元素的起始位置, 结束标签用于界说元素的结束位置.
    • 在开始标签和结束标签之间可以包含元素的内容. 示例: <p>这是一个段落. </p>表示一个段落元素, 其中<p>是开始标签, </p>是结束标签, 之间的文本是该段落的内容.

相识了 HTML 的标签之后, 我们再来相识 HTML 的文件结构, 一个 HTML 文档通常由以下部分组成:
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <!-- 这里放置文档的元信息 -->
  6.     <title>文档标题</title>
  7.     <meta charset="UTF-8">
  8.     <!-- 连接外部样式或者脚本文件等 -->
  9.     <link rel="stylesheet" type="text/css" href="style.css">
  10.     <script src="script.js"></script>
  11. </head>   
  13. <body>
  14.     <!-- 这里放置页面内容 -->
  15.     <h1>这是一个标题</h1>
  16.     <p>这是一个段落</p>
  17.     <a href="https://www.example.com">这是一个链接</a>
  18.     <!-- 其他内容 -->
  19. </body>
  21. </html>
复制代码


  • <!DOCTYPE html>: 生命文档范例为HTML5.
  • <html>: HTML文档的根元素, 包含了整个文档的内容.
  • <head>: 包含了一些文档的元信息, 如标题、字符编码等.
  • <title>: 界说网页标题, 会显示在浏览器的标签页上.
  • <body>: 包含现实的页面内容.
语法

相识了 HTML 的基本结构之后, 我们来学习一下 HTML 的基本语法.

  • 文本内容: 使用<p>标签界说段落, <h1>到<h6>标签界说标题, <strong>、<del>和<em>标签可以用于强调文本.
  1. <h1>这是一级标题</h1>
  2. <h2>这是二级标题</h2>
  3. <h3>这是三级标题</h3>
  4. <h4>这是四级标题</h4>
  5. <h5>这是五级标题</h5>
  6. <h6>这是六级标题</h6>
  7. <p>这是一个段落</p>
  8. <p><strong>重要信息: </strong>这是一个重要的内容</p>
  9. <p>
  10.     更改段落文本样式<b>字体加粗</b>、<i>斜体字</i>、<u>下划线</u>、<s>删除线</s>
  11. </p>
复制代码


  • 列表: 使用<ul>和<li>标签创建无序列表, 使用<ol>和<li>标签创建有序列表.
  1. <ul>
  2.     <li>无序列表元素1</li>
  3.     <li>无序列表元素2</li>
  4.     <li>无序列表元素3</li>
  5. </ul>
  7. <ol>
  8.     <li>有序列表元素1</li>
  9.     <li>有序列表元素2</li>
  10.     <li>有序列表元素3</li>
  11. </ol>
复制代码


  • 表格: 使用<table>、<tr>、<td>、<th>等标签创建表格, <table>是表格标签的根元素, 然后是<tr>表格的行标签, 在<tr>(table row)内部是<td>(table data)与<th>(table header)
  1. <table>
  2.     <tr>
  3.         <th>列标题 1</th>
  4.         <th>列标题 2</th>
  5.         <th>列标题 3</th>
  6.     </tr>
  7.     <tr>
  8.         <td>元素 11</td>
  9.         <td>元素 12</td>
  10.         <td>元素 13</td>
  11.     </tr>
  12.     <tr>
  13.         <td>元素 21</td>
  14.         <td>元素 22</td>
  15.         <td>元素 23</td>
  16.     </tr>
  17.     <tr>
  18.         <td>元素 31</td>
  19.         <td>元素 32</td>
  20.         <td>元素 33</td>
  21.     </tr>
  22. </table>
复制代码

我们发现上面的表格并没有显示边框, 假如我们想让其显示边框只必要加上 border属性即可.
  1. <table border="1">
  2.     <tr>
  3.         <th>列标题 1</th>
  4.         <th>列标题 2</th>
  5.         <th>列标题 3</th>
  6.     </tr>
  7.     <tr>
  8.         <td>元素 11</td>
  9.         <td>元素 12</td>
  10.         <td>元素 13</td>
  11.     </tr>
  12.     <tr>
  13.         <td>元素 21</td>
  14.         <td>元素 22</td>
  15.         <td>元素 23</td>
  16.     </tr>
  17.     <tr>
  18.         <td>元素 31</td>
  19.         <td>元素 32</td>
  20.         <td>元素 33</td>
  21.     </tr>
  22. </table>
复制代码


  • 图像: 使用 <img>标签插入图像.
  1. <img src="图片路径" alt="当前图片无法显示">
复制代码

  • 链接: 使用<a>标签创建链接.
  1. <a href="https://github.com/">访问 GitHub </a>
复制代码

  • 注释: 使用<!-- 注释内容 -->添加注释, 不会在浏览器中显示.
  1. <!-- 这是一个注释 -->
复制代码
属性

属性在HTML中起到非常重要的作用, 它们用于界说元素的行为和表面, 以及与其他元素的关系.
在HTML中, 每个元素都可以有一个或多个属性, 用于描述元素的特征和行为.
属性的基本语法是: <开始标签 属性名="属性值">, 其中属性名用于标识该属性, 属性值则界说该属性的值, 属性名和属性值之间用等号=隔开, 属性值一般要用引号括起来:
  1. <img src="image.png" alt="当前图片无法显示">
复制代码
其中, src 是指定图片的文件路径的属性, alt 是指定在无法加载图片是显示的替代文本的属性. 这些属性可以让用户相识图像的内容, 同时也有助于调整图片的巨细和位置.
属性是用来界说元素的性质和功能的, 它们可以指定元素的尺寸、颜色、文字方向、链接目的等, 有助于页面的定位和结构. 下面是一些常见的属性用法:

  • class 属性: class属性用于向元素添加一个或多个类名, 以便通过CSS样式表界说样式. 此外, 类名还可以用来实现JavaScript的交互效果. 例如:
  1. <p class="note">这是一个带有 note 类属性的 p 标签</p>
复制代码

  • id 属性: id属性是用于将元素标识为唯一的标识符. 它使得我们可以通过 JavaScript 或 CSS 来定位和操作该元素. 例如:
  1. <div id="header">这是一个带有 header id 的 div 标签</div>
复制代码

  • style 属性: style属性是用于将CSS样式规则直接应用于元素. 它可以用于控制元素的颜色、字体、巨细和结构等. 例如:
  1. <div style="color: red; font-size: 20px;">这是一段红色的文字</div>
复制代码
以上三种属性是所有标签都有的属性, 也有一些标签具有独特的属性, 比如 a 标签的 href 属性, img 标签的 src 属性等.
  1. <a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a>
复制代码
会这样显示:

点击这个链接就会去访问对应的网页.
假如将代码改成这样:
  1. <a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a>
  2. <a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343", target="_blank">这是第二个超链接</a>
复制代码

我们看<a>标签的target属性里面的值表示什么含义:

大概意思就是:


  • _self: 表示在当前页面打开这个链接.
  • _blank: 表示在新的页面打开这个链接.
我们发现上面的两个链接在同一行, 并没有换行, 假如我们想换行, 可以在末尾加上<br>标签:
  1. <a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a>
  2. <br><a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343", target="_blank">这是第二个超链接</a>
复制代码
  1. <a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a>
  2. <br><a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343", target="_blank">这是第二个超链接</a><br><img src="./nanjing.jpg", alt="在南京相见!", width="300", height="150"><br><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.jObaSN3cLBxsl2AKGpY14gHaD4?rs=1&pid=ImgDetMain", alt="图片"><br>
复制代码

<img>标签的 alt 属性用于在没有找到图片的情况下显示一些类似于提示信息的语句(可设置自己想设置的). width和height属性用于设置图片的宽度和高度.
区块

当涉及到 HTML元素时, 可以将它们分为两个主要种别: 行内元素 和 块级元素.
这些不同范例的元素在 HTML 文档中的呈现和结构方面有很大的不同. 下面是关于这两种范例的元素的详细说明:

  • 块级元素 (block): 块级元素通常用于组织和结构页面的主要结构和内容, 例如段落、标题、列表、表格等. 它们用于创建页面的主要部分, 将内容分割成逻辑块.

    • 块级元素通常会重新行开始, 并占据整行的宽度, 因此它们会在页面上呈现为一块独立的内容块.
    • 可以包含其他块级元素和行内元素.
    • 常见的块级元素包括: <div>, <p>, <h1>到<h6>, <ul>, <ol>, <li>, <table>, <form>等.

  • 行内元素 (inline): 行内元素通常用于添加文本样式或为文本中的一部分应用样式. 它们可以在文本中插入小的元素, 例如超链接、强调文本等.

    • 行内元素通常在同一行内呈现, 不会独占一行.
    • 它们只占据其内容所需的宽度, 而不是整行的宽度.
    • 行内元素不能包含块级元素, 但可以包含其他行内元素.
    • 常见的行内元素包括 <span>, <a>, <strong>, <em>, <img>, <br>, <imput>等.

示例:


  • <div>标签没有语义, 经常用于创建页面的结构结构.
  • <span>用于内联样式化文本, 给文本的一部分应用样式大概标记
  • 上面这两个标签经常与CSS、JS一起搭配使用, 可以实现更加复杂的页面结构和样式化
  1. <body>
  2.     <div class="nav">
  3.         <a href="#">链接 1</a>
  4.         <a href="#">链接 2</a>
  5.         <a href="#">链接 3</a>
  6.         <a href="#">链接 4</a>
  7.         <a href="#">链接 5</a>
  8.     </div>
  10.     <div class="content">
  11.         <h1>文章标题</h1>
  12.         <p>文章内容</p>
  13.         <p>文章内容</p>
  14.         <p>文章内容</p>
  15.         <p>文章内容</p>
  16.         <p>文章内容</p>
  17.     </div>
  19.     <span>这是第 1 个span标签</span>
  20.     <span>这是第 2 个span标签</span>
  21.     <span>这是第 3 个span标签</span>
  22.     <hr>
  23.     <span>链接点击这里 <a href="#">链接</a></span>
  24.    
  25. </body>
复制代码

表单form标签

HTML 表单 form 是一个重要的元素, 用于网络和提交用户输入的数据. 表单允许用户输入文本、选择选项、上传文件等, 然后将这些数据提交到服务器进行处理.

表单在网页中是不可或缺的, 上面网页中就应用到了表单.
一个基本的 HTML 表单由以下几个主要部分组成:

  • <form>元素: 表单元素是表单的容器, 它界说了数据提交到那里以及使用那种 HTTP 方法来提交数据. 它可以包含输入字段、按钮等元素
  1. <form action="/submit" method="post">
  2.   <!-- 表单元素 -->
  3. </form>
复制代码

  • 输入字段: <input>标签是 HTML 中用于创建表单元素的最常见标签之一. 它允许用户输入文本、选择选项、上传文件等. <input>元素有多个属性, 用于指定不同范例的输入和控制输入的方式. 以下是一些常见的<input>标签的属性和它们的详细说明:
type属性: 指定输入字段的范例, 它可以有以下不同的值:


  • text: 创建文本输入框, 用于用户输入文本.
  • password: 创建密码输入框, 输入内容会被隐藏.
  • radio: 创建单选按钮, 用户只能选择一个选项.
  • checkbox: 创建复选框, 用户可以选择多个选型.
  • number: 创建数字选择框, 允许用户输入数字.
  • email: 创建用于输入电子邮件地址的输入框.
  • file: 创建文件上传字段, 用户可以上传文件.
  • submit: 创建提交按钮, 用于提交表单数据.
  • reset: 创建重置按钮, 用于重置表单数据.
  • button: 创建自界说按钮, 通常与 JavaScript 一起使用.
输入框

  1. <body>
  2.     <form>
  3.         <input type="text" placeholder="请输入内容: "><br>
  4.         <input type="text" value="请输入内容: "><br>
  5.     </form>
  6.    
  7. </body>
复制代码



  • placeholder属性: 表示的是提示信息, 并不是现实的值
  • value属性: 文本框中的默认值, 是真实存在于其中的值.
假如我们想在输入框中前面显示一些提示信息, 比如账号名和密码这些:
  1. <body>
  2.     <form>
  3.               <label>用户名: </label>
  4.         <input type="text" placeholder="请输入内容: "><br>
  5.               <label>密码: </label>
  6.         <input type="text" value="请输入内容: "><br>
  7.     </form>
  8.    
  9. </body>
复制代码

固然也可以用我们前面提到的 <span>标签代替上面的<label>, 能实现一样的效果.
  1. <body>
  2.     <form>
  3.         <label for="username">用户名: </label>
  4.         <input type="text" id="username" placeholder="请输入用户名: "><br><br>
  5.         <label for="pwd">密码: </label>
  6.         <input type="password" id="pwd" placeholder="请输入密码: "><br>
  8.     </form>
  9.    
  10. </body>
复制代码

上面的代码中:


  • label标签中的 for属性 用于将label标签与这里input表单元素关联起来, 当用户点击这个label标签时, 与之关联的表单元素(这里是<input>)会主动得到焦点. 例如点击用户名这个label标签, id为username的<input>框会主动被选中

  • 上面的密码范例有原来的text改为password, 好处是密码不可见

单选按钮

  1. <body>
  2.     <form>
  3.         <label>性别: </label>
  4.         <input type="radio"> 男
  5.         <input type="radio"> 女
  6.     </form>
  7.    
  8. </body>
复制代码

我们发现上面的单选按钮没有实现单选的功能, 必要这样改动:
  1. <body>
  2.     <form>
  3.         <label>性别: </label>
  4.         <input type="radio" name="gender"> 男
  5.         <input type="radio" name="gender"> 女
  6.     </form>
  7.    
  8. </body>
复制代码

多选按钮

  1. <body>
  2.     <form>
  3.         <label>性别: </label>
  4.         <input type="radio" name="gender"> 男
  5.         <input type="radio" name="gender"> 女<br><br>
  7.         <label>爱好: </label>
  8.         <input type="checkbox" name="hobby"> 唱歌
  9.         <input type="checkbox" name="hobby"> 跳舞
  10.         <input type="checkbox" name="hobby"> 跑步<br><br>
  11.     </form>
  12.    
  13. </body>
复制代码

提交按钮

  1. <body>
  2.     <form action="#">
  3.         <label for="username">用户名: </label>
  4.         <input type="text" id="username" placeholder="请输入用户名: "><br><br>
  5.         <label for="pwd">密码: </label>
  6.         <input type="password" id="pwd" placeholder="请输入密码: "><br><br>
  8.         <input type="submit" value="请提交">
  9.     </form>
  10.    
  11. </body>
复制代码

这里必要说的是:


  • <form>标签的action属性用于指定表单数据提交的目的URL, 即用户点击提交按钮后, 表单中的数据将被发送到这个指定的地址.
  1. <input type="text" name="username" placeholder="用户名">
  2. <input type="password" name="password" palceholder="密码">
  3. <input type="radio" name="gender" value="male"> 男
  4. <input type="radio" name="gender" value="female"> 女
  5. <input type="checkbox" name="subscribe" value="yes"> 订阅
  6. <select name="country">
  7.   <option value="zh">中国</option>
  8.   <option value="us">美国</option>
  9.   <!-- 其他选项 -->
  10. </select>
复制代码
表单元素可以包含一些属性, 以指定表单的行为和样式. 常见的表单属性包括:
属性描述action指定表单数据提交到服务器的URLmethod指定用于提交数据的 HTTP 方法, 通常为 get 或 postname为表单命名, 以便在 JavaScript 中引用target指定表单提交后的目的窗口或框架
  1. <h2>用户注册</h2>
  2. <form action="/submit" method="post">
  3.   <label for="username">用户名: </label>
  4.   <input type="text"><br><br>
  5.   
  6.   <label for="password">密码: </label>
  7.   <input type="password"><br><br>
  8.   
  9.   <label for="email">电子邮件地址: </label>
  10.   <input type="text"><br><br>
  11.   
  12.   <label for="age">年龄: </label>
  13.   <input type="number" width="5"><br><br>
  14.   
  15.   <label>性别: </label>
  16.   <input type="radio" name="gender" value="male"> 男
  17.   <input type="radio" name="gender" value="female"> 女<br><br>
  18.   
  19.   <label>最喜欢的编程语言: </label>
  20.   <input type="checkbox" name="languages" value="python"> Python
  21.   <input type="checkbox" name="languages" value="javascript"> JavaScript
  22.   <input type="checkbox" name="languages" value="java"> Java
  23.   <input type="checkbox" name="languages" value="cpp"> C++<br><br>
  24.   
  25.   <input type="submit" value="提交">
  26. </form>
复制代码
           遇见安然遇见你，不负代码不负卿。      
           谢谢老铁的时间，咱们下篇再见～      

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

tsx81428

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表