Web开发 学习笔记

目录

◆基础定义

●Web前端開發主要技術

●IDE简介

●HTTP协议

●什么是网站?

●​什么是网页?

●WEB标准

●什么是HTML?

◆网页元素(标签)详解

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

 ●页面显示标签/非元标签

 ▼p标签、h标签

 ▼div标签

●常见转义字符(字符实体):

▼!--注释标签

▼列表html——list

●web开发规范

●多媒体标签

▼img图片标签

 ▼超级链接(超链接)

 ▼audio音频标签、video视频标签

 ▼大纲标签

▼form表单标签

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

▼label标签

  ▼select下拉菜单

  ▼textarea纯文本框

  ▼table表格

◆CSS层叠式样式表

 ●CSS简介

  ●CSS3基本语法

●CSS3选择器

●什么是网站?

●什么是网站?

●什么是网站?

●什么是网站?

●什么是网站?

●什么是网站?

●什么是网站?

●什么是网站?



◆基础定义


●Web前端開發主要技術


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


●IDE简介


IDEIntegrated 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:关键词标签。

  • 26
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值