HTML与网页
关于HTML
-
HTML文件
- 网页是网站中的单独页面,而网页文件的格式通常是HTML;
- 网页是构成网站的基本元素,它通常是由图片、链接、文字、声音、视频等元素组成;
- 网页通常格式以 .htm 或者 .html 后缀结尾的文件,通常也叫HTML文件
-
HTML 是超文本标记语言(Hyper Text Markup Language)
HTML是描述网页的一种语言,不是编程语言,而是一种标记语言,用于创建文本与编写网页图片等
超文本:
- 呈现内容上超越了传统文本能够表示的范围,有图片、声音、多媒体等内容;
- 可以从一个文件跳转到另一个文件;
-
网页加载过程
前端人员开发代码 -> 浏览器显示代码(解析、渲染)-> 生成Web页面
浏览器
-
为什么一个网站在不同浏览器中显示内容相同
因为HTML语言定义了相同的格式,即便是在不同的浏览器下也能解析为相同的内容
常见浏览器
firefox | Edge | Safari | Chrome | IE | opera | UC | ||
---|---|---|---|---|---|---|---|---|
桌面端 | 7.86% | 10.07% | 9.61% | 66.64% | — | 0.97% | 2.43% | — |
移动端 | — | — | 14.78% | 55.88% | 8.41% | — | — | 17.74% |
浏览器内核
浏览器 | 内核 | 备注 |
---|---|---|
IE | Trident | IE、猎豹安全、360浏览器内核 |
firefox | Gecko | 火狐浏览器内核 |
Safari | Webkit | 苹果浏览器内核 |
chrome/Opera | Blink | chrome/opera浏览器内核,Blink其实是Webkit的分支 |
**注意:**国内浏览器,一般都会采用Webkit/Blink内核,比如UC、QQ、搜狗等
web标准的指定
Web标准是由W3C组织和其他标准化组织指定的一系列标准的集合,W3C(万维网联盟)是国际最著名的标准化组织。
-
为什么要定这样的标准
-
浏览器不同,它们显示页面的标准必须统一,要求开发人员编写代码必须统一;
-
除此之外,让Web的发展前景更广、内容能被广泛的设备访问、更容易被搜索引擎搜索、降低网站流量费用、网站更易于维护、提高页面浏览速度。
-
-
网页标准的组成
主要包括结构、表现、行为
标准 | 说明 |
---|---|
结构 | 结构用于对网页元素进行整理和分类,现阶段主要学习的是HTML |
表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式,主要指CSS |
行为 | 行为是指网页模型的定义以及交互的编写,现阶段主要学习为JavaScript |
Web标准的最佳方案就是 结构、表现和行为相互分离(各自在对应文件中编写代码)
概述
-
基本语法概述
-
HTML标签是由尖括号包围的关键词,例如;
-
HTML标签通常是成对出现的,例如 和 ,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签;
-
也有部分特殊标签必须是单个标签,例如<br />,我们称为单标签。
-
-
标签关系
包含关系、并列关系
-
基本结构
<html>
<head>
<title>Hello页面</title>
</head>
<body>
专业Hello 语句
</body>
</html>
每一个网页都有结构标签(骨架标签),页面内容也是在这些基本标签上书写的
标签名 | 定义 | 说明 |
---|---|---|
html标签 | HTML标签 | 页面中最大标签,我们称为根标签 |
head标签 | 文档的头部 | 在head标签中必须设置的标签为title |
title标签 | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
body标签 | 文档的主体 | 元素包含文档的所有内容,页面内容基本都是放到body中的 |
- 注释
如果需要在HTML代码中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签
HTML中以” "结尾
<!-- 注释语句 -->
快捷键 Ctrl + /
注释标签里面的内容,是提供给程序员查看的,不显示到页面中。
VSCode
Documentation for Visual Studio Code
- vscode插件安装
插件名称 | 插件说明 |
---|---|
chinese(simple) | 将环境修改为中文简体 |
Live Server | 右键选择浏览器打开 |
JS-CSS-HTML Formatter | 每次保存,都会自动格式化js css 和 html代码 |
Auto Rename Tag | 自动重命名配对的HTML/XML标签 |
CSS Peek | 追踪至样式 |
文档声明与字符编码
- 文档声明
<! DOCTYPE> 文档类型声明,告诉浏览器该用哪种HTML版本来显示网页
<! DOCTYPE html>
**注意:**该代码含义为当前采用HTML5版本来显示网页,该代码必须放置在文档最前面,即之前,且它不是一个标签,仅仅是一个声明
<html lang="en">
lang用来定义当前文档显示语言的种类,en为英语,如果是中文则为zh-CN
<meta charset="utf-8">
charset是字符集设置,规定HTML文档该用那种字符进行编码
charset常用的值有 GB2312、BIG5、GBK、UTF-8
HTML常用标签
- 标题标签 <h1> ~ <h6> (双标签)
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
**特点:**标题标签独占一行;使标题与正文有明显的区分,一级标题级别最高。
- 段落和换行标签
将网页中的文字分段显示出来,HTML中
标签用于定义段落,将网页分成若干段
<p>段落标签</p>
特点:
-
文本可以随着浏览器的窗口大小,自动换行;段落彼此间有空隙;
-
段落中的文字一般会从左往右依次排序,直到右端窗口位置换行。如果需要换行,则应使用换行标签<br />
//换行标签
<br />
//打印一行横线
<hr />
特点:
单标签、段落有间隙,换行就是新的一行。
- 文本格式化标签
网页中文字的粗体、斜体或下划线等效果,就要用HTML格式化标签,使文字以特殊的方式显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge