你看我像不像学HTML的人(一)——HTML简介及工具使用

一.HTML简介

1. 网页

1.1 什么是网页?

      网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。

      网页是网站中的“一页”,通常是HTML格式的文件,它要通过浏览器来阅读。

      网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.htm或者.html后缀结尾的文件,因此将其俗称为HTML文件

1.2 什么是HTML?

      HTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。

      HTML不是一种编程语言,而是一种标记语言(markup language)。

      标记语言是一套标记标签(markup tag)。

      所谓超文本,有2层含义:

      (1)它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。

      (2)它还可以从一个文件跳转到另一个文件,与世界各地主机的文件链接(超级链接文本)。

1.3 网页的形成

      网页是由网页元素组成的,这些元素是利用html标签描述出来,然后通过浏览器解析来显示给用户的。

      前端人员开发代码---->浏览器显示代码(解析、渲染)---->生成最后的Web页面

2. 常用的浏览器和浏览器内核

2.1 常用的浏览器

      浏览器是网页显示、运行的平台、常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、safari和Opera等。

       

      平时称为五大浏览器。

      查看浏览器市场份额:http://tongji.baidu.com/data/browser

2.2 浏览器内核

      浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

浏览器内核备注
IETridentIE、猎豹、360极速浏览器、百度浏览器
firefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
chrome/OperaBlinkchrome/opera浏览器内核,Blink其实是Webkit的分支
国产浏览器Webkit/Blink如360、QQ、搜狗等浏览器

3. Web标准(重点)

     Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

3.1 为什么需要web标准

      浏览器不同,它们显示页面或者排版有些许差异。

      遵循Web标准除了可以让不同开发人员写出的页面更标准、更统一外,还有以下优点:

      (1)让Web的发展更广阔。

      (2)内容能被更广泛的设备访问。

      (3)更容易被搜寻引擎搜索。

      (4)降低网站流量费用。

      (5)是网站更易于维护。

      (6)提高页面浏览速度。

3.2 web标准的构成

      主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

标准说明
结构结构用于对网页元素整理和分类,现阶段主要学的是HTML。结构类似身体。
表现表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。表现类似外观装饰。
行为行为是指网页模型的定义及交互的编写,现阶段主要学的是JavaScript。行为类似动作。

      Web标准提出的最佳体验方案:结构、样式、行为分离。相比较而言,结构最重要。

二.HTML标签

1. HTML语法规范

1.1  基本语法概述

   (1)HTML标签是由尖括号包围的关键词,例如<html>

   (2)HTML标签通常是成对出现的,例如<html>和</html>,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。

   (3)有些特殊的标签必须是单个标签(极少情况),例如<br />,我们称为单标签

1.2 标签关系

      双标签关系可以分为两类:包含关系并列关系

      包含关系(父子关系):

<head>
    <title></title>
</head>

      并列关系(兄弟关系):

<head></head>
<body></body>

2. HTML基本结构标签

2.1 第一个HTML网页

      每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是再这些基本标签上书写。

      HTML页面也称为HTML文档。

<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        啦啦啦啦,发大财
    </body>
<html>

 

      HTML文档的后缀名必须是.html或.htm。浏览器的作用是读取HTML文档,并以网页的形式显示出它们。此时,用浏览器打开这个网页,我们就可以预览我们写的第一个HTML文件了。

2.2 基本结构标签总结

标签名定义说明
<html></html>HTML标签页面中最大的标签,我们称之为根标签
<head></head>文档的头部注意在head标签中我们必须要设置的标签是title
<title></title>文档的标题让页面拥有一个属于自己的网页标题。
<body></body>文档的主体元素包含文档的所有内容,页面内容基本都是放到body里面的。

3. 网页开发工具

3.1 常用的开发工具

3.2 VSCode的使用

(1)新建一个html的文件,输入!就可以生成基本的结构标签。新建文件快捷键为(Ctrl+N)

   如图所示,选第一个(或者按下Tab键)。生成结果效果如下:

(2)Ctrl+加号键Ctrl+减号键 可以放大缩小视图。

(3)利用插件再浏览器中预览页面:点击鼠标右键,在弹出出口中点击"Open in Default Browser"。

3.3 VSCode插件安装

      安装完成需要重启软件。插件名不需要记住全称,输入几个字母即可以搜索。

(1)chinese 中文简体语言包。

      

      安装完成要重启:

      

(2)open in browser  右击选择浏览器打开html文件。

      

      安装后效果如下:

      

(3)Auto Rename Tag  自动重命名配对的HTML/XML标签。

      

(4)CSS Peek  追踪至样式。

      

(5)JS-CSS-HTML Formatter  每次保存,都会自动格式化js css和html代码。

      

3.4 VSCode插件卸载

      

3.5 VSCode生成骨架标签新增代码

(1) 文档类型声明标签

       <!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

      这句代码的意思是:当前页面采取的是HTML5的版本来显示网页。

      注意:

      1) <!DOCTYPE>声明位于文档的最前面的位置,处于<html>标签之前。

      2) <!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签。

(2)lang语言种类

      用来定义当前文档显示的语言。

      1)en定义语言为英语

      2)zh-CN定义语言为中文

      简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页。

      其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文。

      这个属性对于浏览器和搜索引擎(百度、谷歌等)还是有作用的。(对浏览器是提示、警示的作用,浏览器可能会提供翻译的功能。)

(3)charset字符集

      字符集(Character set)是多个字符的集合,以便计算机能够识别和存储各种文字。

      在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8" />

      charset常用的值有:GB2312(简体中文)、BIG5(繁体中文)、GBK(国标--包含了简体中文和繁体中文)和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。

      注意:上面语法是必须要写的代码,否则可能引起乱码的情况,统一使用"UTF-8"编码,尽量统一写成标准的"UTF-8",不要写成"utf8"或"UTF8".

      乱码结果如下:

      

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值