前端网页手册(1)--基础学习

简介: 前端网页手册(1)--基础学习

前端网页手册(1)–基础学习

前言

学习策略

第一步,通读一遍HTML/CSS/JavaScript/PHP教程,了解其主要能够实现什么功能,对其语法有基本的概念;


第二步,再次浏览一遍教程,在这一次的过程中,遇到有意思的功能进行代码的复现,学习HTML或者任何前端知识都需要演练,“所见即所得”!

第三步,随便打开一个网页,F12,查看其网页源码,分析网页的架构;

学习教程

https://www.runoob.com/html/html-tutorial.html


https://www.runoob.com/css/css-syntax.html


https://www.runoob.com/js/js-tutorial.html


https://www.runoob.com/php/php-tutorial.html

第一遍 通读

HTML

  • 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML不是一种编程语言,而是一种标记语言,是一套标记标签。
  • 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。即HTML会忽略原本文字的排版,一切均以标签和属性来定
  • HTML中的元素分为标签和属性。HTML中的标签属性众多,一次性学不过来,刚开始只需要记住基本的,而后查阅即可:附:HTML标签属性大全https://www.runoob.com/tags/html-reference.html
  • CSS 是在HTML4开始使用的,是为了更好的渲染HTML元素而引入的。可以通过以下方式添加到HTML中:内联样式- 在HTML元素中使用"style"属性;内部样式表 -在HTML文档头部 区域使用

53556c4295a3631f9c6ed8f40ccd3f4d.png

详见:https://www.runoob.com/html/html-layouts.html

  • 利用form表单属性可以实现获取用户的输出。定义了提交按钮,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。详见:https://www.runoob.com/html/html-forms.html
  • 利用浏览器框架iframe,可以实现网页的嵌套显示,即一个页面中的部分区域用来显示其他网页的内容,详见:https://www.runoob.com/html/html-iframes.html
  • 利用script脚本,可以实现网页更强的动态性和交互性,常用的脚本语言如JavaScript,它定义了网页的行为,html定义了网页的内容,css定义了网页的布局。学习JavaScript参加:https://www.runoob.com/js/js-tutorial.html
  • XHTML是为了解决HTML的一些不规范编写所衍生出来的,几乎与HTML4同时出现,它强制规定了一些HTML语法的规范性;

CSS

  • CSS 指层叠样式表 (Cascading Style Sheets),它定义如何显示HTML元素;
  • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。
  • CSS可以使HTML的表格、列表、链接等属性拥有更多的表现形式;
  • CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。详见:https://www.runoob.com/css/css-boxmodel.html
  • 可以利用margin属性,实现markdown博客中的文本行首间距,如:
    xxxx
  • CSS中可以使用分组和嵌套选择器实现特定类别元素的统一样式管理,详见:https://www.runoob.com/css/css-grouping-nesting.html

PHP

  • PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。它的所有函数见链接:参考手册。自定义函数和内置函数对大小写不敏感;
  • PHP中有四类作用域:local、global、static、parameter。global是全局作用域,如果想在局部函数中使用全局变量,需要使用global关键词声明,parameter是指函数形参。全局变量global其实是指向超级全局变量$GLOBALS数组,其中下标就是变量名。
  • PHP 的真正威力源自于它的函数,提供了超过 1000 个内建的函数,详见参考手册
  • 魔术常量是PHP提供的预定义变量,有八个典型例子:_LINE_当前行号;_FILE_文件路径及文件名;_DIR_文件所在目录(只有路径);_FUNCTION_返回当前函数名;_CLASS_返回当前类型名;_TRAINT_为了实现“多继承”,详见PHP中的trait;_METHOD_返回类的方法名;_NAMESPACE_返回当前命名空间的名称;
  • 命名空间的声明和使用详见命名空间
  • 有关PHP面向对象部分,参见PHP面向对象,说实话,这个部分和C++极其类似。
  • PHP中没有整数除法,另外,由于PHP没有定义变量类型,所以在使用时需要理解变量之间的转换比如字符串到整型,字符串到布尔值等等;
  • 利用G E T 和POST检索表单中的信息,如获取用户输入;还可以进行表单的验证,详见表单验证,减轻服务器验证的负担而且更快;
  • 有关PHP使用MYSQL的例子详见,PHP_MYSQL;

JavaScript

  • Javascipt也是一个脚本语言,广泛运用于服务器、浏览器。它可以直接写入HTML输出流,实现对事件的反应,改变HTML内容,改变HTML样式(怎么实现?通过获取网页HTML中的属性值,实现对对象的修改);验证输入等等;
  • JavaScript没有打印或输出函数,**只有通过显示的方法来“输出”数据,**如window.alert()弹出警告框;使用documen.write()方法将内容写在HTML文档中;innerHTML写入到HTML元素;console.log()写入到浏览器的控制台。
  • JavaScript中的变量利用var来进行声明和定义,且变量时动态类型;分号;结尾是可选的;
  • 它也是一个面向对象的语言,具有属性和方法,详见对象及属性

(未完待续)

相关文章
|
10月前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
777 128
|
6月前
|
人工智能 自然语言处理 前端开发
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
1232 93
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
|
9月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
451 26
|
11月前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
334 30
|
11月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
371 5
|
11月前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
166 3
|
11月前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
126 5
|
11月前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
227 4
|
11月前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
1094 4