认识html

wangxinwang996

已于 2023-04-14 20:37:40 修改

阅读量69

点赞数

文章标签： html xhtml 前端

于 2023-04-14 20:28:12 首次发布

本文链接：https://blog.csdn.net/wangxinwang996/article/details/130161455

版权

1、html简介

1.1 什么是html?

HTML概念：超本文标记语言（HyperText Markup Language）

超文本：浏览器就可以解释的，比如http（超文本传输协议）。官方解释：“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言：由一个一个的标记组成的语言。比如段落是<p>…</p>这个标记表示，图像是由<img/>这个标记表示。超链接是…标记表示。学习标记语言的关键是明白网页的元素（布局、结构、内容等）应该由什么标记来描述是最恰当的。

我们要让浏览器按照人的思维来显示网页，就必须掌握浏览器解释网页的html语言，明白标签的作用，比如你想产生段落，就必须用<p>段落内容</p>的方式才能实现。

HTML文档最常用的扩展名是.html或.htm

HTML的历史：

超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：

HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2——1997年1月14日，W3C推荐标准

HTML 4.0——1997年12月18日，W3C推荐标准

HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准

XHTML1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。

XHTML 1.1，于2001年5月31日发布，W3C推荐标准。

XHTML 2.0，W3C工作草案。

HTML4.01 是常见的版本。

XHTML 5，从XHTML 1.x的更新版，基于HTML 5草案。

HTML 5——2014年10月28日，W3C推荐标准

1.2 常用的核心软件安装编辑器的基础使用及认识html

1.2.1 HBuilder X编辑器的基础使用★★★★

hbuilderx官网

HBuilderX-高效极客技巧

1.2.2 Visual Studio Code编辑器的基础使用★★★★★

visual studio code官网

Visual Studio Code - Code Editing. Redefined

1.2.3 Sublime Text3、Notepad++、webstorm★★★

sublime text官网

Sublime Text - Text Editing, Done Right

notepad++官网

Notepad++ - Download Notepad++ for Windows 10,11,7,8,Vista (64/32 bit)

webstorm官网

WebStorm：JetBrains 出品的最智能 JavaScript IDE

1.3 常用浏览器的基础使用

1.3.1 谷歌浏览器★★★★★

扩展迷

Chrome浏览器插件下载,chrome谷歌商店插件crx应用推荐与下载-扩展迷

WEB前端助手(FeHelper) 的安装和使用

1.3.2 火狐浏览器★★★★

Firebug是Firefox下的一款开发类插件

firebug下载地址

Firebug

1.3.3 IE浏览器★★★

ie浏览器中文网

IE浏览器 -IE浏览器大全 - Iefans

ietester官网

IETester - Download

1.4认识HTML4和HTML5的文档结构

HTML4文档结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浏览器窗口处显示的标题</title>
</head>
<body>文档主体，显示给用户看的内容。</body>
</html>

html文档的基本结构，html文档分为两个部分，head部分和body部分，html/head/body标签是唯一的，一个html文档只能有一对head和body标签。

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

head部分是对文档的具体声明，比如文档编码，文档的标题，关键字，描述，外部CSS样式和js文档的链接，都可以放在头部，主要是给浏览器和搜索引擎看的。用户除了标题之外，是看不到声明的其它内容的。比如：

<head>
<!--文档使用utf-8国际编码，如果没有编码，中文字符会产生乱码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--网站的关键字，不要堆砌，关键字之间用逗号隔开。-->
<meta name="keywords" content="网站前端,html,css,js,jquery,bootstrap,CMS,seo" />
<!--网站的描述-->
<meta name="description" content="记录上课的教学内容和案例，并对教学进行反思和总结。" />
<!--网站的作者-->
<meta name="author" content="H5前端开发" />
<!--
http-equiv='refresh'：文档自动刷新。
content='跳转时间间隔; url=页面地址'：定义文档自动刷新的跳转时间间隔，和跳转地址。例如：content='3; url=http://www.163.com'-->
<meta http-equiv='refresh' content='跳转时间间隔; url=页面地址'>
<!--链接外部css样式-->
<link rel="stylesheet" href="css/public.css" />
<!--链接外部js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!--标题非常关键，是整个网页的核心关键词，也是SEO优化的重点-->
<title>网页标题</title>
</head>

body部分就是放用户可以看到的网页主体内容。比如：

<body>
<header>
   <div class="logo">博客</div>
   <nav>
       <ul>
           <li><a href="#">HTML5教程</a></li>
           <li><a href="#">CSS3教程</a></li>
           <li><a href="#">DIV+CSS教程</a></li>
           <li><a href="#">javascript教程</a></li>
           <li><a href="#">jQuery教程</a></li>
       </ul>
   </nav>
</header>
<section class="container">
   <div class="content">主体内容</div>
   <aside>侧边栏</aside>
</section>
<footer>底部版权</footer>
</body>

HTML5文档结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
</body>
</html>

第一行依然有声明，只是没有指定html版本，因为html5文档是完全兼容低版本html语言的。charset指定编码。

1.5 html和html5有什么区别

（面试题）

区别：1、HTML的文档类型声明长而复杂，而HTML5的文档声明相对来说更为简便，有利于程序员快速阅读和开发；结构语义区别，html：没有体现结构语义化的标签，如：<div id="nav"></div> html5：添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>...

2、HTML5支持SVG、画布和其他虚拟矢量图形，而HTML不支持；3、HTML本身不支持音频和视频，而HTML5支持等等。