初识HTML

yuayu121

已于 2022-07-18 18:58:14 修改

阅读量704

点赞数 3

文章标签： html5

于 2022-07-15 16:03:39 首次发布

本文链接：https://blog.csdn.net/qq_57126801/article/details/125805118

版权

初识HTML

1.什么是html?

（此为老师上课文档，非本人总结，供大家观看）

HTML是HyperText Markup Language(超文本标记语言)的缩写（超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素），html不是一种编程语言，而是一种标记语言，用于告诉浏览器如何去构造网页。
HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。可以使用.html与.htm作为HTML文件的后缀名（扩展名）
web开发人员可以通过编辑器（记事本，Sublime（推荐），VSCode（推荐），Idea）组合html元素构造出网页的html文件，浏览器按顺序阅读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是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

2.1.开发环境搭建

可用于编写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 - 可以在默认浏览器或应用程序中打开当前文件。

2.2.Hello HTML

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

<!-- 文档头信息 -->
<!-- html5标准网页声明 -->
<!-- 不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。 -->
<!-- h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边。
    如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明
-->
<!DOCTYPE html>
<!-- 属性lang是单词language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 -->
<!-- 
	html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中
-->
<!-- 只有两个子标签 head:浏览器设置 body：可视区展示 -->
<html lang="en">
<!-- head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的 -->
<head>
  <!--
				meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
        meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/ 
  -->
  <!-- 
        字符编码，浏览器会根据字符编码进行解析
        常见的字符编码有：gb2312、gbk、unicode、utf-8。
  -->
  <meta charset="UTF-8">
    <!-- X-UA-Compatible是针对IE8新加的一个设置。也就是说，你写了一个能在IE7下运行的页面，害怕在IE8上无法兼容，然后就可以在头文件上写 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 
        viewport 设备的屏幕
        width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，				 那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
        initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
     -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 浏览器选项卡上的名字 -->
  <title>Hello HTML</title>
</head>
<!--
	body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
-->
<body>
  <!-- 在body里的内容都是显示在浏览器的视图区的 -->
  <!-- 
    	在这个结构中，可以来编写HTML的注释注释中的内容，不会在页面中显示，但是可以在源码中查看我们可以通			过编写注释来对代码进行描述，从而帮助其他的开发人员工作,一定要养成良好的编写注释的习惯，但是注释一			 定要简单明了		
    -->、
</body>
</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>
	&l

最低0.47元/天解锁文章

yuayu121

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
初识HTML

HTML是HyperTextMarkupLanguage(超文本标记语言)的缩写（超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素），html不是一种编程语言，而是一种，用于告诉浏览器如何去构造网页。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如文字如何处理，画面如何安排，图片如何显示等）。可以使用.html与.htm作为HTML文件的后缀名（扩展名）........
复制链接

扫一扫