HTML第一天

深夜食堂℃

已于 2022-09-04 15:26:49 修改

阅读量137

点赞数

文章标签： html 学习

于 2022-08-30 23:19:41 首次发布

本文链接：https://blog.csdn.net/qq_61998176/article/details/126614811

版权

本文介绍了HTML的基础知识，包括HTML的定义、网页加载过程、常见浏览器及其内核、Web标准的重要性。详细讲解了HTML的基本语法，如标签、注释、文档声明与字符编码，并列举了一些常用的HTML标签，如标题、段落、换行、文本格式化、图像和超链接等。还提到了锚点链接的使用，帮助读者快速掌握HTML网页制作的基本技能。

摘要由CSDN通过智能技术生成

HTML与网页

关于HTML

HTML文件
1. 网页是网站中的单独页面，而网页文件的格式通常是HTML；
2. 网页是构成网站的基本元素，它通常是由图片、链接、文字、声音、视频等元素组成；
3. 网页通常格式以 .htm 或者 .html 后缀结尾的文件，通常也叫HTML文件
HTML 是超文本标记语言（Hyper Text Markup Language）

HTML是描述网页的一种语言，不是编程语言，而是一种标记语言，用于创建文本与编写网页图片等

超文本：
1. 呈现内容上超越了传统文本能够表示的范围，有图片、声音、多媒体等内容；
2. 可以从一个文件跳转到另一个文件；

网页加载过程

前端人员开发代码 -> 浏览器显示代码（解析、渲染）-> 生成Web页面

浏览器

为什么一个网站在不同浏览器中显示内容相同

因为HTML语言定义了相同的格式，即便是在不同的浏览器下也能解析为相同的内容

常见浏览器

	firefox	Edge	Safari	Chrome	QQ	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（万维网联盟）是国际最著名的标准化组织。

为什么要定这样的标准
1. 浏览器不同，它们显示页面的标准必须统一，要求开发人员编写代码必须统一；
2. 除此之外，让Web的发展前景更广、内容能被广泛的设备访问、更容易被搜索引擎搜索、降低网站流量费用、网站更易于维护、提高页面浏览速度。
网页标准的组成

主要包括结构、表现、行为

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

Web标准的最佳方案就是结构、表现和行为相互分离（各自在对应文件中编写代码）

概述

基本语法概述
1. HTML标签是由尖括号包围的关键词，例如；
2. HTML标签通常是成对出现的，例如和 ,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签；
3. 也有部分特殊标签必须是单个标签，例如<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

最低0.47元/天解锁文章

深夜食堂℃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML第一天

HTML与网页的介绍，HTML标签的介绍与使用...
复制链接

扫一扫