首页 前端知识 探索前端世界:HTML、CSS和JavaScript入门概述

探索前端世界:HTML、CSS和JavaScript入门概述

2024-08-15 22:08:51 前端知识 前端哥 989 395 我要收藏

      

目录

一.  HTML+css+javascript概述

1.1 HTML(超文本标记语言Hypertext Markup Language):

1.2 CSS(层叠样式表Cascading Style Sheets):

 1.3  JavaScript(唯一能让浏览器支持运行的前端编程语言)

二.HTML+css+javascript简单示例

 2.1 HTML和JS分析

2.2 css分析

三.外部引入css和js文件

四.查看浏览器HTML 代码

五.DOM和事件监听

5.1 DOM定义

5.2 一个使用DOM的例子-订阅按钮

5.3 dom常用方法

六. 前端框架

总结:


一.  HTML+css+javascript概述

        我是学化工的海潮,分享下自己学习前端的知识。

       在现代的网页开发中,HTML、CSS 和 JavaScript 被默认称为前端三大件,。它们共同构成了构建互联网世界的基石,也是是vue,react等热门前端框架的基础,为我们创造出美观、交互性强的网页和应用程序。

1.1 HTML(超文本标记语言Hypertext Markup Language):

     是一种用于描述网页结构的标记语言,它通过使用各种标签和元素来定义网页的内容。通过 HTML,我们可以创建标题、段落、图像、链接等元素,将信息有条理地展现给用户。

     可以总结为create context of website     创建网页内容

1.2 CSS(层叠样式表Cascading Style Sheets):

则是一种用于描述网页样式和布局的语言。它通过选择器和属性来选择网页中的元素,并定义它们的外观和排版。借助 CSS,我们可以改变文本的颜色、调整元素的大小和位置,甚至创建动画效果,使网页更加吸引人。

      可以总结为change the appereace         对特定内容改变外观和布局的选择器表

 1.3  JavaScript(唯一能让浏览器支持运行的前端编程语言)

       是一种用于为网页添加交互和动态功能的脚本语言。它使我们能够对用户的操作做出响应,实现表单验证、网页动态更新以及与后端服务器进行数据交互等功能。JavaScript 的强大之处在于它能够使网页实时、动态地响应用户的操作,提升用户体验。

      可以总结为 make website  interactive  编写代码控制网页行为,负责网页的交互

二.HTML+css+javascript简单示例

      看下面的简单例子

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS REVIEW</title>
     <style>
      body{
        background-color: pink;
        
      }

      .hellotest{
        background-color: white;
        width: 500px;
        text-align: center;
      }
      
     </style>
</head>
     <body>  
      <div class="hellotest">
        <p>hello word</p>
        <button>你好</button>
      </div>    

       <script>
          alert('hello wolld');
       </script>
    </body>
</html>

         HTML文件是css和js代码的入口,上面一个包括了css和js代码的HTML文件。css代码在<style></style>标签里,JavaScript代码在<script></script> 标签里  。当然先要新建一个test.html的文件,输入上面的代码。

 2.1 HTML和JS分析

   对HTML文件的结构进行分析,开始分析代码

      首先是<!DOCTYPE html>,这是标准的文档类型声明。它指示浏览器使用 HTML5 规范解析文档。

      然后是大的框架,在<html></html>里有head 和body两个主要的部分。head部分里面放style标签,就是css代码的部分,也放title和一些外部引入的link;

      body就是这个html的主体,大部分要显示的内容都放在这里,一般内容是由无数个嵌套或并列的div组成,div是容器,本身没有特殊意义,但可以添加其他的各种属性对div修改,div修改后对容器类的内容就也会修改。body和div容器里放的内容有非常多,比如<p>段落、<button>按钮、<a>超链接、<input>文本框、<img>图片等标签。

      body里一般在最下面放<script></script>标签,作为html里JavaScript的入口,在运行html文件后会优先运行js代码。

好了,开始运行代码

      js分析:运行后首先是弹出窗口,hello wolld。这是优先执行了<script></script>里的"alert('hello wolld');'这句代码。并且head里的<title></title>标签也优先运行了,显示了网页显示的名字HTML CSS REVIEW。

      因为alert函数还没有运行完,其他部分暂时未显示

点击确定后,开始显示body里的内容,并附加<style></style>标签里的css样式后运行。显示如下

       对照html代码

 <body>  
      <div class="hellotest">
        <p>hello word</p>
        <button>你好</button>
      </div> 
</body>

       分析这个html网页,可以看到在粉色的body里有一个白色的div容器,在div的正中间有<p>hello word</p>段落和  <button>你好</button>按钮,这就是html通过不同的标签组合和css来对网页内容进行展示。

      常用的html标签

  1. <html>:定义 HTML 文档的根元素。
  2. <head>:定义文档的头部,包含了文档的元信息。
  3. <title>:定义文档的标题,显示在浏览器的标题栏或标签页上。
  4. <body>:定义文档的主体内容。
  5. <h1> 到 <h6>:定义标题,从大到小表示不同级别的标题。
  6. <p>:定义段落。
  7. <a>:定义链接,用于创建文本或图像的超链接。
  8. <img>:定义图像。
  9. <ul>:定义无序列表。
  10. <ol>:定义有序列表。
  11. <li>:定义列表项。
  12. <div>:定义文档中的一个区块,用于组合其他元素。
  13. <span>:定义文档中的一个行内元素,用于对文本进行样式设置。
  14. <table>:定义表格。
  15. <tr>:定义表格中的行。
  16. <td>:定义表格中的单元格。
  17. <form>:定义表单,用于收集用户输入的数据。
  18. <input>:定义表单中的输入字段。
  19. <button>:定义按钮。
  20. <textarea>:定义多行文本输入框。

2.2 css分析

         css是改变html内容的颜色布局样式的表,也有他的语法格式,css语法主要是由选择器、属性和属性值组成,分析上面的css代码

   body{
        background-color: pink;
        
      }

      是把主界面body选择器的background-color背景颜色的属性设成pink粉红。

   .hellotest{
        background-color: white;
        width: 500px;
        text-align: center;
      }

      因为body只有一个,而div、button等标签有无数个,为了区分我们用id选择器或者class选择器

重新命名后进行区分。

      如<div class="hellotest"></div>这句就是为该div创建了一个命名为hellotest的class选择器,

然后在css里为该选择器设置了一些属性,分别是背景颜色  白色、宽度   500px、水平对齐   中间。

css的属性有很多,常用的以下

  1. color:设置文本颜色。
  2. background-color:设置元素的背景颜色。
  3. font-size:设置字体大小。
  4. font-family:设置字体系列。
  5. font-weight:设置字体粗细。
  6. text-align:设置文本的对齐方式。
  7. padding:设置元素内边距。
  8. margin:设置元素外边距。
  9. border:设置元素边框。
  10. width:设置元素的宽度。
  11. height:设置元素的高度。
  12. display:设置元素的显示方式(如块级、内联等)。
  13. position:设置元素的定位方式(如相对定位、绝对定位等)。
  14. float:设置元素的浮动方式。
  15. opacity:设置元素的透明度。
  16. box-shadow:设置元素的阴影效果。
  17. text-decoration:设置文本装饰效果(如下划线、删除线等)。
  18. transition:设置过渡效果。
  19. animation:设置动画效果。
  20. transform:设置元素的变形效果。

 html和css的使用这里只是概述了一下,细节有机会才做分享。

三.外部引入css和js文件

         看下面的示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML + CSS + JavaScript 知识概览</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- 在这里编写你的内容 -->
</body>
</html>

       在实际的生产编写代码过程,因为css代码和js代码一般很长,所以都是分别放在另外上午.css和.js文件中,然后通过类似上面的代码引入。

  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>

       <meta>标签是给浏览器看的,显示文档元信息的标签并提供有关文档的信息,以帮助浏览器和搜索引擎正确地处理和呈现网页。

四.查看浏览器HTML 代码

       在浏览器如谷歌浏览器右上角三点按钮点进去开发者选项,能打开工作区的控制台,查看HTML代码;或者右键点击网页,在。

      如上图最下方的一排按钮,控制台可以让你输入js代码和输出结果,第三个元素能让你查看html的结构,第一个按钮点击后可以让你检查网页中的任一个元素。

     可以试试点击不同的网站分别分析一下网页的结构。

五.DOM和事件监听

        在我们使用网页时,很重要的一个体验就是网页交互,而交互就意味着变化,变化基本都是

由js代码控制的,在js编程语言和html文档之间交互有一个媒介就是dom,有了dom才允许js改变网页。

5.1 DOM定义

DOM 是 Document Object Model(文档对象模型)的缩写。它是一种将 HTML 或 XML 文档表示为树状结构的方式,使开发者可以使用脚本语言(如 JavaScript)来访问和操作文档的内容、结构和样式。

DOM 将文档的每个元素、属性、文本和注释都表示为对象,这些对象可以通过编程语言(如 JavaScript)进行访问和操作。每个对象都有与之相关联的属性和方法,可以用于获取、修改或删除元素的内容和属性,添加或移除元素,以及响应用户事件等。

通过 DOM,开发者可以使用脚本语言与网页进行交互。例如,可以通过 DOM 查询和修改网页中的元素内容、样式和属性,动态地创建、删除或移动元素,以及响应用户的点击、鼠标移动等事件。

DOM 提供了一种平台无关的方式来表示和操作文档结构,因此它在不同的编程环境和语言中都得到了广泛应用。尤其在 Web 开发中,DOM 是非常重要的,因为它允许开发者通过 JavaScript 等脚本语言来操作网页的结构和内容,实现动态交互和动画效果。

5.2 一个使用DOM的例子-订阅按钮

<!DOCTYPE html>
<html>
<head>
<title>DOM Projects2</title>
    <style>
       body{
      font-family: Arial;
     }

     .subscribe-button{
      border: none;
      background-color: black;
      color: white;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 15px;
      padding-right: 15px;
      font-weight: bold;
      border-radius: 50px;
      cursor: pointer;
      margin-bottom:30px;
     }
     .is-subscribed{
      background-color: yellow;
      color: black;
      border: none;

     }

    </style>

    </head>
    <body>
       <p> Subscribe Button</p>

        <button onclick="
        subscribe();
        " class="js-subscribe-button subscribe-button">subscribe</button>

        <script>
      window.document;
      window.console.log(window.document); 
      window.console.log(window);

        function subscribe(){
          const buttonElemnt =document.querySelector('.js-subscribe-button');
        if(buttonElemnt.innerHTML === 'subscribe'){
          buttonElemnt.innerHTML='haveSubcribed';
          buttonElemnt.classList.add('is-subscribed');
        }else{
          buttonElemnt.innerHTML='subscribe';
          buttonElemnt.classList.remove('is-subscribed');
        }

        }
        </script>
    </body>
</html>



     以上代码通过DOM实现了一个简单的订阅按钮,点击按钮时会触发onclick事件,在该事件中有一个subscribe()函数,所以点击回切换按钮的文本和样式类,展示订阅状态的变化。

其中document.querySelector()是dom的一个查询元素的方法       

点击按钮后,改变按钮的文本和样式类

5.3 dom常用方法

    除了document.querySelector(), dom的常用方法还有如下

  1. document.getElementById('id'):根据元素的 id 属性获取对应的元素节点。
  2. document.getElementsByClassName('class'):根据元素的 class 属性获取对应的元素节点列表。
  3. document.getElementsByTagName('tag'):根据元素的标签名获取对应的元素节点列表。
  4. document.querySelector('selector'):根据 CSS 选择器获取第一个匹配的元素节点。
  5. document.querySelectorAll('selector'):根据 CSS 选择器获取所有匹配的元素节点列表。
  6. element.appendChild(child):将一个元素节点作为子节点添加到另一个元素节点的末尾。
  7. element.removeChild(child):从父节点中移除指定的子节点。
  8. element.setAttribute('attribute', 'value'):设置元素的属性值。
  9. element.getAttribute('attribute'):获取元素的属性值。 
  10. element.innerHTML:获取或设置元素的 HTML 内容。
  11. element.textContent:获取或设置元素的文本内容。
  12. element.style.property:获取或设置元素的样式属性。
  13. element.classList.add('class'):为元素添加一个 CSS 类。
  14. element.classList.remove('class'):从元素中移除指定的 CSS 类。
  15. element.addEventListener('event', callback):为元素添加事件监听器。
  16. element.removeEventListener('event', callback):从元素中移除事件监听器。

六. 前端框架

          实际的应用非常复杂,js的dom很难满足复杂的变化要求,所以基于前端三大件发展出了前端框架。

         最常用的前端框架有尤神的vue.js、谷歌的Angular和mata的react.js。

  1. 前端框架是构建 Web 应用程序的工具,它们通常基于原生的 JavaScript 和 HTML。前端框架通过提供封装和抽象,简化了开发者对于复杂的 Web 应用程序的构建和管理。
  2. 前端框架通常提供了一套组件和工具,用于处理视图层的渲染、数据绑定、路由管理、状态管理等功能。这些框架通常采用了自己的语法和规则,开发者需要按照框架的要求进行开发。
  3. 前端框架通常会直接操作原生的 JavaScript 和 HTML,它们使用 JavaScript 作为主要的编程语言,并通过 DOM(文档对象模型)来访问和操作 HTML 文档的结构和内容。
  4. 前端框架可以被看作是对原生 JavaScript 和 HTML 的扩展和增强。它们提供了更高级的抽象和功能,使开发者能够更高效地构建复杂的 Web 应用程序。
  5. 开发者可以选择使用原生的 JavaScript 和 HTML 进行开发,这需要开发者自行处理各种复杂的任务,如手动管理 DOM、事件处理、数据绑定等。原生开发可以提供更大的灵活性,但在处理大型应用程序时可能会更加繁琐。

       比如Vue 的虚拟 DOM 是对实际 DOM 的抽象表示,通过比较虚拟 DOM 的差异并将更新应用到实际 DOM 上,实现了高效的渲染和更新机制。组件化编程解耦减少代码量。

                                          只用dom写和使用前端框架的对比

                                                前端源代码到app代码的打包过程

总结:

     无论是开发简单的静态网页还是复杂的网络应用程序,熟练掌握 HTML、CSS 和 JavaScript 都是至关重要的。它们的组合使用让我们能够构建出精美、功能丰富的网页,将我们的创意和想法传达给全世界。

      在本文中,我们将带您大概了解 HTML、CSS 和 JavaScript 的基础知识和常用技巧。无论您是初学者还是有一定经验的开发人员,本文都将为您提供一个基本的概述,帮助您更好地理解和应用这些关键技术。有更多兴趣可以看我分享的一些其他小项目。

让我们开始探索 HTML、CSS 和 JavaScript 的精彩世界吧!

封面:Ai作画

最后写文章不易,点个关注吧!!😙😙

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15754.html
标签
评论
发布的文章

HTML5学习记录

2024-04-29 12:04:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!