目录
前言
提示:这里可以添加本文要记录的大概内容:
本文是前端初学者第一次学习的预习内容,新手小白,第一次发博,希望能够继续坚持,越做越好。
提示:以下是本篇文章正文内容,下面案例可供参考
一、前端
1. 前端是什么
是面向用户(浏览者)的互联网技术统称。主要包括Web界面的结构、Web界面的外观视觉表现以及Web界面的交互实现(简言之:用户可见界面)。
2.前端学习路线
HTML5 -->CSS3 -->H5C3 -->…
二、HTML简介
1.网页
1.1什么是网页
网站 是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。
网页 是网站中的一”页“,通常是HTML格式的文件,它要通过浏览器来阅读。
网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.htm 或 .html后缀结尾的文件,因此将其俗称为HTML文件。
1.2什么是HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language),它是用来描述网页的一种语言。(我对超文本标记语言的理解就是不是普通的纯文本语言,还有图像、链接、声音等内容,还能从一个文件跳转到另一个文件,一世界各地主机文件链接)
1.3网页的形成
网页是由网页元素组成的,这些元素是利用html标签描述出来,然后通过浏览器解析来显示给用户的。
2.常用浏览器
浏览器是网页显示、运行的平台。
2.1五大浏览器
IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera
2.2浏览器内核
3.Web标准
· web 标准 是由W3C组织和其他标准化组织定制的一系列标准的集合。 W3C(万维网联盟)是国际最著名的标准化组织。
· 浏览器不同,它们显示页面或者排版就会有些许差异,所以要制定web标准。
web标准的构成
结构:结构用于对网页元素进行整理和分类,主要指的是HTML
表现:表现用于设置网页元素的板式、颜色、大小等外观样式,主要指的是CSS
行为:行为是指网页模型的定义及交互的编写,主要指的是JavaScript
如果把web比喻成一只鸟的话,结构就是没有羽毛的鸟的身体,表现就是鸟绚丽的羽毛,行为就是鸟飞行、筑巢等动作。
Web 标准提出的最佳体验方案:结构、样式、行为相分离。
4.HTML标签导读
4.1语法规范
标签名和属性名称必须小写
属性值必须用引号括起来
HTML标签必须关闭
双标签:<标签名> </标签名> 成对书写
单标签:<标签名>或<标签名/>
标签必须正确嵌套
嵌套关系: 如,html标签中嵌套着head和body
并列关系: 如,head标签同级的body标签
嵌套关系的标签要缩进:一般缩进2个空格或4个空格
必须添加文档类型声明 ,声明必须位于文档的最前面
4.2 HTML基本结构标签
<html>//最大标签,根标签
<head>//文档头部
<title>宋琳的文档<title>//网页标题
<head>
<body>禁止摆烂,认真学习!!<body>//文档的主题
<html>
5.开发工具 VScode
下载
下载地址:点击跳转至VScode下载页面
安装(就内样跟着一步一步安装就好了)
使用
1.打开VScode
2.点击新建 文件(ctrl+N)
3.保存文件(ctrl+S) 保存为html类型的文件
4.调整页面大小,ctrl加+ 或者ctrl加-
5.输入!并点击 或者按Tab键 会自动快速生成模板,如下图:
6.利用插件在浏览器中预览页面:单击鼠标右键,点击Open In Default Browser.
VScode插件的安装及应用
插件及其作用(除了第三个其他插件都很好,停网课上老师说第三个插件不太好用…)
安装方法如下图
点击左下角,在输入栏输入插件名称,点击Install,下载完成后重启程序即可,注意要重启。
得到中文版如下
其他插件均按照此方法安装
DOCTYPE,long和字符集的作用
1.<DOCTYPE html>// 文档类型声明标签,表示当前页面采取的是HTML5版本来显示网页
2.<html lang = "en">//表示当前网页为英文网页 <html lang = "zh-CN">//表示当前网页为中文网页
3.<meta charset = "UTF-8">//规定文档用那种字符编码,UTF-8又称万国码,几乎包含了世界上所有能用到的字符。
这些都是VScode会自动生成的
总结
这篇博客是学习了哔哩哔哩上的pink老师的前端入门课程后,整理而得的,
可能有些疏漏,有些错误,我会及时改正并且坚持分享的。
感谢观看!!!