Web开发学习笔记

最新推荐文章于 2024-07-01 18:15:02 发布

m0_59952100

最新推荐文章于 2024-07-01 18:15:02 发布

阅读量884

点赞数 26

分类专栏：编程、脚本文章标签：前端 chrome

本文链接：https://blog.csdn.net/m0_59952100/article/details/129027304

版权

本文是Web前端开发的学习笔记，涵盖了HTML、CSS、JavaScript的基础知识，包括网页元素、CSS样式表、HTTP协议等内容。介绍了IDE的使用，以及网页、网站的定义和标准，详细讲解了各种网页元素标签，如p、h、div、img、超级链接、表单等，并探讨了Web标准和开发规范。

摘要由CSDN通过智能技术生成

▼input文本框(输入框)&input单选框、复选框&input密码框&input按钮xn&input日历、时间等、颜色框、邮件框、file框、范围条、搜索框、电话框(移动端)、网址框

◆基础定义

●Web前端開發主要技術

HTML/HTML5：搭建网页结构的语言
CSS/CSS3：美化网页的语言
JavaScript：增加网页的互动性
Vue.js/React.js：前端流行框架

●IDE简介

IDE（Integrated Development Environment，集成开发环境）是包含了代码编辑、智能感应和纠错、格式美化、版本管理等功能集于一身的“高级代码编辑器”

而每一个开发人员，都要有自己的最熟悉的ide，它是开发路上的最佳拍档

IDE名称	公司	是否收费	功能强大度
Sublime	个人开发者	否	适中
Atom	Github	否	适中
Visual Studio Code	微软	否	强大
HBuilder	DCloud	否	非常强大
WebStorm	Jetbrains	是	非常强大

vscode插件：

●HTTP协议

HTTP协议（Hypertext Transfer Protocol，超文本传输协议)，它是一种用于通过网络传输数据的协议，或是一种表示信息的规范顺序和语法。HTTP 协议是互联网数据传输的常见协议。

一次HTTP事务是由“HTTP请求”和“HTTP响应”构成。
网址前的http：//就表示用HTTP协议请求页面。

●什么是网站？

网站(Website)是指在因特网上根据一定的规则使用HTML等工具，制作的用于展示特定内容的相关网页的集合。
人们可通过网站进行访问、查找文件，还可以发布自己想要公开的资讯，或者获取自己需要的资讯、也可通过远程文件传输(FTP)方式上传、下载网站文件。

●什么是网页？

通常所说的网页指<body>的内容。

网页是一个包含HTML标签的纯文本文件，是构成网站的基本元素。包含HTML标签的纯文本文件经过浏览器的解析、渲染就变成了我们所看到的网页界面（<body>来展现）。

我们所能看到的网站就是由网页组成的，如果只有域名和虚拟主机而没有制作任何网页的话，我们仍旧无法访问到任何网站。

●WEB标准

由于不同的浏览器解析出来的效果可能不一致，例如经典的IE浏览器，因此开发人员需要为多个不同的浏览器准备多个不同的版本。

而Web标准的诞生就是为了让浏览器开发商和开发人员们写出的页面更标准、更统一，也可以更容易了解彼此之间的代码逻辑，使得网站更易于维护。
站。

W3C（the world wide web consortium，万维网联合会）组织，它是万维网的主要国际标准组织。
该联盟成立于1994年，负责制定web标准，主要是HTML和CSS 。Js则是由另一个组织ECMA制定标准

Web标准主要是以下三个方面的标准：

●什么是HTML？

HTML 全称是 Hypertext Markup Language，即超文本标记语言。

所谓超文本，有 2 层含义:
可以使用HTML加入图片、声音、动画、多媒体等内容(超越了文本限制 )。
还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本 )。

而标记是指HTML属于一种用于定义内容结构的标记语言，并不是编程语言。

HTML文档也叫做 web 页面，包含了HTML 标签及文本内容

◆网页元素(标签)详解

●文档类型标签、根标签、简单元标签

<!DOCTYPE html> ：文档声明DTD（document type definition）文档声明类型，如果不写DTD会引发浏览器的兼容问题，感叹号表示警示，表达这是html文件。（<!-->表示注释，会被浏览器忽略）

<html lang=“en”>：根标签，一个页面中有且只有一个根标签。网页中的所有内容都应该写在根标签的内部。lang是html标签的属性。 lang属性表示网页的语言，zh表示中文。

<head>：head 里面的我们称为元信息类标签,不会直接在网页或者说显示器（<body>内，我们看到的，如chrome书签灰线以下的内容）上显示，是一些配置内容。诸如title、meta、style、link、base、script这些,他们用来描述文档的一些基本信息。可定义文档的标题。 <title> 标签是 <head> 标签中唯一要求包含的东西。

那么元标签有什么用呢？
元标签主要包括标题标签、关键词标题、描述标签等等，合理运用元标签会使你的网页在搜索引擎中的表现更为突出。
元标签作为网页元素在实际网站应用当中真正用到的也没有几个。自从seo行业兴起后，元标签中包括description、keywords等才又被重新加以利用。以下是一些常见元标签分类。
abstract：类似于关键词描述标签，用于描述网页。
author：网页作者标签，用于维护原创版权。
cache-control：控制网页缓存标签。
classification：想想看keywords元标签是如何被垃圾网站利用的，这个也一样，我从没见过这么随意的元标签。
Content-Language：定义页面所使用的语言代码，用于给蜘蛛指定语言编码。
Content-Type：制定描述页面类型的字符串。
Copyright：跟author元标签类似，你应该把版权信息加在网站的主体上。
Description：网页描述标签。
Designer：跟author和copyright一样，保护原创性。
Distribution：如果一个页面只是用来内部发行，那么应该使用robots.txt文件或robots元标签禁止被索引，所以此标签完全没必要使用了。
Expires：如果你有在一段时间后就不应该被抓取或索引的内容，它也许有点用。
Generator：只有当页面由软件自动生成才会用到，所以我们没有理由手工使用它。
GoogleBot：谷歌蜘蛛。
Keywords：关键词标签。