HTML的初步学习

123preview

HTML

HTML 描述网页的骨架, 标签化的语言.

HTML 的执行是浏览器的工作,浏览器会解析 html 的内容,根据里面的代码,往页面上放东西,浏览器的工作归根结底,还是以汇编的形式在CPU上执行.

浏览器对于html 语法格式的检查没有很严格,即使你写的代码有一些不合规范之处,浏览器也会尽可能的去执行.
可以直接使用记事本编写代码,并且直接在浏览器中运行代码.

开发,是在程序猿的电脑上完成的写代码的过程.
运行,则是在用户的电脑上完成具体的程序跑起来的过程.
一次开发,N次运行.

浏览器

当前市面上的主流浏览器:

IE浏览器(Internet explorer),早期windows 自带的,现在已经变成edge浏览器.

谷歌(c home),当前最牛逼的浏览器

火狐浏览器(firefox),也是一个很知名的浏览器,好用不火.

Sa fari浏览器,苹果系统上自带的浏览器

Opera浏览器,相对小众的浏览器

浏览器的主要功能就是解析运行网页(给HTML,CSS, JS提供稳定的运行环境)

一般用户电脑上都会装浏览器,写的前端代码是不愁运行环境.

浏览器是用C++语言写的,性能要求极高的场景,都是C++为主.浏览器内核也是如此.

开发 环境

前端开发,使用的开发环境,最主流的是这么两个:

1.JB系列
IDEA如果是专业版(教育版),本身就是支持前端的,或者也可以使用JB提供的WebStorm
JB => JetBra in s (公司名), 最大的问题它是收费的!!!

2.VScode[轻量级开发工具]
免费方案, 使用体验要略逊色于WebStorm

3.除了上面两个之外,还有很多其他的选项,比如d re a mweaver , sublime text, vim….

使用 VSCode 编写代码

1.下载 安装

VSCode网上有山寨版(要收费!!!),千万别搞错了 ~~ 注意看,官网的主域名是否是正确的!!!
官网链接: https://code.visual studio.com/Download 这个是科学的主域名,域名和产品名字是匹配的.
注: 推荐在VSCode安装好之后,将其设置为中文.

2.使用 VSCode

vscode 和 idea 相比,更简单.idea 用的时候,需要先创建一个项目,创建过程中要配置很多东西.
vscode 则没有”项目“这个概念,都是使用目录来组织的.就可以选择一个你当前想要代码的目录,打开这个目录.(打开目录就相当于以这个目录作为项目目录)

1.打开目录

2.创建代码文件

3.编辑代码
以编写一个最简单的hello world为例.

<html&gt;
    <head></head>
    <body>
        hello world
    </body>
</html>

注: 写完代码之后,要记得保存(ctrl + s 保存),当然你也可以对vscode进行设置,来让vscode进行自动保存!

4.运行代码

该HTML代码特点

html 代码是通过标签来组织的.
形如<html> </html>用尖括号组织的,成对出现的这个东西就是”标签“(tag),也可以叫做“元素”(element)
一个标签通常是成对出现的.
<html>开始标签,</html>结束标签,这俩之间,是标签的内容.
注: 少数标签是可以只有一个开始标签的,单标签.
标签是可以嵌套的.
一个标签的内容可以是其他一个或者多个标签.此时,这些标签构成了一个”树形结构“
可以在开始标签中,给标签赋予属性(Attribute) .
属性相当于是键值对,可以有一个或者多个.

HTML 基本的语法结构,就是以上的这几个简单的规则.下一步要介绍的,就是当前HTML中都支持哪些标签,每个标签的作用,每个标签有哪些关键属性…

xml 和 html 的区别

xml也是标签化的格式.有哪些标签,标签叫啥名字,有啥作用, 有啥属性,都是程序猿(你)根据需求场景,自定义的.
html也是标签化的格式.这里有哪些标签,标签叫什么名字,有什么作用,有什么属性,都是有一批大佬们规定好的.浏览器按照这份规定来解析实现的.(html 不支持自定义标签)

1.html
这是一个html 文件最顶层标签,树根节点.

2.head
存放了这个页面的属性(元数据,meta data).

3.body
存放了这个页面包含哪些内容.

输入“!”(英文的!),按下 tab, 此时就能生成一个基本的页面.只需要编辑body的内容即可.
这个功能叫做 emmet 快捷键,主流开发工具都有,WebStorm也有.

<!DOCTYPE html> 声明了一下文件的类型,是 html 文件.

<html lang="en"> lang => langugage , en => engli s h 描述了网页中的语言是英语.
告诉浏览器,咱们当前的网页内容是使用英语的,然后有些浏览器打开这个网页的时候,会根据系统语言(中文),和网页语言(英语),提示用户,是否要把网页内容翻译成中文.

<meta charset="UTF-8"> , <meta name="viewport" content="width=device-width, initial-scale=1.0"> 此处的 meta 标签,是单标签,只有开始标签,没有结束标签.

<title>Document</title> 网页标题.

<body> </body> 中间是进行编辑的文本.