HTML简介

最新推荐文章于 2022-04-25 15:41:47 发布

爱健身的高同学

最新推荐文章于 2022-04-25 15:41:47 发布

阅读量104

点赞数 3

文章标签：前端 html5 html

本文链接：https://blog.csdn.net/m0_59719912/article/details/121393813

版权

1.1什么是HTML？

它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名（扩展名） HTML的历史版本发展 ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。

③HTML 3.2：1997年1月14日，W3C推荐标准。

④HTML 4.0：1997年12月18日，W3C推荐标准。

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

⑥HTML 5：2014年10月，HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

HTML特点

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。

3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

1.2开发环境搭建

可用于编写HTML的编译工具有很多

记事本：特点：无代码提示、无代码高亮显示、用户界面不友好，不建议使用（高手当我没说）；

Sublime（推荐）：特点：运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件；

VSCode（推荐）：特点：丰富的插件支持、可进行git管理；

Idea：特点：集成开发工具、类似DW,node,npm...运行速度较慢；

Html是在浏览器上解析执行的，每种浏览器对相同的Html代码解析可能产生不同的结果，所以我们需要安装多种主流的浏览器进行兼容性测试；

主流浏览器：Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。

VSCode插件推荐

HTML CSS Support - Html提示Css自动补全

HTML Preview - 提供预览HTML文档的功能

HTML Snippets - 完整的HTML标签，包括HTML5片段

Live Server - 启动一个开发本地服务器，为静态和动态页面提供实时重载功能

open in browser - 可以在默认浏览器或应用程序中打开当前文件。

1.3Hello HTML

打开VSCode，新建后缀名为.html的文件(不是文件夹)，输入"!"或"html:5"生成基本的html5结构

<!DOCTYPE html>
<!--版本信息
因为HTML5不是基于SGML，所以在版本的位置，不需要引入DTD文件
-->
<html lang="en">
<!-- 
    在浏览器检索时lang会规定网站的类型为英文或者中文
-->
<head>
    <!--文档头信息
在文档头一般描述网页中的一些信息，以及文件的引用-->
    <meta charset="UTF-8">
    <!--字符编码，告诉浏览器用什么编码打开-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--宽度等于设备宽度，且不允许缩放-->
    <title>Hello HTML</title>
    <!--网页标签的标题-->
    <meta name="keywords" content="HTML,ASP,PHP,SQL">
    <!--关键词:增加网页被搜索的概率-->
    <meta name="author" content="写代码的小高">
    <!--作者信息-->
    <meta name="description" content="这是一个很厉害的网站">
    <!--网页描述-->
    <meta http-equiv="expires" content="Wed,20 Jun 2007 22:33:00 GMT">
    <!--设置页面过期时间，到期需刷新-->
    <meta http-equiv="Pragma" content="no-cache">
    <!--页面是否进行缓存-->
    <meta http-equiv="Refresh" content="5">
    <!--定时刷新-->
    <meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">
    <!--设置Cookie的保存值和有效时间-->
    <link rel="stylesheet" href="style/index.css" type="text/css" />
    <!--引入外部样式-->
    <script src="js/index.js" type="text/javascript"></script>
    <!--引入js文件-->
</head>
<body>
  <!-- 在body里的内容都是显示在浏览器的视图区的,给用户看的 -->
  <!-- 
    	在这个结构中，可以来编写HTML的注释注释中的内容，不会在页面中显示，但是可以在源码中查看我们可以通			过编写注释来对代码进行描述，从而帮助其他的开发人员工作,一定要养成良好的编写注释的习惯，但是注释一			 定要简单明了		
    -->
</body>
</html>

HTML文档（ HTML document） DOCTYPE 在Html非常年轻的时候（1991、2年左右），doctype是用来作为一组规则的链接，HTML页面必须遵循这些规则才能被认为是好的HTML，这些规则会用来检测网页是不是存在问题。然而，这些年没有人真正的关心doctype，他们只是一个历史产物必须包含在页面中。

严格的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

宽松的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

H5文档类型（ HTML document）说明该文档为Html5文档

<!DOCTYPE html>

HTML的根元素，用来包含HTML文档的所有元素，所有的html标签应该位于html标签内部

<html>

表示html的头部，head内部标签主要用于设置或者导入外部文件，一般不直接显示在浏览器视口中，常用的子标签为 meta 、title、link、script，分别表示元信息设定、文档标题、css、js

编码：

utf-8 万国码

GBK 国标码

Big5 繁体字（环球新闻导报社）

解码：浏览器

<head>

用来声明当前文档的编码方式为utf-8

<meta charset="utf-8">

用来声明当前文档的标题，标题将会出现在浏览器的选项卡中

<title>

表示html的体部，其内部主要放网页内容，其内容会显示到浏览器视口中，所有想要显示在浏览器中的元素都被包含在该元素中。

<body>

html4文档结构：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<style type="text/css"></style>
	<script type="text/javascript"></script>
	<title>Document</title>
</head>
<body>
</body>
</html>

爱健身的高同学

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML简介

1.1什么是HTML？它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记
复制链接

扫一扫